/* ========================================================================== Animations — GSAP initial states, scroll-triggered transitions ========================================================================== */ /* ── GSAP Initial States ── */ /* Elements with data-animate start hidden and are revealed by ScrollTrigger */ [data-animate] { opacity: 0; } [data-animate="fade-up"] { transform: translateY(40px); } [data-animate="fade-in"] { transform: none; } [data-animate="scale-in"] { transform: scale(0.95); } /* Fallback: if GSAP hasn't loaded after 2s, reveal everything. JS adds .gsap-ready to once GSAP initializes. */ .no-js [data-animate], .no-js [data-animate-stagger] > * { opacity: 1; transform: none; } /* Timeout-based fallback — animations.js adds .gsap-ready to . If it never fires (CDN blocked, file:// protocol), this kicks in. */ @keyframes reveal-fallback { to { opacity: 1; transform: none; } } html:not(.gsap-ready) [data-animate], html:not(.gsap-ready) [data-animate-stagger] > * { animation: reveal-fallback 0s 2s forwards; } /* ── Hero Headline Letter Animation ── */ .hero__headline .char { display: inline-block; opacity: 0; transform: translateY(60px) rotateX(-40deg); transform-origin: center bottom; } /* ── Hero Marquee Position ── */ .hero__marquee { position: absolute; bottom: var(--space-lg); left: 0; right: 0; z-index: 2; mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent); } /* ── Staggered Children ── */ [data-animate-stagger] > * { opacity: 0; transform: translateY(30px); } /* ── Smooth Section Dividers ── */ .section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(80%, 600px); height: 1px; background: linear-gradient(90deg, transparent, var(--color-border), transparent); pointer-events: none; } .section--hero::before, .section:first-of-type::before { display: none; } /* ── Glow Background Effect (for hero and contact) ── */ .hero::after { content: ''; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 500px; background: radial-gradient( ellipse at center, rgba(67, 169, 223, 0.08) 0%, rgba(142, 104, 173, 0.04) 40%, transparent 70% ); z-index: 0; pointer-events: none; }