/* Transición de cambio de tema (js/theme.js). Se carga sin bloquear el
   renderizado (media="print" → "all" en index.html): solo hace falta al
   pulsar el botón, no en la carga. Detalle del efecto en ARCHITECTURE.md. */

@property --theme-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* A claro: el día nuevo crece encima. */
:root.theme-to-light::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--theme-x) var(--theme-y), #000 var(--theme-r), transparent calc(var(--theme-r) + 18vmax));
  mask-image: radial-gradient(circle at var(--theme-x) var(--theme-y), #000 var(--theme-r), transparent calc(var(--theme-r) + 18vmax));
  animation: theme-sunrise 1.1s cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* A oscuro: el día viejo queda encima y se recoge hacia el botón. */
:root.theme-to-dark::view-transition-old(root) {
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle at var(--theme-x) var(--theme-y), #000 var(--theme-r), transparent calc(var(--theme-r) + 18vmax));
  mask-image: radial-gradient(circle at var(--theme-x) var(--theme-y), #000 var(--theme-r), transparent calc(var(--theme-r) + 18vmax));
  animation: theme-sunset 0.95s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes theme-sunrise {
  from { --theme-r: 0px; filter: saturate(1.5) brightness(1.04) sepia(0.3); }
  to { --theme-r: var(--theme-rmax); filter: none; }
}

@keyframes theme-sunset {
  from { --theme-r: var(--theme-rmax); filter: none; }
  to { --theme-r: -18vmax; filter: saturate(1.4) brightness(0.8) hue-rotate(-20deg); }
}

/* Destello: un halo que nace en el botón y se disuelve (cálido al
   amanecer, índigo al anochecer). theme.js lo añade solo durante la
   transición; con view-transition-name tiene su propia capa, que se pinta
   por encima de las dos instantáneas de la página. */
.theme-flare {
  position: fixed;
  z-index: 1000;
  left: var(--theme-x);
  top: var(--theme-y);
  width: 90vmax;
  height: 90vmax;
  margin: -45vmax 0 0 -45vmax;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 170, 0.75) 0%, rgba(255, 168, 110, 0.42) 14%, rgba(255, 110, 170, 0.22) 32%, transparent 62%);
  view-transition-name: theme-flare;
}

.theme-flare--dusk {
  background: radial-gradient(circle, rgba(190, 170, 255, 0.85) 0%, rgba(120, 90, 255, 0.45) 14%, rgba(60, 40, 160, 0.2) 32%, transparent 62%);
}

::view-transition-group(theme-flare) {
  animation: none;
}

::view-transition-old(theme-flare) {
  display: none;
}

::view-transition-new(theme-flare) {
  animation: theme-flare 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes theme-flare {
  0% { transform: scale(0.02); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Fallback sin View Transitions: fundido de colores. */
.is-theme-fading,
.is-theme-fading *,
.is-theme-fading *::before,
.is-theme-fading *::after {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}