/* =============================================================
   EXPLORE THE SILO — motion.css
   ALL animation lives here and nowhere else.
   Adding class "no-motion" to <body> must switch every animation
   off and leave the site fully working.
   Animate transform and opacity only. Easing: cubic-bezier(0.4, 0, 0.2, 1)
   or slower. Built from step 5 onward.
   ============================================================= */

body.no-motion *,
body.no-motion *::before,
body.no-motion *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  /* Audited 2026-09-11 (docs/18 §5.7). The 3D scene switches its own
     motion off (REDUCED_MOTION in silo3d.js: no drift, beats as cuts, no
     scroll smoothing, no animation, the events refused and their controls
     never shown), and main.js jumps instantly and swaps tabs in place. The
     one thing on the page still moving was the intro's arrow, which looped
     forever. Palette shifts and cross-fades stay. */
  .intro-arrow { animation: none; transform: none; opacity: 0.6; }
}

/* Go out to clean (docs/31 #13): breath gathering on the visor and clearing, slower than a resting breath. */
@keyframes visor-breath { 0%, 100% { opacity: 0.25; } 45% { opacity: 0.7; } }
.visor-frame::after { animation: visor-breath 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .visor-frame::after { animation: none; } }