/* The former hero is now an independent, dismissible opening scene. */
html.intro-pending body > :not(.lumi-intro) { visibility: hidden; }
html.intro-open,html.intro-open body { overflow: hidden; }
.lumi-intro { position: fixed; inset: 0; width: 100%; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; background: var(--cream); color: var(--ink); }
.lumi-intro:not([open]) { display: none; }
.lumi-intro::backdrop { background: var(--cream); }
.lumi-intro.is-closing { opacity: 0; pointer-events: none; }
/* Keep loading artwork/text from flashing before their first animation frame.
   The solid backdrop and Skip control remain available while assets decode. */
.lumi-intro:not(.is-ready) :is(.night-backdrop, .intro-scene h2, .intro-art) { opacity: 0; }
.intro-skip { position: relative; min-width: 11rem; margin-top: .3rem; }
@media (prefers-reduced-motion: no-preference) {
  .lumi-intro { transition: opacity .45s ease; }
  /* Into the hero: a slow dissolve (HAND_OVER_MS in intro.js), which the hero's own entrance continues. */
  .lumi-intro.is-handing-over { transition-duration: 1.2s; }
  .lumi-intro[open] { animation: intro-fade-in .22s ease-out; }
  .lumi-intro.is-ready :is(.night-backdrop, .intro-scene h2, .intro-art) { animation: intro-fade-in .24s ease-out; }
}
@keyframes intro-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Shared tokens carry text and controls. The colored haze, stars, and shadows
   are decorative story-scene art, shared by the transparent Lumi poses. */
