/* Load product surfaces globally, positioned after components/sections in the * cascade (animations.css is the last stylesheet linked on every page). * The Luminous Intelligence layer (verity.css) is linked directly in each * page instead of @imported here, so it downloads in parallel with the * other stylesheets rather than chained behind this file — keeping it off the * critical render path for a faster LCP. */ @import url("product.css"); /* ============================================================================= * ANIMATIONS — deliberately minimal. One quiet reveal + essential UI motion. * transform/opacity only. No particles, glows, floats, orbits or marquees. * ===========================================================================*/ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } [data-reveal='fade'] { transform: none; } [data-reveal='left'] { transform: translateX(-14px); } [data-reveal='right'] { transform: translateX(14px); } [data-reveal='scale'] { transform: none; } [data-reveal].is-in { opacity: 1; transform: none; } /* Failsafe: never leave content trapped at opacity:0. If the reveal JS never * boots (an ES module fails to load/parse, or JS is disabled), this reveals * every [data-reveal] after a short delay. main.js adds .reveal-active the * instant its module graph loads, which cancels the failsafe so the normal * scroll-triggered reveal (via .is-in) takes over. */ @keyframes reveal-failsafe { to { opacity: 1; transform: none; } } [data-reveal] { animation: reveal-failsafe var(--dur-slow) var(--ease-out) 2.5s forwards; } html.reveal-active [data-reveal] { animation: none; } /* Skeleton shimmer (subtle) + spinner — the only loops we keep, and they are calm. */ @keyframes shimmer { to { background-position: -200% 0; } } @keyframes spin-slow { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } }