/* ==========================================================================
   Finde · Hitos del registro (D-37; elegidos en D-36)
   Dos momentos que pasan una sola vez por familia y por eso pueden tomarse
   más tiempo que un paso normal:
   - listo.html  · "Listo 2": el check se dibuja y sale una ráfaga de confeti.
   - ubicacion.html · "Zonas 1": radar — anillos y un barrido desde su distrito,
     cada zona aparece cuando el barrido pasa por ella.
   Ideas tomadas de 21st.dev ("welcome", "Success Login Card", "Radar Effect"),
   reescritas con nuestros tokens y sin librerías. Lo arma js/hitos.js.
   `--hito-base` corre todo después de que la pantalla termina de entrar
   (css/motion.css la desliza en --dur-base).
   ========================================================================== */

:root { --hito-base: 220ms; }

/* --- Trazos que se dibujan (el largo real lo pone js/hitos.js) ------------ */
.hito-trazo { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* --- ¡Todo listo! ---------------------------------------------------------- */
.hito-listo .listo-icon { position: relative; animation: hito-pop 640ms var(--spring-vivo) both; animation-delay: var(--hito-base); }
.hito-listo .listo-icon .hito-trazo {
  stroke-dasharray: var(--largo, 40); stroke-dashoffset: var(--largo, 40);
  animation: hito-dibuja 460ms var(--ease) both; animation-delay: calc(var(--hito-base) + 260ms);
}
.hito-listo .listo-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--coral-600);
  animation: hito-onda 900ms var(--ease) both; animation-delay: calc(var(--hito-base) + 560ms);
  pointer-events: none;
}
.hito-listo .hito-sube { animation: hito-sube 520ms var(--spring-suave) both; animation-delay: calc(var(--hito-base) + var(--hito-retardo, 0ms)); }
.hito-listo .listo-check__dot { animation: hito-pop 520ms var(--spring-vivo) both; animation-delay: calc(var(--hito-base) + var(--hito-retardo, 0ms)); }
.hito-listo .listo-check__dot .hito-trazo {
  stroke-dasharray: var(--largo, 20); stroke-dashoffset: var(--largo, 20);
  animation: hito-dibuja 300ms var(--ease) both; animation-delay: calc(var(--hito-base) + var(--hito-retardo, 0ms) + 180ms);
}
.hito-listo .listo-check > span:last-child { animation: hito-aparece 360ms var(--ease) both; animation-delay: calc(var(--hito-base) + var(--hito-retardo, 0ms) + 120ms); }

.hito-confeti { position: absolute; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* --- Zonas: radar ---------------------------------------------------------- */
.hito-radar { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* D-38: sobre un mapa real (Leaflet), entre las teselas (200) y los marcadores (600). */
.leaflet-container .hito-radar { z-index: 450; }
.leaflet-tile-pane { transition: filter 600ms var(--ease); }
.hito-radar-espera .leaflet-tile-pane { filter: saturate(.3) brightness(1.04); }
.map-static .map-pin { z-index: 3; }
.hito-anillo, .hito-barrido {
  position: absolute; left: var(--cx); top: var(--cy);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  opacity: 0;
}
.hito-anillo { border: 1.5px solid rgba(254, 92, 71, .45); }
.hito-barrido {
  background: conic-gradient(from 0deg, rgba(254, 92, 71, 0) 0deg, rgba(254, 92, 71, 0) 290deg, rgba(254, 92, 71, .34) 360deg);
  -webkit-mask: radial-gradient(circle, #000 64%, transparent 71%);
  mask: radial-gradient(circle, #000 64%, transparent 71%);
}
.map-static img { transition: filter 600ms var(--ease); }
.hito-radar-espera .map-static img { filter: saturate(.3) brightness(1.04); }
.hito-radar-espera .map-pin { opacity: 0; animation: hito-rescate 1ms 3s forwards; } /* si el JS no corre, igual aparecen */
@keyframes hito-rescate { to { opacity: 1; } }
.map-pin.hito-pin { animation: hito-pin 620ms var(--spring-vivo) both; animation-delay: var(--hito-retardo, 0ms); }
.map-pin.hito-pin .map-pin__label { animation: hito-etiqueta 380ms var(--ease) both; animation-delay: calc(var(--hito-retardo, 0ms) + 220ms); }

@keyframes hito-pop      { from { transform: scale(0); } }
@keyframes hito-dibuja   { to { stroke-dashoffset: 0; } }
@keyframes hito-onda     { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes hito-sube     { from { opacity: 0; transform: translateY(14px); } }
@keyframes hito-aparece  { from { opacity: 0; transform: translateX(-6px); } }
@keyframes hito-pin      { from { opacity: 0; transform: translate(-50%, calc(-100% - 18px)) scale(.4); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
@keyframes hito-etiqueta { from { opacity: 0; transform: translateY(-4px); } }
@keyframes hito-anillo-entra { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes hito-anillo-sale  { to { opacity: 0; } }
@keyframes hito-gira { 0% { opacity: 0; transform: rotate(0deg); } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hito-confeti, .hito-radar { display: none; }
  .hito-radar-espera .map-static img { filter: none; }
  .hito-radar-espera .map-pin { opacity: 1; }
}