.intro-scene { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding-block: 3rem; text-align: center; }
.intro-scene h2 { font-family: var(--font-display); font-size: clamp(2.15rem,3.6vw,3.5rem); font-weight: var(--font-heading-weight); line-height: 1.15; letter-spacing: -.025em; }
.intro-title-cycle { display: inline-grid; vertical-align: bottom; color: var(--moonlight); font-weight: inherit; white-space: nowrap; }
.intro-title-cycle > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.intro-title-cycle > .is-current { opacity: 1; visibility: visible; }
.intro-art { position: relative; isolation: isolate; display: grid; width: min(100%,40rem,64svh,calc(100svh - 14rem)); margin: 0; }
.intro-lumi { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; visibility: hidden; filter: drop-shadow(0 12px 26px #08091f20); user-select: none; }
.intro-lumi.is-current { opacity: 1; visibility: visible; }
.intro-dream-glow { position: absolute; z-index: -1; inset: 18% 7% 12%; border-radius: 50%; background: radial-gradient(ellipse,#fbd89a35, #baa4ec22 42%,transparent 70%); filter: blur(18px); pointer-events: none; }
.intro-sparkles { position: absolute; inset: 0; z-index: 1; color: #ffe9a8; pointer-events: none; }
.intro-sparkles span { position: absolute; font-size: 1.3rem; text-shadow: 0 0 18px #ffdca06b; }
.intro-sparkles span:nth-child(1) { top: 23%; left: 8%; }
.intro-sparkles span:nth-child(2) { top: 58%; right: 2%; font-size: .8rem; }
.intro-sparkles span:nth-child(3) { bottom: 15%; left: 15%; font-size: 1rem; }
.intro-scene-progress { position: absolute; bottom: .25rem; left: 50%; display: flex; gap: .35rem; transform: translateX(-50%); }
.intro-scene-progress span { width: 1.1rem; height: .1875rem; border-radius: 1rem; background: var(--line); }
.intro-scene-progress .is-current { background: var(--moonlight); }
[data-theme="light"] .intro-lumi { filter: drop-shadow(0 12px 24px #8766a120); }
[data-theme="light"] .intro-sparkles { color: #b18a3f; }

@media (prefers-reduced-motion: no-preference) {
  .intro-scene h2 { transform: translate3d(calc(var(--drift-x,0) * .45rem),calc(var(--drift-y,0) * .3rem),0); transition: transform .65s cubic-bezier(.2,.7,.2,1); }
  .intro-art { transform: translate3d(calc(var(--drift-x,0) * 1.1rem),calc(var(--drift-y,0) * .7rem),0) rotate(calc(var(--drift-x,0) * 1deg)); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .intro-dream-glow { transition: transform 1.2s,opacity 1.2s; }
  .intro-sparkles span { transition: transform 1.2s,opacity 1.2s; }
  [data-intro-scene="comfort"] .intro-dream-glow { transform: scale(.86) translateY(8%); opacity: .65; }
  [data-intro-scene="comfort"] .intro-sparkles span { transform: translateY(.8rem) scale(.7); opacity: .55; }
  [data-intro-scene="sleep"] .intro-dream-glow { transform: scale(1.2) translateY(12%); opacity: .85; }
  [data-intro-scene="sleep"] .intro-sparkles span { transform: translateY(-1rem) rotate(15deg); opacity: .7; }
  [data-intro-state="playing"] .intro-lumi.is-current { animation: intro-pose-arrive 1s cubic-bezier(.2,.75,.25,1) both; }
  [data-intro-state="playing"][data-intro-scene="wonder"] .intro-lumi.is-current { animation-name: intro-first-arrive; }
  [data-intro-state="playing"] .intro-lumi.is-leaving { visibility: visible; animation: intro-pose-leave .32s ease-in both; }
  [data-intro-state="playing"] .intro-title-cycle > .is-current { animation: intro-title-arrive .8s cubic-bezier(.2,.75,.25,1) both; }
  /* The first title arrives with the scene; only later titles crossfade. */
  [data-intro-state="playing"][data-intro-scene="wonder"] .intro-title-cycle > .is-current { animation: none; }
  [data-intro-state="playing"] .intro-title-cycle > .is-leaving { visibility: visible; animation: intro-title-leave .25s ease-in both; }
}
@keyframes intro-first-arrive {
  0% { transform: translateY(1.2rem) scale(.95) rotate(-3deg); }
  60% { transform: translateY(-.5rem) scale(1.01) rotate(1deg); }
  100% { transform: none; }
}
@keyframes intro-pose-arrive {
  0% { opacity: 0; transform: translateY(2rem) scale(.88) rotate(5deg); }
  20% { opacity: 0; }
  70% { opacity: 1; transform: translateY(-.25rem) scale(1.01) rotate(-.5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes intro-pose-leave {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-1rem) scale(1.06) rotate(-3deg); }
}
@keyframes intro-title-arrive {
  0%,20% { opacity: 0; transform: translateY(.65em); }
  100% { opacity: 1; transform: none; }
}
@keyframes intro-title-leave {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-.5em); }
}
@media (max-width: 37em) {
  .intro-scene { padding-block: 2.5rem; gap: 1.1rem; }
  .intro-scene h2 { font-size: 2.35rem; letter-spacing: -.025em; }
  .intro-title-cycle { display: grid; }
}
@media (max-width: 23em) { .intro-scene h2 { font-size: 2.05rem; } }

/* Return visits: the opening waits on Begin, the gesture that lets it start with its piano.
   Topi and the title stand still; Skip steps back to a quieter button beneath it. Focus rests
   on the heading (like the setup steps), which needs no ring. */
#intro-title:focus { outline: none; }
.intro-begin { min-width: 11rem; margin-top: .3rem; gap: .6rem; }
.intro-begin[hidden] { display: none; }
.intro-begin svg { width: .8rem; height: .8rem; flex: none; }
[data-intro-state="waiting"] .intro-skip { margin-top: 0; background: var(--surface-soft); color: var(--ink); box-shadow: none; }
[data-intro-state="waiting"] .intro-skip:hover { background: var(--surface-soft-hover); }

/* A return visit's welcome, before Begin: its own card rather than the first scene held still.
   Topi waves inside a soft halo (decorative story-scene art: the intro's own dream-glow gold
   and lavender, which read in both themes), with a greeting above the way in. Begin swaps it
   for the scene, which fades in as it appears. */
[data-intro-state="waiting"] :is(#intro-title, .intro-art) { display: none; }
.lumi-intro:not(.is-ready) .intro-welcome { opacity: 0; }
.intro-welcome { display: flex; flex-direction: column; align-items: center; gap: .55rem; max-width: 34rem; }
.intro-welcome[hidden] { display: none; }
.intro-welcome-art { position: relative; display: grid; place-items: center; width: min(17rem, 40svh); aspect-ratio: 1; margin-bottom: .4rem; }
.intro-welcome-art::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, #fbd89a55, #baa4ec2e 45%, transparent 70%); filter: blur(10px); }
.intro-welcome-art img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 12px 24px #08091f24); user-select: none; }
#intro-welcome-title { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: var(--font-heading-weight); line-height: 1.15; letter-spacing: -.02em; }
#intro-welcome-title:focus { outline: none; }
.intro-welcome p { max-width: 26rem; margin-bottom: .6rem; color: var(--ink-2); font-size: 1rem; line-height: 1.6; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .lumi-intro.is-ready .intro-welcome { animation: intro-fade-in .5s ease-out; }
  .intro-welcome-art img { animation: intro-welcome-float 4.5s ease-in-out infinite; }
}
@keyframes intro-welcome-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.4rem); } }