/* ============================================================
   STRATO · Cinematic Intro Overlay · v5
   Glide is now transform-only (no left/top/width transitions)
   so it runs as a pure GPU composite — buttery smooth.
   Logo size is FIXED; intro vs monument differ only by transform.
   ============================================================ */

[data-testid="logo-stage"],
[data-testid="assembled-logo"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

:root {
  --strato-ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --strato-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --strato-ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --strato-glow:        167, 139, 250;

  /* Monument translate targets — set by JS per viewport */
  --strato-tx: 0vw;
  --strato-ty: 0vh;
}

html.strato-intro-running,
html.strato-intro-running body {
  overflow: hidden !important;
}

/* ------- STAGE ------- */
#strato-intro-stage {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  contain: layout style paint;
  transform: translateZ(0);
  will-change: opacity;
}

#strato-intro-stage .strato-bg {
  position: absolute;
  inset: 0;
  background: #06050A;
  opacity: 1;
  transition: opacity 1540ms var(--strato-ease-in-out);
  will-change: opacity;
}

#strato-intro-stage .strato-ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 35% at 50% 50%,
      rgba(var(--strato-glow), 0.10) 0%,
      rgba(var(--strato-glow), 0.04) 35%,
      rgba(var(--strato-glow), 0)    70%);
  opacity: 0;
  transition: opacity 1680ms var(--strato-ease-out);
  pointer-events: none;
  will-change: opacity;
}

/* ------- LOGO GROUP (size is FIXED — only transform animates) ------- */
#strato-intro-stage .strato-logo {
  position: absolute;
  left: 50%;
  top:  50%;
  /* monument size — same number throughout, never transitioned */
  width: clamp(360px, 34vw, 720px);
  aspect-ratio: 616 / 361;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  opacity: 0;
  /* ONLY transform + opacity animated → pure GPU composite */
  transition:
    transform 1680ms var(--strato-ease-out),
    opacity   1120ms var(--strato-ease-out);
  will-change: transform, opacity;
  /* never clickable — pure atmospheric element */
  pointer-events: none;
}

#strato-intro-stage .strato-logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Pre-rendered glow layers — animated only via opacity ────── */
#strato-intro-stage .strato-glow-core,
#strato-intro-stage .strato-glow-soft,
#strato-intro-stage .strato-glow-bed {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1120ms var(--strato-ease-out);
  will-change: opacity;
  transform: translateZ(0);
}
#strato-intro-stage .strato-glow-core {
  inset: -40% -15%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--strato-glow), 0.55) 0%,
    rgba(var(--strato-glow), 0.18) 40%,
    rgba(var(--strato-glow), 0)    72%);
}
#strato-intro-stage .strato-glow-soft {
  inset: -100% -45%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--strato-glow), 0.22) 0%,
    rgba(var(--strato-glow), 0.08) 35%,
    rgba(var(--strato-glow), 0)    70%);
}
#strato-intro-stage .strato-glow-bed {
  inset: -180% -70%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--strato-glow), 0.10) 0%,
    rgba(var(--strato-glow), 0.04) 40%,
    rgba(var(--strato-glow), 0)    74%);
}

/* ─── PHASE: VOID ────────────────────────── */
html.strato-phase-void #strato-intro-stage .strato-ambient { opacity: 0.35; }

/* ─── PHASE: EMERGE ───────────────────────── */
html.strato-phase-emerge #strato-intro-stage .strato-logo {
  transform: translate3d(-50%, -50%, 0) scale(1);
  opacity: 1;
}
html.strato-phase-emerge #strato-intro-stage .strato-ambient   { opacity: 0.55; }
html.strato-phase-emerge #strato-intro-stage .strato-glow-soft { opacity: 0.55; }
html.strato-phase-emerge #strato-intro-stage .strato-glow-core { opacity: 0.65; }

