/* ============================================================
   ARTHEA¹⁷ — motion.css
   Capa compartida de movimiento. Se carga en todas las páginas,
   después de announcements.css y mobile.css.

   Contiene:
     1. Tokens de easing y duración
     2. Cursor (por capacidad del dispositivo)
     3. Reveal al hacer scroll + stagger
     4. Scroll-driven (parallax, máscaras, progreso)
     5. View Transitions entre páginas
     6. prefers-reduced-motion — apaga todo lo anterior
   ============================================================ */


/* ============================================================
   1. TOKENS
   Duraciones en la banda 140–220ms: por debajo se pierde el
   movimiento, por encima se percibe lentitud.
   ============================================================ */
:root {
  /* Entradas. Arranca disparado y frena: se lee como instantáneo. */
  --e-out:   cubic-bezier(.22, 1, .36, 1);
  /* Cambios de estado (abrir/cerrar, activo/inactivo). */
  --e-io:    cubic-bezier(.65, 0, .35, 1);
  /* SOLO para lo que se va de pantalla. Nunca para entradas. */
  --e-in:    cubic-bezier(.4, 0, 1, 1);
  /* Versión más lenta y contenida, para superficies grandes. */
  --e-soft:  cubic-bezier(.16, .84, .44, 1);

  --d-fast:  160ms;   /* hovers, cambios de color */
  --d-base:  200ms;   /* transformaciones pequeñas */
  --d-slow:  320ms;   /* paneles, capas, navegación */

  --stagger: 60ms;    /* desfase entre hermanos */
}


/* ============================================================
   1b. PALETA — escalas de los dos colores de marca

   Un color no es un valor: es una escala. Los tintes son el
   mismo coral y el mismo violeta rebajados sobre blanco, así
   que suavizan sin añadir ninguna tinta nueva a la paleta.

   Se probó bajar el violeta a #5842AD (L* 36) para que quedara
   por debajo del coral. Sobre los fondos negros se camuflaba, así
   que se mantiene #6B5CE7. A cambio, la jerarquía se sostiene por
   USO y no por color: coral y violeta nunca en el mismo bloque.
   ============================================================ */
:root {
  --coral-1:    #FFF2F2;   /* fondo apenas teñido */
  --coral-2:    #FFEBEB;   /* fondo de aviso */
  --coral-3:    #FEDEDE;   /* borde, separador */
  --coral-tx:   #C9403F;   /* texto sobre los fondos de arriba */

  --violeta-1:  #F3F2FD;
  --violeta-2:  #EDEBFC;
  --violeta-3:  #E1DEFA;
  --violeta-cl: #948AEE;   /* si hiciera falta más claro sobre negro */
}


/* ============================================================
   2. CURSOR

   ARTHEA usa un cursor propio: un punto que sigue al ratón y un
   anillo que llega con retardo (.cur / #cur-dot / #cur-ring, en
   cada página). Por eso hay `cursor: none` por toda la web — es
   deliberado: oculta la flecha del sistema para que el único
   cursor visible sea el nuestro. No tocar.

   Lo que sí faltaba: decidir CUÁNDO existe ese cursor.

   mobile.css lo esconde por ANCHO (max-width: 768px). El fallo
   está en el caso de "vista ordenador" desde un móvil: el ancho
   pasa a ser de escritorio, la regla deja de aplicar, y aparece
   un punto y un anillo congelados en una esquina — porque no hay
   ratón que los mueva.

   Se decide por CAPACIDAD, no por ancho:
     hover: none      no puede posarse encima sin pulsar (dedo)
     pointer: coarse  apunta sin precisión (dedo)

   Resultado:
     ratón / trackpad / iPad con Magic Keyboard  →  cursor propio
     dedo en móvil o tablet                      →  ninguno
     dedo en "vista ordenador"                   →  ninguno ✔
     Apple Pencil                                →  ninguno
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .cur {
    display: none !important;
  }
  /* Si el dispositivo llegara a dibujar una flecha, que sea la suya. */
  body {
    cursor: auto;
  }
}

/* El cursor y el subrayado del nav crecían animando `width` y
   `height`, lo que obliga al navegador a recalcular el layout en
   cada frame — y ocurría en CADA hover de toda la web. Están
   pasados a `transform: scale()` en el CSS de cada página (mismo
   tamaño a la vista: 13px el punto, 46px el anillo), usando los
   tokens --e-out y --e-soft de aquí arriba. */


/* ============================================================
   3. REVEAL + STAGGER

   .rv ya existía en index.html. Aquí se le añade el desfase entre
   hermanos: sin él, las 6 tarjetas de una sección aparecen en el
   mismo frame y se leen como un parpadeo, no como una secuencia.

   Uso:  <div class="rv" style="--i:0">  <div class="rv" style="--i:1"> …
   O bien dejar que motion.js numere solo los hijos de un .rv-group.
   ============================================================ */
/* Se esconde SOLO si hay JavaScript para volver a mostrarlo.
   Sin script (o si motion.js falla), el contenido se ve tal cual:
   una animación nunca puede ser la razón de que algo no se lea. */
