/* Strat-OS interface showcase: the product window under the home hero.

   The window is laid out at a fixed design size, 1180 by 720, and every
   dimension inside it is a multiple of one unit, --u. That unit is one
   container-query pixel of the showcase's width, so the whole window scales as
   one piece: proportions never change, and nothing is a transform, so text and
   strokes stay crisp at every size. Below 590px the unit stops shrinking and
   the window is cropped symmetrically instead, which drops the edges of the
   menus and toolbar before the part in the middle turns to fuzz.

   The window has a light and a dark face and follows the site theme, the
   way the placeholder it replaced did. Both faces are declared as custom
   properties on .capp, so the rules below never mention a colour directly.
   The navy project bar and the orange accents are the same in both. */

.capp-showcase {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  container-type: inline-size;
  /* Bottom edge dissolves into the page, as the section already did. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
}

@media (min-width: 1024px) {
  .capp-showcase { width: 94%; }
}

/* A navy ambient behind the window: in the light theme a cool, soft shadow,
   in the dark theme a faint lift off the near-black page. */
.capp-showcase::before {
  content: "";
  position: absolute;
  inset: -6% -3% -2%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 50% at 50% 42%, rgba(5, 6, 64, 0.16), transparent 72%);
  filter: blur(28px);
}

.dark .capp-showcase::before {
  background: radial-gradient(55% 50% at 50% 42%, rgba(5, 6, 64, 0.55), transparent 72%);
}

/* Present only once JS has claimed the figure; without JS it just sits there. */
[data-capp-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-capp-anim][data-capp-in] {
  opacity: 1;
  transform: none;
}

.capp {
  --u: 1px;
  --capp-paper: #fcfbf8;
  --capp-body: #f0f0f0;
  --capp-chrome: #f4f3ef;
  --capp-navy: #050640;
  --capp-navy-ink: #ffffff;
  --capp-btn: #efefef;
  --capp-btn-hover: #e2e2e2;
  --capp-disabled: #b4b4b4;
  --capp-disabled-ink: #7f7f7f;
  --capp-ink: #171717;
  --capp-ink-muted: #737373;
  --capp-raised: #fdfdfd;
  --capp-line: #222222;
  --capp-view: #a9a9a9;
  --capp-accent: #f57123;
  --capp-accent-ink: #ffffff;
  --capp-focus: #050640;
  --capp-raised-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  height: calc(720 * var(--u));
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-foreground) 13%, transparent);
  border-radius: 12px;
  background: var(--capp-body);
  color: var(--capp-ink);
  font-family: var(--font-sans);
  line-height: 1.2;
  box-shadow:
    0 1px 2px rgba(20, 28, 40, 0.06),
    0 12px 30px -8px rgba(20, 28, 40, 0.18),
    0 40px 80px -30px rgba(20, 28, 40, 0.28);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.dark .capp {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 12px 30px -8px rgba(0, 0, 0, 0.5),
    0 40px 80px -30px rgba(0, 0, 0, 0.65);
}

.capp:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(20, 28, 40, 0.06),
    0 16px 36px -8px rgba(20, 28, 40, 0.22),
    0 48px 90px -30px rgba(20, 28, 40, 0.32);
}

.dark .capp:hover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 16px 36px -8px rgba(0, 0, 0, 0.55),
    0 48px 90px -30px rgba(0, 0, 0, 0.7);
}

.dark .capp {
  --capp-paper: #26292e;
  --capp-body: #1c1e22;
  --capp-chrome: #212428;
  --capp-raised: #2b2f34;
  --capp-btn: #363a40;
  --capp-btn-hover: #43484f;
  --capp-disabled: #2e3136;
  --capp-disabled-ink: #6e737a;
  --capp-ink: #fafafa;
  --capp-ink-muted: #a1a1aa;
  --capp-line: #8a8f96;
  --capp-view: #3f434a;
  --capp-focus: #f57123;
  --capp-raised-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4);
}

@supports (width: 1cqw) {
  .capp { --u: max(calc(100cqw / 1180), 0.5px); }
}

.capp__window {
  position: relative;
  left: 50%;
  width: calc(1180 * var(--u));
  height: calc(720 * var(--u));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
}

.capp svg {
  display: block;
  flex: none;
}

/* ---- title bar ---- */

.capp__title {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(12 * var(--u));
  background: var(--capp-paper);
  font-size: calc(12 * var(--u));
}

