/* #region zone:map.style.rain — สไตล์ฝนตก (transform/opacity เท่านั้น, ปิดเมื่อ reduced motion) */
.rain-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  isolation: isolate;
}

.rain-effect,
.rain-effect * {
  box-sizing: border-box;
  pointer-events: none;
}

.rain-depth {
  position: absolute;
  inset: 0 -20px;
  animation: rain-parallax 8s ease-in-out infinite alternate;
}

.rain-far {
  --rain-color: rgba(255, 255, 255, 0.35);
  --rain-sway: 3px;
  --rain-drift: 22px;
  opacity: 0.7;
}

.rain-mid {
  --rain-color: rgba(255, 255, 255, 0.46);
  --rain-sway: 6px;
  --rain-drift: 40px;
  animation-duration: 6.5s;
}

.rain-near {
  --rain-color: rgba(255, 255, 255, 0.6);
  --rain-sway: 9px;
  --rain-drift: 58px;
  animation-duration: 5s;
}

/* Full-height carriers keep travel responsive to the card's height.
   Only their short pseudo-elements are painted. */
.rain-streak {
  position: absolute;
  top: -50px;
  width: 1px;
  height: calc(100% + 100px);
  animation: rain-fall var(--rain-duration) linear var(--rain-delay) infinite;
}

.rain-streak::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--rain-length);
  border-radius: 1px;
  background: linear-gradient(to bottom, transparent, var(--rain-color) 65%, transparent);
  transform: rotate(-14deg);
  transform-origin: top center;
}

.rain-splash {
  position: absolute;
  width: 7px;
  height: 3px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  opacity: 0;
  animation: rain-ripple var(--rain-duration) ease-out var(--rain-delay) infinite;
}

.rain-glass {
  position: absolute;
  border-radius: 48% 48% 52% 52%;
  opacity: 0.55;
  background:
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.16) 22%,
      transparent 43%
    ),
    radial-gradient(
      ellipse at 58% 66%,
      transparent 30%,
      rgba(200, 220, 240, 0.13) 60%,
      rgba(225, 240, 255, 0.28) 74%,
      transparent 100%
    );
}

.rain-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  animation: rain-lightning var(--rain-flash-period) linear infinite;
}

@keyframes rain-fall {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--rain-drift), 100%, 0);
  }
}

@keyframes rain-parallax {
  from {
    transform: translateX(calc(0px - var(--rain-sway)));
  }
  to {
    transform: translateX(var(--rain-sway));
  }
}

@keyframes rain-ripple {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  3% {
    opacity: 0.45;
  }
  13%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes rain-lightning {
  0%,
  80%,
  82%,
  100% {
    opacity: 0;
  }
  80.4% {
    opacity: 0.16;
  }
  81% {
    opacity: 0.04;
  }
}

.rain-paused .rain-effect *,
.rain-paused .rain-effect *::before {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .rain-effect {
    display: none;
  }

  .rain-effect *,
  .rain-effect *::before {
    animation: none !important;
  }
}
/* #endregion */