/* ═══════════════════════════════════════════════════════ SAILSY — EFFECTS Background system, nebula, grid overlay, scroll reveal, shared animation keyframes. ═══════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────── BACKGROUND CANVAS ───────────────────────────────────────────────────── */ #bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ───────────────────────────────────────────────────── NEBULA SYSTEM ───────────────────────────────────────────────────── */ .nebula { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; } .nebula-1 { width: 800px; height: 600px; top: -150px; right: -200px; background: radial-gradient(ellipse, rgba(41,121,255,0.38) 0%, transparent 65%); animation: nebFloat1 38s ease-in-out infinite; } .nebula-2 { width: 700px; height: 500px; bottom: -120px; left: -180px; background: radial-gradient(ellipse, rgba(0,201,167,0.28) 0%, transparent 65%); animation: nebFloat2 44s ease-in-out infinite; } .nebula-3 { width: 500px; height: 400px; top: 40%; left: 30%; background: radial-gradient(ellipse, rgba(0,229,255,0.16) 0%, transparent 65%); animation: nebFloat3 32s ease-in-out infinite; } /* ───────────────────────────────────────────────────── GRID OVERLAY ───────────────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 0%, transparent 70%); } /* ───────────────────────────────────────────────────── SCROLL REVEAL Uses .js-reveal on for progressive enhancement. Elements only hide if JS is running. ───────────────────────────────────────────────────── */ .reveal { transition: opacity 0.65s ease, transform 0.65s ease; } .js-reveal .reveal { opacity: 0; transform: translateY(28px); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 80ms; } .reveal-delay-2 { transition-delay: 160ms; } .reveal-delay-3 { transition-delay: 240ms; } .reveal-delay-4 { transition-delay: 320ms; } .reveal-delay-5 { transition-delay: 400ms; } .reveal-delay-6 { transition-delay: 480ms; } /* ───────────────────────────────────────────────────── KEYFRAMES ───────────────────────────────────────────────────── */ @keyframes nebFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-80px,60px) scale(1.1); } 66% { transform: translate(40px,-80px) scale(0.93); } } @keyframes nebFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-50px) scale(1.08); } 66% { transform: translate(-40px,70px) scale(0.96); } } @keyframes nebFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,-40px) scale(1.15); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes ctaPulse { 0%,100% { box-shadow: 0 6px 32px rgba(0,229,255,0.48); } 50% { box-shadow: 0 8px 50px rgba(0,229,255,0.72); } }