diff --git a/hero-v2.html b/hero-v2.html index 8a50855..1d37c50 100644 --- a/hero-v2.html +++ b/hero-v2.html @@ -70,6 +70,11 @@ body { ); z-index: 1; pointer-events: none; + animation: glowPulse 4s ease-in-out infinite; +} +@keyframes glowPulse { + 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } + 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } } /* Layer 3: Animated gradient sweep */ @@ -78,11 +83,11 @@ body { background: linear-gradient( 90deg, transparent 0%, - transparent 32%, - rgba(255,255,255,0.025) 44%, - rgba(34,197,94,0.06) 50%, - rgba(255,255,255,0.02) 56%, - transparent 68%, + transparent 28%, + rgba(255,255,255,0.04) 40%, + rgba(34,197,94,0.15) 50%, + rgba(255,255,255,0.03) 60%, + transparent 72%, transparent 100% ); background-size: 200% 100%; @@ -358,8 +363,16 @@ let bgCurrentSpeed = 8; // lerped toward target function accelerateBg(active) { bgTargetSpeed = active ? 1.2 : 8; const glow = document.querySelector('.hero-glow'); - glow.style.opacity = active ? '1.15' : '1'; - glow.style.transition = 'opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)'; + if (active) { + glow.style.animation = 'none'; + glow.style.opacity = '1.3'; + glow.style.transform = 'translate(-50%, -50%) scale(1.08)'; + glow.style.transition = 'opacity 0.4s ease, transform 0.4s ease'; + } else { + glow.style.opacity = ''; + glow.style.transform = ''; + glow.style.animation = ''; + } } (function bgLoop() {