/**
 * ═══════════════════════════════════════════════════════════
 * BLACK BIRD — Antigravity Animation System
 * Motor de animación lazy (scroll-driven) para proteger CWV
 *
 * Clases de estado CSS:
 *   .ag-element     → elemento registrado (invisible por defecto)
 *   .ag-fade-in     → fade puro
 *   .ag-slide-up    → slide desde abajo
 *   .ag-slide-left  → slide desde derecha
 *   .ag-delay-1..5  → delays incrementales
 *   .is-visible     → clase activada por JS cuando entra al viewport
 *   .is-hidden      → estado inicial (antes del scroll)
 * ═══════════════════════════════════════════════════════════
 */

/* ─── Estado inicial — oculto antes del scroll ─────────────
   IMPORTANTE: Sólo aplica cuando JS está listo.
   Sin JS, todo es visible (progressive enhancement)
   ────────────────────────────────────────────────────────── */
.js-ready .ag-element,
.js-ready .ag-fade-in,
.js-ready .ag-slide-up,
.js-ready .ag-slide-left {
  visibility: hidden;
  will-change: opacity, transform;
}

/* Estado oculto explícito (compatibilidad) */
.is-hidden {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  /* transition declarada en .ag-* classes para no sobreescribir */
}

/* ─── Antigravity: Fade In ────────────────────────────────── */
.ag-fade-in {
  opacity: 0;
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear var(--bb-duration-reveal);
}

.js-ready .ag-fade-in.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear 0s;
}

/* ─── Antigravity: Slide Up ───────────────────────────────── */
.ag-slide-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    transform var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear var(--bb-duration-reveal);
}

.js-ready .ag-slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    transform var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear 0s;
}

/* ─── Antigravity: Slide From Right (dramático) ───────────── */
.ag-slide-from-right {
  opacity: 0;
  transform: translateX(150px);
  will-change: opacity, transform;
  transition:
    opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 2.2s;
}

.js-ready .ag-slide-from-right {
  visibility: hidden;
}

.js-ready .ag-slide-from-right.is-visible {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition:
    opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
  will-change: auto;
}

.ag-slide-left {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    transform var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear var(--bb-duration-reveal);
}

.js-ready .ag-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    transform var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear 0s;
}

/* ─── Elemementos de Grid — stagger automático ─────────────
   .ag-element (usado en cards dentro de grids)
   ────────────────────────────────────────────────────────── */
.ag-element {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    transform var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear var(--bb-duration-reveal);
}

.js-ready .ag-element.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--bb-duration-reveal) var(--bb-ease-out),
    transform var(--bb-duration-reveal) var(--bb-ease-out),
    visibility 0s linear 0s;
}

/* ─── Delays escalonados ──────────────────────────────────── */
.ag-delay-1 { transition-delay: 100ms; }
.ag-delay-2 { transition-delay: 200ms; }
.ag-delay-3 { transition-delay: 300ms; }
.ag-delay-4 { transition-delay: 400ms; }
.ag-delay-5 { transition-delay: 500ms; }

/* Reset delay cuando es visible — gestionado via staggerDelay en antigravity.js */

/* ─── Estado is-visible universal ───────────────────────────
   Fallback para el toggle programático desde JS
   ────────────────────────────────────────────────────────── */
.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible !important;
}

/* ─── Antigravity: Custom H1 Reveal ────────────────────────── */
/* Usa transition, no animation, para que .is-visible no cause conflicto */
.ag-h1-reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.6s;
}

.js-ready .ag-h1-reveal {
  visibility: hidden;
}

.js-ready .ag-h1-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
  will-change: auto;
}

/* ─── Antigravity: Hero IA Pulse ──────────────────────────────
   Degradado animado que "fluye" sobre "IA." para denotar que
   está viva. Arranca después del slide-up del H1 (0.9s delay).
   ────────────────────────────────────────────────────────────── */

@keyframes ia-flow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes ia-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(26, 35, 126, 0.0); }
  50%       { text-shadow: 0 0 22px rgba(57, 73, 171, 0.35); }
}

.hero__ia-pulse {
  color: var(--bb-color-blue-primary);
  /* Mantiene la cursiva heredada del padre em */
  font-style: inherit;
  font-weight: inherit;
  display: inline;
}

/* ─── Reduced Motion — sin animaciones si el usuario lo pide ─
   Core Web Vitals: respetar prefers-reduced-motion
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ag-element,
  .ag-fade-in,
  .ag-slide-up,
  .ag-slide-left,
  .ag-slide-from-right,
  .ag-h1-reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    will-change: auto;
  }

  .is-hidden {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Sin animación de pulso — color sólido BlackBird One */
  .hero__ia-pulse {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--bb-color-blue-primary);
    color: var(--bb-color-blue-primary);
    animation: none;
    text-shadow: none;
  }
}