/* ====================================================================
   EXA SCENE — the "one workspace, five modules" animation section.

   Every rule is scoped under .exa-scene. The source was a standalone
   full-viewport demo that styled :root, html and body and claimed .btn —
   which is this theme's primary call to action. Unscoped, it would have
   restyled the page around it, so the custom properties hang off the
   section class rather than :root and the scene's own controls are
   .xs-btn.

   Neutrals below are style.css's tokens, so the section sits in the page.
   The three TIER colours are load-bearing: the legend names them, and
   they are the only way to tell an answer a model wrote from one the
   arithmetic produced. Do not collapse them into --accent.

   --xs-drafted IS the site's amber, and that is deliberate rather than
   lazy: the tier meaning "a person decides this" gets the brand colour,
   because the person deciding is the thing being sold. The other two are
   the scene's own and appear nowhere else on the site.

   The matching palette literal is the `C` object in js/exa-scene.js —
   canvas cannot read CSS custom properties. Change one, change both.
   And a third place: the tier KEYS (derived/drafted/blocked) appear in
   data/home.yaml's legend, which the partial renders as var(--xs-<tier>),
   so a rename here is a rename in three files.
   ==================================================================== */

.exa-scene {
  /* neutrals — from style.css section 1 */
  --xs-ink:       var(--bg-primary, #0a0a0f);
  --xs-chalk:     var(--text-primary, #e2e8f0);
  --xs-graphite:  var(--text-tertiary, #64748b);
  --xs-line:      var(--border, #2d2d44);

  /* tier colours — semantic */
  --xs-amber:     var(--accent, #ffc107);
  --xs-derived:   #6FA598;   /* arithmetic over records already held */
  --xs-drafted:   var(--xs-amber);  /* a model wrote it; a person approves it */
  --xs-blocked:   #C9553B;   /* the system refuses — used sparingly on purpose */

  position: relative;
  width: 100%;
  height: min(78vh, 760px);
  min-height: 460px;
  background: var(--xs-ink);
  color: var(--xs-chalk);
  font-family: var(--font-sans);
  overflow: hidden;
  border-block: 1px solid var(--xs-line);
  -webkit-font-smoothing: antialiased;
}

/* The canvas fills the section. Everything 3D happens here. */
.exa-scene .xs-stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.exa-scene .xs-mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xs-graphite);
}
.exa-scene .xs-dot { opacity: 0.45; padding-inline: 0.5em; }

/* --------------------------------------------------------------------
   DOM OVERLAY
   Title, legend, readout and caption are real DOM layered above the
   canvas with pointer-events:none, so they never eat clicks. Two
   reasons: the text stays selectable and screen-reader visible, and it
   does not tilt with the scene — which gives the composition a stable
   frame to move inside.
   -------------------------------------------------------------------- */
.exa-scene .xs-hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.exa-scene .xs-hud > * { position: absolute; }

.exa-scene .xs-topbar {
  top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(16px, 3.5vw, 40px);
  border-bottom: 1px solid var(--xs-line);
  background: linear-gradient(to bottom, rgba(10,10,15,0.85), transparent);
}
/* h2, not h1 — the page already has one and the section is not the
   document's subject. */
.exa-scene .xs-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--xs-chalk);
}
.exa-scene .xs-title em { font-style: normal; color: var(--xs-amber); }

.exa-scene .xs-legend {
  left: clamp(16px, 3.5vw, 40px);
  bottom: clamp(16px, 3vw, 34px);
  display: grid; gap: 0.55rem;
}
.exa-scene .xs-legend b {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--xs-graphite); font-weight: 400;
}
.exa-scene .xs-key {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--xs-chalk);
}
.exa-scene .xs-key i { width: 16px; height: 2px; flex: none; }

.exa-scene .xs-readout {
  right: clamp(16px, 3.5vw, 40px);
  bottom: clamp(16px, 3vw, 34px);
  text-align: right; display: grid; gap: 0.5rem;
}
.exa-scene .xs-readout dl {
  margin: 0; display: flex; justify-content: flex-end;
  gap: 0.8rem; align-items: baseline;
}
.exa-scene .xs-readout dt {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--xs-graphite);
}
.exa-scene .xs-readout dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--xs-chalk); font-variant-numeric: tabular-nums;
  min-width: 7ch; text-align: right;
}

