/*
 * El movimiento de la web (spec §5.2). TODO va dentro de `.mov`, la clase que el guion del <head>
 * (base.njk) pone en <html> solo con JavaScript y si nadie ha pedido «reducir el movimiento». Sin
 * ella esta hoja no cambia nada y la web se ve quieta, como siempre (test/movimiento.test.js lo
 * vigila). La parte que necesita JavaScript (lo que aparece al bajar, el «20» que cuenta, la cabecera
 * y las tarjetas que siguen al ratón) está en assets/js/movimiento.js.
 */

/* El ángulo que barre el aro de la órbita al dibujarse. */
@property --barrido { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

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

  .mov { --suave: cubic-bezier(.2, .7, .2, 1); --muelle: cubic-bezier(.34, 1.56, .64, 1); }

  /* ---------- Fundido entre páginas: la cabecera se queda quieta y el contenido funde ---------- */
  /* Chrome, Edge y Safari. Firefox no lo conoce y cambia de página como siempre. */

  @view-transition { navigation: auto; }
  .mov .cabecera { view-transition-name: cabecera; }
  .mov .contacto-flotante { view-transition-name: contacto-flotante; }
  .mov::view-transition-old(root) { animation: mov-pagina-sale .28s cubic-bezier(.4, 0, 1, 1) both; }
  .mov::view-transition-new(root) { animation: mov-pagina-entra .5s cubic-bezier(.2, .7, .2, 1) .08s both; }
  @keyframes mov-pagina-sale { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes mov-pagina-entra { from { opacity: 0; transform: translateY(16px); } }

  /* ---------- Cabecera que se recoge al bajar (cabecera--recogida la pone movimiento.js) ---------- */
  /* Con translate y scale, no con alturas: así lo de debajo no da un salto al recogerse. */

  .mov .cabecera { transition: translate .35s var(--suave), box-shadow .35s var(--suave); }
  .mov .cabecera-barra { transition: translate .35s var(--suave); }
  .mov .cabecera-logo img { transform-origin: left center; transition: scale .35s var(--suave); }
  .mov .cabecera--recogida { translate: 0 -12px; box-shadow: 0 8px 24px rgba(27, 37, 64, .08); }
  .mov .cabecera--recogida .cabecera-barra { translate: 0 6px; }
  .mov .cabecera--recogida .cabecera-logo img { scale: .8; }

  /* ---------- Titulares palabra a palabra (las cajas las pone scripts/lib/palabras.js al construir) ---------- */
  /* El relleno y el margen negativo agrandan la ventana de cada palabra sin moverla: tildes, comas y
     rabos de la «p» no se recortan. */

  .mov .palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .06em .16em; margin: -.1em -.06em -.16em; }
  .mov .palabra > span { display: inline-block; animation: mov-palabra .95s var(--suave) both; animation-delay: calc(.15s + var(--p) * 70ms); }
  @keyframes mov-palabra { from { transform: translateY(125%); } }

  /* El resto del héroe entra detrás del titular. */
  .mov :is(.seccion-hero, .heroe > div) > :is(.eyebrow, .entradilla, .ctas) { animation: mov-subir .9s var(--suave) both; }
  .mov :is(.seccion-hero, .heroe > div) > .entradilla { animation-delay: .45s; }
  .mov :is(.seccion-hero, .heroe > div) > .ctas { animation-delay: .6s; }
  @keyframes mov-subir { from { opacity: 0; translate: 0 22px; } }

  /* ---------- Portada: la marca de JM2 del fondo se dibuja sola ---------- */
  /* 2000 es más que el trazo más largo (1737): todos se dibujan a la misma velocidad y acaban enteros. */

  .mov .marca-dibujada path:not(.marca-luz) { stroke-dasharray: 2000 4000; animation: mov-trazo 2.8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(.1s + var(--t, 0) * 220ms); }
  @keyframes mov-trazo { from { stroke-dashoffset: 2001; } to { stroke-dashoffset: 0; } }

  /* ---------- Portada: el latido, cada 6 segundos (latido la pone movimiento.js) ---------- */
  /* Nada desaparece: se repite la entrada tal cual (así no vuelve a empezar) y se añade lo nuevo detrás. */

  /* Una luz naranja corre por las líneas huecas de la marca. Va entre el borde gris y el relleno, así
     que solo se ve en el borde; sin movimiento, portada.css la esconde. */
  .mov .marca-dibujada .marca-luz { display: inline; stroke-dasharray: 220 4000; stroke-dashoffset: 221; filter: drop-shadow(0 0 6px rgba(245, 134, 52, .55)); }
  .mov .latido .marca-dibujada .marca-luz { animation: mov-luz 2.2s cubic-bezier(.45, 0, .55, 1) both; animation-delay: calc(var(--t, 0) * 200ms); }
  @keyframes mov-luz { from { stroke-dashoffset: 221; } to { stroke-dashoffset: -1800; } }

  /* Un brillo cruza el titular. */
  .mov [data-latido] h1 { position: relative; }
  .mov [data-latido] h1::after { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 30%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); }
  .mov .latido h1::after { animation: mov-reflejo 1.3s var(--suave) .2s both; }
  @keyframes mov-reflejo { 0% { left: -35%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 105%; opacity: 0; } }

  /* ---------- Portada: la órbita de productos ---------- */

  .mov .orbita-producto:nth-child(1) { --k: 0; }
  .mov .orbita-producto:nth-child(2) { --k: 1; }
  .mov .orbita-producto:nth-child(3) { --k: 2; }
  .mov .orbita-producto:nth-child(4) { --k: 3; }
  .mov .orbita-producto:nth-child(5) { --k: 4; }
  .mov .orbita-producto:nth-child(6) { --k: 5; }

  @media (min-width: 861px) {
    /* El logo del centro aparece con un pequeño rebote y después late. */
    .mov .orbita { container-type: inline-size; }
    .mov .orbita-centro { animation: mov-centro 1.1s var(--muelle) .3s both; }
    .mov .orbita-centro::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(42, 68, 126, .25); opacity: 0; animation: mov-latido 3.2s ease-out 1.6s infinite; }
    /* El aro se dibuja barriendo y después gira muy despacio. */
    .mov .orbita-aro { -webkit-mask: conic-gradient(#000 var(--barrido), transparent 0); mask: conic-gradient(#000 var(--barrido), transparent 0); animation: mov-barrer 1.6s var(--suave) .4s both, mov-girar 60s linear 2s infinite; }

    /* Los productos, repartidos en un círculo (uno cada 60°, desde arriba y en el sentido de las agujas
       del reloj), dan la vuelta despacio: gira la lista entera y cada producto gira al revés lo mismo, así
       el texto se queda derecho. Cada uno se coloca por su centro y gira sobre él (transform-origin en
       el punto de left/top). --dx y --dy: de su sitio al centro, en anchos de la órbita (cqw). */
    .mov .orbita-productos { position: absolute; inset: 0; animation: mov-orbitar 120s linear infinite; }
    /* Al dar la vuelta, el producto más ancho sobresale de la órbita unos 40 px por cada lado: en los
       ordenadores estrechos la órbita encoge para dejarle sitio sin pisar el texto. */
    .mov .orbita { width: min(400px, 100% - 80px); }
    .mov .orbita-producto:nth-child(n) { right: auto; bottom: auto; transform: translate(-50%, -50%); transform-origin: 0 0; }
    .mov .orbita-producto:nth-child(1) { left: 50%; top: 10%; --dx: 0cqw; --dy: 40cqw; }
    .mov .orbita-producto:nth-child(2) { left: 84.64%; top: 30%; --dx: -34.64cqw; --dy: 20cqw; }
    .mov .orbita-producto:nth-child(3) { left: 84.64%; top: 70%; --dx: -34.64cqw; --dy: -20cqw; }
    .mov .orbita-producto:nth-child(4) { left: 50%; top: 90%; --dx: 0cqw; --dy: -40cqw; }
    .mov .orbita-producto:nth-child(5) { left: 15.36%; top: 70%; --dx: 34.64cqw; --dy: -20cqw; }
    .mov .orbita-producto:nth-child(6) { left: 15.36%; top: 30%; --dx: 34.64cqw; --dy: 20cqw; }
    /* Salen del centro hasta su sitio, flotan y dan la vuelta. */
    .mov .orbita-producto { animation: mov-desde-el-centro 1s var(--muelle) both, mov-flotar 5s ease-in-out infinite, mov-contragiro 120s linear infinite; animation-delay: calc(.7s + var(--k) * 120ms), calc(2.6s + var(--k) * 300ms), 0s; }
    /* Al dar la vuelta, cada dos vecinos llegan a quedar uno al lado del otro, a un radio de distancia. Con
       la órbita por debajo de 340 px (ordenadores de menos de unos 980 px), «Soporte Remoto» y «HideSport»
       se pisaban, y hasta 360 px pasaban rozando: ahí los productos se hacen más pequeños. */
    @container (max-width: 359px) {
      .mov .orbita-producto { font-size: .72rem; padding: 5px 10px 5px 6px; gap: 6px; }
      .mov .orbita-producto .punto { width: 12px; height: 12px; }
    }

    /* Latido: el aro se vuelve a dibujar barriendo y los productos hacen una ola, uno detrás de otro. */
    .mov .latido .orbita-aro { animation: mov-barrer 1.6s var(--suave) .4s both, mov-girar 60s linear 2s infinite, mov-rebarrer 1.5s var(--suave) both; }
    .mov .latido .orbita-producto { animation: mov-desde-el-centro 1s var(--muelle) both, mov-flotar 5s ease-in-out infinite, mov-contragiro 120s linear infinite, mov-ola .7s var(--suave) both; animation-delay: calc(.7s + var(--k) * 120ms), calc(2.6s + var(--k) * 300ms), 0s, calc(.3s + var(--k) * 110ms); }
  }
  @keyframes mov-orbitar { to { rotate: 360deg; } }
  @keyframes mov-contragiro { to { rotate: -360deg; } }
  @keyframes mov-rebarrer { from { --barrido: 0deg; } to { --barrido: 360deg; } }
  @keyframes mov-ola { 40% { scale: 1.1; } }
  @keyframes mov-centro { from { opacity: 0; scale: .6; } }
  @keyframes mov-latido { from { opacity: .9; scale: .9; } to { opacity: 0; scale: 1.45; } }
  @keyframes mov-barrer { from { --barrido: 0deg; } to { --barrido: 360deg; } }
  @keyframes mov-girar { to { rotate: 360deg; } }
  @keyframes mov-desde-el-centro { from { opacity: 0; translate: var(--dx) var(--dy); scale: .3; } }
  @keyframes mov-flotar { 50% { translate: 0 -7px; } }

  /* En el móvil no hay aro: los productos van en fila y entran uno detrás de otro. */
  @media (max-width: 860px) {
    .mov .orbita-producto { animation: mov-subir .7s var(--suave) both; animation-delay: calc(.6s + var(--k) * 90ms); }
    .mov .latido .orbita-producto { animation: mov-subir .7s var(--suave) both, mov-ola .7s var(--suave) both; animation-delay: calc(.6s + var(--k) * 90ms), calc(.3s + var(--k) * 110ms); }
  }

  /* ---------- Portada: la cinta de servicios que cruza el corte ---------- */
  /* Al terminar de entrar la parte de arriba, la banda se despliega de izquierda a derecha, se dibujan sus
     dos rayas naranjas (la de arriba hacia la derecha, la de abajo hacia la izquierda) y los servicios
     empiezan a desfilar; cada 8 s la cruza un brillo. Con el ratón encima o el foco dentro, se para. */

  .mov .cinta-banda { animation: mov-cinta-desplegar 1.2s var(--suave) .9s both; }
  .mov .cinta-banda::before { transform-origin: left; animation: mov-cinta-raya .9s var(--suave) 1.7s both; }
  .mov .cinta-banda::after { transform-origin: right; animation: mov-cinta-raya .9s var(--suave) 1.9s both; }
  .mov .cinta-pista { justify-content: flex-start; width: max-content; animation: mov-cinta 70s linear 1.4s infinite; }
  .mov .cinta-lista { flex-wrap: nowrap; max-width: none; padding: 0; }
  .mov .cinta-lista li::before { margin: 0 24px; }
  .mov .cinta-lista a { font-size: clamp(1.02rem, 1.55vw, 1.32rem); }
  .mov .cinta-lista[aria-hidden="true"] { display: flex; }
  .mov .cinta:hover .cinta-pista, .mov .cinta:focus-within .cinta-pista { animation-play-state: paused; }
  .mov .cinta-brillo { display: block; position: absolute; inset: 0 auto 0 0; width: 22%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16) 50%, transparent); translate: -120% 0; animation: mov-cinta-brillo 8s ease-in-out 3s infinite; }
  /* Recorta con margen arriba y abajo: un recorte justo se comería la sombra para siempre. */
  @keyframes mov-cinta-desplegar { from { clip-path: inset(-80px 100% -80px 0); } to { clip-path: inset(-80px 0 -80px 0); } }
  @keyframes mov-cinta-raya { from { scale: 0 1; } }
  @keyframes mov-cinta { to { translate: -50% 0; } }
  @keyframes mov-cinta-brillo { 0% { translate: -120% 0; } 30%, 100% { translate: 560% 0; } }

  /* ---------- Portada: las letras gigantes «Servicios» se deslizan de lado al bajar ---------- */
  /* --avance va de 0 (asoman por abajo) a 1 (salen por arriba): entran desde la derecha y se van hacia la
     izquierda. Lo mueve la rueda de quien visita, no corre solo: no hace falta pausarlo. */

  .mov .letrero-texto { translate: calc((.5 - var(--avance, .5)) * 36vw) 0; will-change: translate; }

  /* ---------- «Pausar movimiento» (mov-pausa la pone movimiento.js): para lo que se mueve sin fin ---------- */
  /* Uno por animación, en el mismo orden que su `animation`: lo que entra una sola vez sigue y acaba. */

  .mov.mov-pausa .orbita-aro { animation-play-state: running, paused, running; }
  .mov.mov-pausa .orbita-producto { animation-play-state: running, paused, paused, running; }
  .mov.mov-pausa .orbita-productos, .mov.mov-pausa .orbita-centro::after, .mov.mov-pausa .cierre, .mov.mov-pausa .cierre-sellos img, .mov.mov-pausa .desfile-pista, .mov.mov-pausa .cinta-pista, .mov.mov-pausa .cinta-brillo { animation-play-state: paused; }

  /* ---------- Lo que aparece al bajar (data-revelar en las plantillas; visible lo pone movimiento.js) ---------- */

  .mov [data-revelar]:not(.visible) { opacity: 0; translate: 0 26px; }
  .mov [data-revelar].revelando { transition: opacity .9s var(--suave), translate .9s var(--suave); transition-delay: var(--retraso, 0ms); }
  /* Si movimiento.js no llega a arrancar (no carga, falla), a los 3 segundos se ve todo igualmente. */
  .mov:not(.mov-listo) [data-revelar] { animation: mov-rescate .6s ease-out 3s both; }
  @keyframes mov-rescate { to { opacity: 1; translate: none; } }

  /* ---------- Tarjetas que siguen al ratón (tarjeta--viva la pone movimiento.js, solo con ratón) ---------- */

  .mov .tarjeta--viva { position: relative; transition: transform .2s var(--suave), box-shadow .3s var(--suave); }
  .mov .tarjeta--viva:hover { box-shadow: var(--sombra); }
  .mov .tarjeta--viva::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 134, 52, .12), transparent 45%); }
  .mov .tarjeta--viva:hover::after { opacity: 1; }

  /* ---------- /productos/: al pasar el ratón por una tarjeta del panel, su captura recorre la web ---------- */

  @media (hover: hover) and (pointer: fine) {
    .mov .panel-captura img { transition: translate 6s cubic-bezier(.45, 0, .55, 1); }
    .mov :is(.panel-tarjeta, .nosotros-producto):hover .panel-captura img { translate: 0 calc(-100% + 100cqh); }
  }
  .mov .panel-menu-enlace { transition: background-color .3s var(--suave), border-color .3s var(--suave); }

  /* ---------- Botones: se levantan y los cruza un brillo (solo con ratón) ---------- */

  @media (hover: hover) and (pointer: fine) {
    .mov .btn { position: relative; overflow: hidden; transition: translate .25s var(--suave), box-shadow .25s var(--suave); }
    .mov .btn:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(27, 37, 64, .18); }
    .mov .btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
    .mov .btn:hover::after { animation: mov-brillo .8s var(--suave); }
  }
  @keyframes mov-brillo { to { left: 130%; } }

  /* ---------- El bloque azul del final respira y sus sellos flotan ---------- */

  .mov .cierre { background-image: linear-gradient(120deg, var(--azul), var(--azul-hondo), var(--azul), var(--azul-hondo)); background-size: 300% 300%; animation: mov-respirar 14s ease-in-out infinite; }
  .mov .cierre-sellos img { animation: mov-flotar 6s ease-in-out infinite; }
  .mov .cierre-sellos img + img { animation-delay: -3s; }
  @keyframes mov-respirar { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
}

/* Al imprimir, todo en su sitio final aunque se imprima a mitad de un movimiento. */
@media print {
  .mov *, .mov *::before, .mov *::after { animation: none !important; transition: none !important; }
  .mov [data-revelar] { opacity: 1 !important; translate: none !important; }
}