/* Entrada al hacer scroll
   -----------------------
   Desplazamiento corto (14px) y opacidad. La distancia es deliberadamente
   pequeña: el bloque parece "asentarse" en su sitio en lugar de viajar por
   la pantalla. La opacidad termina antes que el movimiento (al 55% del
   recorrido): el texto se lee cuanto antes y el bloque sigue posándose por
   detrás, que es lo que da la sensación de fluidez.

   Va como animación y no como transición a propósito. `transition` es una
   sola propiedad que se sobrescribe entera, no una lista que se acumule:
   como esta hoja se carga después de components.css y ambos selectores
   pesan lo mismo, un `transition` aquí anulaba el de .GlassCard y las
   tarjetas reveladas perdían el fundido de su borde al pasar el cursor.
   `animation` y `transition` son espacios distintos y no pueden pisarse. */
.Reveal {
    opacity: 0;
}

/* El relleno es `backwards`, no `both`: así el estado inicial se aplica
   durante el retardo (nada parpadea antes de entrar) pero al terminar no
   queda ningún valor fijado por la animación que se imponga sobre las
   reglas normales del elemento. */
.Reveal.is-revealed {
    opacity: 1;

    animation:
        RevealIn
        var(--dur-slow)
        var(--ease-organic)
        var(--reveal-delay, 0s)
        backwards;
}

@keyframes RevealIn {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    55% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Variante sólo de opacidad para elementos grandes (mapas, imágenes de
   fondo), donde cualquier desplazamiento se nota demasiado. */
.Reveal--fade.is-revealed {
    animation-name: RevealFadeIn;
}

@keyframes RevealFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ScrollReveal.js ya no llega a marcar nada si el sistema pide menos
   movimiento; esto cubre el caso de que la clase llegue por otra vía. */
@media (prefers-reduced-motion: reduce) {
    .Reveal {
        opacity: 1;
    }

    .Reveal.is-revealed {
        animation: none;
    }
}