... tu contenido hero ...
════════════════════════════════════════════════════════════════════ */
.vfx-aurora {
position: relative;
overflow: hidden;
background: var(--slate-900, var(--slate-900));
isolation: isolate;
}
/* Blobs de color que derivan — cada uno con su órbita */
.vfx-aurora-blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
will-change: transform;
}
.vfx-aurora-blob.b1 {
width: 460px; height: 460px;
background: radial-gradient(circle, var(--brand-blue), transparent 70%);
top: -160px; left: -80px;
animation: vfx-drift-1 18s ease-in-out infinite;
}
.vfx-aurora-blob.b2 {
width: 380px; height: 380px;
background: radial-gradient(circle, var(--success-bright), transparent 70%);
bottom: -140px; right: 10%;
opacity: 0.38;
animation: vfx-drift-2 22s ease-in-out infinite;
}
.vfx-aurora-blob.b3 {
width: 420px; height: 420px;
background: radial-gradient(circle, var(--brand-violet), transparent 70%);
top: 20%; right: -120px;
opacity: 0.42;
animation: vfx-drift-3 26s ease-in-out infinite;
}
@keyframes vfx-drift-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(60px, 40px) scale(1.12); }
66% { transform: translate(30px, 80px) scale(0.95); }
}
@keyframes vfx-drift-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-70px, -50px) scale(1.15); }
}
@keyframes vfx-drift-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-50px, 60px) scale(0.9); }
75% { transform: translate(-30px, -40px) scale(1.1); }
}
/* Capa de grano sutil — da textura premium, evita el banding del blur */
.vfx-aurora-grain {
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.5;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
background-size: 3px 3px;
}
/* Reacción al cursor — JS mueve --mx / --my (0..1). Una capa extra de luz
sigue al puntero, como un foco suave. */
.vfx-aurora-glow {
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
340px circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.3) * 100%),
rgba(125, 211, 252, 0.12),
transparent 60%
);
transition: background 0.18s ease;
}
/* El contenido del hero va por encima de todo */
.vfx-aurora > *:not(.vfx-aurora-blob):not(.vfx-aurora-grain):not(.vfx-aurora-glow) {
position: relative;
z-index: 2;
}
/* ── Aurora reutilizable (drop-in) ──────────────────────────────────────
Convierte cualquier contenedor (hero, panel) en anfitrión de la aurora
SIN tocar su fondo: la capa es transparente y solo aloja los blobs.
Uso: