/* ============================================================= animations.css — Keyframes, scroll reveals, page load ============================================================= */ /* ============================================================ KEYFRAMES ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @keyframes drawLine { from { stroke-dashoffset: var(--path-length, 1000); } to { stroke-dashoffset: 0; } } @keyframes ctaPulse { 0% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.25); } 50% { box-shadow: 0 0 28px rgba(0, 217, 255, 0.45), 0 0 48px rgba(0, 217, 255, 0.15); } 100% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.25); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ SCROLL REVEAL — [data-reveal] ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal="fade"] { transform: none; } [data-reveal="fade"].is-visible { opacity: 1; transform: none; } [data-reveal="scale"] { transform: scale(0.94); opacity: 0; transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-bounce); } [data-reveal="scale"].is-visible { transform: scale(1); opacity: 1; } /* ============================================================ PAGE LOAD SEQUENCE — Homepage All triggered by .page-loaded class on ============================================================ */ /* All animated elements start invisible until .page-loaded fires */ .page-home .site-header, .hero-eyebrow, .hero-headline, .hero-subhead, .hero-cta-row, .hero-badge, .hero-bg-overlay { opacity: 0; } /* Header — 0ms */ .page-loaded .page-home .site-header { animation: fadeDown var(--duration-slow) var(--ease-out) 0ms forwards; } /* Hero eyebrow — 100ms */ .page-loaded .hero-eyebrow { animation: fadeUp var(--duration-slow) var(--ease-out) 100ms forwards; } /* Hero headline (H1) — 200ms */ .page-loaded .hero-headline { animation: fadeUp var(--duration-xslow) var(--ease-out) 200ms forwards; } /* Hero subheadline — 350ms */ .page-loaded .hero-subhead { animation: fadeUp var(--duration-slow) var(--ease-out) 350ms forwards; } /* CTA row — 480ms */ .page-loaded .hero-cta-row { animation: fadeUp var(--duration-slow) var(--ease-out) 480ms forwards; } /* Platform badge — 580ms */ .page-loaded .hero-badge { animation: fadeIn var(--duration-normal) var(--ease-default) 580ms forwards; } /* Background overlay — 200ms (parallel with headline) */ .page-loaded .hero-bg-overlay { animation: fadeIn var(--duration-xslow) var(--ease-linear) 200ms forwards; } /* Stat grid stagger — 680ms base, +80ms each */ .page-loaded .stat-grid .stat-item:nth-child(1) { animation: fadeUp var(--duration-slow) var(--ease-out) 680ms forwards; } .page-loaded .stat-grid .stat-item:nth-child(2) { animation: fadeUp var(--duration-slow) var(--ease-out) 760ms forwards; } .page-loaded .stat-grid .stat-item:nth-child(3) { animation: fadeUp var(--duration-slow) var(--ease-out) 840ms forwards; } .page-loaded .stat-grid .stat-item:nth-child(4) { animation: fadeUp var(--duration-slow) var(--ease-out) 920ms forwards; } /* All other pages — simple group fade-up */ .page-hero-content { opacity: 0; } .page-loaded .page-hero-content { animation: fadeUp var(--duration-slow) var(--ease-out) 80ms forwards; } /* ============================================================ GLOBAL INTERACTIVE TRANSITIONS ============================================================ */ a, button, [role="button"], input, select, textarea { transition: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), opacity var(--duration-fast) var(--ease-default); } /* Card transitions */ .card, .strategy-card, .testimonial-card, .feature-card, .related-strategy-card, .pricing-card { transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); } /* will-change for hoverable cards */ .strategy-card:hover, .feature-card:hover, .pricing-card:hover { will-change: transform; } /* ============================================================ PREFERS-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; scroll-behavior: auto !important; } [data-reveal], .reveal, .reveal-up, .reveal-fade, .reveal-scale { opacity: 1 !important; transform: none !important; visibility: visible !important; } .equity-curve-path { stroke-dashoffset: 0 !important; transition: none !important; } .btn-pulse { animation: none !important; } .page-leaving main { opacity: 1 !important; transition: none !important; } /* Ensure page-load animated elements are immediately visible */ .page-home .site-header, .hero-eyebrow, .hero-headline, .hero-subhead, .hero-cta-row, .hero-badge, .hero-bg-overlay, .page-hero-content, .stat-grid .stat-item { opacity: 1 !important; animation: none !important; } }