/*
 * El movimiento de toda la web (2026-10-21, peticion del titular: el de jm2informatica.com). La
 * portada tiene ademas su capa propia, movimiento.css. Esta solo hace cosas que se paran solas:
 *   - al cambiar de pagina, la nueva entra fundiendose y la cabecera se queda quieta (Chrome, Edge
 *     y Safari; Firefox cambia de pagina como siempre);
 *   - la cabecera se recoge un poco al bajar (cabecera--recogida, de movimiento-sitio.js);
 *   - con raton, los botones se levantan y los cruza un brillo, y las tarjetas que se pulsan se
 *     inclinan siguiendo el puntero, con una luz debajo (tarjeta--viva, del mismo script).
 *
 * Todo va dentro de la consulta de movimiento no reducido y cuelga de `movimiento-sitio`, la clase
 * que pone el guion del <head> (base.njk) y movimiento-sitio.js: sin ella esta hoja no cambia nada.
 * Solo se animan transform, translate, scale, rotate y opacity, y nada se repite sin fin (lo vigila
 * test/movimiento-sitio.test.js). Con translate y scale, no con alturas: la cabecera se recoge sin
 * que lo de debajo dé un salto.
 */
@media screen and (prefers-reduced-motion: no-preference) {

  /* ---------- Fundido entre paginas ---------- */

  @view-transition {
    navigation: auto;
  }

  .movimiento-sitio .cabecera {
    view-transition-name: cabecera;
  }

  .movimiento-sitio .contacto-flotante {
    view-transition-name: contacto-flotante;
  }

  .movimiento-sitio::view-transition-old(root) {
    animation-name: sitio-pagina-sale;
    animation-duration: .28s;
    animation-timing-function: cubic-bezier(.4, 0, 1, 1);
    animation-fill-mode: both;
  }

  .movimiento-sitio::view-transition-new(root) {
    animation-name: sitio-pagina-entra;
    animation-duration: .5s;
    animation-timing-function: var(--suave);
    animation-delay: .08s;
    animation-fill-mode: both;
  }

  /* ---------- La cabecera se recoge al bajar ---------- */

  .movimiento-sitio .cabecera {
    transition: translate .35s var(--suave);
  }

  .movimiento-sitio .cabecera-barra {
    transition: translate .35s var(--suave);
  }

  .movimiento-sitio .cabecera-logo img {
    transform-origin: left center;
    transition: scale .35s var(--suave);
  }

  .movimiento-sitio .cabecera--recogida {
    translate: 0 -12px;
    box-shadow: 0 8px 24px rgba(27, 37, 64, .08);
  }

  .movimiento-sitio .cabecera--recogida .cabecera-barra {
    translate: 0 6px;
  }

  .movimiento-sitio .cabecera--recogida .cabecera-logo img {
    scale: .8;
  }

  /* ---------- Con raton: botones que se levantan y tarjetas que lo siguen ---------- */

  @media (hover: hover) and (pointer: fine) {
    .movimiento-sitio .btn {
      position: relative;
      overflow: hidden;
      transition: translate .25s var(--suave);
    }

    .movimiento-sitio .btn:hover {
      translate: 0 -2px;
      box-shadow: 0 10px 24px rgba(27, 37, 64, .18);
    }

    /* El brillo espera fuera del boton (lo recorta su overflow) hasta que el raton pasa. */
    .movimiento-sitio .btn::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 40%;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
      transform: skewX(-20deg);
      translate: -160% 0;
    }

    .movimiento-sitio .btn:hover::after {
      animation-name: sitio-brillo;
      animation-duration: .8s;
      animation-timing-function: var(--suave);
    }

    /* La captura de cada tarjeta de /modulos/ recorre la pagina de su modulo (como en
       jm2informatica.com/productos/). */
    .movimiento-sitio .modulo-captura img {
      transition: translate 6s cubic-bezier(.45, 0, .55, 1);
    }

    .movimiento-sitio .tarjeta-modulo:hover .modulo-captura img {
      translate: 0 calc(-100% + 100cqh);
    }

    .movimiento-sitio .tarjeta--viva {
      position: relative;
      transition: transform .2s var(--suave);
    }

    .movimiento-sitio .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) var(--my), rgba(208, 28, 37, .08), transparent 45%);
    }

    .movimiento-sitio .tarjeta--viva:hover::after {
      opacity: 1;
    }
  }

  @keyframes sitio-pagina-sale {
    to { opacity: 0; transform: translateY(-10px); }
  }

  @keyframes sitio-pagina-entra {
    from { opacity: 0; transform: translateY(16px); }
  }

  @keyframes sitio-brillo {
    from { translate: -160% 0; }
    to { translate: 330% 0; }
  }
}