.timer-wrapper {
  position: relative;
  display: inline-block;
  padding: 2.5rem 3rem;

  /* ── Sizing tokens ─────────────────────────────────────────────────────────
     --digit-size  : font-size of the numbers and the separator colon.
     --flip-w      : width of each digit card. Must fit 3 chars at --digit-size
                     (days can reach 3 digits). Rule of thumb: ~1.6 × --digit-size.
     --flip-h      : height of each digit card. Must be taller than --digit-size
                     so the slide-in animation has room to enter from below.
     --label-size  : font-size of the DAYS / HOURS / MIN / SEC labels.
     --text-shadow : shared soft shadow applied to all timer text. Blur radius
                     controls softness — increase for a hazier halo, decrease
                     for a tighter one. Change once here, updates everywhere.
  ── ──────────────────────────────────────────────────────────────────────── */
  --digit-size  : 7.5rem;
  --flip-w      : 16rem;
  --flip-h      : 9rem;
  --label-size  : 3.75rem;
  --text-shadow :
    0 0 18px rgba(0, 0, 0, 0.95),
    0 4px 24px rgba(0, 0, 0, 0.7),
    0 0  30px rgba(255, 255, 255, 0.08);
}

.timer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.timer-display {
  position: relative;
  z-index: 1;
  text-align: center;
}

.timer-label-main {
  font-size: 3.75rem;
  font-family: 'Pieces of Eight', serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 1.25rem;
  text-shadow: var(--text-shadow);
}

.timer-units {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* overflow: hidden clips the slide-in / slide-out animation.
   Width and height must come from the tokens above — never hardcode here. */
.timer-flip-wrap {
  position: relative;
  width: var(--flip-w);
  height: var(--flip-h);
  overflow: hidden;
}

.timer-cur,
.timer-nxt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--digit-size);
  font-family: 'Pieces of Eight', serif;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: var(--text-shadow);
}

/* Hidden off-screen below until the flip animation brings it up */
.timer-nxt {
  transform: translateY(110%);
  opacity: 0;
}

@keyframes flip-out {
  0%   { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0; }
}

@keyframes flip-in {
  0%   { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.timer-flip-wrap.flipping .timer-cur {
  animation: flip-out 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.timer-flip-wrap.flipping .timer-nxt {
  animation: flip-in 0.25s cubic-bezier(0, 0, 0.6, 1) 0.2s forwards;
}

/* Separator colon — red glow kept separate from --text-shadow since it's a
   distinct colour effect, not just depth/softness */
.timer-sep {
  font-size: var(--digit-size);
  font-weight: 900;
  color: var(--red-600);
  margin-bottom: 6.5rem;
  text-shadow: 0 0 12px rgba(220, 38, 38, 0.7);
  animation: sep-pulse 3s ease-in-out infinite;
}

@keyframes sep-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.timer-unit-label {
  font-size: var(--label-size);
  font-family: 'Pieces of Eight', serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zinc-500);
  text-shadow: var(--text-shadow);
}