.exa-scene .xs-caption {
  left: 50%; transform: translateX(-50%);
  bottom: clamp(74px, 11vh, 104px);
  width: min(560px, 86vw); text-align: center;
}
.exa-scene .xs-said {
  font-family: var(--font-mono);
  font-size: clamp(0.76rem, 1.5vw, 0.92rem);
  letter-spacing: 0.02em; color: var(--xs-chalk);
  min-height: 2.6em; line-height: 1.5; margin: 0;
}
.exa-scene .xs-said::after {
  content: "\258C"; color: var(--xs-amber);
  animation: xs-caret 0.9s steps(1) infinite;
}
@keyframes xs-caret { 50% { opacity: 0; } }

.exa-scene .xs-controls {
  right: clamp(16px, 3.5vw, 40px);
  top: clamp(64px, 9vh, 86px);
  display: grid; gap: 0.5rem; justify-items: end;
  pointer-events: auto;
}
/* .xs-btn, not .btn — the theme's .btn is the primary call to action. */
.exa-scene .xs-btn {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: 1px solid var(--border-light, #3d3d54);
  color: var(--xs-chalk);
  padding: 0.5rem 0.9rem; cursor: pointer;
  transition: var(--transition-fast, 150ms ease-in-out);
}
.exa-scene .xs-btn:hover,
.exa-scene .xs-btn[aria-pressed="true"] {
  background: var(--xs-amber); border-color: var(--xs-amber); color: var(--xs-ink);
}
.exa-scene :focus-visible { outline: 1px solid var(--xs-amber); outline-offset: 3px; }

/* --------------------------------------------------------------------
   NARROW VIEWPORTS

   The scene was designed as a full viewport, where the four HUD corners
   never meet. Inside a ~660px-tall section on a phone they do: the
   caption ran straight through the readout, and the topbar wrapped onto
   two lines over the title.

   So on a phone the HUD is reduced to what still reads at that size —
   the title, the caption and the controls. The legend and readout are
   hidden rather than shrunk, because a 2px colour key and a tabular
   readout are illegible long before they are small enough to fit.

   They are hidden with display:none and NOT removed from the markup:
   exa-scene.js writes the "awaiting you" and "blocked" counts into them
   every frame, and would throw on a null element.
   -------------------------------------------------------------------- */
@media (max-width: 720px) {
  .exa-scene {
    /* A phone should not give most of its screen to one decorative band. */
    height: min(70vh, 520px);
    min-height: 380px;
  }
  .exa-scene .xs-legend,
  .exa-scene .xs-readout { display: none; }

  /* The strap is the topbar's second line on a phone; the title says it. */
  .exa-scene .xs-topbar .xs-mono { display: none; }
  .exa-scene .xs-topbar { padding: 0.85rem 1rem; }
  .exa-scene .xs-title { font-size: 1rem; }

  .exa-scene .xs-controls {
    top: auto;
    bottom: clamp(10px, 2.5vw, 16px);
    right: clamp(10px, 2.5vw, 16px);
    grid-auto-flow: column;
    gap: 0.4rem;
  }
  .exa-scene .xs-btn { font-size: 0.55rem; padding: 0.4rem 0.6rem; letter-spacing: 0.1em; }

  /* With the readout gone the caption can have the full width. */
  .exa-scene .xs-caption { width: min(94vw, 560px); bottom: clamp(58px, 9vh, 76px); }
}

/* Deliberately NO prefers-reduced-motion rule here. The scene animates for
   every visitor by default (see the MOTION note in js/exa-scene.js), and a
   stylesheet that quietly stopped just the caret would leave the page in two
   minds: the 3D scene tilting while its cursor sits still. One behaviour,
   changed in one place. The Motion control stops the caret with the rest of
   it, via .exa-scene[data-still] below. */
.exa-scene[data-still] .xs-said::after { animation: none; }