/* ============================================
   TRIBU — Animaciones suaves
   ============================================ */

/* Base: elementos ocultos antes de animar */
.anim-fade,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale,
.anim-line {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

/* Fade simple */
.anim-fade {
    opacity: 0;
}
.anim-fade.visible {
    opacity: 1;
}

/* Fade + subir */
.anim-fade-up {
    opacity: 0;
    transform: translateY(40px);
}
.anim-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade + bajar */
.anim-fade-down {
    opacity: 0;
    transform: translateY(-30px);
}
.anim-fade-down.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade + izquierda */
.anim-fade-left {
    opacity: 0;
    transform: translateX(-40px);
}
.anim-fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade + derecha */
.anim-fade-right {
    opacity: 0;
    transform: translateX(40px);
}
.anim-fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale suave */
.anim-scale {
    opacity: 0;
    transform: scale(0.96);
}
.anim-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Línea que se expande */
.anim-line {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}
.anim-line.visible {
    opacity: 1;
    transform: scaleX(1);
}

/* Stagger delays para grids */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }

/* Hero: animación especial más lenta */
.hero h1 {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.hero p {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards;
}

.hero .hero-actions {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s forwards;
}

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

/* Hover suave en imágenes */
.card-img img {
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Nav link underline animation ya está en estilos.css */

/* Smooth page transitions */
.site-main {
    animation: pageFadeIn 0.5s ease-out;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .anim-fade,
    .anim-fade-up,
    .anim-fade-down,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale,
    .anim-line,
    .hero h1,
    .hero p,
    .hero .hero-actions,
    .destacados-header--featured .destacados-header-line,
    .destacados-header--featured .destacados-header-pill,
    .destacados-header--featured .destacados-header-title,
    .destacados-header--featured .destacados-header-desc,
    .destacados-header--featured .destacados-ver-todos--inline {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}