/* ========================================================================== METRIX LAB - animations.css Keyframes, the scroll-reveal mechanism, and reduced-motion safeguards. Load order: 4th / LAST (after components.css). -------------------------------------------------------------------------- GOLDEN RULE: animate ONLY transform + opacity. Reduced-motion MUST keep all content visible (force reveals on, kill infinite/auto motion). ========================================================================== */ /* ----- KEYFRAMES ---------------------------------------------------------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes glowPulse { 0%, 100% { box-shadow: var(--glow-orange-sm); } 50% { box-shadow: var(--glow-orange-lg); } } /* horizontal marquee - track must contain TWO identical sequences, animate to -50% so the loop is seamless. Width set by content. */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes spinSlow { to { transform: rotate(360deg); } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* ----- ANIMATION UTILITY CLASSES ------------------------------------------ */ .anim-float { animation: float 6s var(--ease-in-out) infinite; will-change: transform; } .anim-glow-pulse { animation: glowPulse 3.2s var(--ease-in-out) infinite; } .anim-spin-slow { animation: spinSlow 24s linear infinite; will-change: transform; } /* marquee row: parent = .marquee (overflow hidden), child track = .marquee__track */ .marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: inline-flex; gap: var(--space-2xl); width: max-content; animation: marquee 32s linear infinite; will-change: transform; } .marquee:hover .marquee__track { animation-play-state: paused; } /* ========================================================================== SCROLL-REVEAL MECHANISM [data-reveal] starts hidden (opacity 0, slid down). reveal.js adds .is-visible (after IntersectionObserver fires) to transition it in. Inline transition-delay is set by reveal.js for data-reveal-delay and for data-reveal-stagger children (~90ms step). Directional variants let builders slide from other axes. ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); will-change: opacity, transform; /* SELF-HEAL (FOUC-trap fix): if reveal.js NEVER runs (404, parse error, slow load), force the element visible after a short delay so the page is never stuck blank. reveal.js adds `.reveal-ready` to the instant it executes, which cancels this timer - so when JS is healthy the scroll observer keeps full control of staged/below-fold reveals. */ animation: reveal-safety 0.001ms linear 1.4s forwards; } @keyframes reveal-safety { to { opacity: 1; transform: none; } } /* reveal.js is alive -> stop the blanket auto-reveal, let the observer drive */ html.reveal-ready [data-reveal] { animation: none; } [data-reveal].is-visible { opacity: 1; transform: none; animation: none; /* this element has been revealed - cancel any safety anim */ } /* directional reveal variants (set BEFORE .is-visible resets transform) */ [data-reveal="left"] { transform: translateX(calc(var(--reveal-distance) * -1)); } [data-reveal="right"] { transform: translateX(var(--reveal-distance)); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal="fade"] { transform: none; } /* once revealed, drop will-change to free the compositor */ [data-reveal].is-visible { will-change: auto; } /* Parallax elements are NOT given a blanket will-change: that would promote all ~11 large/blurred decorative layers to compositor layers for the whole session even off-screen. parallax.js applies translate3d() which implicitly creates a layer only while the element is actually transformed, and only when it is near the viewport (see parallax.js viewport gating). */ /* ========================================================================== REDUCED MOTION - CRITICAL Force every reveal visible, neutralise transforms, kill infinite/auto motion, and effectively disable smooth-scroll & marquee. Content first. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* reveals: show immediately, no transform */ [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* parallax: pin in place */ [data-parallax] { transform: none !important; will-change: auto !important; } /* infinite/auto motion off */ .anim-float, .anim-glow-pulse, .anim-spin-slow, .marquee__track { animation: none !important; } }