/* ================================================================= UNIQ — Motion primitives & keyframes GSAP drives scrubbed/pinned timelines; these are the CSS-side entrance states, marquees, and reduced-motion fallbacks. ================================================================= */ /* Entrance staging — JS adds .is-ready to after first paint */ [data-anim] { will-change: transform, opacity; } .kinetic-char { display: inline-block; will-change: transform; } /* Looping marquee */ @keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: inline-flex; gap: 3rem; white-space: nowrap; animation: marquee-x calc(22s / var(--motion)) linear infinite; } [dir='rtl'] .marquee-track { animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } /* Soft float for hero crystal */ @keyframes levitate { 0%,100% { transform: translateY(0) rotate(0.001deg); } 50% { transform: translateY(-14px); } } .levitate { animation: levitate calc(6s / var(--motion)) ease-in-out infinite; } /* Shimmer sweep for metallic accents */ @keyframes shimmer { to { background-position: 200% center; } } .shimmer-text { background: linear-gradient(100deg, var(--c-gold) 20%, var(--c-cream) 40%, var(--c-gold) 60%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: shimmer calc(5s / var(--motion)) linear infinite; } /* Scroll cue */ @keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } } .scroll-cue { width: 1px; height: 54px; background: color-mix(in srgb, currentColor 30%, transparent); position: relative; overflow: hidden; } .scroll-cue::after { content: ''; position: absolute; inset-inline: 0; top: 0; height: 18px; background: currentColor; animation: cue calc(2s / var(--motion)) var(--ease-out) infinite; } /* Image reveal mask */ .img-mask { overflow: hidden; } .img-mask img { transform: scale(1.18); transition: transform var(--dur-4) var(--ease-spring); } .img-mask.is-inview img { transform: scale(1); } /* Card hover lift */ .lift { transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2); } .lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); } /* Page transition curtain */ .curtain { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--c-green); transform: scaleY(0); transform-origin: bottom; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .marquee-track, .levitate, .shimmer-text, .scroll-cue::after, .grain { animation: none !important; } .reveal-up, [data-anim] { opacity: 1 !important; transform: none !important; } .img-mask img { transform: none; } html { scroll-behavior: auto; } }