/* ================================================
   SCROLL ANIMATION SYSTEM — THE ORDER MATTERS
   Luxury reveal. Vanilla JS + IntersectionObserver.
   ================================================ */

/* Guard: solo ocultar elementos si JS está activo.
   Evita FOUC si el script no carga. */
.js-loaded [data-animate] {
  opacity: 0;
}

/* ------------------------------------------------
   HERO TITLE — word by word (split en JS)
   El elemento más noble. ease-out-expo + stagger.
   ------------------------------------------------ */
.js-loaded [data-animate="title-hero"] {
  opacity: 1; /* El contenedor debe ser visible para que los words se animen */
}

.js-loaded [data-animate="title-hero"] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--dur-hero) var(--ease-out-expo),
    transform var(--dur-hero) var(--ease-out-expo);
  transition-delay: calc(var(--word-i, 0) * var(--stagger-word));
}
[data-animate="title-hero"].in-view .word {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   HERO SUBTITLE
   Arranca 260ms después del primer word del título.
   ------------------------------------------------ */
.js-loaded [data-animate="subtitle"] {
  transform: translateY(18px);
  transition:
    opacity var(--dur-title) var(--ease-out-expo),
    transform var(--dur-title) var(--ease-out-expo);
  transition-delay: 260ms;
}
[data-animate="subtitle"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   HERO CTA GROUP
   Como unidad, delay mayor para secuencia limpia.
   ------------------------------------------------ */
.js-loaded [data-animate="cta-group"] {
  transform: translateY(14px);
  transition:
    opacity var(--dur-btn) var(--ease-out-quart),
    transform var(--dur-btn) var(--ease-out-quart);
  transition-delay: 480ms;
}
[data-animate="cta-group"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   SECTION TITLES — h2
   Movimiento mínimo, duración larga = luxury.
   ------------------------------------------------ */
.js-loaded [data-animate="title-section"] {
  transform: translateY(22px);
  transition:
    opacity var(--dur-title) var(--ease-out-expo),
    transform var(--dur-title) var(--ease-out-expo);
}
[data-animate="title-section"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   SECTION INTRO / PARAGRAPH INTRO
   Delay sutil para aparecer después del título.
   ------------------------------------------------ */
.js-loaded [data-animate="section-intro"] {
  transform: translateY(14px);
  transition:
    opacity var(--dur-text) var(--ease-out-cubic),
    transform var(--dur-text) var(--ease-out-cubic);
  transition-delay: 120ms;
}
[data-animate="section-intro"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   BODY TEXT — párrafos, descripciones
   ------------------------------------------------ */
.js-loaded [data-animate="body-text"] {
  transform: translateY(10px);
  transition:
    opacity var(--dur-text) var(--ease-out-cubic),
    transform var(--dur-text) var(--ease-out-cubic);
}
[data-animate="body-text"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   BENEFIT STAT — grandes números (4×, 50%, €1,500)
   Recorrido mayor + ease-expo = impacto controlado.
   ------------------------------------------------ */
.js-loaded [data-animate="stat"] {
  transform: translateY(28px);
  transition:
    opacity var(--dur-title) var(--ease-out-expo),
    transform var(--dur-title) var(--ease-out-expo);
  transition-delay: 80ms;
}
[data-animate="stat"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   ICONS — emojis de benefit/policy
   Scale desde ligeramente pequeño.
   ------------------------------------------------ */
.js-loaded [data-animate="icon"] {
  transform: scale(0.82);
  transition:
    opacity var(--dur-text) var(--ease-out-expo),
    transform var(--dur-text) var(--ease-out-expo);
}
[data-animate="icon"].in-view {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------
   CARD TITLES — h3
   ------------------------------------------------ */
.js-loaded [data-animate="title-card"] {
  transform: translateY(14px);
  transition:
    opacity var(--dur-text) var(--ease-out-quart),
    transform var(--dur-text) var(--ease-out-quart);
}
[data-animate="title-card"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   CARDS — benefit-card, policy-card, case-card
   Stagger por --stagger-i puesto por JS.
   ------------------------------------------------ */
.js-loaded [data-animate="card"] {
  transform: translateY(36px);
  transition:
    opacity var(--dur-card) var(--ease-out-quart),
    transform var(--dur-card) var(--ease-out-quart);
  transition-delay: calc(var(--stagger-i, 0) * var(--stagger-card));
}
[data-animate="card"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   BOTONES standalone (no en hero-cta-group)
   Scale sutil + translateY.
   ------------------------------------------------ */
.js-loaded [data-animate="btn"] {
  transform: translateY(8px) scale(0.97);
  transition:
    opacity var(--dur-btn) var(--ease-out-quart),
    transform var(--dur-btn) var(--ease-out-quart);
}
[data-animate="btn"].in-view {
  opacity: 1;
  transform: none;
}

/* Restaurar hover/active después del reveal — la cascada exige que
   estas reglas vengan DESPUÉS de .in-view para ganar con igual especificidad */
[data-animate="btn"].in-view:hover,
[data-animate="cta-group"].in-view .btn:hover,
[data-animate="card"].in-view .btn:hover,
[data-animate="bridge"].in-view .btn:hover {
  transform: scale(1.06);
}

[data-animate="btn"].in-view:active,
[data-animate="cta-group"].in-view .btn:active,
[data-animate="card"].in-view .btn:active,
[data-animate="bridge"].in-view .btn:active {
  transform: scale(0.98);
}

/* ------------------------------------------------
   IMÁGENES / PLACEHOLDERS
   Scale ligeramente mayor → normal. "Lente que se abre."
   Duración larga. Sin translateY.
   ------------------------------------------------ */
.js-loaded [data-animate="image"] {
  transform: scale(1.04);
  transition:
    opacity var(--dur-image) var(--ease-out-quart),
    transform var(--dur-image) var(--ease-out-quart);
}
[data-animate="image"].in-view {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------
   FAQ ITEMS — stagger ligero
   ------------------------------------------------ */
.js-loaded [data-animate="faq-item"] {
  transform: translateY(12px);
  transition:
    opacity var(--dur-text) var(--ease-out-cubic),
    transform var(--dur-text) var(--ease-out-cubic);
  transition-delay: calc(var(--stagger-i, 0) * var(--stagger-faq));
}
[data-animate="faq-item"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   SECTION LABEL — "FAQ" chip, etc.
   Fade puro, muy rápido.
   ------------------------------------------------ */
.js-loaded [data-animate="label"] {
  transition: opacity 300ms ease;
}
[data-animate="label"].in-view {
  opacity: 1;
}

/* ------------------------------------------------
   POLICY BRIDGE — bloque CTA del medio
   ------------------------------------------------ */
.js-loaded [data-animate="bridge"] {
  transform: translateY(20px);
  transition:
    opacity var(--dur-card) var(--ease-out-quart),
    transform var(--dur-card) var(--ease-out-quart);
}
[data-animate="bridge"].in-view {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------
   REDUCED MOTION — siempre último
   ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-loaded [data-animate],
  .js-loaded [data-animate] .word {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}