:root {
  --indigo: #171338;
  --violet: #7657F6;
  --lavender: #F4F1FF;
  --white: #FFFFFF;
  --text: #26233D;

  --fg: var(--white);
  --fg-soft: rgba(244, 241, 255, 0.82);
  --violet-soft: color-mix(in srgb, var(--violet) 62%, var(--lavender));   /* tint derived from the palette */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Desktop: the composition is designed on a 1555 x 1012 canvas; --u is one canvas pixel. */
  --u: min(100vw / 1555, 100svh / 1012);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--indigo); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--indigo); color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
p, h1 { margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 10; background: var(--white); color: var(--indigo); padding: 10px 14px; border-radius: 6px; font-size: 14px; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- Page background (decoration only) ---------- */
.space { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244, 241, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 14% 16%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 55% 50% at 14% 16%, #000 0%, transparent 100%);
}
.light {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 80% 55%, rgba(118, 87, 246, 0.26), rgba(118, 87, 246, 0) 70%),
    radial-gradient(ellipse 45% 40% at 38% 38%, rgba(118, 87, 246, 0.10), rgba(118, 87, 246, 0) 70%),
    radial-gradient(ellipse 130% 100% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.30) 100%);
}

/* ---------- Stage ---------- */
.stage { position: relative; z-index: 1; min-height: 100svh; }
.comp { position: relative; }
.outline { fill: none; stroke: var(--lavender); stroke-opacity: 0.13; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- Shared type ---------- */
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 1.9em;
  font-size: 13px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-soft);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 4.5em; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 241, 255, 0.4)); }
.eyebrow::after { transform: scaleX(-1); }
.eyebrow span { margin-right: -0.3em; }

