.effect-snow::before {
    background-image: url("https://i.imgur.com/w1vM4xF.png");
    background-repeat: repeat;
    background-size: 120px 120px;
    opacity: 0.8;
    animation: snow-fall 6s linear infinite;
    animation-play-state: paused;
}

.effect-snow:hover::before {
    animation-play-state: running;
}

@keyframes snow-fall {
    from { background-position: 0 0; }
    to   { background-position: 0 120px; }
}



/* AURORA EFFECT */
.effect-aurora {
  position: relative;
  overflow: hidden;
}

/* Put your /image/aurora on a pseudo element so it can warp */
.effect-aurora::before {
  content: "";
  position: absolute;
  pointer-events: none;

  /* Base image */
  background-image: url("https://i.imgur.com/I9sXLdI.png");
  background-repeat: no-repeat;
    mix-blend-mode: hard-light;
  background-position: 50% 50%;
  opacity: 0.85;
  filter: saturate(1.25) blur(0.2px);

  /* Warp-ish motion */
  transform-origin: 50% 60%;
  animation: aurora-warp 14s ease-in-out infinite;
}

/* Add a moving shimmer layer (still CSS only) */
.effect-aurora::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;

  /* Animated light bands over the aurora */
  background:
    radial-gradient(60% 35% at 30% 40%, rgba(120, 255, 220, 0.22), transparent 60%),
    radial-gradient(70% 40% at 70% 55%, rgba(140, 180, 255, 0.20), transparent 65%),
    radial-gradient(55% 35% at 55% 30%, rgba(180, 120, 255, 0.16), transparent 60%);
  background-size: 120% 120%;
  background-position: 50% 50%;

  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.2);
  opacity: 0.9;

  animation: aurora-shimmer 6s ease-in-out infinite;
}

/* Subtle bending/warping illusion:
   - background shifts (like waves)
   - slight skew/rotate changes (like curtains moving)
   - hue rotates to feel “alive”
*/
@keyframes aurora-warp {
  0% {
    background-position: 40% 60%;
    transform:
      rotate(-2.5deg)
      skewX(-4deg)
      scale(1.05)
      translate(0, 0);
    filter: saturate(1.3) hue-rotate(0deg) blur(0.35px);
  }

  20% {
    background-position: 65% 40%;
    transform:
      rotate(3deg)
      skewX(5.5deg)
      scale(1.12)
      translate(1.2%, -0.8%);
    filter: saturate(1.45) hue-rotate(18deg) blur(0.6px);
  }

  45% {
    background-position: 50% 70%;
    transform:
      rotate(-1.8deg)
      skewX(-6.5deg)
      scale(1.08)
      translate(-0.8%, 1%);
    filter: saturate(1.4) hue-rotate(32deg) blur(0.55px);
  }

  70% {
    background-position: 72% 50%;
    transform:
      rotate(2.2deg)
      skewX(4deg)
      scale(1.14)
      translate(1%, 0.6%);
    filter: saturate(1.5) hue-rotate(20deg) blur(0.7px);
  }

  100% {
    background-position: 40% 60%;
    transform:
      rotate(-2.5deg)
      skewX(-4deg)
      scale(1.05)
      translate(0, 0);
    filter: saturate(1.3) hue-rotate(0deg) blur(0.35px);
  }
}

@keyframes aurora-shimmer {
  0%   { transform: translate(-1%, 0%) scale(1.02); opacity: 0.95; }
  35%  { transform: translate(1.5%, -1%) scale(1.05); opacity: 0.65; }
  70%  { transform: translate(-0.5%, 1%) scale(1.03); opacity: 0.85; }
  100% { transform: translate(-1%, 0%) scale(1.02); opacity: 0.95; }
}

/* Optional: if you want it only on hover (like your snow) */
.effect-aurora::before,
.effect-aurora::after {
  animation-play-state: paused;
}
.effect-aurora:hover::before,
.effect-aurora:hover::after {
  animation-play-state: running;
}