/* Countdown ----------------------------------------------------------- */
/* The release banner. It borrows the hero's ground: the themed gradient by
   default, and the .hero--color-* rules further down paint the duotone when
   the section carries one — they come later in the file on purpose, so they
   win this block's background. */
.countdown {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 4rem) var(--space-4);
  background: var(--gradient-hero);
  color: var(--ink);
  text-align: center;
}

.countdown__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  max-width: 48rem;
  margin: 0 auto;
}

.countdown__title {
  margin: 0;
  font-size: var(--text-2xl);
}

.countdown__lead {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 36rem;
}

.countdown__lead > :last-child {
  margin-bottom: 0;
}

.countdown__boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.countdown__box {
  min-width: 4.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  /* darkens on the light hero's near-white gradient, lightens on dark/coloured grounds */
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter: blur(4px);
}

.countdown__num {
  display: block;
  font-size: var(--display-s);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The seconds pulse as the clock starts — five beats, then they hold still:
   a blink that never ends is exactly what WCAG 2.2.2 asks to be stoppable,
   and the changing digit says the clock runs well enough on its own. */
.countdown__num[data-countdown-seconds] {
  animation: countdown-tick 1s ease-out 5 both;
}

.countdown__label {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
}

.countdown__done {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

/* The button's own row under the boxes. */
.countdown__cta {
  margin-top: var(--space-1);
}

@keyframes countdown-tick {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .countdown__num {
    animation: none;
  }
}

@media (max-width: 639px) {
  .countdown__box {
    min-width: 3.5rem;
  }
}