/* ==========================================================================
   MOVIMIENTO — sistema de apariciones al hacer scroll, igual en toda la web.
   Lo activa assets/js/motion.js añadiendo data-in a cada elemento cuando
   entra en pantalla. Tres tipos, con atributos en el marcado:

     data-rise         sube y aparece (bloques de texto, tarjetas, filas)
     data-mask         el texto sube desde detrás de una máscara (titulares)
                       <h2><span data-mask><span>Título</span></span></h2>
     data-mask-parent  varias líneas con máscara que entran en cascada
                       (títulos multilínea de la home y del CTA)
     data-reveal       la imagen se descubre de abajo arriba (cortinilla)

   Retardos: data-d="1..4" fija el orden a mano (heros). Sin data-d, motion.js
   escalona automáticamente los elementos que entran a la vez (una fila de
   tarjetas, una lista).

   Los estados ocultos solo se aplican con .pg-js en <html> (lo pone un
   script en <head>, inc/enqueue.php): sin JavaScript todo se ve normal.
   ========================================================================== */

/* ---- Estructura de las máscaras (visible también sin JS) ----
   padding-bottom deja sitio a los descendentes (g, y, j) para que el
   overflow:hidden no los recorte con interlineados tan bajos. */
[data-mask] { display: block; overflow: hidden; padding-bottom: .14em; }
[data-mask] > span { display: block; }

/* ---- Estados ocultos ---- */
.pg-js [data-rise] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.pg-js [data-mask] > span {
  transform: translateY(105%);
  transition: transform var(--dur-reveal) var(--ease-out);
}
.pg-js [data-reveal] {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transition: clip-path var(--dur-reveal) var(--ease-out), transform 1.5s var(--ease-out);
}

/* ---- Estados visibles ---- */
.pg-js [data-rise][data-in] { opacity: 1; transform: none; }
.pg-js [data-mask][data-in] > span,
.pg-js [data-mask-parent][data-in] [data-mask] > span { transform: none; }
.pg-js [data-reveal][data-in] { clip-path: inset(0); transform: none; }

/* Cascada de líneas dentro de un título multilínea */
[data-mask-parent] [data-mask][data-d="1"] > span { transition-delay: .1s; }
[data-mask-parent] [data-mask][data-d="2"] > span { transition-delay: .2s; }
[data-mask-parent] [data-mask][data-d="3"] > span { transition-delay: .3s; }
[data-mask-parent] [data-mask][data-d="4"] > span { transition-delay: .4s; }

/* ---- Movimiento reducido: todo visible desde el principio ---- */
@media (prefers-reduced-motion: reduce) {
  .pg-js [data-rise],
  .pg-js [data-mask] > span,
  .pg-js [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* ==========================================================================
   TRANSICIONES ENTRE PÁGINAS (View Transitions API, entre documentos)
   Al navegar dentro de la web, la página saliente y la entrante se funden
   en vez de cortar en seco. Y la imagen de un proyecto (tarjeta de la home,
   del listado o "Siguiente proyecto") se transforma en la imagen principal
   del caso de estudio: comparten view-transition-name (pg_vt_name(), en
   inc/helpers.php). Navegadores sin soporte (Firefox, hoy) navegan normal.
   ========================================================================== */
@view-transition { navigation: auto; }

/* Fundido general, corto para que navegar no se sienta lento */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .35s;
  animation-timing-function: var(--ease-out);
}

/* La nav es idéntica en todas las páginas: se queda quieta, sin fundido */
.pg-nav { view-transition-name: pg-nav; }
::view-transition-group(pg-nav) { animation: none; }

/* Imagen de proyecto → imagen principal del caso */
.pg-hm-case__img,
.pg-card-bg,
.pg-next__media,
.pg-case-hero-image { view-transition-class: pg-case; }

::view-transition-group(*.pg-case) {
  overflow: hidden;
  border-radius: var(--r-lg);
  animation-duration: .7s;
  animation-timing-function: var(--ease-out);
}
/* Las dos imágenes (tarjeta y hero) no tienen la misma proporción:
   recortamos en vez de deformar. */
::view-transition-old(*.pg-case),
::view-transition-new(*.pg-case) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Llegando con transición, la imagen del hero ya está en su sitio: sin
   cortinilla (si no, la transformación acabaría en una imagen oculta).
   .pg-vt lo pone el script de <head> (inc/enqueue.php) en 'pagereveal'. */
.pg-vt .pg-case-hero-image[data-reveal] { clip-path: none; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}