.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
}

.snow-default-image {
    position: relative;
    bottom: -18px;
    z-index: 99;
    width: 100%;
}

.snowflake {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
}
.collection-grid {
    height: 1500px;
}

.snow-fixed {
    position: fixed;
    z-index: 999998;
  }

  .snow-tree-main {
    bottom: 50px;
    right: 46px;
    z-index: 999999;
    width: 120px;
    height: 124px;
  }

  .snow-tree-right {
    bottom: 50px;
    right: 106px;
    width: 100px;
    height: 124px;
  }

  .snowy {
    bottom: -60px;
    right: 370px;
    width: 300px;
    height: 98px;
  } 

  .snow-box-right {
    bottom: 30px;
    right: 156px;
    width: 130px;
    height: 66px;
  }

  .snow-tree-left {
    bottom: 50px;
    left: 106px;
    width: 100px;
    height: 124px;
  }

  .snow-tree-left-tiny {
    bottom: 50px;
    left: 74px;
    width: 60px;
    height: 90px;
  }

  .snow-tree-left-tiny-right {
    bottom: 40px;
    left: 114px;
    width: 40px;
    height: 60px;
    z-index: 999999;
  }

  .snow-santa {
    bottom: 9px;
    left: 206px;
    width: 200px;
    height: 80px;
  }

  .snow-ball {
    bottom: 9px;
    left: 400px;
    width: 36px;
    height: 36px;
  }

  .snow-ball-w {
    bottom: -25px;
    left: 23%;
    width: 30px;
    height: 30px;
    transform: rotate(288deg);
  }

  .snow-ball-2 {
    bottom: -38px;
    left: 20%;
    width: 88px;
    height: 83px;
    transform: rotate(293deg);
  }

  .snow-ball-3 {
    left: 30%;
    bottom: -48px;
    right: 297px;
    width: 300px;
    height: 98px;
  }

  .snow-ball-4 {
    bottom: -28px;
    left: 54%;
    width: 84px;
    height: 84px;
    transform: rotate(300deg);
  }

  .snow-ball-5 {
    bottom: -20px;
    right: 160px;
    width: 74px;
    height: 74px;
    transform: rotate(220deg);
  }


  .snow-ball-6 {
    bottom: -62px;
    left: 46%;
    width: 104px;
    height: 104px;
    transform: rotate(140deg);
  }

  .snow-ball-7 {
    bottom: -42px;
    left: 89%;
    width: 104px;
    height: 104px;
    transform: rotate(180deg);
  }


  .bottom-snow-wrapper {
    bottom: -10px;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 160px;
  }

  @media (max-width: 768px) {
    .snow-tree-main {
      bottom: 20px;
      right: 20px;
      width: 80px;
      height: 120px;
    }

    .snow-box-right {
    bottom: 5px;
    right: 122px;
    width: 100px;
    height: 52px;
}

    .snow-tree-right {
      bottom: 20px;
      right: 80px;
      width: 70px;
      height: 100px;
    }

    .snow-tree-left {
      bottom: 20px;
      left: 80px;
      width: 70px;
      height: 100px;
    }

    .snow-santa {
        bottom: 41px;
        left: 159px;
        width: 150px;
        height: 60px;
    }

    .bottom-snow-wrapper {
      bottom: -5px;
      height: 80px;
    }
  }

@media (min-width: 1024px) {
    .collection-grid {
        height: 500px;
    }
}

@keyframes fall {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
        transform: translateY(100vh);
    }
}

@keyframes diagonal-fall {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
        transform: translate(10vw, 100vh);
    }
}

:root {
    --snow-back:  #e6edf3; 
    --snow-mid:   #f1f5f9;
    --snow-front: #ffffff;
  }

  @keyframes bob {
    0%,100% { transform: translateY(0); }
    20% { transform: translateY(-10px); }
  }

  @keyframes bobSlow {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }

  .snow-layer {
    will-change: transform;
  }



  @keyframes float-ring {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(0deg);
    }
}
@keyframes float-ring-slow {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0deg);
    }
}
@keyframes float-jewelry {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(0deg);
    }
}
.animate-float-ring {
    animation: float-ring 3s ease-in-out infinite;
}
.animate-float-ring-slow {
    animation: float-ring-slow 4s ease-in-out infinite;
}
.animate-float-jewelry {
    animation: float-jewelry 3.5s ease-in-out infinite;
}