/* ============================================================ motion.css — keyframes, reveal/stagger system, reduced motion Only transform / opacity / clip-path / background-position animate. ============================================================ */ /* ── Scroll reveal ── Gated behind .js (set by a one-liner in ) so content is never left invisible when scripting is unavailable. ── */ .js .reveal, .js .reveal-left, .js .reveal-right { opacity: 0; transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } .js .reveal { transform: translate3d(0, 24px, 0); } .js .reveal-left { transform: translate3d(-28px, 0, 0); } .js .reveal-right { transform: translate3d(28px, 0, 0); } .js .revealed { opacity: 1; transform: translate3d(0, 0, 0); } /* Legacy delay classes carried over from the old markup */ .delay-100 { --i: 1; } .delay-200 { --i: 2; } .delay-300 { --i: 3; } .delay-400 { --i: 4; } /* ── Parallax layers (values written by motion.js) ── */ .parallax { will-change: transform; } /* ── Counters ── */ .counting { font-variant-numeric: tabular-nums; } /* ── Countdown digit flip ── */ .flip { position: relative; display: block; perspective: 420px; } .flip__face { display: block; backface-visibility: hidden; } .flip__face--next { position: absolute; inset: 0; transform: rotateX(90deg); transform-origin: 50% 0; } .flip.is-flipping .flip__face--current { animation: flipOut 280ms var(--ease-out) forwards; transform-origin: 50% 100%; } .flip.is-flipping .flip__face--next { animation: flipIn 280ms var(--ease-out) forwards; } /* ── FLIP grid transitions (games filter) ── */ .flip-move { transition: transform var(--d-slow) var(--ease-out); will-change: transform; } .game-card.is-leaving { opacity: 0; transform: scale(.92); transition: opacity var(--d-base) var(--ease-in), transform var(--d-base) var(--ease-in); } .game-card.is-entering { animation: popIn var(--d-slow) var(--ease-out) both; } .game-card.hidden { display: none; } /* ── Testimonials marquee row ── */ .testi-marquee { overflow: hidden; } .testi-marquee__track { display: flex; gap: var(--s-5); width: max-content; animation: marquee 44s linear infinite; } .testi-marquee:hover .testi-marquee__track, .testi-marquee:focus-within .testi-marquee__track { animation-play-state: paused; } /* ── Keyframes ── */ @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes sweep { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } @keyframes livepulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .45; } } @keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes flipOut { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } } @keyframes flipIn { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } } @keyframes popIn { from { opacity: 0; transform: scale(.94) translate3d(0, 10px, 0); } to { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } } @keyframes bounceOnce { 0% { transform: translate3d(0, 0, 0) scale(1); } 40% { transform: translate3d(0, -7px, 0) scale(1.06); } 70% { transform: translate3d(0, 1px, 0) scale(.98); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @keyframes driftBadge { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(0, -10px, 0) rotate(1deg); } } /* ── Reduced motion: everything decorative stops ── */ @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; transition-delay: 0ms !important; scroll-behavior: auto !important; } .js .reveal, .js .reveal-left, .js .reveal-right { opacity: 1 !important; transform: none !important; } .marquee__track, .testi-marquee__track { animation: none !important; transform: none !important; } .testi-marquee { overflow-x: auto; } .btn-download-cta::before { display: none; } .nb-live::before { animation: none !important; } .social-proof-popup::after { animation: none !important; transform: scaleX(1); } .redirect-progress-bar { animation: none !important; transform: scaleX(1); } .flip__face--next { display: none; } .parallax { transform: none !important; } .floating-badge { animation: none !important; } .btn:hover, .btn:active { transform: none; } .game-card:hover, .screenshot-item:hover, .testi-card:hover { transform: none; } .ambient-canvas { display: none !important; } }