/* ============================================================
   transiciones.css — lo que se mueve al cambiar de sitio

   · emerger: los bloques salen de la arena (más abajo, desenfocados y con
     una máscara que se retira de arriba abajo) al entrar en pantalla;
   · View Transitions: el viaje entre etapas y la metamorfosis del mapa.
     El desierto, el grano y el HUD tienen nombre propio, así que NO
     viajan con la página: el desierto se queda y son sus dunas las que
     avanzan una jornada (escena/desierto.js).
   · Calma y prefers-reduced-motion lo apagan todo.
   ============================================================ */

.emerge {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-size: 100% 260%;
  mask-size: 100% 260%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition:
    opacity 0.8s var(--curva) var(--retardo, 0ms),
    transform 0.95s var(--curva) var(--retardo, 0ms),
    filter 0.95s var(--curva) var(--retardo, 0ms),
    -webkit-mask-position 1.1s var(--curva) var(--retardo, 0ms),
    mask-position 1.1s var(--curva) var(--retardo, 0ms);
}
.emerge.visible {
  opacity: 1; transform: none; filter: none;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}

/* ------------------------------------------------------------ View Transitions */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.62s;
  animation-timing-function: var(--curva);
}
html[data-viaje="adelante"]::view-transition-old(root) { animation-name: vtSaleIzq; }
html[data-viaje="adelante"]::view-transition-new(root) { animation-name: vtEntraDer; }
html[data-viaje="atras"]::view-transition-old(root) { animation-name: vtSaleDer; }
html[data-viaje="atras"]::view-transition-new(root) { animation-name: vtEntraIzq; }
html[data-viaje="morf"]::view-transition-old(root) { animation: vtDesvanece 0.4s ease both; }
html[data-viaje="morf"]::view-transition-new(root) { animation: vtSube 0.65s var(--curva) 0.12s both; }

::view-transition-group(etapa) { animation-duration: 0.75s; animation-timing-function: var(--curva); }
::view-transition-group(desierto),
::view-transition-group(grano),
::view-transition-group(hud) { animation: none; }
::view-transition-old(desierto) { display: none; }
::view-transition-new(desierto) { animation: none; opacity: 1; }

@keyframes vtSaleIzq { to { transform: translateX(-8%); opacity: 0; filter: blur(8px) sepia(0.6); } }
@keyframes vtEntraDer { from { transform: translateX(8%); opacity: 0; filter: blur(8px); } }
@keyframes vtSaleDer { to { transform: translateX(8%); opacity: 0; filter: blur(8px) sepia(0.6); } }
@keyframes vtEntraIzq { from { transform: translateX(-8%); opacity: 0; filter: blur(8px); } }
@keyframes vtDesvanece { to { opacity: 0; filter: blur(10px); transform: scale(0.985); } }
@keyframes vtSube { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }

/* ------------------------------------------------------------ calma */

html.calma .emerge,
html.calma .emerge.visible { opacity: 1; transform: none; filter: none; -webkit-mask-image: none; mask-image: none; transition: none; }
html.calma *, html.calma *::before, html.calma *::after { animation: none !important; }
html.calma .mp-hito, html.calma .mp-camp { opacity: 1; }
html.calma .mp-ruta { stroke-dashoffset: 0; }
html.calma .mp-ruta-huellas { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .emerge, .emerge.visible { opacity: 1; transform: none; filter: none; -webkit-mask-image: none; mask-image: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mp-hito, .mp-camp { opacity: 1; }
  .mp-ruta { stroke-dashoffset: 0; }
  .mp-ruta-huellas { opacity: 0.5; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}