/* ===================================================== VERATLAS ANIMATIONS GSAP handles actual animation; these are initial states and CSS-only transitions where appropriate. ===================================================== */ /* --- Initial invisible states for GSAP reveals ----- */ /* Only hide when JS is confirmed loaded (.js class on ) */ .js [data-reveal], .js [data-reveal-item], .js [data-hero], .js .trust-item { opacity: 0; } /* --- Hero word-split ------------------------------ */ .hero__headline { overflow: visible; } .hero__word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.05em; /* prevent descender clip */ } .hero__word-inner { display: inline-block; transform: translateY(108%); opacity: 0; } /* --- Horizontal line draw-in ---------------------- */ .line-draw { display: block; height: 1px; background: currentColor; opacity: 0.1; transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease-out); } .line-draw.is-visible { transform: scaleX(1); } /* --- Page load ------------------------------------ */ body { animation: pageFadeIn 0.5s var(--ease-out) both; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* --- Hero badge pulse (subtle) -------------------- */ @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,91,219,0.15); } 50% { box-shadow: 0 0 0 6px rgba(59,91,219,0); } } .badge--white { animation: badgePulse 3s ease-in-out 2s infinite; } /* --- Scroll indicator bounce ---------------------- */ @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .scroll-hint { animation: scrollBounce 1.8s ease-in-out infinite; } /* --- Counter number tabular digits ---------------- */ .counter-val { font-variant-numeric: tabular-nums; display: inline-block; } /* --- Tier card "highlight" glow ------------------- */ .tier-card--highlight::before { content: ''; position: absolute; inset: -1px; border-radius: 15px; background: transparent; box-shadow: 0 0 40px rgba(59,91,219,0.12); pointer-events: none; } /* --- Motif parallax target ------------------------ */ .motif-planes { will-change: transform; } /* --- Stagger helper: CSS delay on nth-child -------- */ [data-stagger] > *:nth-child(1) { --stagger-delay: 0ms; } [data-stagger] > *:nth-child(2) { --stagger-delay: 80ms; } [data-stagger] > *:nth-child(3) { --stagger-delay: 160ms; } [data-stagger] > *:nth-child(4) { --stagger-delay: 240ms; } [data-stagger] > *:nth-child(5) { --stagger-delay: 320ms; } [data-stagger] > *:nth-child(6) { --stagger-delay: 400ms; } /* --- Reduced motion override ---------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero__word-inner { transform: none; opacity: 1; } [data-reveal], [data-reveal-item], [data-hero], .trust-item { opacity: 1; transform: none; } body { animation: none; } }