/* ============================================================
   Movimiento
   Regla: nada se mueve por decoración. Cada animación sirve para
   dirigir la atención, dar continuidad o confirmar una acción.
   ============================================================ */

@keyframes entrada-menu {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes barrido {
    0% {
        transform: translateX(-100%);
    }

    60%, 100% {
        transform: translateX(100%);
    }
}

/* Revelado por scroll: el elemento entra desde abajo con máscara.
   Todo lo que oculta contenido está bajo `.js`: si los scripts no llegan,
   la página se ve entera. */
.js [data-revelar] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-salida), transform 0.9s var(--ease-salida);
    transition-delay: var(--retraso, 0ms);
}

.js [data-revelar][data-visible='true'] {
    opacity: 1;
    transform: translateY(0);
}

/* Revelado de líneas de título: se descubren desde abajo */
.js .linea-titulo > span {
    transform: translateY(105%);
    transition: transform 1.05s var(--ease-salida);
    transition-delay: var(--retraso, 0ms);
}

.js [data-visible='true'] .linea-titulo > span,
.js .linea-titulo[data-visible='true'] > span {
    transform: translateY(0);
}

/* Imagen que se descubre tras una cortina */
.revelado-medio {
    position: relative;
    overflow: hidden;
}

.js .revelado-medio::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vacio);
    transform-origin: bottom;
    transform: scaleY(1);
    transition: transform 1.2s var(--ease-salida);
    z-index: 1;
}

.revelado-medio[data-visible='true']::after {
    transform: scaleY(0);
}

.js .revelado-medio img {
    transform: scale(1.12);
    transition: transform 1.6s var(--ease-salida);
}

.js .revelado-medio[data-visible='true'] img {
    transform: scale(1);
}

/* Contador de cifras: evita el salto de layout mientras cuenta */
.cifra[data-contador] {
    font-variant-numeric: tabular-nums;
}

/* Procesos: el paso inactivo se atenúa para guiar la lectura */
.proceso[data-activo='false'] {
    opacity: 0.38;
}

@media (hover: none) {
    .proceso[data-activo='false'] {
        opacity: 1;
    }
}

/* ============================================================
   Accesibilidad del movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-revelar],
    .linea-titulo > span,
    .revelado-medio img {
        opacity: 1 !important;
        transform: none !important;
    }

    .revelado-medio::after {
        display: none;
    }

    .proceso[data-activo='false'] {
        opacity: 1;
    }

    .hero__medio img,
    .manifiesto__medio img,
    .nosotros__medio img {
        transform: none !important;
    }
}