/* ============================================================ 4Gas — animations.css Reveal states are CSS transitions toggled by a `.in` class that an IntersectionObserver (main.js) adds when the element enters the viewport. This is independent of GSAP/Lenis/ScrollTrigger, so sections always appear on time. Content is visible by default unless is set (skipped for reduced-motion), and a CSS failsafe reveals anything still hidden after 2s. ============================================================ */ /* hidden states only while JS animation is active (html.anim) */ .anim [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .anim [data-reveal].in { opacity: 1; transform: none; } .anim .reveal-head { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .anim .reveal-head.in { opacity: 1; transform: none; } .anim [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } .anim [data-stagger].in > * { opacity: 1; transform: none; } .anim [data-stagger].in > *:nth-child(1) { transition-delay: 0s; } .anim [data-stagger].in > *:nth-child(2) { transition-delay: .07s; } .anim [data-stagger].in > *:nth-child(3) { transition-delay: .14s; } .anim [data-stagger].in > *:nth-child(4) { transition-delay: .21s; } .anim [data-stagger].in > *:nth-child(5) { transition-delay: .28s; } .anim [data-stagger].in > *:nth-child(6) { transition-delay: .35s; } /* hero image fades in via the hero timeline */ .anim .hero-stage { opacity: 0; } .cursor-dot { opacity: 0; } /* Failsafe: the head script removes `.anim` if main.js never signals js-ready, so a failed/blocked script can never leave content hidden. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } [data-reveal], .reveal-head, [data-stagger] > *, .hero-stage { opacity: 1 !important; transform: none !important; } .cv-bar i { transform: scaleX(.78) !important; } .cursor-dot { display: none !important; } }