/*
 * brand-animations.css
 * Sistema de animaciones de scroll compartido para todos los single-brand.
 *
 * USO:
 *   Agrega una o más clases a cualquier elemento:
 *
 *   ba-reveal           → fade + sube desde abajo  (por defecto)
 *   ba-reveal--left     → entra desde la izquierda
 *   ba-reveal--right    → entra desde la derecha
 *   ba-reveal--scale    → aparece escalando desde 0.92
 *   ba-reveal--fade     → fade puro, sin movimiento
 *
 *   Stagger / retardo individual:
 *   ba-delay-1  → 100ms
 *   ba-delay-2  → 200ms
 *   ba-delay-3  → 350ms
 *   ba-delay-4  → 500ms
 *   ba-delay-5  → 700ms
 *
 *   O usa data-delay="ms" para retardos arbitrarios (manejado por JS).
 *
 *   La clase .is-visible la añade brand-animations.js via IntersectionObserver.
 */

/* ─── Easing ──────────────────────────────────────────────── */
:root {
    --ba-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
    --ba-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ba-dur:      0.75s;
    --ba-offset:   36px;
}

/* ─── Estado inicial — todos los variantes ───────────────── */
.ba-reveal {
    opacity: 0;
    transform: translateY(var(--ba-offset));
    transition:
        opacity  var(--ba-dur) var(--ba-ease),
        transform var(--ba-dur) var(--ba-ease);
    will-change: opacity, transform;
}

.ba-reveal--left {
    opacity: 0;
    transform: translateX(calc(var(--ba-offset) * -1.5));
    transition:
        opacity  var(--ba-dur) var(--ba-ease-out),
        transform var(--ba-dur) var(--ba-ease-out);
}

.ba-reveal--right {
    opacity: 0;
    transform: translateX(calc(var(--ba-offset) * 1.5));
    transition:
        opacity  var(--ba-dur) var(--ba-ease-out),
        transform var(--ba-dur) var(--ba-ease-out);
}

.ba-reveal--scale {
    opacity: 0;
    transform: scale(0.93) translateY(16px);
    transition:
        opacity  var(--ba-dur) var(--ba-ease),
        transform var(--ba-dur) var(--ba-ease);
}

.ba-reveal--fade {
    opacity: 0;
    transform: none;
    transition: opacity calc(var(--ba-dur) * 1.2) var(--ba-ease);
}

/* ─── Estado final — visible ─────────────────────────────── */
.ba-reveal.is-visible,
.ba-reveal--left.is-visible,
.ba-reveal--right.is-visible,
.ba-reveal--scale.is-visible,
.ba-reveal--fade.is-visible {
    opacity: 1;
    transform: none;
}

/* ─── Delays predefinidos ────────────────────────────────── */
.ba-delay-1 { transition-delay: 100ms; }
.ba-delay-2 { transition-delay: 200ms; }
.ba-delay-3 { transition-delay: 350ms; }
.ba-delay-4 { transition-delay: 500ms; }
.ba-delay-5 { transition-delay: 700ms; }

/* ─── Grupos: stagger automático para hijos directos ─────── */
/*
 * Agrega .ba-group al contenedor; los hijos con .ba-reveal
 * recibirán un delay escalonado automáticamente sin clases extra.
 * El JS se encarga de aplicar el delay por índice.
 */

/* ─── Línea de acento decorativa (opcional) ──────────────── */
/*
 * Envuelve texto en <span class="ba-line"> para revelar
 * un subrayado dorado que se expande desde la izquierda.
 */
.ba-line {
    position: relative;
    display: inline-block;
}
.ba-line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
    transition: width 0.9s var(--ba-ease-out);
}
.is-visible .ba-line::after,
.ba-line.is-visible::after {
    width: 100%;
}

/* ─── Mobile ─────────────────────────────────────────────── */
/*
 * En pantallas pequeñas reducimos el desplazamiento para que
 * la animación no se sienta brusca con viewports estrechos.
 */
@media (max-width: 767px) {
    :root {
        --ba-offset: 22px;
    }

    /* Las entradas laterales en mobile se convierten en fade+up
       para evitar overflow horizontal accidental */
    .ba-reveal--left,
    .ba-reveal--right {
        transform: translateY(var(--ba-offset));
        transition:
            opacity  var(--ba-dur) var(--ba-ease),
            transform var(--ba-dur) var(--ba-ease);
    }

    /* Delays más cortos: el usuario hace scroll rápido en mobile */
    .ba-delay-3 { transition-delay: 200ms; }
    .ba-delay-4 { transition-delay: 300ms; }
    .ba-delay-5 { transition-delay: 400ms; }
}

/* ─── Accesibilidad: sin movimiento ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ba-reveal,
    .ba-reveal--left,
    .ba-reveal--right,
    .ba-reveal--scale,
    .ba-reveal--fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ba-line::after {
        width: 100%;
        transition: none;
    }
}