.countdown-motion-component {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: visible;
  place-items: center;
  pointer-events: none;
  container-type: inline-size;
}

.countdown-motion-component svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.countdown-motion-component .cdm-orbit,
.countdown-motion-component .cdm-drop,
.countdown-motion-component .cdm-merged,
.countdown-motion-component .cdm-logo,
.countdown-motion-component .cdm-logo-detail,
.countdown-motion-component .cdm-ring,
.countdown-motion-component .cdm-digit,
.countdown-motion-component .cdm-wordmark {
  will-change: transform, opacity;
}

.countdown-motion-component .cdm-digit {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  color: #48aed0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  font-size: clamp(56px, 30cqi, 126px);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.06em;
  opacity: 0;
  transform-origin: 50% 50%;
}

.countdown-motion-component .cdm-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  height: auto;
  opacity: 0;
}

.countdown-motion-component .cdm-doghead {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: auto;
  aspect-ratio: 2.22;
  display: block;
  overflow: visible;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.countdown-motion-component.is-unavailable::after {
  content: "";
  width: 52px;
  height: 52px;
  border: 2px solid rgba(72, 174, 208, 0.18);
  border-top-color: #48aed0;
  border-radius: 50%;
  animation: cdm-fallback-spin 900ms linear infinite;
}

@keyframes cdm-fallback-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-motion-component.is-unavailable::after {
    animation: none;
  }
}