.capp__app-icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.capp__title-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.capp__win {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding-right: calc(4 * var(--u));
}

.capp__win svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ---- project bar ---- */

.capp__project {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(32 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: var(--capp-navy);
  color: var(--capp-navy-ink);
}

.capp__project-side {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}

.capp__project-side--end { justify-content: flex-end; }

.capp__project-side svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.capp__project-side .capp__chev { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-4 * var(--u)); }

.capp__project-name {
  font-size: calc(14 * var(--u));
  font-weight: 500;
}

/* ---- menu row ---- */

.capp__menu {
  display: flex;
  align-items: stretch;
  gap: calc(28 * var(--u));
  height: calc(36 * var(--u));
  margin: 0;
  padding: 0 calc(14 * var(--u));
  list-style: none;
  background: var(--capp-chrome);
  color: var(--capp-ink);
  font-size: calc(14 * var(--u));
}

.capp__menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 calc(2 * var(--u));
}

.capp__menu-item--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(2 * var(--u));
  background: var(--capp-accent);
}

/* ---- toolbar ---- */

.capp__toolbar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(48 * var(--u));
  margin: calc(6 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--capp-raised);
  box-shadow: var(--capp-raised-shadow);
}

.capp__toolbar > .capp__chev {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  color: var(--capp-ink-muted);
  margin-right: calc(2 * var(--u));
}

.capp__group {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.capp__sep {
  width: 1px;
  height: calc(26 * var(--u));
  background: var(--capp-line);
}

.capp__btn,
.capp__vbtn,
.capp__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--capp-btn);
  color: var(--capp-ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.capp__btn {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(6 * var(--u));
}

.capp__btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

.capp__btn:hover,
.capp__vbtn:hover,
.capp__pill:hover { background: var(--capp-btn-hover); }

.capp__btn:disabled,
.capp__vbtn:disabled {
  background: var(--capp-disabled);
  color: var(--capp-disabled-ink);
  cursor: default;
}

.capp__btn:focus-visible,
.capp__vbtn:focus-visible,
.capp__pill:focus-visible {
  outline: 2px solid var(--capp-focus);
  outline-offset: 1px;
}

/* ---- viewport ---- */

.capp__stage {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 0 0 calc(12 * var(--u)) calc(12 * var(--u));
}

.capp__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--capp-view);
}

.capp__part {
  position: absolute;
  top: 3%;
  left: 7%;
  width: 86%;
  height: 94%;
  object-fit: contain;
}

.capp__part-label {
  position: absolute;
  top: calc(9 * var(--u));
  left: calc(10 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-size: calc(11 * var(--u));
  color: var(--capp-ink);
}

.capp__part-label svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  color: var(--capp-ink-muted);
}

.capp__cube {
  position: absolute;
  top: calc(22 * var(--u));
  right: calc(20 * var(--u));
  width: calc(92 * var(--u));
  height: calc(100 * var(--u));
}

.capp__hud {
  position: absolute;
  bottom: calc(10 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}

.capp__hud--start { left: calc(12 * var(--u)); }
.capp__hud--end { right: calc(12 * var(--u)); }

.capp__sep--hud { height: calc(24 * var(--u)); margin: 0 calc(4 * var(--u)); }

.capp__vbtn {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 500;
}

.capp__vbtn svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.capp__vbtn--on { background: var(--capp-accent); color: var(--capp-accent-ink); }
.capp__vbtn--on:hover { background: #e2661d; }

.capp__vbtn--axis { color: var(--capp-ink); }

.capp__pill {
  gap: calc(5 * var(--u));
  height: calc(20 * var(--u));
  padding: 0 calc(6 * var(--u)) 0 calc(9 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--capp-raised);
  font-size: calc(10 * var(--u));
  font-weight: 600;
}

.capp__pill-dot {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--capp-navy);
}

/* ---- 2D / 3D strip ---- */

.capp__modes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));
  width: calc(34 * var(--u));
  padding-top: calc(12 * var(--u));
}

.capp__mode {
  position: relative;
  writing-mode: vertical-rl;
  font-size: calc(12 * var(--u));
  color: var(--capp-ink);
}

.capp__mode--on::before {
  content: "";
  position: absolute;
  top: calc(-12 * var(--u));
  bottom: calc(-12 * var(--u));
  left: calc(-9 * var(--u));
  width: calc(3 * var(--u));
  background: var(--capp-accent);
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
  [data-capp-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .capp { transition: none; }
  .capp:hover { transform: none; }
}