/*
 * animations.css — Nuestro Tiempo Theme
 *
 * Sistema de animaciones de scroll con IntersectionObserver.
 * Sin dependencias de JS externas — funciona con el micro-script
 * incluido en functions.php.
 *
 * Uso:
 *   Añade .nt-fade-up, .nt-fade-in, o .nt-scale-in al elemento.
 *   Control de delay: style="--nt-delay: 0.2s;"
 *
 * @package nuestro-tiempo
 */

/* =============================================================================
   ESTADOS INICIALES (antes de entrar al viewport)
   ============================================================================= */

.nt-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.5s ease var(--nt-delay, 0s),
        transform 0.6s ease var(--nt-delay, 0s);
}

.nt-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease var(--nt-delay, 0s);
}

.nt-scale-in {
    opacity: 0;
    transform: scale(0.97);
    transition:
        opacity 0.6s ease var(--nt-delay, 0s),
        transform 0.6s ease var(--nt-delay, 0s);
}

/* Slide desde la izquierda */
.nt-slide-left {
    opacity: 0;
    transform: translateX(-24px);
    transition:
        opacity 0.5s ease var(--nt-delay, 0s),
        transform 0.5s ease var(--nt-delay, 0s);
}

/* Slide desde la derecha */
.nt-slide-right {
    opacity: 0;
    transform: translateX(24px);
    transition:
        opacity 0.5s ease var(--nt-delay, 0s),
        transform 0.5s ease var(--nt-delay, 0s);
}


/* =============================================================================
   ESTADO VISIBLE (después de entrar al viewport)
   ============================================================================= */

.nt-fade-up.is-visible,
.nt-fade-in.is-visible,
.nt-scale-in.is-visible,
.nt-slide-left.is-visible,
.nt-slide-right.is-visible {
    opacity: 1;
    transform: none;
}


/* =============================================================================
   FALLBACK SIN JS
   ============================================================================= */

html:not(.js) .nt-fade-up,
html:not(.js) .nt-fade-in,
html:not(.js) .nt-scale-in,
html:not(.js) .nt-slide-left,
html:not(.js) .nt-slide-right {
    opacity: 1 !important;
    transform: none !important;
}


/* =============================================================================
   KEYFRAMES UTILITARIOS
   ============================================================================= */

/* Línea de cobre que crece de izquierda a derecha */
@keyframes nt-line-grow {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 100%;
        opacity: 1;
    }
}

/* Pulso suave para indicadores de scroll */
@keyframes nt-pulse-down {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

/* Aparecer desde abajo para el hero */
@keyframes nt-hero-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom suave para imagen de fondo del hero */
@keyframes nt-zoom-in {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

.nt-line-grow {
    animation: nt-line-grow 0.6s ease forwards;
}

.nt-pulse-down {
    animation: nt-pulse-down 2s ease-in-out infinite;
}

.nt-hero-in {
    animation: nt-hero-in 1s ease forwards;
}

.nt-zoom-in {
    animation: nt-zoom-in 1.4s ease forwards;
}