/* Anillo · Moxen — los estilos del efecto y de la demostración. */
:root {
  --an-fondo: #0a0a0a;
  --an-texto: #f4f4f4;
  --an-suave: rgba(255, 255, 255, .45);
  --an-tinta: 244, 244, 244;          /* el arco y las marcas (r, g, b; las lee anillo.js) */
  --an-carril: .07;                   /* lo que se ve el carril vacío */
  --an-brillo: .45;                   /* el halo de la chispa */
  --an-tam: min(400px, 80vw);
  --an-curva: cubic-bezier(.22, 1, .36, 1);
}

/* ── el efecto ─────────────────────────────────────────────────────── */
.an-anillo { position: relative; width: var(--an-tam); height: var(--an-tam); }
/* el lienzo: el carril, el arco con su degradado, las marcas y la chispa */
.an-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }

.an-centro { position: absolute; inset: 0; display: grid; place-items: center; }
.an-cifra, .an-tilde { grid-area: 1 / 1; }
/* la cifra: columnas de dígitos que ruedan (anillo.js las mueve) */
.an-cifra {
  margin: 0; display: flex; align-items: flex-start; font-size: calc(var(--an-tam) * .25); font-weight: 500;
  letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
  transition: opacity .35s, transform .6s var(--an-curva);
}
[data-anillo-numero] { display: flex; height: 1em; overflow: hidden; }
.an-columna { display: flex; flex-direction: column; will-change: transform; }
.an-columna span { height: 1em; }
.an-cifra small { font-size: .32em; margin: .14em 0 0 .08em; letter-spacing: 0; color: var(--an-suave); }
.an-tilde { width: 38%; overflow: visible; fill: none; stroke: var(--an-texto); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.an-tilde path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .2s; }

/* terminado: la cifra sube y se va, se dibuja el ✓, el anillo late una
   vez y sale una onda */
.is-listo .an-cifra { opacity: 0; transform: translateY(-18%) scale(.9); }
.is-listo .an-tilde path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--an-curva) .2s; }
.is-listo .an-lienzo { animation: an-late .8s var(--an-curva); }
@keyframes an-late { 35% { transform: scale(1.04); } }
.an-eco { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--an-suave); opacity: 0; pointer-events: none; }
.is-listo .an-eco { animation: an-eco 1.2s cubic-bezier(.2, .7, .3, 1); }
@keyframes an-eco { from { opacity: .8; transform: scale(.98); } to { opacity: 0; transform: scale(1.4); } }

/* ── la demostración ───────────────────────────────────────────────── */
.an-escena { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; cursor: pointer; }
.an-estado { margin: 0; display: grid; font-size: .85rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--an-suave); }
.an-estado span { grid-area: 1 / 1; text-align: center; transition: opacity .3s, translate .45s var(--an-curva); }
.an-estado span:last-child { opacity: 0; translate: 0 .6em; color: var(--an-texto); }
.an-escena:has(.is-listo) .an-estado span:first-child { opacity: 0; translate: 0 -.6em; }
.an-escena:has(.is-listo) .an-estado span:last-child { opacity: 1; translate: 0 0; }
.an-pista { position: absolute; bottom: 2.2rem; margin: 0; color: var(--an-suave); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .is-listo .an-lienzo, .is-listo .an-eco { animation: none; }
}