/* ============================================================
   MOTION — reveal vocabulary, Ken Burns, poem choreography.
   Elements start in their "out" state; the motion engine adds
   .in to play them. Everything is compositor-friendly
   (transform / opacity / clip-path / filter only).
   ============================================================ */

/* Mote / ember canvas sits above the bloom, below the grain */
.motes { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.9; }

/* ---- Base: hide until revealed -------------------------
   NOTE: no blanket will-change here. Promoting ~80 elements
   exhausts the browser's GPU tile budget and sections stop
   painting entirely (blank photos during the presentation). */

/* fade / rise */
[data-reveal="fade"] { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }

/* wipe — clip reveal from bottom with a lift */
[data-reveal="wipe"] { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(26px); transition: clip-path var(--dur-cine) var(--ease-out-expo), transform var(--dur-cine) var(--ease-out-expo), opacity var(--dur) var(--ease-out-expo); }

/* mask — for titles: reveal upward from a clipped baseline */
[data-reveal="mask"] { opacity: 0; clip-path: inset(0 0 105% 0); transform: translateY(0.35em); transition: clip-path var(--dur-cine) var(--ease-out-expo), transform var(--dur-cine) var(--ease-out-expo), opacity var(--dur-fast) linear; }

/* blur-focus — for imagery: emerge from soft focus
   (8px, not 16 — big blurs allocate huge GPU surfaces) */
[data-reveal="blur"] { opacity: 0; transform: scale(1.04); filter: blur(8px); transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-cine) var(--ease-out-expo), filter var(--dur-slow) var(--ease-out-soft); }

/* Revealed state — one class drives them all */
[data-reveal].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; }

/* ---- Poem: line-by-line choreography ------------------ */
.poem-line { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.stanza.in .poem-line { opacity: 0.92; transform: none; }
.stanza--highlight.in .poem-line { opacity: 1; }
.stanza--finale.in .poem-line { opacity: 1; }
/* stagger handled by inline transition-delay set from JS; fallback cascade: */
.stanza.in .poem-line:nth-child(1) { transition-delay: 0.05s; }
.stanza.in .poem-line:nth-child(2) { transition-delay: 0.35s; }
.stanza.in .poem-line:nth-child(3) { transition-delay: 0.65s; }
.stanza.in .poem-line:nth-child(4) { transition-delay: 0.95s; }

/* Candlelight swell on the emotional peaks */
.stanza--highlight.in, .stanza--finale.in { animation: candleSwell 2.6s var(--ease-in-out-cine) forwards; }
@keyframes candleSwell {
  0%   { text-shadow: 0 0 0 transparent; }
  55%  { text-shadow: 0 0 34px color-mix(in oklch, var(--gold) 32%, transparent); }
  100% { text-shadow: 0 0 18px color-mix(in oklch, var(--gold) 18%, transparent); }
}

/* ---- Ken Burns — slow living imagery ------------------- */
.kenburns { animation: kenburns 26s var(--ease-in-out-cine) infinite alternate; transform-origin: center; }
.hero__carousel .kenburns { animation-duration: 30s; }
.hero__bg .kenburns { animation-duration: 40s; }
@keyframes kenburns {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.5%, -1.2%, 0); }
}

/* ---- Nav reveal handled via .revealed in base.css ----- */

/* ---- Reduced motion: reveal instantly, still the drama - */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .poem-line { transition-duration: 0.01ms !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .kenburns { animation: none !important; }
  .stanza--highlight.in, .stanza--finale.in { animation: none !important; }
}