h1 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.03; text-align: center; }
h1 .l1, h1 .l2 { display: block; }
h1 .l2 { color: var(--violet); background: linear-gradient(90deg, var(--violet), var(--violet-soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.06em; }
.sub { text-align: center; font-weight: 400; letter-spacing: -0.005em; color: var(--white); }

/* ---------- Countdown panel ---------- */
.panel {
  position: relative;
  border: 1px solid rgba(244, 241, 255, 0.18);
  background: linear-gradient(180deg, rgba(244, 241, 255, 0.075), rgba(244, 241, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 18px 50px rgba(8, 5, 30, 0.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.timer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
.unit { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.unit + .unit::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(244, 241, 255, 0.28) 25%, rgba(244, 241, 255, 0.28) 75%, transparent);
}
.num {
  display: block; text-align: center; line-height: 1; font-weight: 400; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}
.num.tick { animation: tick 0.42s var(--ease); }
@keyframes tick { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lbl { font-weight: 500; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--fg-soft); }

.timer[hidden], .launched[hidden] { display: none; }
.launched { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; }
.launched-title { font-weight: 700; letter-spacing: -0.03em; }
.launched-sub { margin-top: 10px; color: var(--fg-soft); }

/* ---------- Footer ---------- */
.foot { display: flex; align-items: center; color: var(--white); font-weight: 500; }
.foot p { display: flex; align-items: center; white-space: nowrap; }
.foot svg { flex: none; fill: none; stroke: var(--violet-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(118, 87, 246, 0.0), rgba(118, 87, 246, 0.55) 12%, rgba(118, 87, 246, 0.55) 88%, rgba(118, 87, 246, 0.0)); }

.noscript { position: fixed; left: 0; right: 0; bottom: 56px; margin: 0; text-align: center; color: var(--fg-soft); font: 14px var(--font); z-index: 5; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

/* ---------- Entrance ---------- */
.brand, .hero, .scene, .clock, .foot { opacity: 0; animation: rise 0.9s var(--ease) forwards; }
.brand { animation-delay: 0.05s; } .hero { animation-delay: 0.2s; } .scene { animation-delay: 0.35s; animation-duration: 1.4s; }
.clock { animation-delay: 0.55s; } .foot { animation-delay: 0.75s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =========================================================
   LAYOUT STRATEGY — three genuinely different layouts, chosen by what fits:

   1. STACKED   (default: phones and portrait tablets)  fluid flex column, clamp() type, doorway sized from viewport height
   2. SPLIT     (>= 900px wide, landscape)              CSS grid: text + countdown | doorway, footer underneath
   3. CANVAS    (>= 1025px wide, aspect >= 5:4)         the approved 1555 x 1012 desktop composition, scaled as one piece

   Only layout 3 uses a fixed canvas. Layouts 1 and 2 are fluid and contain no fixed widths or heights.
   ========================================================= */

/* ---------- 1. STACKED ---------- */
.stage {
  display: flex; align-items: center; justify-content: center;
  padding: calc(clamp(16px, 3svh, 36px) + env(safe-area-inset-top)) clamp(20px, 6vw, 56px) calc(clamp(14px, 2.4svh, 32px) + env(safe-area-inset-bottom));
}
.comp { width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: center; }
.arc-left { display: none; }

.brand img { display: block; width: clamp(64px, 17vw, 112px); height: auto; }
.hero { width: 100%; margin-top: clamp(14px, 2.6svh, 32px); }
.eyebrow { font-size: clamp(10.5px, 2.9vw, 13px); }
h1 { margin-top: clamp(10px, 1.8svh, 22px); font-size: clamp(1.9rem, 9.6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.sub { margin-top: clamp(8px, 1.4svh, 16px); font-size: clamp(1rem, 4.4vw, 1.5rem); }

/* The doorway is a normal block. Its height follows the viewport height; the artwork inside is centred on the
   door and sized from that height (cqh = 1% of the .scene box), so the whole arch, interior and floor
   pool are always in frame whatever the box width. */
.scene {
  --h: clamp(230px, 40svh, 470px);
  position: relative; flex: none; width: 100%; height: var(--h); margin-top: clamp(0px, 0.5svh, 8px);
  container-type: size; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.art {
  --k: calc(100cqh / 610);               /* one canvas unit; the crop is 610 units tall (y 255..865): arch top, room, floor pool */
  position: absolute; width: calc(1175 * var(--k)); height: calc(912 * var(--k));
  left: calc(50cqw - 856 * var(--k));    /* door centre (x 1236) lands on the box centre */
  top: calc(-155 * var(--k));
}
.lyr { position: absolute; inset: 0; pointer-events: none; }
.lyr svg { display: block; width: 100%; height: 100%; overflow: visible; }

.clock { width: 100%; max-width: 560px; margin-top: clamp(8px, 1.4svh, 16px); }
.panel { border-radius: clamp(16px, 5vw, 26px); }
.timer { padding: clamp(12px, 2.2svh, 22px) 0 clamp(10px, 2svh, 20px); height: auto; }
.unit { justify-content: flex-start; }
.num { font-size: clamp(1.9rem, 9.4vw, 3.6rem); }
.lbl { font-size: clamp(8.5px, 2.4vw, 11.5px); margin-top: clamp(6px, 1.2svh, 12px); letter-spacing: 0.14em; text-indent: 0.14em; }
.launched { padding: clamp(16px, 3svh, 28px) 12px; }
.launched-title { font-size: clamp(1.4rem, 6vw, 2.4rem); } .launched-sub { font-size: clamp(0.9rem, 3.4vw, 1.1rem); }

.foot { width: 100%; max-width: 560px; margin-top: clamp(12px, 2.2svh, 26px); font-size: clamp(12px, 3.3vw, 15px); }
.foot svg { width: 1.3em; height: 1.3em; margin-right: 0.6em; }
.rule { margin: 0 clamp(10px, 3vw, 24px); min-width: 12px; }

@media (max-width: 340px) { .rule { display: none; } .foot { justify-content: space-between; } }

/* ---------- 2. SPLIT (landscape tablets / small laptops) ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .stage { padding: clamp(20px, 4svh, 48px) clamp(28px, 5vw, 72px); }
  .comp {
    max-width: 1180px; min-height: calc(100svh - clamp(40px, 8svh, 96px));
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: auto auto auto auto; align-content: center; align-items: center; justify-items: center;
    grid-template-areas: "brand scene" "hero scene" "clock scene" "foot foot";
    column-gap: clamp(16px, 3vw, 48px);
  }
  .brand { grid-area: brand; } .hero { grid-area: hero; margin-top: clamp(12px, 2.4svh, 28px); }
  .clock { grid-area: clock; margin-top: clamp(14px, 3svh, 32px); }
  .scene { grid-area: scene; align-self: center; width: 100%; height: clamp(400px, 70svh, 760px); margin: 0; }
  .foot { grid-area: foot; max-width: none; margin-top: clamp(14px, 3svh, 36px); }
  .brand img { width: clamp(88px, 10vw, 124px); }
  h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
  .sub { font-size: clamp(1.1rem, 2.1vw, 1.6rem); }
  .num { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
  .lbl { font-size: clamp(9.5px, 1.1vw, 12px); letter-spacing: 0.2em; text-indent: 0.2em; }
  .eyebrow { font-size: clamp(11px, 1.3vw, 14px); }
}

/* ---------- 3. CANVAS: the approved desktop reference ---------- */
@media (min-width: 1025px) and (min-aspect-ratio: 5/4) {
  .stage { display: grid; place-items: center; padding: 0; overflow: hidden; }
  .comp { display: block; width: calc(var(--u) * 1555); height: calc(var(--u) * 1012); max-width: none; min-height: 0; margin: 0; }
  .comp > * { position: absolute; grid-area: auto; }

  .arc-left {
    display: block; left: calc(var(--u) * 97); top: calc(var(--u) * -13); width: calc(var(--u) * 986); height: calc(var(--u) * 1100);
    border: 1px solid rgba(244, 241, 255, 0.13); border-bottom: 0; border-radius: calc(var(--u) * 493) calc(var(--u) * 493) 0 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 22%, transparent 52%); mask-image: linear-gradient(90deg, #000 0, #000 22%, transparent 52%);
    pointer-events: none; z-index: 0;
  }

  .brand { left: calc(var(--u) * 527.5); top: calc(var(--u) * 108); z-index: 2; }
  .brand img { width: calc(var(--u) * 125); }

  .hero { left: calc(var(--u) * 190); width: calc(var(--u) * 800); top: calc(var(--u) * 294); margin: 0; z-index: 2; }
  .eyebrow { font-size: calc(var(--u) * 17); height: calc(var(--u) * 24); }
  h1 { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 92); line-height: calc(var(--u) * 90); letter-spacing: -0.018em; }
  .sub { margin-top: calc(var(--u) * 32); font-size: calc(var(--u) * 29); }

  .scene {
    left: calc(var(--u) * 380); top: calc(var(--u) * 100); width: calc(var(--u) * 1175); height: calc(var(--u) * 912);
    min-height: 0; margin: 0; overflow: visible; z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%);
  }
  .art { left: 0; top: 0; width: 100%; height: 100%; }

  .clock { left: calc(var(--u) * 193); top: calc(var(--u) * 636); width: calc(var(--u) * 799); max-width: none; margin: 0; z-index: 2; }
  .panel { height: calc(var(--u) * 148); border-radius: calc(var(--u) * 26); }
  .timer { height: 100%; padding: 0 0 0 calc(var(--u) * 10); }
  .unit { justify-content: center; }
  .num { font-size: calc(var(--u) * 68); }
  .lbl { font-size: calc(var(--u) * 14); margin-top: calc(var(--u) * 14); letter-spacing: 0.22em; text-indent: 0.22em; }
  .launched { padding: 0 16px; }
  .launched-title { font-size: calc(var(--u) * 52); } .launched-sub { font-size: calc(var(--u) * 22); }

  .foot { left: calc(var(--u) * 133); width: calc(var(--u) * 1297); top: calc(var(--u) * 923); transform: translateY(-50%); max-width: none; margin: 0; font-size: calc(var(--u) * 22.5); z-index: 2; }
  .foot svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); margin-right: calc(var(--u) * 28); }
  .rule { margin: 0 calc(var(--u) * 44); }

  /* .foot is centred with translateY, so its entrance must not animate transform */
  .foot { animation-name: rise-foot; }
  @keyframes rise-foot { from { opacity: 0; } to { opacity: 1; } }
}
/* ---------- Sound toggle ---------- */
.topbar { position: fixed; z-index: 20; top: calc(14px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
.sound {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; min-width: 38px; padding: 0 11px; justify-content: center;
  font: 500 12px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft);
  background: rgba(23, 19, 56, 0.55); border: 1px solid rgba(244, 241, 255, 0.2); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  animation: rise 0.9s var(--ease) 1.2s both;
}
.sound[hidden] { display: none; }
.sound:hover { color: var(--white); border-color: rgba(244, 241, 255, 0.4); }
.sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sound .spk { fill: currentColor; fill-opacity: 0.18; }
.sound .slash { opacity: 0; } .sound .waves { opacity: 1; }
.sound[data-state="off"] .slash { opacity: 1; } .sound[data-state="off"] .waves { opacity: 0; }
.sound[data-state="playing"] { color: var(--white); border-color: rgba(118, 87, 246, 0.7); }
.sound[data-state="waiting"] { color: var(--white); border-color: rgba(118, 87, 246, 0.7); animation: rise 0.9s var(--ease) 1.2s both, nudge 2.8s ease-in-out 2.4s infinite; }
.sound[data-state="waiting"] .waves { opacity: 0.45; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(118, 87, 246, 0); } 50% { box-shadow: 0 0 0 5px rgba(118, 87, 246, 0.22); } }
/* label: always when waiting (so the prompt is discoverable); otherwise only where there is room */
.sound-label { display: none; }
.sound[data-state="waiting"] .sound-label { display: inline; }
@media (min-width: 600px) { .sound-label { display: inline; } }
@media (max-width: 359px) { .sound[data-state="waiting"] .sound-label { display: none; } }

/* ---------- Doorway light ----------
   Only opacity and transform animate, each on its own layer, so the browser composites them on
   the GPU and never re-rasterises the blurred artwork. Nothing here affects layout. */
.lyr { animation: lyr-in 2.4s var(--ease) both; }
.lyr-base  { animation-delay: 0.15s; }
.lyr-halo  { animation-delay: 1.0s; animation-duration: 2.8s; }
.lyr-floor { animation-delay: 1.4s; animation-duration: 2.8s; }
.lyr-lamp  { animation-delay: 1.8s; animation-duration: 2.2s; }

/* violet light breathes: 6s cycle, 16% swing */
.breathe { animation: breathe 6s ease-in-out 3.4s infinite alternate both; will-change: opacity; }
@keyframes breathe { from { opacity: 0.86; } to { opacity: 1; } }

/* floor light drifts a few pixels and softens: 8s cycle */
.drift { animation: drift 8s ease-in-out 3.8s infinite alternate both; will-change: transform, opacity; }
@keyframes drift { from { transform: translateX(-0.5%); opacity: 0.9; } to { transform: translateX(0.5%); opacity: 1; } }

/* lamp: slow ambient wobble, never below 93% */
.flicker { animation: flicker 9s linear 4s infinite both; will-change: opacity; }
@keyframes flicker {
  0%, 100% { opacity: 1; }   14% { opacity: 0.97; }  19% { opacity: 0.94; }  25% { opacity: 1; }
  48% { opacity: 0.98; }     53% { opacity: 0.95; }  58% { opacity: 1; }     80% { opacity: 0.97; }
  86% { opacity: 0.99; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand, .hero, .scene, .clock, .foot { animation: none; opacity: 1; transform: none; }
  .num.tick { animation: none; }
  .lyr, .breathe, .drift, .flicker { animation: none; opacity: 1; transform: none; will-change: auto; }
  .sound, .sound[data-state="waiting"] { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1025px) and (min-aspect-ratio: 5/4) { .foot { transform: translateY(-50%); } }