/* ═══════════════════════════════════════════════════════════════ AI FOR ALL NETWORK — Motion & 3D Design System FILE: /css/animations.css Add to every page after style.css: This file adds all motion, 3D, and visual effects. Works alongside style.css — does not replace it. ═══════════════════════════════════════════════════════════════ */ /* ── Global ────────────────────────────────────────────────── */ /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--navy); } ::-webkit-scrollbar-thumb { background: rgba(0,229,192,.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--teal); } /* Text selection */ ::selection { background: rgba(0,229,192,.25); color: #fff; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* ── Scroll reveal ─────────────────────────────────────────── */ /* Add class 'reveal' to any element — it fades up on scroll */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger children with reveal-children */ .reveal-children > * { opacity: 0; transform: translateY(24px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); } .reveal-children.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: .05s; } .reveal-children.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: .12s; } .reveal-children.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: .19s; } .reveal-children.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: .26s; } .reveal-children.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: .33s; } .reveal-children.visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay: .40s; } /* ── Hero stagger animation ────────────────────────────────── */ .hero-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .hero-stagger.loaded > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: .1s; } .hero-stagger.loaded > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: .22s; } .hero-stagger.loaded > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: .36s; } .hero-stagger.loaded > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: .50s; } .hero-stagger.loaded > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: .64s; } /* ── Animated gradient mesh hero background ────────────────── */ .hero-mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-mesh::before { content: ""; position: absolute; inset: -50%; background: conic-gradient( from 0deg at 30% 40%, rgba(0,229,192,.0) 0deg, rgba(0,229,192,.08) 60deg, rgba(56,189,248,.05) 120deg, rgba(167,139,250,.06) 180deg, rgba(0,229,192,.04) 240deg, rgba(56,189,248,.07) 300deg, rgba(0,229,192,.0) 360deg ); animation: meshRotate 18s linear infinite; filter: blur(60px); } .hero-mesh::after { content: ""; position: absolute; inset: -30%; background: conic-gradient( from 180deg at 70% 60%, rgba(167,139,250,.0) 0deg, rgba(167,139,250,.06) 80deg, rgba(0,229,192,.04) 160deg, rgba(56,189,248,.07) 240deg, rgba(167,139,250,.0) 360deg ); animation: meshRotate 24s linear infinite reverse; filter: blur(80px); } @keyframes meshRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Floating orbs in hero ─────────────────────────────────── */ .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; animation: orbFloat linear infinite; } .hero-orb-1 { width: 300px; height: 300px; top: -80px; left: 10%; background: radial-gradient(circle, rgba(0,229,192,.06) 0%, transparent 70%); animation-duration: 20s; } .hero-orb-2 { width: 200px; height: 200px; top: 30%; right: 8%; background: radial-gradient(circle, rgba(56,189,248,.07) 0%, transparent 70%); animation-duration: 15s; animation-direction: reverse; } .hero-orb-3 { width: 250px; height: 250px; bottom: -50px; left: 40%; background: radial-gradient(circle, rgba(167,139,250,.05) 0%, transparent 70%); animation-duration: 25s; } @keyframes orbFloat { 0%,100% { transform: translateY(0px) translateX(0px); } 25% { transform: translateY(-20px) translateX(10px); } 50% { transform: translateY(-10px) translateX(-15px); } 75% { transform: translateY(-25px) translateX(8px); } } /* ── Glowing pulse button ──────────────────────────────────── */ .btn-glow { position: relative; overflow: visible !important; } .btn-glow::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--teal); opacity: 0; filter: blur(12px); transition: opacity .3s; z-index: -1; } .btn-glow:hover::after { opacity: .4; } /* Pulse ring animation on Join Free */ .btn-pulse { position: relative; } .btn-pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--teal); opacity: 0; animation: btnPulse 2.5s ease-out infinite; } @keyframes btnPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } } /* ── 3D Card tilt ──────────────────────────────────────────── */ /* Applied via JS — these are the transition/transform styles */ .tilt-card { transition: transform .15s ease, box-shadow .15s ease; transform-style: preserve-3d; will-change: transform; } .tilt-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); } /* Shine overlay — created by JS on mouse move */ .tilt-shine { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.06) 0%, transparent 60% ); pointer-events: none; opacity: 0; transition: opacity .2s; } .tilt-card:hover .tilt-shine { opacity: 1; } /* Color glow under audience cards */ .tilt-card.kids-glow:hover { box-shadow: 0 20px 50px rgba(0,229,192,.15), 0 0 0 1px rgba(0,229,192,.2); } .tilt-card.teens-glow:hover { box-shadow: 0 20px 50px rgba(56,189,248,.15), 0 0 0 1px rgba(56,189,248,.2); } .tilt-card.adults-glow:hover { box-shadow: 0 20px 50px rgba(167,139,250,.15),0 0 0 1px rgba(167,139,250,.2); } .tilt-card.seniors-glow:hover { box-shadow: 0 20px 50px rgba(245,158,11,.15), 0 0 0 1px rgba(245,158,11,.2); } /* ── Glass morphism cards ──────────────────────────────────── */ .glass-card { background: rgba(11,26,48,.7) !important; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.09) !important; } /* ── Shimmer sweep on card images ──────────────────────────── */ .shimmer-img { position: relative; overflow: hidden; } .shimmer-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60% ); transform: translateX(-100%); transition: none; } .shimmer-img:hover::after { transform: translateX(100%); transition: transform .5s ease; } /* ── Typewriter effect ─────────────────────────────────────── */ .typewriter { border-right: 2px solid var(--purple); white-space: nowrap; overflow: hidden; width: 0; animation: typeIn var(--type-duration, 1.2s) steps(var(--type-steps, 20)) .5s forwards, blinkCursor .75s step-end 1.5s 4; } .typewriter.done { border-right-color: transparent; } @keyframes typeIn { from { width: 0; } to { width: 100%; } } @keyframes blinkCursor { 0%,100% { border-right-color: var(--purple); } 50% { border-right-color: transparent; } } /* ── Word of the Day glow ──────────────────────────────────── */ .wotd-word-glow { text-shadow: 0 0 30px rgba(167,139,250,.3), 0 0 60px rgba(167,139,250,.15); animation: wotdPulse 4s ease-in-out infinite; } @keyframes wotdPulse { 0%,100% { text-shadow: 0 0 30px rgba(167,139,250,.3), 0 0 60px rgba(167,139,250,.15); } 50% { text-shadow: 0 0 50px rgba(167,139,250,.5), 0 0 80px rgba(167,139,250,.25); } } /* ── Tool icon spin ────────────────────────────────────────── */ .sb-tool-icon { transition: transform .4s cubic-bezier(.34,1.56,.64,1); } .sb-tool:hover .sb-tool-icon { transform: rotate(360deg); } /* Amber shimmer on tool rows */ .sb-tool { position: relative; overflow: hidden; transition: background .2s; } .sb-tool::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(245,158,11,.06), transparent); transform: translateX(-100%); pointer-events: none; } .sb-tool:hover::after { transform: translateX(100%); transition: transform .4s ease; } .sb-tool:hover { background: rgba(245,158,11,.03); } /* ── Leaderboard row slide in ──────────────────────────────── */ .lb-animate .sb-lb-row { opacity: 0; transform: translateX(-12px); transition: opacity .4s ease, transform .4s ease; } .lb-animate.visible .sb-lb-row:nth-child(1) { opacity:1; transform:translateX(0); transition-delay: .05s; } .lb-animate.visible .sb-lb-row:nth-child(2) { opacity:1; transform:translateX(0); transition-delay: .12s; } .lb-animate.visible .sb-lb-row:nth-child(3) { opacity:1; transform:translateX(0); transition-delay: .19s; } /* ── Number count up (targets .count-up elements) ─────────── */ .count-up { transition: all .1s; } /* ── Input glow on focus ───────────────────────────────────── */ .sb-nl-input:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(0,229,192,.12); background: rgba(0,229,192,.04) !important; } /* ── Button ripple ─────────────────────────────────────────── */ .ripple-btn { position: relative; overflow: hidden; } .ripple-btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.25); transform: scale(0); animation: rippleAnim .5s linear; pointer-events: none; } @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } } /* ── Section label line draw ───────────────────────────────── */ .hp-section-label { position: relative; overflow: hidden; } .hp-section-label::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 0%; background: linear-gradient(90deg, var(--teal), transparent); transition: width 1s cubic-bezier(.16,1,.3,1); } .hp-section-label.line-drawn::after { width: 100%; } /* ── Badge shimmer ─────────────────────────────────────────── */ .hp-spot-badge { animation: badgeBounce .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes badgeBounce { from { transform: scale(0) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } /* ── Audience card top line draw ───────────────────────────── */ .hp-aud-card::before { transition: transform .3s ease; transform-origin: left; transform: scaleX(0); } .hp-aud-card.in-view::before { transform: scaleX(1); } /* ── Sidebar newsletter glow ───────────────────────────────── */ .sb-card-accent.nl { transition: box-shadow .3s; } .sb-card-accent.nl:focus-within { box-shadow: 0 0 0 2px rgba(0,229,192,.2), 0 8px 32px rgba(0,229,192,.08); } /* ── Mouse-tracking radial glow in hero ────────────────────── */ .hero-mouse-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 600px circle at var(--mx, 50%) var(--my, 50%), rgba(0,229,192,.05), transparent 50% ); transition: background .1s; } /* ── Benefit card hover ────────────────────────────────────── */ .hp-benefit { transition: background .2s, border-color .2s, transform .2s; } .hp-benefit:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); transform: translateY(-2px); } .hp-benefit-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .hp-benefit:hover .hp-benefit-icon { transform: scale(1.25) rotate(-5deg); } /* ── Quick link hover bar ──────────────────────────────────── */ .sb-quick-link { position: relative; transition: color .2s, padding-left .2s; }