@media (scripting: enabled) {
  .rv {
    opacity: 0;
    transform: translateY(22px);
  }
}
.rv {
  transition:
    opacity   var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* Variantes de dirección, para que no todo entre igual. */
.rv-left  { transform: translateX(-28px); }
.rv-right { transform: translateX(28px); }
.rv-scale { transform: scale(.96); }
.rv-left.in, .rv-right.in, .rv-scale.in { transform: none; }


/* ============================================================
   4. SCROLL-DRIVEN

   Animaciones ligadas al scroll, no al reloj. Corren en el hilo
   del compositor, así que no compiten con el JavaScript ni se
   atascan al hacer scroll rápido.

   Todo va dentro de @supports: donde no existe, no pasa nada y
   el contenido se ve normal. No hay fallback que escribir.
   ============================================================ */
@supports (animation-timeline: view()) {

  /* ---- 4.1 Parallax sobre una imagen ----------------------
     La obra se desplaza más despacio que la página mientras la
     recorres. Da sensación de profundidad sin mover el layout.
     Uso: <div class="mo-parallax"><img …></div>              */
  .mo-parallax {
    overflow: hidden;
  }
  .mo-parallax > img,
  .mo-parallax > .mo-parallax-inner {
    will-change: transform;
    animation: mo-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes mo-parallax {
    from { transform: translateY(-8%)  scale(1.16); }
    to   { transform: translateY(8%)   scale(1.16); }
  }

  /* ---- 4.2 Revelado por máscara ---------------------------
     La pieza se descubre de abajo a arriba según entra, como si
     se levantara un papel. Más editorial que un fundido.        */
  .mo-unmask {
    animation: mo-unmask linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 65%;
  }
  @keyframes mo-unmask {
    from {
      clip-path: inset(0 0 100% 0);
      opacity: .4;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

  /* ---- 4.3 Entrada suave genérica -------------------------
     Igual que .rv pero ligada al scroll: si vuelves atrás, se
     deshace. Para elementos que se recorren, no que se leen.    */
  .mo-fade {
    animation: mo-fade linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }
  @keyframes mo-fade {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- 4.4 Titular que se asienta -------------------------
     Escala mínima (1.04 → 1) + opacidad. Muy poco recorrido a
     propósito: en un titular grande, 4% ya se nota.

     Solo transform y opacity: son las dos únicas propiedades que
     el navegador puede animar sin recalcular el layout. Tocar
     aquí letter-spacing o margin obligaría a rehacer la línea en
     cada frame del scroll, y en un titular de 9rem se nota.      */
  .mo-settle {
    transform-origin: left center;
    animation: mo-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  @keyframes mo-settle {
    from { opacity: 0; transform: scale(1.04) translateY(14px); }
    to   { opacity: 1; transform: none;                         }
  }

  /* ---- 4.5 Barra de progreso de lectura -------------------
     Para el magazine y las fichas largas. Se estira con el
     scroll del documento entero.                                */
  .mo-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    transform-origin: 0 50%;
    background: var(--red, #FB5959);
    z-index: 900;
    animation: mo-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes mo-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* ---- 4.6 Imagen que se acerca ---------------------------
     Zoom lento mientras la sección cruza la pantalla. Para
     cabeceras de landing con una sola imagen grande.            */
  .mo-zoom > img,
  .mo-zoom > .mo-zoom-inner {
    will-change: transform;
    animation: mo-zoom linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .mo-zoom { overflow: hidden; }
  @keyframes mo-zoom {
    from { transform: scale(1.14); }
    to   { transform: scale(1);    }
  }
}


/* ============================================================
   5. VIEW TRANSITIONS

   Anima el paso de una página a otra: se acaba el parpadeo en
   blanco. Cero JavaScript. Donde no hay soporte, se navega como
   siempre.
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--d-slow);
  animation-timing-function: var(--e-out);
}

/* La barra de navegación no viaja: si se funde, parpadea. */
::view-transition-group(nav) {
  animation: none;
}

/* La obra que viaja de la rejilla a su ficha va algo más lenta
   que el fondo. Esa diferencia es lo que le da peso. */
::view-transition-group(.mo-piece),
::view-transition-group(*[class*="obra-"]) {
  animation-duration: 420ms;
  animation-timing-function: var(--e-soft);
}


/* ============================================================
   6. PREFERS-REDUCED-MOTION

   Ajuste del sistema operativo (Windows: Accesibilidad → Efectos
   visuales · macOS/iOS: Accesibilidad → Reducir movimiento).
   Para personas con trastorno vestibular, migraña vestibular o
   epilepsia fotosensible el movimiento provoca mareo real.

   Va al final para ganar a todo lo anterior. No afecta a nadie
   que no lo haya activado en su propio dispositivo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1     !important;
    animation-delay:           0s    !important;
    transition-duration:       .01ms !important;
    transition-delay:          0s    !important;
    scroll-behavior:           auto  !important;
  }

  html { scroll-behavior: auto !important; }

  /* Nada se queda invisible por haber apagado su animación. */
  .rv, .mo-fade, .mo-unmask, .mo-settle {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Las marquesinas, el grano y las tiras infinitas se detienen.
     El bloque universal de arriba ya las para por sí solo (con
     fill-mode: none vuelven a su posición base, comprobado), pero
     `animation: none` es la garantía dura: si algún día una de
     ellas usara fill-mode: forwards, se quedaría congelada a
     mitad de recorrido y escondería medio contenido.
     Son los 14 bucles reales de la web, por su nombre exacto. */
  .marquee-track,
  .cenefa-run-inner,
  .art-strip-row,
  .evt-strip-inner,
  .ap-track,
  .comm-carousel-track,
  .comm-sep-inner,
  .esp-ticker-inner,
  .expo-ticker-inner,
  .mus-ticker-inner,
  .mix-strip,
  .grain,
  [class*="grain"] {
    animation: none !important;
  }

  @view-transition { navigation: none; }
}