/* ===== Shared motion system ===== Keyframes + reveal contract + hover utilities + reduced-motion. Reveal contract: elements with [data-reveal] start hidden ONLY when the element carries the .js class (set inline in base.html), so no-JS users and crawlers always see full content. The MM.reveal() IntersectionObserver adds .is-revealed as elements enter the viewport; [data-reveal-stagger] parents get per-child --reveal-delay. */ /* ── Keyframes ─────────────────────────────────────────────────────── */ @keyframes mm-fade-up { from { opacity: 0; transform: translateY(var(--reveal-distance, 18px)); } to { opacity: 1; transform: none; } } @keyframes mm-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mm-scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } @keyframes mm-blur-in { from { opacity: 0; filter: blur(6px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } } @keyframes mm-slide-in-right { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Slow drift for aurora background layers — background-position only, cheap to composite. */ @keyframes mm-aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); } 100% { transform: translate3d(0, 0, 0) scale(1); } } /* ── Reveal contract ───────────────────────────────────────────────── */ html.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance, 18px)); } html.js [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity var(--dur-slow, 650ms) var(--ease-out, ease), transform var(--dur-slow, 650ms) var(--ease-out, ease); transition-delay: var(--reveal-delay, 0ms); } /* ── Hover utilities ───────────────────────────────────────────────── */ .hover-pop { transition: transform var(--dur-fast, 150ms) var(--ease-spring, ease), border-color var(--dur-fast, 150ms) var(--ease-out, ease), box-shadow var(--dur-med, 320ms) var(--ease-out, ease); } .hover-pop:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,0.5)); } /* ── Reduced motion — global kill switch ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.js [data-reveal] { opacity: 1; transform: none; } }