diff --git a/src/pages/[locale]/contador-voluntarios.astro b/src/pages/[locale]/contador-voluntarios.astro index aa66e22..50ebff1 100644 --- a/src/pages/[locale]/contador-voluntarios.astro +++ b/src/pages/[locale]/contador-voluntarios.astro @@ -45,18 +45,14 @@ const POLL_INTERVAL_MS = 10_000;
- - - + id="counter-number" + class="counter-number text-[clamp(3.5rem,16vw,9rem)] font-bold tabular-nums" + aria-hidden="true" + >0

@@ -92,19 +88,11 @@ const POLL_INTERVAL_MS = 10_000; .counter-card { animation: counter-fade-in 0.6s ease-out; } - .countdown { - font-variant-numeric: tabular-nums; + .counter-number { + display: inline-block; } - /* Fix para Safari/iOS: sin esto, las dos capas del dígito (actual y - siguiente) no quedan recortadas ni aisladas y se ven superpuestas. */ - .countdown > * { - overflow: clip; - isolation: isolate; - -webkit-transform: translateZ(0); - transform: translateZ(0); - } - .pulse-update { - animation: counter-pulse 0.5s ease-out; + .counter-number.counter-bump { + animation: counter-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes counter-fade-in { from { @@ -116,15 +104,18 @@ const POLL_INTERVAL_MS = 10_000; transform: translateY(0) scale(1); } } - @keyframes counter-pulse { + @keyframes counter-bump { 0% { transform: scale(1); + opacity: 1; } - 30% { - transform: scale(1.06); + 35% { + transform: scale(1.12) translateY(-0.05em); + opacity: 0.55; } 100% { - transform: scale(1); + transform: scale(1) translateY(0); + opacity: 1; } } @@ -132,15 +123,12 @@ const POLL_INTERVAL_MS = 10_000;