/*
 * Motion that spans components: the intro (once per session), the theme crossfade, and the
 * reduced-motion overrides. Only opacity and transform animate. Rules: docs/MOTION.md.
 */

@keyframes fm-fade { from { opacity: 0; } to { opacity: 1; } }

/*
 * Intro (approved concept C): the wall starts in the dark, one white flash (1.3 s), then the
 * columns reveal from the lit edge (the right, inline start) inward, 120 ms apart. boot.js adds
 * html.is-intro once per session, never under reduced motion; app.js removes it when done.
 * fill-mode both with fixed delays, so a script failure still ends with everything visible.
 */
@keyframes fm-wall-flash {
  0% { opacity: 0; }
  18% { opacity: var(--fm-flash-peak); }
  100% { opacity: 0; }
}
.wall-flash {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--fm-flash), var(--fm-flash) 30%, color-mix(in srgb, var(--fm-flash) 90%, transparent));
  opacity: 0;
}
html:not(.is-intro) .wall-flash { display: none; }
html.is-intro .wall-flash { animation: fm-wall-flash 1300ms ease-out both; }
html.is-intro :is(.wcol-head, .wslot, .wall-rail, .wall-tag) {
  animation: fm-fade 900ms ease-out both;
  animation-delay: calc(350ms + var(--i, 0) * 120ms);
}
.wall-tag { --i: 1; }

/* Theme switch: one root crossfade, no per-element colour transitions. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease-standard); }
html.is-switching *, html.is-switching *::before, html.is-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 80ms; --motion-base: 120ms; --motion-exit: 80ms; --motion-slow: 120ms; --motion-content: 120ms; }
  .btn:active:not(:disabled) { transform: none; }
  .face-check, .toast, .toast.is-out, .drawer, .dev-sel, .dev-check { transform: none !important; }
  /* The ripple becomes a static 1px ring at 40%. */
  .status--playing .status-shape::after, .status--online .status-shape::after { animation: none; inset: -4px; opacity: .4; }
  /* No floor ripple and no flash; the wall is simply there. */
  .wfloor, .wall-flash { display: none; }
  /* Processing: a static segment; the label says what is happening. */
  .dev-bar.is-indeterminate i { animation: none; }
  .media-item.is-new .media-pick, .media-item.is-new .media-tint { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}