/*
 * View Transitions de la SPA. El router (js/router.js) envuelve cada cambio de vista en
 * document.startViewTransition y marca la dirección en <html data-nav-direction>.
 * Las pantallas nuevas heredan todo esto: solo deben reutilizar los view-transition-name.
 */

/* Elementos que persisten o fluyen entre pantallas (nombres únicos por página). */
.logo-row,
.login__logo,
.home__logo,
.test-detail__logo {
  view-transition-name: brand-logos;
}

.btn-primary--main {
  view-transition-name: primary-action;
}

/* Barra de progreso del cuestionario: el riel queda fijo y el relleno crece de una pregunta a
 * la siguiente (el riel va antes en el DOM, así el relleno se pinta encima). */
.progress-bar {
  view-transition-name: quiz-rail;
}

.progress-bar__fill {
  view-transition-name: quiz-progress;
}

/* El switch de tema queda quieto en su lugar al cambiar de pantalla. */
.theme-toggle {
  view-transition-name: theme-toggle;
}

/* Puntos de color de los estilos: identidad compartida por las pantallas que los muestran. */
.style-dots {
  view-transition-name: style-dots;
}

/* Transición por defecto: fundido con un pequeño desplazamiento horizontal. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--vt-duration);
  animation-timing-function: var(--vt-ease);
  animation-fill-mode: both;
}

::view-transition-old(root) {
  animation-name: vt-out-to-left;
}

::view-transition-new(root) {
  animation-name: vt-in-from-right;
}

[data-nav-direction="back"]::view-transition-old(root) {
  animation-name: vt-out-to-right;
}

[data-nav-direction="back"]::view-transition-new(root) {
  animation-name: vt-in-from-left;
}

/* Cambio de tema: fundido de toda la pantalla, sin desplazamiento. */
[data-theme-switch]::view-transition-old(root) {
  animation-name: vt-fade-out;
}

[data-theme-switch]::view-transition-new(root) {
  animation-name: vt-fade-in;
}

/* El switch se anima solo (perilla, sol y luna): sin la captura vieja encima, que lo duplicaría. */
[data-theme-switch]::view-transition-old(theme-toggle) {
  display: none;
}

[data-theme-switch]::view-transition-new(theme-toggle) {
  animation: none;
}

/* Círculo del ícono de un test: la tarjeta tocada del inicio y el círculo grande del detalle
 * comparten view-transition-name (test-icon-<id>, asignado desde JS solo a ese par). */
.test-detail__badge,
.home-card__badge {
  view-transition-class: test-icon;
}

::view-transition-group(.test-icon) {
  animation-duration: calc(var(--vt-duration) * 1.4);
  animation-timing-function: var(--vt-ease);
}

::view-transition-group(brand-logos),
::view-transition-group(theme-toggle),
::view-transition-group(primary-action),
::view-transition-group(style-dots),
::view-transition-group(quiz-rail),
::view-transition-group(quiz-progress) {
  animation-duration: var(--vt-duration);
  animation-timing-function: var(--vt-ease);
}

/* El relleno de la barra solo cambia de ancho: sus capturas ocupan toda la altura del grupo
 * (si no, crecerían también en alto al ensancharse). */
::view-transition-old(quiz-progress),
::view-transition-new(quiz-progress) {
  height: 100%;
}

/* El contenido del botón cambia de texto entre pantallas: fundido cruzado sin estirar. */
::view-transition-old(primary-action),
::view-transition-new(primary-action) {
  height: 100%;
  animation-duration: calc(var(--vt-duration) * 0.8);
}

@keyframes vt-out-to-left {
  to { opacity: 0; transform: translateX(calc(-1 * var(--vt-shift))); }
}

@keyframes vt-in-from-right {
  from { opacity: 0; transform: translateX(var(--vt-shift)); }
}

@keyframes vt-out-to-right {
  to { opacity: 0; transform: translateX(var(--vt-shift)); }
}

@keyframes vt-in-from-left {
  from { opacity: 0; transform: translateX(calc(-1 * var(--vt-shift))); }
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* Movimiento reducido: fundido muy corto, sin desplazamiento ni morph. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  [data-nav-direction="back"]::view-transition-old(root) {
    animation: vt-fade-out 120ms linear both;
  }

  ::view-transition-new(root),
  [data-nav-direction="back"]::view-transition-new(root) {
    animation: vt-fade-in 120ms linear both;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms !important;
  }

  .btn-primary,
  .btn-primary .icon,
  .field__control,
  .phone-input,
  .checkbox,
  .screen__footer::before,
  .option-card,
  .radio-dot::after {
    transition: none;
  }

  .spinner {
    animation: none;
  }
}