/* ============================================================ variations.css — ADDITIVE "fresh on every refresh" animation set. js/variations.js picks a random data-anim on each load and these rules give that load a different entrance feel. Loaded last. Reduced-motion users are unaffected (responsive.css disables it). ============================================================ */ :root { --reveal-dur: .7s; --reveal-ease: cubic-bezier(.16, 1, .3, 1); } /* Apply the per-load duration/easing + animate filter for the blur variant. */ body[data-anim] .reveal { transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease); } /* The six entrance "flavors" — each is the FROM state before .in. */ body[data-anim="0"] .reveal { transform: translateY(32px); } body[data-anim="1"] .reveal { transform: translateX(-38px); } body[data-anim="2"] .reveal { transform: translateX(38px); } body[data-anim="3"] .reveal { transform: scale(.9); } body[data-anim="4"] .reveal { transform: translateY(26px) scale(.96); filter: blur(7px); } body[data-anim="5"] .reveal { transform: translateY(22px) rotate(-2.2deg); } /* Final state — must out-specify the flavor rules so cards always land. */ body[data-anim] .reveal.in { transform: none; filter: none; } /* Per-load marquee speed (js sets --mq). Longhand overrides the shorthand. */ .marquee-track { animation-duration: var(--mq, 48s); }