/* 
 * Fichero: animations.css
 * Descripción: Clases de utilidad para animaciones de entrada (scroll-triggered).
 */

/* Estado inicial: oculto y desplazado */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--ptk-dur-slow) var(--ptk-ease),
        transform var(--ptk-dur-slow) var(--ptk-ease);
    will-change: opacity, transform;
}

.fade-in {
    opacity: 0;
    transition: opacity var(--ptk-dur-slow) var(--ptk-ease);
    will-change: opacity;
}

/* Estado final: visible y en su sitio (se añade con JS) */
.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays (retrasos escalonados) */
.delay-100 {
    transition-delay: 100ms !important;
}

.delay-200 {
    transition-delay: 200ms !important;
}

.delay-300 {
    transition-delay: 300ms !important;
}

.delay-400 {
    transition-delay: 400ms !important;
}

.delay-500 {
    transition-delay: 500ms !important;
}

/* Animación de entrada del Hero (automática al cargar) */
@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

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

.hero-animate {
    animation: hero-fade-up var(--ptk-dur-hero) var(--ptk-ease) forwards;
    opacity: 1;
    /* Empieza invisible */
}

.hero-delay-1 {
    animation-delay: 200ms;
}

.hero-delay-2 {
    animation-delay: 600ms;
}

.hero-delay-3 {
    animation-delay: 1000ms;
}