/* Decorative water stays behind the hero copy and cannot intercept clicks. */
.water-droplets {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.water-droplet {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  height: 100%;
  opacity: 0;
  animation: falling-water var(--duration) linear var(--delay) infinite;
}

.water-droplet::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgb(199 255 247 / .46);
  border-radius: 0 55% 55% 55%;
  background:
    radial-gradient(ellipse at 30% 28%, rgb(255 255 255 / .92), transparent 31%),
    linear-gradient(135deg, rgb(213 255 250 / .48), rgb(37 208 191 / .09) 58%, rgb(122 237 227 / .5));
  box-shadow: inset -1px -1px 3px rgb(205 255 252 / .34), 0 0 8px rgb(37 208 191 / .12);
  transform: rotate(45deg);
}

@keyframes falling-water {
  0% { transform: translate3d(0, -2rem, 0); opacity: 0; }
  12%, 82% { opacity: var(--opacity); }
  100% { transform: translate3d(var(--drift), 100%, 0); opacity: 0; }
}

.hero[data-water-paused] .water-droplet,
.hero[data-water-idle] .water-droplet {
  animation-play-state: paused;
}

.water-toggle {
  position: absolute;
  top: 1.15rem;
  right: 4%;
  padding: .5rem .75rem;
  min-height: 40px;
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 100px;
  background: rgb(9 15 14 / .5);
  color: #d6e4e8;
  font: 600 .7rem var(--body);
  letter-spacing: .025em;
  cursor: pointer;
}

.water-toggle:hover { border-color: var(--cyan); color: white; }
.water-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

@media (max-width: 780px) {
  .water-droplet:nth-child(even) { display: none; }
  .water-toggle { top: .55rem; right: 5%; min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .water-droplets, .water-toggle { display: none; }
  .water-droplet { animation: none; }
}