/**
 * magicfront-animations.css
 *
 * Sistema de animaciones de entrada al hacer scroll.
 * Replica el comportamiento original de GSAP + ScrollTrigger del proyecto MagicFront.
 * Compatible con WordPress + Bricks Builder.
 *
 * USO EN BRICKS:
 * Añade la clase CSS al elemento en el panel de Bricks → Style → CSS Classes.
 * No necesitas configurar nada más; el JS se encarga de activarlas al entrar en viewport.
 *
 * CLASES DISPONIBLES (elementos individuales):
 * ─────────────────────────────────────────────
 *  anim-fade            → Solo fade-in (sin movimiento)
 *  anim-fade-up         → Sube 30px + fade  ← la más usada en el diseño original
 *  anim-fade-up-md      → Sube 50px + fade
 *  anim-fade-up-lg      → Sube 80px + escala 0.95→1 + fade  (para bloques héroe/grandes)
 *  anim-fade-left       → Viene de izquierda 30px + fade
 *  anim-fade-left-lg    → Viene de izquierda 50px + fade
 *  anim-fade-right      → Viene de derecha 40px + fade
 *  anim-fade-right-lg   → Viene de derecha 50px + fade
 *
 * CLASES DE CONTENEDOR (stagger: los hijos se animan en cascada):
 * ────────────────────────────────────────────────────────────────
 *  anim-stagger         → Hijos se animan hacia arriba en cascada (fade-up 30px)
 *  anim-stagger-left    → Hijos se animan desde izquierda en cascada
 *
 * MODIFICADORES (se combinan con cualquier clase de arriba):
 * ──────────────────────────────────────────────────────────
 *  anim-delay-1         → +100ms de delay
 *  anim-delay-2         → +200ms de delay
 *  anim-delay-3         → +300ms de delay
 *  anim-delay-4         → +400ms de delay
 *  anim-delay-5         → +500ms de delay
 *  anim-slow            → Duración más lenta (1s en vez de 0.6s)
 *  anim-fast            → Duración más rápida (0.4s)
 */

/* ─── CONFIGURACIÓN GLOBAL ──────────────────────────────────────────────────── */

:root {
    --anim-duration:   0.6s;
    --anim-ease:       cubic-bezier(0.16, 1, 0.3, 1); /* equivalent a power2.out de GSAP */
    --anim-delay:      0s;
}

/* ─── ESTADO INICIAL (oculto, antes de entrar en viewport) ─────────────────── */
/*
 * Este bloque solo se carga en el frontend público.
 * En el editor de Bricks el PHP impide que este fichero se encole.
 * Ver magicfront-animations-wp-snippet.php
 */

.anim-fade,
.anim-fade-up,
.anim-fade-up-md,
.anim-fade-up-lg,
.anim-fade-left,
.anim-fade-left-lg,
.anim-fade-right,
.anim-fade-right-lg {
    opacity: 0;
    transition:
        opacity   var(--anim-duration) var(--anim-ease) var(--anim-delay),
        transform var(--anim-duration) var(--anim-ease) var(--anim-delay);
    will-change: opacity, transform;
}

/* Posiciones iniciales */
.anim-fade         { transform: none; }
.anim-fade-up      { transform: translateY(30px); }
.anim-fade-up-md   { transform: translateY(50px); }
.anim-fade-up-lg   { transform: translateY(80px) scale(0.95); }
.anim-fade-left    { transform: translateX(-30px); }
.anim-fade-left-lg { transform: translateX(-50px); }
.anim-fade-right   { transform: translateX(40px); }
.anim-fade-right-lg{ transform: translateX(50px); }

/* ─── ESTADO VISIBLE (cuando el JS añade .is-visible) ──────────────────────── */

.anim-fade.is-visible,
.anim-fade-up.is-visible,
.anim-fade-up-md.is-visible,
.anim-fade-up-lg.is-visible,
.anim-fade-left.is-visible,
.anim-fade-left-lg.is-visible,
.anim-fade-right.is-visible,
.anim-fade-right-lg.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ─── STAGGER (contenedor) ──────────────────────────────────────────────────── */
/*
 * Los hijos directos parten ocultos.
 * El JS calcula el transition-delay de cada hijo según su índice.
 * Cuando el contenedor entra en viewport, el JS añade .is-visible al contenedor.
 */

.anim-stagger > *,
.anim-stagger-left > * {
    opacity: 0;
    transition:
        opacity   var(--anim-duration) var(--anim-ease) var(--anim-delay),
        transform var(--anim-duration) var(--anim-ease) var(--anim-delay);
    will-change: opacity, transform;
}

.anim-stagger > *      { transform: translateY(30px); }
.anim-stagger-left > * { transform: translateX(-30px); }

.anim-stagger.is-visible > *,
.anim-stagger-left.is-visible > * {
    opacity: 1;
    transform: translate(0, 0);
}

/* ─── MODIFICADORES DE DELAY ────────────────────────────────────────────────── */

.anim-delay-1 { --anim-delay: 0.1s; }
.anim-delay-2 { --anim-delay: 0.2s; }
.anim-delay-3 { --anim-delay: 0.3s; }
.anim-delay-4 { --anim-delay: 0.4s; }
.anim-delay-5 { --anim-delay: 0.5s; }

/* ─── MODIFICADORES DE VELOCIDAD ────────────────────────────────────────────── */

.anim-slow { --anim-duration: 1s; }
.anim-super-slow { --anim-duration: 1.4s; }
.anim-fast { --anim-duration: 0.4s; }

/* ─── ACCESIBILIDAD: respetar preferencia del usuario ───────────────────────── */
/*
 * Si el usuario ha activado "reducir movimiento" en su sistema operativo,
 * desactivamos las transformaciones y mostramos todo directamente.
 */

@media (prefers-reduced-motion: reduce) {
    .anim-fade,
    .anim-fade-up,
    .anim-fade-up-md,
    .anim-fade-up-lg,
    .anim-fade-left,
    .anim-fade-left-lg,
    .anim-fade-right,
    .anim-fade-right-lg,
    .anim-stagger > *,
    .anim-stagger-left > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}