/* =========================================================================
   Factoría — capa de movimiento
   Todo depende de la clase .motion (la pone un script en el <head>): sin JS
   no se oculta nada. Y con "reducir movimiento" activado, esto no aplica.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Aparición genérica ---------- */
  /* Tres niveles, no uno repetido trece veces. Antes todos los grupos
     compartían la misma entrada exacta —misma opacidad, mismo recorrido,
     mismos 700ms, misma curva—, y eso no es pulido: es uniformidad. El
     movimiento no decía nada sobre qué importaba más. Ahora la duración y la
     curva son las que marcan la jerarquía, no solo el retraso.

     Nivel por defecto: contenido normal. Corto y discreto, dentro del rango
     de 200-500ms que aguanta una entrada sin sentirse lenta. */
  .motion [data-rev] {
    opacity: 0;
    translate: 0 12px;
    transition:
      opacity 420ms cubic-bezier(0.2, 0, 0.2, 1),
      translate 420ms cubic-bezier(0.2, 0, 0.2, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, translate;
  }

  /* Momento: el contenido que lleva el peso de la página. Más recorrido, más
     tiempo y una curva con más carácter —ease-out-quint, que frena más
     tarde—. Son tres en todo el sitio; si se multiplican deja de ser
     jerarquía y vuelve a ser uniformidad. */
  .motion [data-rev="momento"],
  .motion [data-rev="escala"] {
    translate: 0 28px;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  .motion [data-rev="escala"] { scale: 0.985; transition-property: opacity, translate, scale; }

  /* Estructura: cabeceras de sección, pie, horario y dirección. Solo fundido,
     sin desplazamiento y corto. Es texto, y su entrada no tiene por qué
     anunciarse: un pie de página que se desliza hacia arriba es movimiento
     cuyo único propósito es la propia animación. */
  .motion [data-rev="quieto"] {
    translate: 0 0;
    transition-duration: 300ms;
  }
  .motion [data-rev][data-vis] { opacity: 1; translate: 0 0; scale: 1; will-change: auto; }

  /* Los contenedores que llevan vídeo entran con movimiento pero SIN fundido.
     La opacidad de un padre siempre alcanza a sus hijos, y WebKit no
     reproduce automáticamente un vídeo que está en opacidad cero: el figure
     del hero arrancaba con 400ms de retraso y 700ms de transición, así que
     durante el primer segundo largo su vídeo era invisible. El autoplay
     fallaba ahí, y iOS no reintenta —pinta el botón de play y se queda—.
     Siguen deslizándose y escalando al entrar; solo se les quita el fundido. */
  .motion .hero__collage figure[data-rev],
  .motion [data-rev]:has([data-video]) { opacity: 1; }

  /* La aparición original del sitio ya no necesita ocultar: la maneja data-rev */
  .motion .revelar { opacity: 1; translate: 0 0; }

  /* ---------- Título palabra por palabra ---------- */
  .motion .palabra {
    display: inline-block;
    opacity: 0;
    translate: 0 0.42em;
    filter: blur(4px);
    transition:
      opacity 620ms ease,
      translate 620ms cubic-bezier(0.18, 0.8, 0.2, 1),
      filter 620ms ease;
    transition-delay: var(--d, 0ms);
  }
  .motion .palabra[data-vis] { opacity: 1; translate: 0 0; filter: blur(0); }

  /* ---------- Cabecera que se compacta ---------- */
  .motion .cabecera {
    transition:
      background 260ms ease,
      box-shadow 260ms ease,
      backdrop-filter 260ms ease;
  }
  /* Antes esto animaba padding-block y width durante 260ms. Las dos son
     propiedades de layout, y la cabecera es position:sticky, así que cada
     fotograma recalculaba la altura de la cabecera y reflowaba la página
     entera de abajo — en cada scroll, en todas las páginas.

     El logo pasa a `scale`, que va por GPU y no toca el layout. El padding
     cambia de golpe: son 0.4rem en un fotograma, imperceptible, y lo que el
     ojo sigue de verdad es el logo. */
  .motion .cabecera__logo img {
    transform-origin: left center;
    transition: scale 260ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  .motion .cabecera[data-compacta] {
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 1px 0 var(--linea), 0 8px 24px rgb(18 17 12 / 6%);
  }
  .motion .cabecera[data-compacta] .cabecera__fila { padding-block: 0.5rem; }
  .motion .cabecera[data-compacta] .cabecera__logo img { scale: 0.786; }

  /* ---------- Parallax suave ---------- */
  .motion [data-parallax] { translate: 0 var(--par, 0px); }
  .motion .banda > img { scale: 1.08; }

  /* ---------- Marquesina de marcas ---------- */
  /* La sección recorta: así la banda a todo el ancho nunca provoca
     desplazamiento horizontal cuando hay barra de scroll clásica. */
  .motion .seccion:has(.marquesina) { overflow-x: clip; }

  .motion .marquesina {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .motion .marquesina__pista {
    display: flex;
    width: max-content;
  }
  .motion .marquesina__pista[data-listo] {
    animation: desfile var(--dur, 22s) linear infinite;
  }
  .motion .marquesina:hover .marquesina__pista,
  .motion .marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
  .motion .marquesina .marcas__lista {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-inline: 0;
    padding-right: clamp(1.75rem, 4vw, 3.5rem);
  }
  .motion .marquesina .marcas__lista li { flex: none; }

  @keyframes desfile {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(var(--tira) * -1), 0, 0); }
  }

  /* ---------- Estado abierto: latido ---------- */
  /* Dos latidos y para, no infinito. El pulso perpetuo competía por atención
     en la barra superior de todas las páginas sin añadir nada: que esté
     abierto ya lo dice el verde. Dos latidos al aparecer sí comunican "esto
     es información en vivo", y después se callan. */
  .motion .estado--abierto::before { animation: latido 2.2s ease-out 2; }
  @keyframes latido {
    0%        { box-shadow: 0 0 0 0 rgb(121 214 180 / 55%); }
    55%, 100% { box-shadow: 0 0 0 7px rgb(121 214 180 / 0%); }
  }

  /* ---------- WhatsApp: llamada de atención discreta ---------- */
  .motion .flotante[data-nudge] { animation: saludo 1.1s cubic-bezier(0.3, 0, 0.2, 1) 1; }
  .motion .flotante[data-nudge]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: aro 1.6s ease-out 1;
    pointer-events: none;
  }
  @keyframes saludo {
    0%, 100%  { transform: translateY(0) rotate(0); }
    18%       { transform: translateY(-5px) rotate(-3deg); }
    38%       { transform: translateY(-1px) rotate(2.5deg); }
    58%       { transform: translateY(-3px) rotate(-1.5deg); }
  }
  @keyframes aro {
    from { box-shadow: 0 0 0 0 rgb(37 211 102 / 45%); }
    to   { box-shadow: 0 0 0 22px rgb(37 211 102 / 0%); }
  }

  /* ---------- Contadores: sin salto de ancho ---------- */
  .motion .hero__datos dd { font-variant-numeric: tabular-nums; }

  /* ---------- Refuerzos de hover ---------- */
  .motion .tarjeta { transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 260ms ease; }
  .motion .tarjeta:hover { transform: translateY(-6px); }
  .motion .valor { transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 260ms ease; }
  .motion .valor:hover { transform: translateY(-3px); box-shadow: var(--sombra-sm); }
  .motion .mosaico__texto h3,
  .motion .mosaico__enlace { transition: translate 260ms cubic-bezier(0.2, 0, 0.2, 1); }
  .motion .mosaico__item:hover .mosaico__texto h3 { translate: 0 -2px; }

  /* ---------- Vídeo en las tarjetas ----------
     Se reproduce solo, en todos los dispositivos. El bloque entero del
     archivo vive dentro de prefers-reduced-motion: no-preference, así que
     con movimiento reducido no se descarga ni un byte de vídeo. */
  .motion [data-video] { position: relative; }

  /* Nada de opacity: 0 aquí. WebKit solo reproduce automáticamente vídeos
     que son visibles en pantalla, así que arrancar en opacidad cero los
     bloqueaba en iPhone —y era un círculo cerrado, porque el fundido esperaba
     precisamente a que empezaran a pintar—. Ese es el botón de play que
     aparecía encima.

     El fundido tampoco hacía falta: el poster de cada vídeo es la misma
     fotografía que hay debajo, así que no hay recuadro negro que tapar ni
     salto que suavizar. */
  /* El vídeo va DEBAJO de la fotografía, no encima.

     iOS pinta un botón de play sobre cualquier vídeo que no haya arrancado, y
     ese botón vive fuera del alcance del CSS: las pseudo-clases
     ::-webkit-media-controls no lo tocan. Pero si la foto está por encima, el
     botón queda tapado sin necesidad de alcanzarlo.

     Y a diferencia de ocultar el vídeo, esto no rompe la reproducción
     automática: el vídeo sigue estando visible para WebKit, que es su
     condición para arrancar solo. Solo está detrás de algo.

     La foto se retira cuando el vídeo está pintando fotogramas de verdad. Si
     no arranca nunca, se queda la foto y no se ve nada raro. */
  .motion [data-video] > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .motion [data-video] > img {
    position: relative;
    z-index: 1;
    transition: opacity 420ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  .motion [data-video][data-rodando] > img { opacity: 0; }

  /* La foto de debajo no se escala: con el vídeo encima serían dos
     movimientos peleándose por el mismo recuadro. */
  .motion .tarjeta:hover .tarjeta__media[data-video] img { scale: 1; }

  /* El collage es cuadrado y el vídeo 4:3: object-fit hace el recorte solo,
     sin recodificar nada. */
  .motion .hero__collage figure[data-video] > video { aspect-ratio: 1 / 1; }

  /* ---------- Transición entre páginas ---------- */
  @view-transition { navigation: auto; }

  .motion.entrando body { animation: entrada 420ms cubic-bezier(0.2, 0, 0.2, 1) 1; }
  .motion.saliendo body { opacity: 0; transition: opacity 180ms ease; }
  @keyframes entrada {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
  }
}