/* Animasi background: salju, hujan, bintang - dipakai di seluruh halaman website */

.bg-animation-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-animation-wrap + * {
  position: relative;
  z-index: 1;
}

/* Salju */
.bg-animation-snow .snowflake {
  position: absolute;
  top: -10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1em;
  user-select: none;
  animation: bg-fall linear infinite;
}

.bg-animation-snow .snowflake::before {
  content: "\2744";
}

/* Hujan */
.bg-animation-rain .raindrop {
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.4));
  border-radius: 50%;
  animation: bg-rain linear infinite;
}

/* Bintang */
.bg-animation-stars .star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation: bg-twinkle ease-in-out infinite;
}

@keyframes bg-fall {
  0% { transform: translateY(-10px) translateX(0); }
  100% { transform: translateY(100vh) translateX(20px); }
}

@keyframes bg-rain {
  0% { transform: translateY(-20px) translateX(0); opacity: 0.6; }
  100% { transform: translateY(100vh) translateX(10px); opacity: 0.3; }
}

@keyframes bg-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}