/* LINK — animations.css Every keyframe + the classes that fire them. Kill switch: add class "no-motion" to and nothing below runs. */ @keyframes snapL { 0%{transform:translate3d(-70vw,0,0) rotate(-140deg);opacity:0} 62%{opacity:1} 100%{transform:translate3d(0,0,0) rotate(0deg);opacity:1} } @keyframes snapR { 0%{transform:translate3d(70vw,0,0) rotate(140deg);opacity:0} 62%{opacity:1} 100%{transform:translate3d(0,0,0) rotate(0deg);opacity:1} } @keyframes flash { 0%{opacity:0} 8%{opacity:1} 100%{opacity:0} } @keyframes shake { 0%,100%{transform:translate3d(0,0,0)} 15%{transform:translate3d(-11px,5px,0)} 30%{transform:translate3d(9px,-6px,0)} 45%{transform:translate3d(-6px,-3px,0)} 62%{transform:translate3d(5px,4px,0)} 80%{transform:translate3d(-2px,1px,0)} } @keyframes wordSlam { 0%{transform:scale(2.6) skewX(-8deg);opacity:0;filter:blur(14px)} 55%{opacity:1} 100%{transform:scale(1) skewX(-8deg);opacity:1;filter:blur(0)} } @keyframes overlayWipe { 0%{transform:translateY(0)} 100%{transform:translateY(-101%)} } @keyframes marquee { from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } @keyframes marqueeRev { from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} } @keyframes grainShift { 0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-3%,2%,0)} 50%{transform:translate3d(2%,-3%,0)} 75%{transform:translate3d(-2%,-2%,0)} 100%{transform:translate3d(0,0,0)} } @keyframes wobble { 0%,100%{filter:none} 48%{filter:none} 50%{filter:drop-shadow(3px 0 0 #FF2E88) drop-shadow(-3px 0 0 #00E5FF)} 54%{filter:none} } @keyframes smash { 0%{transform:translate3d(46vw,0,0) skewX(-22deg);opacity:0} 70%{opacity:1} 100%{transform:translate3d(0,0,0) skewX(-8deg);opacity:1} } @keyframes smashL { 0%{transform:translate3d(-46vw,0,0) skewX(22deg);opacity:0} 70%{opacity:1} 100%{transform:translate3d(0,0,0) skewX(-8deg);opacity:1} } @keyframes drop { 0%{transform:translate3d(0,-70px,0) rotate(-9deg);opacity:0} 68%{transform:translate3d(0,6px,0) rotate(1.5deg);opacity:1} 100%{transform:translate3d(0,0,0) rotate(0deg);opacity:1} } @keyframes rise { 0%{transform:translate3d(0,54px,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} } @keyframes pop { 0%{transform:scale(0.6) rotate(-14deg);opacity:0} 70%{transform:scale(1.08) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(-4deg);opacity:1} } @keyframes slot { 0%{transform:translate3d(0,26px,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} } /* --- page texture --- */ .grain { animation:grainShift 0.9s steps(3) infinite; } /* --- intro (2.8s total, then main.js removes the node) --- */ .intro { animation:overlayWipe 0.55s 2.25s cubic-bezier(0.85,0,0.15,1) forwards; } .intro__mark--l { animation:snapL 1s 0.15s cubic-bezier(0.16,1,0.3,1) both; } .intro__mark--r { animation:snapR 1s 0.15s cubic-bezier(0.16,1,0.3,1) both; } .intro__word { animation:wordSlam 0.45s 1.15s cubic-bezier(0.2,1.5,0.4,1) both, shake 0.5s 1.55s both; } .intro__sub { animation:slot 0.4s 1.8s both; } .intro__flash { animation:flash 0.4s 1.14s both; } /* --- hero load sequence, keyed to the intro wipe --- */ .frame--a { animation:drop 0.9s 2.3s cubic-bezier(0.16,1,0.3,1) both; } .frame--b { animation:drop 0.9s 2.45s cubic-bezier(0.16,1,0.3,1) both; } .frame--c { animation:drop 0.9s 2.6s cubic-bezier(0.16,1,0.3,1) both; } .frame--d { animation:drop 0.9s 2.7s cubic-bezier(0.16,1,0.3,1) both; } .frame--e { animation:drop 0.9s 2.8s cubic-bezier(0.16,1,0.3,1) both; } .frame--f { animation:drop 0.9s 2.9s cubic-bezier(0.16,1,0.3,1) both; } .brandmark { animation:drop 0.8s 2.35s cubic-bezier(0.16,1,0.3,1) both; } .brandmark svg { animation:wobble 5s 3s infinite; } .hero__title .l1 { animation:smashL 0.7s 2.3s cubic-bezier(0.16,1,0.3,1) both; } .hero__title .l2 { animation:smash 0.7s 2.45s cubic-bezier(0.16,1,0.3,1) both; } .hero__title .l3 { animation:smashL 0.7s 2.6s cubic-bezier(0.16,1,0.3,1) both; } .hero__lede { animation:slot 0.5s 2.85s both; } .hero__cta { animation:slot 0.5s 3s both; } .sticker { animation:pop 0.55s 3.05s cubic-bezier(0.2,1.4,0.4,1) both; } /* --- ticker: --ticker-speed set in main.css/main.js --- */ .ticker__track--fast { animation:marquee var(--ticker-speed,34s) linear infinite; } .ticker__track--slow { animation:marqueeRev var(--ticker-speed-slow,58s) linear infinite; } /* --- resting phase --- */ .waitlist__mark, .foot__lockup svg { animation:wobble 5s 3s infinite; } .foot__lockup svg { animation-duration:7s; animation-delay:1s; } /* --- scroll reveal: main.js swaps data-anim -> .is-in --- */ [data-anim] { opacity:0; } .is-in[data-anim="rise"] { animation:rise 0.6s cubic-bezier(0.16,1,0.3,1) both; } .is-in[data-anim="drop"] { animation:drop 0.75s cubic-bezier(0.16,1,0.3,1) both; } .is-in[data-anim="smash"] { animation:smash 0.8s cubic-bezier(0.16,1,0.3,1) both; } .is-in[data-anim="smashL"] { animation:smashL 0.8s cubic-bezier(0.16,1,0.3,1) both; } .is-in[data-anim="pop"] { animation:pop 0.55s cubic-bezier(0.2,1.4,0.4,1) both; } /* once it lands, main.js adds .is-done and the authored resting style takes over */ .is-done[data-anim] { animation:none !important; opacity:1; } /* --- kill switches --- */ .no-motion *, .no-motion *::before, .no-motion *::after { animation:none !important; transition:none !important; } .no-motion [data-anim] { opacity:1 !important; } .no-motion .intro { display:none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; } [data-anim] { opacity:1 !important; } .intro { display:none; } }