/* ==========================================================================
   Motion — keyframes, ambient pause, and the reduced-motion contract
   ========================================================================== */

@keyframes aurora-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 6vmax, 0) scale(1.16); }
}

@keyframes aurora-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-8vmax, -5vmax, 0) scale(1); }
}

@keyframes aurora-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.94); }
  to   { transform: translate3d(-6vmax, 7vmax, 0) scale(1.12); }
}

@keyframes title-sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes hint-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(2px); opacity: 1; }
}

@keyframes sound-pulse {
  0%        { transform: scale(0.92); opacity: 0.75; }
  70%, 100% { transform: scale(1.42); opacity: 0; }
}

@keyframes loader-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

@keyframes loader-pulse {
  0%, 100% {
    box-shadow: 0 24px 50px -26px oklch(0.710 0.220 356 / 0.95);
  }
  50% {
    box-shadow:
      0 26px 62px -20px oklch(0.710 0.220 356 / 1),
      0 0 0 1px color-mix(in oklab, var(--rose-300) 55%, transparent);
  }
}

/* --- Entrance choreography -------------------------------------------
   Driven by `data-boot`, set inline in <head> so there is no flash before
   the module boots. The glass card moves without fading: animating opacity
   on an element with `backdrop-filter` creates a grouping context and the
   backdrop it samples goes wrong mid-transition.
   ---------------------------------------------------------------------- */
.eyebrow,
.hero,
.hint,
.credit,
.hud {
  transition: opacity 700ms var(--ease-out-expo), translate 700ms var(--ease-out-expo);
}

.content > * {
  transition: translate 800ms var(--ease-out-expo);
}

.eyebrow { transition-delay: 60ms; }
.hero { transition-delay: 140ms; }
.letter { transition-delay: 240ms; }
.hint { transition-delay: 420ms; }
.credit { transition-delay: 560ms; }
.hud { transition-delay: 520ms; }

html[data-boot="pending"] .eyebrow,
html[data-boot="pending"] .hero,
html[data-boot="pending"] .hint,
html[data-boot="pending"] .credit,
html[data-boot="pending"] .hud {
  opacity: 0;
}

html[data-boot="pending"] .content > * {
  translate: 0 18px;
}

/* --- Ambient off ------------------------------------------------------
   The HUD toggle freezes the whole scene. Layers are removed from the
   paint rather than faded, because animating opacity on a preserve-3d
   container would flatten every child and collapse the depth.
   ---------------------------------------------------------------------- */
[data-ambient="off"] .aurora,
[data-ambient="off"] .hero__title,
[data-ambient="off"] .hint svg {
  animation-play-state: paused;
}

[data-ambient="off"] .layer--text {
  display: none;
}

[data-ambient="off"] .dust {
  opacity: 0;
}

[data-ambient="off"] .stage {
  transition: none;
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }

  .aurora {
    animation: none;
  }

  .hero__title {
    animation: none;
    background-position: 50% 50%;
  }

  .hint svg {
    animation: none;
  }

  .media:hover .media__frame,
  .media:focus-visible .media__frame {
    transform: none;
  }

  .media:hover .media__img {
    transform: none;
  }
}