/*
 * Demonstration tabs.
 *
 * Reads the design system's tokens rather than restating any colour: the
 * module inherits --bg / --ink / --tone from whatever [data-band] it sits in,
 * so the same markup works on a navy band, on white, and in dark mode.
 */

.demos {
  background: var(--bg);
  color: var(--ink);
  padding-block: var(--section-y);
  position: relative;
}

/* ---------------------------------------------------------------- intro -- */

.demos__intro {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.demos__eyebrow {
  font: 600 12px/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tone);
  margin: 0 0 14px;
}

.demos__title {
  font: 800 clamp(28px, 3.6vw, 46px)/1.1 var(--font-sans);
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

.demos__lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ----------------------------------------------------------------- tabs -- */

.demos__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.demos__tab {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.demos__tab:hover { border-color: var(--tone); }

.demos__tab:focus-visible {
  outline: 2px solid var(--tone-bright);
  outline-offset: 2px;
}

/*
 * The selected tab is marked three ways — fill, border and the rule beneath —
 * so it does not rely on colour alone to say which panel is showing.
 */
.demos__tab[aria-selected="true"] {
  background: var(--surface-2);
  border-color: var(--tone);
  box-shadow: inset 0 -3px 0 0 var(--tone);
}

.demos__tab-num {
  font: 500 12px/1.5 var(--font-mono);
  color: var(--tone);
  padding-top: 2px;
  flex: none;
}

.demos__tab-text { display: block; min-width: 0; }

.demos__tab-name {
  display: block;
  font: 700 16px/1.3 var(--font-sans);
  letter-spacing: -.01em;
}

.demos__tab-place {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------------- stage -- */

.demos__stage {
  position: relative;
  /*
   * width is pinned to the column on purpose. aspect-ratio and min-height
   * together will otherwise resolve by widening the box — a 360px floor at
   * 4/3 computes a 480px width — which pushes the whole page into a
   * horizontal scroll on a phone.
   */
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  max-height: min(78vh, 780px);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

.demos__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #e7e8e4; /* the scenes' own ground, so the frame does not flash */
}

/* -------------------------------------------------------------- poster -- */

.demos__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(45, 212, 191, .16), transparent 62%),
    var(--navy-900);
  color: #EDF3FF;
}

.demos__poster[hidden] { display: none; }

.demos__poster-lede {
  margin: 0;
  max-width: 30ch;
  font: 700 clamp(20px, 2.4vw, 30px)/1.25 var(--font-sans);
  letter-spacing: -.02em;
}

.demos__poster-note {
  margin: 0;
  font-size: 13px;
  color: #93A4C1;
}

.demos__launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--teal-400);
  color: var(--navy-950);
  font: 700 15px/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.demos__launch:hover { background: var(--teal-300); }
.demos__launch:active { transform: translateY(1px); }

.demos__launch:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.demos__launch-icon { display: inline-flex; }

/* ------------------------------------------------------------- loading -- */

.demos__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--navy-900);
  color: #BCCAE2;
  font: 500 14px/1 var(--font-sans);
}

.demos__loading[hidden] { display: none; }

.demos__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: var(--teal-400);
  border-radius: 50%;
  animation: demos-spin .8s linear infinite;
}

@keyframes demos-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- below -- */

.demos__below {
  margin-top: 22px;
}

.demos__copy p {
  margin: 0;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.demos__flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  counter-reset: demos-step;
}

.demos__step {
  counter-increment: demos-step;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.demos__step::before {
  content: counter(demos-step, decimal-leading-zero);
  font: 500 11px/1 var(--font-mono);
  color: var(--tone);
}

/*
 * Scenario controls, above the stage.
 *
 * They sit here rather than under the scene so they are in reach before
 * someone has scrolled past a tall 3D frame — and so Restart is next to the
 * thing it restarts. Right-aligned, and they stay hidden until a scene has
 * actually mounted, so the row is empty on arrival rather than offering
 * controls that would do nothing.
 */
.demos__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  min-height: 34px;          /* holds the space so the stage does not jump */
}

.demos__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.demos__tool {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 13px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.demos__tool:hover { border-color: var(--tone); color: var(--ink); }
.demos__tool[hidden] { display: none; }

.demos__tool:focus-visible {
  outline: 2px solid var(--tone-bright);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ narrower -- */

@media (max-width: 860px) {
  .demos__stage {
    aspect-ratio: 4 / 3;
    min-height: 360px;
  }

  .demos__toolbar { justify-content: flex-start; }
  .demos__tools { justify-content: flex-start; }
}

/*
 * Full screen: the stage becomes the viewport, so the frame must fill it
 * rather than keep its 16:9 letterbox.
 */
.demos__stage:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
}

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

/*
 * Mandatory. The tab affordances stop moving and the spinner stops turning.
 * The launch step matters more than the styling here: nothing 3D starts
 * without a deliberate click, so a reader who has asked for less motion is
 * never handed an animating scene they did not ask for.
 */
@media (prefers-reduced-motion: reduce) {
  .demos__tab,
  .demos__launch,
  .demos__tool {
    transition: none;
  }

  .demos__launch:active { transform: none; }

  .demos__spinner {
    animation: none;
    border-top-color: var(--teal-400);
  }
}

/* --------------------------------------------------- cross-link -- */

/*
 * Link between submissions. Sits below the panels, deliberately quiet: it is a
 * way back to the earlier set, not a call to action competing with the tabs.
 */
.demos__crosslink {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.demos__crosslink a {
  font: 600 15px/1.4 var(--font-sans);
  color: var(--tone-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

.demos__crosslink a:hover { border-bottom-color: currentColor; }

.demos__crosslink a:focus-visible {
  outline: 2px solid var(--tone-bright);
  outline-offset: 3px;
}

.demos__crosslink-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

@media (prefers-reduced-motion: reduce) {
  .demos__crosslink a { transition: none; }
}