Sync: refine glow animations and adjust particle sizes for enhanced visual dynamics

This commit is contained in:
Matt Batchelder
2026-02-21 15:02:25 -05:00
parent 018928dd9b
commit 66b6b9cbfb

View File

@@ -2915,18 +2915,18 @@ p:last-child { margin-bottom: 0; }
@keyframes glow-appear {
from { opacity: 0; filter: blur(80px); transform: translate(-50%, -50%) scale(0.2); }
to { opacity: 0.65; filter: blur(22px); transform: translate(-50%, -50%) scale(1); }
to { opacity: 0.65; filter: blur(22px); transform: translate(-50%, -50%) scale(0.85); }
}
@keyframes glow-drift {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
15% { transform: translate(-20%, -30%) scale(1.15); opacity: 0.75; }
30% { transform: translate(-65%, -70%) scale(0.9); opacity: 0.55; }
45% { transform: translate(-80%, -40%) scale(1.1); opacity: 0.8; }
60% { transform: translate(-30%, -75%) scale(0.95); opacity: 0.65; }
75% { transform: translate(-70%, -25%) scale(1.2); opacity: 0.75; }
90% { transform: translate(-40%, -60%) scale(1.05); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.6; }
15% { transform: translate(-20%, -30%) scale(1.35); opacity: 0.75; }
30% { transform: translate(-65%, -70%) scale(0.65); opacity: 0.5; }
45% { transform: translate(-80%, -40%) scale(1.45); opacity: 0.8; }
60% { transform: translate(-30%, -75%) scale(0.7); opacity: 0.55; }
75% { transform: translate(-70%, -25%) scale(1.5); opacity: 0.75; }
90% { transform: translate(-40%, -60%) scale(0.8); opacity: 0.65; }
100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.6; }
}
/* Particle container */
@@ -2966,8 +2966,8 @@ p:last-child { margin-bottom: 0; }
position: absolute;
top: 50%;
left: 50%;
width: 950px;
height: 950px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.32) 0%, rgba(var(--color-primary-rgb), 0.14) 45%, rgba(var(--color-primary-rgb), 0.04) 70%, transparent 90%);
z-index: 1;
@@ -3031,14 +3031,14 @@ p:last-child { margin-bottom: 0; }
.hero-particle,
.hero-animated__glow {
animation: none;
opacity: 0.65;
transform: translate(-50%, -50%);
opacity: 0.6;
transform: translate(-50%, -50%) scale(0.85);
filter: blur(22px);
}
}
@media (max-width: 768px) {
.hero-animated__glow { width: 580px; height: 580px; }
.hero-animated__glow { width: 340px; height: 340px; }
.hero-animated__inner { padding-block: 7rem 4rem; }
.hero-stats--three { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
}