.snow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.snowflake {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  opacity: 0.4; /* Lebih transparan */
  animation-name: fall-snow;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Animasi salju dengan gerak acak kiri-kanan saat jatuh */
@keyframes fall-snow {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(25vh) translateX(-20px) rotate(45deg);
  }
  50% {
    transform: translateY(50vh) translateX(20px) rotate(90deg);
  }
  75% {
    transform: translateY(75vh) translateX(-15px) rotate(135deg);
  }
  100% {
    transform: translateY(100vh) translateX(0) rotate(180deg);
  }
}

/* Animasi zoom in dari bawah */
.zoom-in-bottom {
  transform: translateY(50px) scale(0.8);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.zoom-in-bottom.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.zoom-fade {
    opacity: 0;
    transform: scale(1.5);
}

.zoom-fade.visible {
    animation: zoomFadeSoft 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes zoomFadeSoft {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animasi fade standard */
.fade-in {
  opacity: 0;
}

.fade-in.visible{
  animation: fadeIn 2s ease-in forwards;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}