/* Gris parejo con una luz suave arriba y las esquinas apagadas: el papel
   sobre el que se apoyan las secciones oscuras. */
.fondo-atmosfera {
    position: fixed;
    inset: 0;
    z-index: var(--capa-fondo);
    overflow: hidden;
    pointer-events: none;
    background-color: var(--color-fondo);
    background-image:
        radial-gradient(118% 78% at 50% 0%, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.03) 38%, transparent 68%),
        radial-gradient(90% 65% at 50% 108%, rgba(0, 0, 0, 0.55) 0%, transparent 70%),
        radial-gradient(130% 100% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.42) 100%);
}

.fondo-atmosfera__particulas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* En el hero no hay estrellas: aparecen al dejar la primera pantalla */
.fondo-atmosfera__particulas {
    opacity: var(--presencia-estrellas, 1);
    transition: opacity 0.4s var(--curva-suave);
}

.fondo-atmosfera__grano {
    position: absolute;
    inset: -50%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
    animation: vibracion-grano 1.2s steps(6) infinite;
}

@keyframes vibracion-grano {
    0% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(-3%, 2%, 0); }
    40% { transform: translate3d(2%, -3%, 0); }
    60% { transform: translate3d(-2%, -1%, 0); }
    80% { transform: translate3d(3%, 3%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .fondo-atmosfera__grano {
        animation: none;
    }
}