/* ============================================================ Worx | animations.css Initial states for GSAP reveals + pure-CSS fallbacks. GSAP (static/js/animations.js) animates elements carrying the [data-reveal] attribute as they scroll into view. ============================================================ */ /* Elements start hidden; GSAP brings them in. If JS fails to load, the no-js fallback below keeps everything visible. */ .js [data-reveal] { opacity: 0; transform: translateY(34px); will-change: opacity, transform; } /* GSAP never arrived (blocked CDN): show everything as-is */ .no-gsap [data-reveal] { opacity: 1; transform: none; } /* Interior page hero (.page-hero): animations.js sets .wx-motion on as soon as GSAP is ready, then plays the eyebrow, headline and intro in sequence. Hidden only under that class, so a missing GSAP or reduced motion never leaves the hero blank. */ .wx-motion .page-hero > * { opacity: 0; } /* Hero words are split and staggered by GSAP */ .js .hero h1 .word { display: inline-block; opacity: 0; transform: translateY(60px) rotate(2deg); } /* Slow float for hero blobs (CSS-only, very cheap) */ @keyframes blob-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } 100% { transform: translate(0, 0) scale(1); } } .hero-blob { animation: blob-drift 14s ease-in-out infinite; } .hero-blob--ember { animation-duration: 18s; animation-direction: reverse; } /* Scroll hint pulse */ @keyframes hint-pulse { 0%, 100% { opacity: 0.45; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 6px); } } .hero-scroll-hint { animation: hint-pulse 2.4s ease-in-out infinite; } /* Marquee CSS fallback (GSAP takes over when available) */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee-scroll 30s linear infinite; } .js .marquee-track { animation: none; /* GSAP drives it instead */ } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js .hero h1 .word, .wx-motion .page-hero > * { opacity: 1; transform: none; } .hero-blob, .hero-scroll-hint, .marquee-track { animation: none; } }