.snow {
  overflow: hidden !important;
}

.snow :is(.snow-script, .snow-text) {
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white, -2px 0 0 white, 2px 0 0 white, 0 -2px 0 white, 0 2px 0 white;
  color: var(--color-custom-1);
}

.snow .snow-script {
  font-family: house-script, cursive;
  font-size: var(--font-size-xxxl);
  transform: rotate(-10deg);
}

.snow .snow-script.no-rotate {
  transform: none;
}

.snow .offer-title {
  font-size: 1.2em;
}

.snow .countdown-time {
  background: var(--color-custom-1);
}

.snow .snow-image {
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
    linear-gradient(to left, transparent 0%, black 15%),
    linear-gradient(to right, transparent 0%, black 15%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
    linear-gradient(to left, transparent 0%, black 15%),
    linear-gradient(to right, transparent 0%, black 15%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

@media screen and (max-width: 999px) {
  .snow .snow-image {
    --content-max-width: 600px;
  }
}

@media screen and (min-width: 1000px) {
  .snow .snow-content {
    flex-wrap: nowrap !important;
  }
  .snow .snow-image {
    clip-path: ellipse(99% 99% at 100% 50%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
      linear-gradient(to left, transparent 0%, black 15%);
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
      linear-gradient(to left, transparent 0%, black 15%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;

  }
}

/* ===== Snowflake Styles ===== */
.snow.hide-snowflakes .snowflake {
  display: none;
}

.snowflake {
  position: absolute;
  top: -100px;
  color: white;
  user-select: none;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.8;
  animation-name: fall, sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes fall {
  to {
    transform: translateY(var(--snow-fall-distance, 250px));
  }
}

@keyframes sway {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: 40px;
  }

  100% {
    margin-left: 0;
  }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  .snowflake {
    display: none;
  }
}