.holiday-number {
  --holiday-number-accent: #fff0a5;
  --holiday-number-mid: #ffb4cc;
  --holiday-number-deep: #f06ca7;
  --holiday-number-ring: rgba(255, 255, 255, 0.2);
  --holiday-number-soft: rgba(255, 255, 255, 0.1);
  --number-x: 0;
  position: fixed;
  right: clamp(10px, 3vw, 48px);
  bottom: clamp(10px, 3vh, 36px);
  z-index: 1;
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 1;
  display: none;
  place-items: center;
  pointer-events: none;
  perspective: 1200px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 36%, transparent 67%);
}

.number-halo {
  position: absolute;
  inset: 5%;
  border: 1px solid var(--holiday-number-ring);
  border-radius: 50%;
  animation: holiday-halo-rotate 18s linear infinite;
}

.number-halo::before,
.number-halo::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.number-halo::before {
  inset: 9%;
  border: 1px dashed var(--holiday-number-soft);
}

.number-halo::after {
  inset: 20%;
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.holiday-number::before {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(178px, 23vw, 340px);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: 0;
  text-align: center;
  background:
    linear-gradient(145deg, #ffffff 0%, var(--holiday-number-accent) 24%, var(--holiday-number-mid) 58%, var(--holiday-number-deep) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter:
    drop-shadow(0 8px 0 rgba(255, 255, 255, 0.15))
    drop-shadow(0 22px 25px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 28px color-mix(in srgb, var(--holiday-number-accent), transparent 42%));
  transform: translateX(var(--number-x)) rotateY(-8deg) rotateX(3deg);
  animation: holiday-number-float 5s ease-in-out infinite;
}

.holiday-number::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 5%;
  width: 76%;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--holiday-number-accent), transparent 58%), transparent 70%);
  filter: blur(15px);
  transform: rotateX(70deg);
}

.number-decor {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--holiday-number-accent);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.18));
  animation: holiday-decor-float 5s ease-in-out infinite;
}

.number-decor::before {
  content: "";
  display: block;
  font-size: var(--decor-size, 54px);
  line-height: 1;
}

.number-decor-1 {
  left: 9%;
  top: 18%;
  --decor-size: 54px;
}

.number-decor-2 {
  right: 5%;
  top: 25%;
  --decor-size: 46px;
  animation-delay: -1.3s;
}

.number-decor-3 {
  left: 15%;
  bottom: 19%;
  --decor-size: 40px;
  animation-delay: -2.1s;
}

.number-decor-4 {
  right: 14%;
  bottom: 14%;
  --decor-size: 48px;
  animation-delay: -0.7s;
}

.app[data-holiday="february-23"] .holiday-number,
.app[data-holiday="march-8"] .holiday-number,
.app[data-holiday="victory-day"] .holiday-number {
  display: grid;
}

.app[data-holiday="february-23"] .holiday-number {
  --holiday-number-accent: #ffcd62;
  --holiday-number-mid: #6c9bc8;
  --holiday-number-deep: #2665a7;
  --holiday-number-ring: rgba(255, 205, 98, 0.2);
  --holiday-number-soft: rgba(108, 155, 200, 0.18);
  --number-x: -0.04em;
}

.app[data-holiday="february-23"] .holiday-number::before {
  content: "23";
  font-size: clamp(132px, 17vw, 255px);
  letter-spacing: -0.1em;
}

.app[data-holiday="february-23"] .number-decor::before {
  content: "★";
}

.app[data-holiday="march-8"] .holiday-number {
  --holiday-number-accent: #fff0a5;
  --holiday-number-mid: #ffb4cc;
  --holiday-number-deep: #f06ca7;
  --holiday-number-ring: rgba(255, 180, 212, 0.22);
  --holiday-number-soft: rgba(255, 255, 255, 0.16);
}

.app[data-holiday="march-8"] .holiday-number::before {
  content: "8";
}

.app[data-holiday="march-8"] .number-decor::before {
  content: "✿";
}

.app[data-holiday="victory-day"] .holiday-number {
  --holiday-number-accent: #ffd66b;
  --holiday-number-mid: #e87935;
  --holiday-number-deep: #b82426;
  --holiday-number-ring: rgba(255, 214, 107, 0.24);
  --holiday-number-soft: rgba(232, 121, 53, 0.18);
}

.app[data-holiday="victory-day"] .holiday-number::before {
  content: "9";
}

.app[data-holiday="victory-day"] .number-decor::before {
  content: "✦";
}

@keyframes holiday-number-float {
  0%, 100% { transform: translateX(var(--number-x)) translateY(0) rotateY(-8deg) rotateX(3deg); }
  50% { transform: translateX(var(--number-x)) translateY(-14px) rotateY(4deg) rotateX(-2deg); }
}

@keyframes holiday-halo-rotate {
  to { transform: rotate(360deg); }
}

@keyframes holiday-decor-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-16px) rotate(7deg); }
}

@media (max-width: 980px) {
  .holiday-number {
    right: 4px;
    bottom: 4px;
    width: clamp(210px, 54vw, 360px);
    opacity: 0.68;
  }

  .holiday-number::before {
    font-size: clamp(126px, 37vw, 230px);
  }

  .app[data-holiday="february-23"] .holiday-number::before {
    font-size: clamp(88px, 28vw, 170px);
  }
}

@media (max-width: 760px) {
  .app[data-theme="dark"][data-holiday="february-23"] .holiday-number {
    --holiday-number-accent: #ffe19a;
    --holiday-number-mid: #9fcbff;
    --holiday-number-deep: #5fa9ff;
    --holiday-number-ring: rgba(255, 225, 154, 0.38);
    --holiday-number-soft: rgba(159, 203, 255, 0.3);
    opacity: 0.9;
  }

  .app[data-theme="dark"][data-holiday="victory-day"] .holiday-number {
    --holiday-number-accent: #ffe38b;
    --holiday-number-mid: #ff9d5f;
    --holiday-number-deep: #ff4b42;
    --holiday-number-ring: rgba(255, 227, 139, 0.42);
    --holiday-number-soft: rgba(255, 157, 95, 0.32);
    opacity: 0.9;
  }

  .app[data-theme="dark"][data-holiday="february-23"] .holiday-number::before,
  .app[data-theme="dark"][data-holiday="victory-day"] .holiday-number::before {
    filter:
      drop-shadow(0 0 20px color-mix(in srgb, var(--holiday-number-accent) 72%, transparent))
      drop-shadow(0 16px 22px rgba(0, 0, 0, 0.38));
  }
}