/* ==========================================================================
   HyperEscrowPay — movimiento

   Todo con CSS nativo: animaciones ligadas al scroll, transiciones entre
   páginas y revelados. Cero librerías, cero JavaScript en el hilo principal
   para lo decorativo.

   Regla de oro: solo se animan `opacity`, `translate`, `scale` y `rotate`,
   que el navegador resuelve en el compositor y no obligan a recalcular la
   página. Por eso se mantiene fluido en móviles de gama baja.
   ========================================================================== */

@layer motion {

/* ══════════════════════════════════════════════════════════
   Transiciones entre páginas
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: vt-out .3s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }

  @keyframes vt-out { to { opacity: 0; scale: .99; } }
  @keyframes vt-in  { from { opacity: 0; translate: 0 1.2rem; } }

  /* La barra y el pie no parpadean: se mantienen fijos entre páginas */
  .nav { view-transition-name: nav; }
  .foot { view-transition-name: foot; }
  ::view-transition-group(nav),
  ::view-transition-group(foot) { animation-duration: .001s; }
}

/* ══════════════════════════════════════════════════════════
   Entrada al cargar la página — una sola secuencia orquestada
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  [data-enter] > * {
    animation: enter .85s var(--ease-out) both;
    animation-delay: calc(var(--enter-base, 60ms) + var(--i, 0) * 85ms);
  }
  [data-enter] > *:nth-child(1) { --i: 0; }
  [data-enter] > *:nth-child(2) { --i: 1; }
  [data-enter] > *:nth-child(3) { --i: 2; }
  [data-enter] > *:nth-child(4) { --i: 3; }
  [data-enter] > *:nth-child(5) { --i: 4; }
  [data-enter] > *:nth-child(6) { --i: 5; }
  [data-enter] > *:nth-child(7) { --i: 6; }

  @keyframes enter {
    from { opacity: 0; translate: 0 1.5rem; filter: blur(6px); }
  }

  /* El titular entra palabra por palabra. Las palabras las envuelve
     kinetic.js; si el JS no corre, el titular aparece normal. */
  .kinetic .w {
    display: inline-block;
    animation: word-in .9s var(--ease-out) both;
    animation-delay: calc(180ms + var(--wi, 0) * 55ms);
  }
  @keyframes word-in {
    from { opacity: 0; translate: 0 .55em; rotate: x 55deg; filter: blur(5px); }
  }
}

/* ══════════════════════════════════════════════════════════
   Revelado al entrar en pantalla
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Camino nativo (Chrome, Edge, Safari 26+) */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    [data-reveal] {
      animation: reveal-up 1s linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 48%;
    }
    [data-reveal="scale"] {
      animation-name: reveal-scale;
      animation-range: entry 2% entry 55%;
    }
    /* Hijos escalonados de una retícula */
    [data-reveal-group] > * {
      animation: reveal-up 1s linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
  }

  /* Respaldo (Firefox): IntersectionObserver marca .in-view */
  @supports not ((animation-timeline: view()) and (animation-range: entry)) {
    [data-reveal],
    [data-reveal-group] > * {
      opacity: 0;
      translate: 0 1.8rem;
      transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
    }
    [data-reveal-group] > * { transition-delay: calc(var(--ri, 0) * 70ms); }
    [data-reveal].in-view,
    [data-reveal-group].in-view > * { opacity: 1; translate: 0 0; }
  }

  @keyframes reveal-up    { from { opacity: 0; translate: 0 1.8rem; } }
  @keyframes reveal-scale { from { opacity: 0; scale: .96; translate: 0 1.2rem; } }
}

/* ══════════════════════════════════════════════════════════
   Paralaje suave del fondo — solo donde el navegador lo soporta
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body::before {
      animation: drift linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes drift { to { translate: 0 -8vh; } }
  }
}

/* ══════════════════════════════════════════════════════════
   Barra de progreso de lectura
   ══════════════════════════════════════════════════════════ */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 120;
  block-size: 2px;
  background: var(--grad);
  transform-origin: left;
  scale: 0 1;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: fill-x linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes fill-x { to { scale: 1 1; } }
}
@supports not (animation-timeline: scroll()) {
  /* progress.js lo actualiza con requestAnimationFrame */
  .progress { transition: scale .1s linear; }
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

/* ══════════════════════════════════════════════════════════
   Barrido de luz sobre el borde de la tarjeta principal
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .sweep { position: relative; isolation: isolate; }
  .sweep::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--sweep),
      transparent 0deg,
      color-mix(in oklab, var(--cyan), transparent 25%) 25deg,
      color-mix(in oklab, var(--green), transparent 40%) 45deg,
      transparent 90deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: sweep 7s linear infinite;
    opacity: .8;
  }
  @keyframes sweep { to { --sweep: 360deg; } }
}

/* ══════════════════════════════════════════════════════════
   Números que suben al aparecer
   ══════════════════════════════════════════════════════════ */
.count { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════
   Halo que sigue al cursor (solo ratón, nunca táctil)
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cursor-glow {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;
    inline-size: 28rem;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    translate: -50% -50%;
    background: radial-gradient(circle,
      color-mix(in oklab, var(--cyan), transparent 93%), transparent 62%);
    transition: opacity .6s;
  }
  .cursor-glow[data-on] { opacity: 1; }
}
@media not ((hover: hover) and (pointer: fine)) {
  .cursor-glow { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Reducir movimiento
   Se aplica la variante `--animation-reduced` de cada animación en vez de
   cortarlas todas de golpe, que suele resultar más brusco.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: var(--animation-reduced) !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cursor-glow { display: none; }
}

}