/* =========================================================
   Aqualaf — View Transitions API (cross-document)
   Reemplaza el overlay/cortina de Barba.js por transiciones
   nativas del navegador.

   Ver: inc/view-transitions.php  (carga y rollback)
        assets/js/view-transitions.js (pageswap / pagereveal)
   ========================================================= */

/* ── 1. Opt-in cross-document ─────────────────────────────
   Ambas páginas (origen y destino) deben declararlo. Como el
   CSS se carga en todo el front, cualquier navegación interna
   entra. Los links a /wp-admin o externos no lo tienen → nav normal. */
@view-transition {
  navigation: auto;
}

/* Respeta la preferencia de sistema: sin animación, navegación clásica. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}


/* ── 2. Transición base de página ─────────────────────────
   Sólo opacidad. Los snapshots de root son del tamaño del
   viewport: moverlos o escalarlos compite con el JS que la
   página entrante está arrancando (GSAP, Lenis, Swiper) y se
   nota como tirón. Un crossfade corto es lo único que sale
   gratis en el compositor. */
@keyframes aq-vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aq-vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* El crossfade por defecto del navegador usa `plus-lighter` sobre un
   stacking context aislado. Al poner animaciones propias hay que volver
   a modo normal o los colores se "lavan" durante el cruce. */
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

::view-transition-old(root) {
  animation: aq-vt-fade-out 130ms linear both;
}

::view-transition-new(root) {
  animation: aq-vt-fade-in 190ms linear both;
}


/* ── 3. Elementos persistentes ────────────────────────────
   Al darles nombre propio salen del snapshot de `root`: dejan
   de parpadear y morphean de una página a la otra. */
.site-header {
  view-transition-name: aq-header;
}

#wpadminbar {
  view-transition-name: aq-adminbar;
}

::view-transition-group(aq-header) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-image-pair(aq-header) {
  isolation: auto;
}

/* El header es visualmente igual entre páginas: un crossfade corto
   alcanza para absorber cambios de estado (is-scrolled / is-dark). */
::view-transition-old(aq-header) {
  mix-blend-mode: normal;
  animation: aq-vt-fade-out 140ms linear both;
}

::view-transition-new(aq-header) {
  mix-blend-mode: normal;
  animation: aq-vt-fade-in 140ms linear both;
}


/* NOTA: acá vivía un morph de la imagen del producto (card del catálogo →
   ficha). Se sacó: la card usa el tamaño `medium` y la ficha el `full`, así
   que el navegador escalaba un thumbnail chico mientras la imagen grande
   todavía estaba bajando, y el salto se veía sucio y trabado. */


/* ── 4. Overlays que no deben quedar congelados en el snapshot ──
   `aq-vt-leaving` lo agrega el JS dentro de `pageswap`, justo antes
   de que el navegador fotografíe la página saliente. */
html.aq-vt-leaving .cursor,
html.aq-vt-leaving .loader,
html.aq-vt-leaving .page-transition,
html.aq-vt-leaving .mobile-nav,
html.aq-vt-leaving .aq-shop-filter-backdrop {
  display: none !important;
}


/* ── 5. Restos de Barba.js ────────────────────────────────
   El markup de la cortina sigue en header.php por si hay rollback,
   pero ya no lo anima nadie: lo dejamos fuera de juego. */
.page-transition {
  display: none !important;
}