/* ============================================================================
   Homepage demo — inline looping live preview + in-page lightbox.
   The demo no longer navigates to a separate page: it loops in place inside
   .demo__frame and expands into a modal lightbox on click (Karbon-style).
   Self-contained; layered on top of styles.css (.demo__frame stays 16:9).
   ========================================================================== */

/* .demo__frame is now a <button> — reset native chrome, keep the framed look.
   v6.12.7 — rounded card edges (OpenAI / Notion / Linear chat-module
   convention).  overflow:hidden clips the scaled iframe at the rounded
   corners so the demo content reads as one continuous card. */
.demo__frame {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  background: #08090B;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
}

/* Live looping preview (scaled 1920×1080 demo) sits above the still poster
   and below the play affordance. Non-interactive — clicks open the lightbox. */
/* Always rendered (inset:0) so IntersectionObserver can measure it; transparent
   until the iframe paints, so the still poster shows through during load. */
.demo__live { position: absolute; inset: 0; overflow: hidden; background: transparent; z-index: 1; }
.demo__live .demo-live__if {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px; border: 0;
  transform-origin: top left; pointer-events: none;
}

/* Play affordance over the live preview, with a legibility scrim so it reads
   over the light product UI. */
.demo__frame .demo__play { z-index: 2; }
/* Scrim sits between the live preview and the play badge.  Always
   visible (~60% by default) so the live demo's JAXONAI HUB wordmark
   never ghosts through the play icon; hover deepens to 100% for
   stronger affordance. */
.demo__frame .demo__play::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(56% 56% at 50% 50%, rgba(8,9,11,.78) 0%, rgba(8,9,11,.35) 55%, rgba(8,9,11,0) 100%),
    linear-gradient(to top, rgba(8,9,11,.55), rgba(8,9,11,.10) 50%, rgba(8,9,11,.30) 100%);
  opacity: 0.65; transition: opacity 300ms var(--ease, ease);
}
.demo__frame:hover .demo__play::before { opacity: 1; }
.demo__frame .demo__play-ic {
  width: clamp(54px, 6vw, 68px); height: clamp(54px, 6vw, 68px);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(8,9,11,.58); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; padding-left: 4px;
}
.demo__frame .demo__cap {
  background: rgba(8,9,11,.58); padding: 7px 13px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
}
.demo__nojs { color: var(--muted); text-decoration: underline; }

