span { display: block; transform: translateY(112%); animation: lineUp 1s cubic-bezier(.22,1,.36,1) forwards; } @keyframes lineUp { to { transform: translateY(0); } } .hero-eyebrow { animation: fadeUp .7s ease-out .05s both; } .hero-fade { animation: fadeUp .8s ease-out .7s both; } .hero-fade-2 { animation: fadeUp .8s ease-out .85s both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Film grain */ .grain-overlay { position: fixed; inset: -100%; width: 300%; height: 300%; pointer-events: none; z-index: 40; opacity: .045; background-image: url("data:image/svg+xml;utf8,"); animation: grain 7s steps(8) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(-3%, 2%); } 25% { transform: translate(2%, -4%); } 37% { transform: translate(-4%, -2%); } 50% { transform: translate(3%, 3%); } 62% { transform: translate(-2%, 4%); } 75% { transform: translate(4%, -3%); } 87% { transform: translate(-3%, -4%); } } /* Marquee */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee 48s linear infinite; } /* Floating chips */ @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .chip-float { animation: floaty 5s ease-in-out infinite; } /* Play button pulse */ @keyframes pulseRing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } } .pulse-ring { position: relative; } .pulse-ring::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; border: 1px solid rgba(182, 255, 0, 0.55); animation: pulseRing 2.2s ease-out infinite; } /* Workflow line */ .workflow-line { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.22,1,.36,1); } .workflow-line.in-view { transform: scaleX(1); } /* Accordions */ .acc-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s; } .acc-item.open .acc-body { opacity: 1; } .acc-item .acc-icon { transition: transform .35s cubic-bezier(.22,1,.36,1); } .acc-item.open .acc-icon { transform: rotate(45deg); } .acc-item { transition: border-color .5s; } .acc-item.open { border-color: rgba(182, 255, 0, 0.3) !important; } /* Modal & lightbox */ .df-modal { opacity: 0; pointer-events: none; transition: opacity .3s; } .df-modal.open { opacity: 1; pointer-events: auto; } .df-modal .df-modal-card { transform: scale(.94) translateY(16px); transition: transform .45s cubic-bezier(.22,1,.36,1); } .df-modal.open .df-modal-card { transform: scale(1) translateY(0); } /* Purchase popup */ #purchase-popup { transform: translateX(-40px) scale(.95); opacity: 0; pointer-events: none; transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } #purchase-popup.show { transform: translateX(0) scale(1); opacity: 1; pointer-events: auto; } /* Logo hover animation */ .logo-mark .streak, .logo-mark .play-head { transform-box: fill-box; transform-origin: center; } @keyframes streakPulse { 0%, 100% { transform: translateX(0) scaleX(1); opacity: 1; } 50% { transform: translateX(-2px) scaleX(.82); opacity: .5; } } .group:hover .logo-mark .streak-1 { animation: streakPulse .9s ease-in-out; } .group:hover .logo-mark .streak-2 { animation: streakPulse .9s ease-in-out .12s; } .group:hover .logo-mark .play-head { transform: translateX(1.5px); transition: transform .45s cubic-bezier(.22,1,.36,1); } /* Card hover */ .card-hover { transition: transform .5s, border-color .5s; } .card-hover:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.2); } ::selection { background: rgba(182, 255, 0, 0.25); color: #050505; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: rgba(182, 255, 0, 0.22); border-radius: 8px; border: 2px solid #050505; } ::-webkit-scrollbar-thumb:hover { background: rgba(182, 255, 0, 0.38); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } img { max-width: 100%; height: auto; }