/* ============================================================================
   ZENITH 360 — motion.css
   Sistema de movimiento. Cada sección se anima por una razón distinta;
   ninguna es solo "fade in".

   Fase 1 deja instalados: la micro-transición del cambio de idioma, el
   marquee de la barra de confianza, el reveal por líneas del H1 y el reveal
   de bloques. El resto (parallax, FLIP, radar, órbita, traza SVG) entra en
   su fase con su módulo.

   NADA de lo que hay aquí es requisito para leer el sitio ni para completar
   el diagnóstico. Con prefers-reduced-motion todo queda en su estado final.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Micro-transición al cambiar de idioma (180 ms, sin recargar)
   --------------------------------------------------------------------------- */
[data-i18n], [data-i18n-attr] {
  transition: opacity var(--dur-micro) var(--ease-in-out),
              transform var(--dur-micro) var(--ease-in-out);
}
body.is-swapping-lang [data-i18n] { opacity: 0; transform: translateY(4px); }

/* ---------------------------------------------------------------------------
   2. Reveal por líneas — H1 y H2 de secciones ancla
   El gesto es preciso, no lúdico: sin rotación.
   --------------------------------------------------------------------------- */
[data-reveal-lines] .line { overflow: hidden; }
[data-reveal-lines] .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
[data-reveal-lines] .line:nth-child(1) > span { transition-delay: 0ms; }
[data-reveal-lines] .line:nth-child(2) > span { transition-delay: var(--stagger-line); }
[data-reveal-lines] .line:nth-child(3) > span { transition-delay: calc(var(--stagger-line) * 2); }
/* Sin JavaScript el titular debe verse igual: por eso el estado final se
   aplica salvo que la clase js-ready confirme que el script tomó el control. */
html:not(.js-ready) [data-reveal-lines] .line > span { transform: none; }
.js-ready [data-reveal-lines].is-in .line > span { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   3. Reveal de bloques — opacidad + 28px, escalonado con --i
   --------------------------------------------------------------------------- */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger-block));
}
.js-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   4. Reveal de cortina en imágenes
   --------------------------------------------------------------------------- */
.js-ready [data-reveal-curtain] { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-slow) var(--ease-out-expo); }
.js-ready [data-reveal-curtain] > * { transform: scale(1.12); transition: transform var(--dur-slow) var(--ease-out-expo); }
.js-ready [data-reveal-curtain].is-in { clip-path: inset(0 0 0 0); }
.js-ready [data-reveal-curtain].is-in > * { transform: scale(1); }

/* ---------------------------------------------------------------------------
   5. Marquee de la barra de confianza — pausa al pasar el cursor
   --------------------------------------------------------------------------- */
@keyframes zenith-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
[data-marquee] { animation: zenith-marquee 46s linear infinite; will-change: transform; }
.trustbar:hover [data-marquee],
.trustbar:focus-within [data-marquee] { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   6. Menú móvil — entrada escalonada
   --------------------------------------------------------------------------- */
.menu-full__list li {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.menu-full:not([hidden]) .menu-full__list li { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   7. Botón magnético — solo en escritorio con puntero fino
   --------------------------------------------------------------------------- */
@media (pointer: fine) {
  [data-magnetic] { transition: transform var(--dur-fast) var(--ease-out-expo); }
}

/* ---------------------------------------------------------------------------
   8. MOVIMIENTO REDUCIDO — obligatorio
   Se desactivan parallax, marquee, magnetismo, FLIP y transforms.
   Quedan fundidos de 150 ms. Todo el contenido en su estado final.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation: none !important; transform: none !important; }

  .js-ready [data-reveal],
  .js-ready [data-reveal-lines] .line > span,
  .js-ready [data-reveal-curtain],
  .js-ready [data-reveal-curtain] > *,
  .menu-full__list li {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: opacity 150ms linear !important;
  }

  [data-magnetic] { transform: none !important; }
  [data-parallax] { transform: none !important; }
  body.is-swapping-lang [data-i18n] { transform: none; }
}