/* ---------- Lightbox ---------- */
.demo-lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: clamp(16px, 4vw, 48px);
  opacity: 0; transition: opacity 320ms var(--ease, ease);
}
.demo-lightbox[hidden] { display: none; }
.demo-lightbox.is-open { opacity: 1; }
.demo-lightbox__backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(4,5,7,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Cinematic starfield: painted over the dark backdrop, behind the player, so
   the demo reads as a console floating in a dark theatre. */
.demo-lightbox__stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Fill the theatre: as large as the viewport allows. The vh term keeps the
   16:9 screen + caption inside the height; width/vw cap the rest. */
.demo-lightbox__panel { position: relative; z-index: 2; width: min(1560px, 95vw, calc(84vh * 16 / 9)); }
.demo-lightbox__screen {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  /* Match the demo's dark theme so no white halo/sliver frames the player —
     it reads as a console floating in the starfield, lifted only by a soft
     shadow. No border: a scaled iframe never fills its box to the sub-pixel,
     and the iframe's own backdrop would flicker white at that seam.
     v6.12.7 — rounded corners (matches .demo__frame so the "card →
     fullscreen" transition keeps the same silhouette). */
  background: #1f2228; border: 0;
  border-radius: 16px;
  box-shadow: 0 50px 140px rgba(0,0,0,.65);
  transform: scale(.975); transition: transform 360ms var(--ease, ease);
}
.demo-lightbox.is-open .demo-lightbox__screen { transform: scale(1); }
.demo-lightbox__screen .demo-live__if {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px; border: 0; transform-origin: top left;
  background: #1f2228;   /* iframe's own backdrop — kills the white edge flicker */
}
.demo-lightbox__cap {
  margin: 14px 0 0; text-align: center;
  font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.demo-lightbox__close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(12,14,18,.85); color: rgba(255,255,255,.82);
  font-size: 18px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 200ms var(--ease, ease), transform 200ms var(--ease, ease), color 200ms var(--ease, ease);
}
.demo-lightbox__close:hover { background: #16191f; color: #fff; transform: scale(1.08); }
.demo-lightbox__sound {
  position: absolute; top: -14px; right: 34px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(12,14,18,.85); color: rgba(255,255,255,.82);
  display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 200ms var(--ease, ease), transform 200ms var(--ease, ease), color 200ms var(--ease, ease);
}
.demo-lightbox__sound:hover { background: #16191f; color: #fff; transform: scale(1.08); }
.demo-lightbox__sound svg { width: 14px; height: 14px; }
.demo-lightbox__sound.is-muted { color: rgba(255,255,255,.36); }
.demo-lightbox__sound.is-muted::after {
  content: ""; position: absolute; width: 20px; height: 1.3px;
  background: currentColor; transform: rotate(-45deg);
}
@media (max-width: 680px) {
  .demo-lightbox__close { top: -42px; right: 0; }
  .demo-lightbox__sound { top: -42px; right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-lightbox, .demo-lightbox__screen { transition: none; }
}

/* ---------- Transport bar (prev / play-pause / next / restart + scene meta)
   Centred dark pill at the bottom of the screen panel — mirrors the SPA's
   own #ctrl so it reads as one continuous control language. Buttons
   postMessage 'seek' / 'toggle' / 'restart' to the iframe (SPA already
   accepts these commands). */
.demo-lightbox__transport {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 5px;
  background: rgba(12,14,18,.72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity: .72; transition: opacity 220ms var(--ease, ease);
  color: #fff; pointer-events: auto;
  font-family: var(--font-mono, monospace);
  max-width: calc(100% - 32px);
}
.demo-lightbox__transport:hover,
.demo-lightbox__transport:focus-within { opacity: 1; }
.dlt-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 0;
  background: transparent; color: rgba(255,255,255,.82);
  display: grid; place-items: center; cursor: pointer;
  transition: background 200ms var(--ease, ease), color 200ms var(--ease, ease), transform 200ms var(--ease, ease);
  padding: 0; flex: 0 0 auto;
}
.dlt-btn:hover { background: rgba(255,255,255,.12); color: #fff; transform: scale(1.08); }
.dlt-btn:active { transform: scale(.94); }
.dlt-btn svg { width: 11px; height: 11px; }
.dlt-btn.dlt-play { width: 30px; height: 30px; background: rgba(255,255,255,.92); color: #0c0e12; }
.dlt-btn.dlt-play:hover { background: #fff; color: #000; }
.dlt-btn.dlt-play svg { width: 12px; height: 12px; }
.dlt-sep {
  width: 1px; height: 16px; flex: 0 0 1px;
  background: rgba(255,255,255,.14); margin: 0 4px 0 6px;
}
.dlt-meta {
  display: inline-flex; gap: 8px; align-items: baseline;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding-right: 4px;
}
.dlt-idx { color: rgba(255,255,255,.48); font-weight: 500; }
.dlt-ti  { color: rgba(255,255,255,.88); font-weight: 500; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) {
  .demo-lightbox__transport { padding: 4px 6px 4px 4px; gap: 3px; bottom: 8px; }
  .dlt-btn { width: 24px; height: 24px; }
  .dlt-btn.dlt-play { width: 28px; height: 28px; }
  .dlt-sep, .dlt-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-lightbox__transport, .dlt-btn { transition: none; }
}

/* ============================================================
   LIGHT-MODE OVERRIDES — v6.12 experimental.
   The demo iframe content is ALWAYS dark (x.ai-brutalist re-skin
   of the live demo); we do not try to recolour it.  What we DO
   theme:
     · The inline preview's framed background — stays dark so the
       iframe paints onto a matching surface during load (no white
       flicker around a dark frame).
     · The framed-still hairline rows — in light mode they're still
       readable against the dark frame because they use the inherited
       --line token (themed for light) which on a dark frame appears
       as faint white lines.  We bump them via opacity to keep them
       legible.
     · The lightbox MODAL backdrop — switches from pitch-black to
       a warm rice-paper cream.  This is what gives the "walking
       into a film theatre" feeling on a white site: the page
       dims to paper, the demo console appears like a print
       inside a portfolio.
     · The starfield → ink-dust: implemented in demo-preview.js
       (it reads document.documentElement.dataset.theme at start).
     · Modal chrome (close · sound · transport) → light pills.
   ============================================================ */
[data-theme="light"] .demo__frame {
  /* Keep the inline preview's frame dark — the iframe is dark too. */
  background: #1f2228;
}
[data-theme="light"] .demo__frame .demo__still-row {
  /* The 3 hairline rows of the still poster — in light mode they
     sit on the dark frame.  Use a soft cream so they read clearly
     against the dark surface instead of inheriting the (now dark)
     --line token. */
  background: rgba(243, 240, 232, 0.18);
}
[data-theme="light"] .demo__frame .demo__still-rail {
  border-right-color: rgba(243, 240, 232, 0.16);
}

/* Lightbox backdrop — the curated room.
   v6.12.2 — the previous cream `rgba(245,241,232,0.94)` clashed
   with the cool-charcoal frame (#1f2228, hue ~210°).  We now use
   a backdrop in the SAME hue family as the frame — pearl-grey
   leaning slightly blue — so the two surfaces feel like one room.

   Backdrop colour is the frame's exact hue at low alpha over white:
     rgba(31, 34, 40, 0.085)  → resolves to ~#E5E6E8 on white.
   Result: harmonious, gallery-grey.  The dark frame sits inside it
   the way a print sits inside a passe-partout. */
[data-theme="light"] .demo-lightbox__backdrop {
  background: rgba(31, 34, 40, 0.085);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Spotlight vignette — replaces the v6.12.1 ink-dust experiment.
   The dust idea was the wrong metaphor for paper; the new idea
   is a curatorial spotlight: the backdrop subtly darkens toward
   the corners, drawing the eye to the frame at the centre.
   No motion, no particles — just focus.

   Implemented as a pseudo-element painted over the backdrop and
   under the panel, so it never intercepts clicks. */
[data-theme="light"] .demo-lightbox::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                    /* over backdrop (0), under panel (2) */
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(31, 34, 40, 0.04) 75%,
      rgba(31, 34, 40, 0.08) 100%);
}
/* Caption text under the screen — flip from off-white to ink. */
[data-theme="light"] .demo-lightbox__cap {
  color: rgba(13, 13, 13, 0.62);
}
/* Theatre frame around the iframe — stays #1f2228 (the iframe
   is dark, a matching frame avoids any white seam at the edge).
   Soften the cast shadow so it doesn't punch a hole into the
   parchment backdrop. */
[data-theme="light"] .demo-lightbox__screen {
  box-shadow: 0 32px 90px rgba(13, 13, 13, 0.22);
}

/* Close button — light pill, ink icon. */
[data-theme="light"] .demo-lightbox__close,
[data-theme="light"] .demo-lightbox__sound {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(13, 13, 13, 0.18);
  color: rgba(13, 13, 13, 0.72);
}
[data-theme="light"] .demo-lightbox__close:hover,
[data-theme="light"] .demo-lightbox__sound:hover {
  background: #fff; color: #0D0D0D;
}
[data-theme="light"] .demo-lightbox__sound.is-muted {
  color: rgba(13, 13, 13, 0.34);
}

/* Transport pill — light cream pill, ink controls. */
[data-theme="light"] .demo-lightbox__transport {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(13, 13, 13, 0.16);
  box-shadow: 0 10px 26px rgba(13, 13, 13, 0.15);
  color: #0D0D0D;
}
[data-theme="light"] .dlt-btn {
  color: rgba(13, 13, 13, 0.7);
}
[data-theme="light"] .dlt-btn:hover {
  background: rgba(13, 13, 13, 0.08);
  color: #0D0D0D;
}
[data-theme="light"] .dlt-btn.dlt-play {
  background: #0D0D0D; color: #FFFFFF;
}
[data-theme="light"] .dlt-btn.dlt-play:hover {
  background: #000; color: #fff;
}
[data-theme="light"] .dlt-sep {
  background: rgba(13, 13, 13, 0.14);
}
[data-theme="light"] .dlt-idx { color: rgba(13, 13, 13, 0.5); }
[data-theme="light"] .dlt-ti  { color: rgba(13, 13, 13, 0.86); }