/* ─── PHASE: SETTLE ───────────────────────── */
html.strato-phase-settle #strato-intro-stage .strato-logo {
  transform: translate3d(-50%, -50%, 0) scale(1);
  opacity: 1;
}
html.strato-phase-settle #strato-intro-stage .strato-ambient   { opacity: 0.55; }
html.strato-phase-settle #strato-intro-stage .strato-glow-soft {
  opacity: 0.55;
  animation: strato-breathe-soft 3200ms ease-in-out infinite alternate;
}
html.strato-phase-settle #strato-intro-stage .strato-glow-core {
  opacity: 0.65;
  animation: strato-breathe-core 3200ms ease-in-out infinite alternate;
}

@keyframes strato-breathe-soft { to { opacity: 0.80; } }
@keyframes strato-breathe-core { to { opacity: 0.85; } }
@keyframes strato-breathe-bed  { to { opacity: 0.70; } }

/* ─── PHASE: REVEAL & MONUMENT ─────────────
   The ONLY change is the transform — pure GPU composite glide. */
html.strato-phase-reveal #strato-intro-stage .strato-bg,
html.strato-phase-monument #strato-intro-stage .strato-bg {
  opacity: 0;
}
html.strato-phase-reveal #strato-intro-stage .strato-ambient,
html.strato-phase-monument #strato-intro-stage .strato-ambient {
  opacity: 0;
}

html.strato-phase-reveal #strato-intro-stage .strato-logo,
html.strato-phase-monument #strato-intro-stage .strato-logo {
  transform: translate3d(
    calc(-50% + var(--strato-tx)),
    calc(-50% + var(--strato-ty)),
    0) scale(1);
  opacity: 1;
}

html.strato-phase-reveal #strato-intro-stage .strato-glow-soft {
  opacity: 0.55;
  animation: strato-breathe-soft 5200ms ease-in-out infinite alternate;
}
html.strato-phase-reveal #strato-intro-stage .strato-glow-core {
  opacity: 0.55;
  animation: strato-breathe-core 5200ms ease-in-out infinite alternate;
}
html.strato-phase-reveal #strato-intro-stage .strato-glow-bed {
  opacity: 0.45;
}

/* ─── MONUMENT (docked, ambient drift only, NOT clickable) ────── */
html.strato-phase-monument #strato-intro-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
html.strato-phase-monument #strato-intro-stage .strato-logo {
  /* purely atmospheric — never interactive */
  pointer-events: none;
  cursor: default;
  animation: strato-monument-drift 11000ms ease-in-out infinite alternate;
}
html.strato-phase-monument #strato-intro-stage .strato-glow-soft {
  opacity: 0.55;
  animation: strato-breathe-soft 6200ms ease-in-out infinite alternate;
}
html.strato-phase-monument #strato-intro-stage .strato-glow-core {
  opacity: 0.55;
  animation: strato-breathe-core 6200ms ease-in-out infinite alternate;
}
html.strato-phase-monument #strato-intro-stage .strato-glow-bed {
  opacity: 0.50;
  animation: strato-breathe-bed 7800ms ease-in-out infinite alternate;
}

/* Drift keyframe — applies the monument translate offset + parallax,
   so the logo stays anchored to the right while breathing ±4px. */
@keyframes strato-monument-drift {
  0% {
    transform: translate3d(
      calc(-50% + var(--strato-tx) + var(--strato-mx, 0px)),
      calc(-50% + var(--strato-ty) + var(--strato-my, 0px) - 4px),
      0) scale(1);
  }
  100% {
    transform: translate3d(
      calc(-50% + var(--strato-tx) + var(--strato-mx, 0px)),
      calc(-50% + var(--strato-ty) + var(--strato-my, 0px) + 4px),
      0) scale(1);
  }
}

/* ─── Responsive ────────────── */
@media (max-width: 900px) {
  #strato-intro-stage .strato-logo {
    width: clamp(240px, 52vw, 460px);
  }
  html.strato-phase-monument #strato-intro-stage .strato-glow-bed {
    animation: none;
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  #strato-intro-stage *,
  html.strato-phase-monument #strato-intro-stage .strato-logo,
  html.strato-phase-monument #strato-intro-stage .strato-glow-core,
  html.strato-phase-monument #strato-intro-stage .strato-glow-soft,
  html.strato-phase-monument #strato-intro-stage .strato-glow-bed {
    animation: none !important;
    transition: opacity 600ms ease !important;
  }
}