/* ========================================================================== ANIMATIONS — Motion Design System CSS Keyframes, initial states, transitions, and reduced-motion overrides. All JS-driven animations reference these classes. ========================================================================== */ /* ========================================================================== No-JS / JS-Failed Fallback (Progressive Enhancement) Entrance elements are hidden below so GSAP can animate them in. But if JS never activates (JS disabled, module blocked on file://, stale cached entry that 404s, GSAP CDN blocked, etc.), enhance.js never adds — or later removes — the `js` class on . In that state we force everything visible so the section cards are NEVER stranded invisible. When JS is healthy, has the `js` class and these overrides don't apply, so animations work normally. ========================================================================== */ html:not(.js) .reveal, html:not(.js) .hero__title .word, html:not(.js) .hero__lede, html:not(.js) .hero__ctas, html:not(.js) .hero__ctas .btn, html:not(.js) .hero__note, html:not(.js) .hero__stage, html:not(.js) .thesis__cards .card, html:not(.js) .eco-grid .eco, html:not(.js) .vision__horizon .horizon-card, html:not(.js) .funnel__row .funnel__node, html:not(.js) .funnel__row > div:last-child, html:not(.js) .steps .step, html:not(.js) .cta-card, html:not(.js) .pilot, html:not(.js) .info-note { opacity: 1 !important; transform: none !important; clip-path: none !important; } /* ========================================================================== Scroll Reveal — FOUC Guard .reveal elements start hidden so they don't flash before GSAP animates them in. Directional anim-* classes were removed (unused); GSAP drives every entrance via inline styles set on initialization. ========================================================================== */ .reveal { opacity: 0; transform: translateY(22px); } /* ========================================================================== Hero Section — Initial States These are set by CSS to prevent FOUC, then animated by GSAP on load. ========================================================================== */ .hero__title .word { display: inline-block; opacity: 0; transform: translateY(40px) rotate(2deg); transform-origin: left bottom; } .hero__lede { opacity: 0; transform: translateY(24px); } .hero__ctas { opacity: 0; transform: translateY(20px); } .hero__ctas .btn { opacity: 0; transform: scale(0.85) translateY(10px); } .hero__note { opacity: 0; transform: translateY(14px); } .hero__stage { opacity: 0; transform: translateY(30px) scale(0.96); } /* Eyebrow — initial state for line draw animation */ .hero .eyebrow::before { transform: scaleX(0); transform-origin: left center; transition: transform 0.5s var(--ease-out-expo); } .hero .eyebrow.anim-active::before { transform: scaleX(1); } /* ========================================================================== Hero Background Motion ========================================================================== */ /* Animated gradient orb */ .hero::before { animation: hero-gradient-orbit 15s ease-in-out infinite; will-change: transform; } @keyframes hero-gradient-orbit { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); } 33% { transform: translateX(-45%) translateY(-20px) scale(1.05); } 66% { transform: translateX(-55%) translateY(15px) scale(0.97); } } /* Floating ambient orbs */ .hero__orb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; filter: blur(60px); opacity: 0; } .hero__orb--1 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(123, 79, 224, 0.15), transparent 70%); top: 20%; right: -5%; animation: orb-float-1 18s ease-in-out infinite; } .hero__orb--2 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(63, 169, 232, 0.12), transparent 70%); bottom: 10%; left: 5%; animation: orb-float-2 22s ease-in-out infinite; } .hero__orb--3 { width: 160px; height: 160px; background: radial-gradient(circle, rgba(123, 79, 224, 0.1), transparent 70%); top: 60%; left: 40%; animation: orb-float-3 20s ease-in-out infinite; } @keyframes orb-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-30px, 20px) scale(1.08); } 50% { transform: translate(15px, -25px) scale(0.95); } 75% { transform: translate(-10px, 15px) scale(1.03); } } @keyframes orb-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(25px, -15px) scale(1.06); } 60% { transform: translate(-20px, 20px) scale(0.97); } } @keyframes orb-float-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-15px, -20px) scale(1.04); } 70% { transform: translate(20px, 10px) scale(0.96); } } /* ========================================================================== Scroll Indicator ========================================================================== */ .scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; cursor: pointer; z-index: 2; } .scroll-indicator__mouse { width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 12px; position: relative; } .scroll-indicator__dot { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: var(--gradient-brand); border-radius: 2px; animation: scroll-dot-bounce 1.8s var(--ease-in-out-quart) infinite; } .scroll-indicator__text { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); } @keyframes scroll-dot-bounce { 0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.3; transform: translateX(-50%) translateY(14px); } } /* ========================================================================== SVG Bridge Drawing (Hero Stage) ========================================================================== */ .bridge { stroke-dasharray: 260; stroke-dashoffset: 260; } .in-view .bridge--1 { animation: draw 1.2s var(--ease-out-quart) 0.5s forwards; } .in-view .bridge--2 { animation: draw 1.2s var(--ease-out-quart) 1.2s forwards; } .in-view .bridge--3 { animation: draw 1.2s var(--ease-out-quart) 1.9s forwards; } .in-view .bridge--4 { animation: draw 1.2s var(--ease-out-quart) 2.6s forwards; } .in-view .pulse-dot { animation: pulse 2.6s ease 3.4s infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } } /* Hero stage tilt on mouse */ .hero__stage { transition: transform 0.4s var(--ease-smooth); will-change: transform; } /* ========================================================================== Navigation — Scroll Animations ========================================================================== */ /* Nav shrink on scroll */ .nav { transition: padding 0.35s var(--ease-out-quart), background 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart); } .nav--scrolled { background: rgba(14, 14, 17, 0.95); box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3); } .nav--scrolled .nav__inner { padding-top: 10px; padding-bottom: 10px; transition: padding 0.35s var(--ease-out-quart); } /* Scroll progress bar */ .nav__progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--gradient-brand); width: 0%; transition: none; will-change: width; } /* Nav link animated underline */ .nav__link::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--gradient-brand); border-radius: 1px; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease-out-expo); } .nav__link:hover::after, .nav__link--active::after { transform: scaleX(1); } /* ========================================================================== Eyebrow Line Draw ========================================================================== */ .eyebrow::before { transition: transform 0.5s var(--ease-out-expo) 0.1s; } .eyebrow.anim-drawn::before { transform: scaleX(1) !important; } /* Set initial state for JS-controlled eyebrows */ section .eyebrow::before { transform: scaleX(0); transform-origin: left center; } /* ========================================================================== Pull Quote Border Draw ========================================================================== */ .pull { position: relative; border-left-color: transparent; } .pull::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0%; background: var(--gradient-brand-180); border-radius: 2px; transition: height 0.8s var(--ease-out-expo); } .pull.anim-drawn::before { height: 100%; } /* ========================================================================== Card Cascade — stagger prep ========================================================================== */ .thesis__cards .card, .eco-grid .eco, .vision__horizon .horizon-card { opacity: 0; transform: translateY(30px); } /* ========================================================================== Funnel Node Animation ========================================================================== */ .funnel__row .funnel__node { opacity: 0; transform: scale(0.5); } .funnel__row > div:last-child { opacity: 0; transform: translateX(-20px); } /* Funnel connecting line draw */ .funnel__row::before { transform: scaleY(0); transform-origin: top center; transition: transform 0.5s var(--ease-out-quart); } .funnel__row.anim-active::before { transform: scaleY(1); } /* ========================================================================== Step Animation (How It Works) ========================================================================== */ .steps .step { opacity: 0; transform: translateX(-30px); } /* ========================================================================== Pilot Stats Counter ========================================================================== */ .pilot__stat-value { font-variant-numeric: tabular-nums; } /* ========================================================================== Contact Form — Validation Shake (focus glow, error slide, and submit states live in sections.css) ========================================================================== */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .form__input--shake, .form__textarea--shake { animation: shake 0.4s var(--ease-out-quart); } /* ========================================================================== Section Entrance Initial States These hide elements so GSAP can animate them into view without a flash. Component hover/transition styling lives in components.css & sections.css. ========================================================================== */ .cta-card { opacity: 0; transform: translateY(30px); } /* ========================================================================== Pilot Card ========================================================================== */ .pilot { opacity: 0; transform: scale(0.96); } /* ========================================================================== Info Note Entrance ========================================================================== */ .info-note { opacity: 0; transform: translateY(16px); } /* ========================================================================== Reduced Motion Override — COMPREHENSIVE ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Reset all initial states to visible */ .reveal, .hero__title .word, .hero__lede, .hero__ctas, .hero__ctas .btn, .hero__note, .hero__stage, .thesis__cards .card, .eco-grid .eco, .vision__horizon .horizon-card, .funnel__row .funnel__node, .funnel__row > div:last-child, .steps .step, .cta-card, .pilot, .info-note, .scroll-indicator { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; animation: none !important; } /* Remove background animations */ .hero::before, .hero__orb { animation: none !important; } .hero__orb { opacity: 0.5 !important; } /* SVG elements */ .bridge { stroke-dashoffset: 0 !important; } .pulse-dot { opacity: 0.4 !important; animation: none !important; } /* Remove scroll indicator */ .scroll-indicator { display: none !important; } /* Remove nav progress */ .nav__progress { display: none !important; } /* Eyebrows */ section .eyebrow::before, .hero .eyebrow::before { transform: scaleX(1) !important; } /* Pull quote */ .pull::before { height: 100% !important; } /* Funnel lines */ .funnel__row::before { transform: scaleY(1) !important; } /* Keep simple hover color changes but remove transforms */ .btn--gradient:hover, .btn--ghost:hover, .card:hover, .eco:hover, .horizon-card:hover, .cta-card:hover, .back-to-top:hover { transform: none !important; } /* Form shake */ .form__input--shake, .form__textarea--shake { animation: none !important; } }