/* assets/css/animations.css */ /* =========================================================================== TechBasePro — Scroll animation states. GSAP/ScrollTrigger drives the timing; this file declares the *initial* (pre-animation) states and the will-change hints. Everything degrades gracefully and is fully disabled under prefers-reduced-motion. IMPORTANT: initial hidden states are scoped to .js-anim-ready on , which animations.js adds only after GSAP loads. Without JS, content is visible by default (no FOUC, no blank page). =========================================================================== */ /* --------------------------------------------------------------------------- 1. will-change hints (applied only to elements we actually animate) --------------------------------------------------------------------------- */ .anim-fade-up, .anim-stagger > *, .anim-card, .story-line, .hero-word { will-change: transform, opacity; } /* --------------------------------------------------------------------------- 2. Initial states — only when JS animation is enabled --------------------------------------------------------------------------- */ .js-anim-ready .anim-fade-up { opacity: 0; transform: translateY(40px); } /* Generic staggered children (problem columns, etc.) */ .js-anim-ready .anim-stagger > * { opacity: 0; transform: translateY(30px); } /* Automation / vertical cards: scale in from center */ .js-anim-ready .anim-card { opacity: 0; transform: scale(0.92); } /* Hero word-by-word reveal */ .js-anim-ready .hero-word { display: inline-block; opacity: 0; transform: translateY(0.6em); } /* Hero proof bar slides up after headline */ .js-anim-ready .hero-proof { opacity: 0; transform: translateY(24px); } /* Story section paragraph reveal */ .js-anim-ready .story-line { opacity: 0; transform: translateY(20px); } /* Process connecting line draws itself */ .js-anim-ready .process-line__fill { transform: scaleX(0); transform-origin: left center; } /* --------------------------------------------------------------------------- 3. Keyframe animations (CSS-driven, used outside GSAP) --------------------------------------------------------------------------- */ /* Scroll-down chevron bob */ @keyframes chevron-bob { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } } .scroll-indicator { animation: chevron-bob 2s ease-in-out infinite; } /* Subtle hero mesh drift (very slow, GPU-light) */ @keyframes mesh-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1%, 0) scale(1.04); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero-mesh { animation: mesh-drift 24s ease-in-out infinite; } /* Form success slide-in */ @keyframes slide-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-success.is-visible { animation: slide-in-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Spinner for submit button */ @keyframes spin { to { transform: rotate(360deg); } } .btn-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.15em; } /* --------------------------------------------------------------------------- 4. Hover micro-interactions handled here (transform-based) --------------------------------------------------------------------------- */ .hover-lift { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); } .hover-lift:hover { transform: translateY(-6px); } /* --------------------------------------------------------------------------- 5. Reduced motion — disable everything --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* Force all animated content visible and static */ .js-anim-ready .anim-fade-up, .js-anim-ready .anim-stagger > *, .js-anim-ready .anim-card, .js-anim-ready .hero-word, .js-anim-ready .hero-proof, .js-anim-ready .story-line { opacity: 1 !important; transform: none !important; } .js-anim-ready .process-line__fill { transform: scaleX(1) !important; } .scroll-indicator, .hero-mesh, .form-success.is-visible, .btn-spinner { animation: none !important; } /* Video paused by JS under reduced motion; keep poster frame visible */ .hero-video { opacity: 0.5 !important; transition: none !important; } .hover-lift:hover { transform: none; } }