@font-face {
  font-family: "BDTC Manrope";
  src: url("../fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.bdtc-countdown {
  --bdtc-pink: #fc4ed3;
  --bdtc-cyan: #43d5fd;
  --bdtc-surface: #100e29;
  width: 100%;
  max-width: 920px;
  min-width: 0;
  margin: 0 auto;
  padding: 12px 10px;
  box-sizing: border-box;
  font-family: "BDTC Manrope", Manrope, sans-serif;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
  container-type: inline-size;
  container-name: bdtc;
  direction: ltr;
}

.bdtc-countdown *, .bdtc-countdown *::before, .bdtc-countdown *::after { box-sizing: border-box; }
.bdtc-countdown .bdtc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2.4vw, 28px);
  gap: clamp(6px, 3cqi, 28px);
  width: 100%;
}
.bdtc-countdown .bdtc-unit { min-width: 0; padding: 0; margin: 0; }
.bdtc-countdown .bdtc-box {
  --bdtc-scale: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: clamp(74px, 16vw, 152px);
  min-height: clamp(60px, 17cqi, 152px);
  padding: 17px 5px;
  padding: clamp(12px, 2.4cqi, 24px) clamp(3px, .8cqi, 8px);
  border: 1px solid #ffc2f1;
  border-radius: clamp(11px, 2vw, 23px);
  border-radius: clamp(9px, 2.6cqi, 23px);
  background: linear-gradient(145deg, #23203b 0%, var(--bdtc-surface) 70%);
  box-shadow: 0 0 3px #fc4ed3cc, 0 0 13px #fc4ed34d, inset 0 0 3px #fc4ed35e, inset 0 0 25px #fc4ed30a;
  overflow: hidden;
  perspective: 450px;
}
.bdtc-countdown .bdtc-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, #43d5fd0b, transparent 45%, #fc4ed309);
}
.bdtc-countdown .bdtc-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fc4ed324 3px 4px);
}
.bdtc-countdown .bdtc-number {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  color: var(--bdtc-pink);
  font-family: "BDTC Manrope", Manrope, sans-serif;
  font-size: calc(clamp(18px, 7.8vw, 78px) * var(--bdtc-scale));
  font-size: calc(clamp(14px, 9cqi, 78px) * var(--bdtc-scale));
  font-weight: 800;
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1.14;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 0 8px #fc4ed33d, 0 0 22px #fc4ed326;
  transform-style: preserve-3d;
}
.bdtc-countdown .bdtc-current { position: relative; display: block; backface-visibility: hidden; }
.bdtc-countdown .bdtc-ghost { position: absolute; inset: 0; display: block; pointer-events: none; opacity: 0; }
.bdtc-countdown .bdtc-box[data-bdtc-digits="4"] { --bdtc-scale: .76; }
.bdtc-countdown .bdtc-box[data-bdtc-digits="5"] { --bdtc-scale: .60; }
.bdtc-countdown .bdtc-box[data-bdtc-digits="6"] { --bdtc-scale: .50; }
.bdtc-countdown .bdtc-box[data-bdtc-digits="7"] { --bdtc-scale: .43; }
.bdtc-countdown .bdtc-box[data-bdtc-digits="8"] { --bdtc-scale: .37; }
.bdtc-countdown .bdtc-label {
  display: block;
  margin: 16px 0 0;
  margin-top: clamp(8px, 1.8cqi, 16px);
  padding: 0;
  color: var(--bdtc-cyan);
  font-family: "BDTC Manrope", Manrope, sans-serif;
  font-size: clamp(8px, 1.8vw, 13px);
  font-size: clamp(7px, 1.65cqi, 13px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .075em;
  white-space: nowrap;
  text-transform: none;
}
.bdtc-countdown .bdtc-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent 44%, #43d5fd99 49%, #f9d0f6 50%, #fc4ed37a 51%, transparent 57%);
  transform: translateY(-100%);
}
.bdtc-countdown .bdtc-is-changing .bdtc-current { animation: bdtc-materialize 560ms cubic-bezier(.18,.7,.25,1) both; }
.bdtc-countdown .bdtc-is-changing .bdtc-ghost { animation: bdtc-dematerialize 380ms ease-out both; }
.bdtc-countdown .bdtc-is-changing .bdtc-scan { animation: bdtc-scan 560ms ease-out both; }
.bdtc-countdown .bdtc-is-changing { animation: bdtc-edge-pulse 560ms ease-out; }
@keyframes bdtc-materialize {
  0% { opacity: 0; transform: translateY(24%) rotateX(-35deg); filter: blur(5px); }
  36% { opacity: .8; transform: translateY(-3%) rotateX(8deg); filter: blur(1px); text-shadow: -2px 0 #43d5fd80, 2px 0 #fc4ed380; }
  68% { opacity: 1; transform: translateY(1%) rotateX(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}
@keyframes bdtc-dematerialize {
  0% { opacity: .75; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-35%) scaleY(.85); filter: blur(5px); }
}
@keyframes bdtc-scan {
  0% { opacity: 0; transform: translateY(-90%); }
  25% { opacity: .55; }
  75% { opacity: .32; }
  100% { opacity: 0; transform: translateY(90%); }
}
@keyframes bdtc-edge-pulse {
  0%, 100% { border-color: #ffc2f1; }
  35% { border-color: #fff0fc; }
}
.bdtc-countdown .bdtc-end-message, .bdtc-countdown .bdtc-noscript {
  color: var(--bdtc-cyan);
  font: 500 13px/1.7 "BDTC Manrope", Manrope, sans-serif;
  margin: 24px 0 0;
}
.bdtc-countdown .bdtc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.bdtc-countdown [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bdtc-countdown .bdtc-is-changing,
  .bdtc-countdown .bdtc-is-changing .bdtc-current,
  .bdtc-countdown .bdtc-is-changing .bdtc-ghost,
  .bdtc-countdown .bdtc-is-changing .bdtc-scan { animation: none !important; }
  .bdtc-countdown .bdtc-ghost, .bdtc-countdown .bdtc-scan { display: none; }
}