/* ═══════════════════════════════════════════════════════════════════════════
   Movimiento · estilos del módulo /js/movimiento.js
   ─────────────────────────────────────────────────────────────────────────
   Todo lo que esconde algo vive detrás de una clase que pone el JavaScript
   (.mov-lineas, .mov-escalon, .odo). Si el script no llega, nada de esto
   aplica y la página se ve completa.

   Las duraciones aquí son más largas que las de base.css (--mov-lento,
   380ms) a propósito: aquéllas son de interfaz —un botón que responde—, y
   éstas son de escena —un título que entra—. La curva es la misma
   --curva-entra: sale disparado y aterriza despacio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Al cambiar de página, la nueva entra con un fundido en vez del corte en
   blanco. Chrome y Safari recientes; los demás navegan como siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Las fotos que viajan de una página a otra (Mov.viaje): la toma de la
   portada al banner de su familia, la franja de Nosotros a /conocenos y el
   NX600 de la pasarela a /nx600. */
::view-transition-group(fam-hero),
::view-transition-group(cn-hero),
::view-transition-group(nx600-equipo) {
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(.22, .8, .2, 1);
}
::view-transition-old(fam-hero), ::view-transition-new(fam-hero),
::view-transition-old(cn-hero), ::view-transition-new(cn-hero),
::view-transition-old(nx600-equipo), ::view-transition-new(nx600-equipo) {
  width: 100%; height: 100%; object-fit: cover;
}

/* Lenis. Con el scroll suave del navegador (base.css) encima, los dos se
   pelearían por cada rueda del mouse. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Barra de lectura */
.mov-progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001;
  pointer-events: none; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #1E7A94, #4AB8C8 60%, #5EEAD4);
}

/* Títulos palabra por palabra. El relleno de abajo deja ver los descendentes
   (la «g», la «p») dentro de la ventana recortada. */
.mov-lineas .mov-w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.mov-lineas .mov-wi {
  display: inline-block; transform: translateY(112%);
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms));
}
.mov-lineas.mov-in .mov-wi { transform: none; }

/* Lo que sólo oye el lector de pantalla (la cifra real detrás del odómetro). */
.mov-oculto {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Odómetro. Blindado: las reglas del contenedor (un «.hero-stat span», un
   «.fin-dato__n i») no deben alcanzar a sus dígitos. */
.odo {
  display: inline-flex !important; align-items: flex-end; font-variant-numeric: tabular-nums;
  margin: 0 !important; line-height: 1.1;
  /* «.fam-cifra span» (12.5 px, gris) también alcanza al contenedor del
     odómetro, que es un <span>: sin esto las cifras salían diminutas. */
  font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important;
  color: inherit !important; letter-spacing: inherit !important;
}
.odo .odo-d, .odo .odo-p, .odo .odo-p > span, .odo .odo-c {
  margin: 0 !important; padding: 0 !important; font: inherit !important;
  color: inherit !important; letter-spacing: inherit; background: none !important;
}
.odo .odo-d { display: inline-block !important; height: 1.1em; overflow: hidden; line-height: 1.1; }
.odo .odo-p {
  display: flex !important; flex-direction: column;
  transition: transform 1.8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--k, 0) * 70ms);
}
.odo .odo-p > span { display: block !important; height: 1.1em; line-height: 1.1; text-align: center; }
.odo .odo-c { display: inline !important; white-space: pre; line-height: 1.1; }

/* Inclinación: la propiedad `rotate` la escribe movimiento.js cuadro por
   cuadro, así que aquí no hay transición que pelee con la de cada tarjeta. */
.mov-brillo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 3;
  transition: opacity .4s;
  background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 45%);
}
.mov-tilt-on .mov-brillo { opacity: 1; }

/* Parallax */
.mov-par { will-change: transform; transform: scale(1.14); }

/* Grupos escalonados. Con una animación y no con una transición: la regla
   «transition» de cada tarjeta (su hover) le ganaba a la de aquí y las piezas
   aparecían de golpe. La entrada usa «translate» y la inclinación «rotate»:
   se combinan sin pisarse ni pisar el «transform» del hover. */
.mov-escalon > * { opacity: 0; }
.mov-escalon.mov-in > * {
  opacity: 1;
  animation: mov-sube .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--j, 0) * 60ms);
}
@keyframes mov-sube { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: none; } }

/* Entrada de la cabecera de una página: la clase va en el HTML para que la
   animación arranque desde el primer cuadro (la marca .mov la pone un
   <script> en el <head>), con su retraso en --d. El titular [data-mov-h1]
   espera escondido hasta que se parte en palabras; mov-espera se quita sola a
   los 2.2 s por si el script nunca llega. */
.mov .mov-sube { animation: mov-sube 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
.mov-espera [data-mov-h1] { visibility: hidden; }

/* Quien pidió menos movimiento ve todo en su lugar, desde el primer cuadro. */
.mov-quieto .mov-lineas .mov-wi,
.mov-quieto .mov-escalon > *,
.mov-quieto .mov-sube {
  transform: none !important; translate: none !important; opacity: 1 !important;
  transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  .mov-lineas .mov-wi { transform: none !important; }
  .mov-escalon > * { opacity: 1 !important; translate: none !important; }
  .mov-progreso { display: none; }
}