/* ==========================================================================
   WATER DROP & SPLASH BACKGROUND EFFECTS (Aqua Sensory Experience)
   Subtle floating droplets, soft ripples, water-inspired glassy aesthetics
   ========================================================================== */

/* Water Drop Background Texture for Body & Hero */
.water-bg-pattern {
  position: relative;
}

.water-bg-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(2, 132, 199, 0.04) 0%, transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 50% 75%, rgba(14, 165, 233, 0.04) 0%, transparent 35%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40,15 C40,15 48,27 48,34 C48,38.4 44.4,42 40,42 C35.6,42 32,38.4 32,34 C32,27 40,15 40,15 Z' fill='%230284c7' fill-opacity='0.025'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 90px 90px;
  pointer-events: none;
  z-index: 0;
}

/* Floating Realistic Water Drops */
.water-droplets-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.water-drop {
  position: absolute;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(186, 230, 253, 0.6) 40%, rgba(2, 132, 199, 0.4) 90%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 
    inset 0 3px 6px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(2, 132, 199, 0.3),
    0 4px 10px rgba(2, 132, 199, 0.15);
  backdrop-filter: blur(2px);
  animation: floatDrop ease-in-out infinite alternate;
}

.water-drop-1 {
  width: 32px;
  height: 40px;
  top: 15%;
  left: 8%;
  animation-duration: 6s;
}

.water-drop-2 {
  width: 20px;
  height: 26px;
  top: 60%;
  left: 4%;
  animation-duration: 8s;
  animation-delay: -2s;
}

.water-drop-3 {
  width: 45px;
  height: 56px;
  top: 25%;
  right: 6%;
  animation-duration: 7s;
  animation-delay: -3s;
}

.water-drop-4 {
  width: 24px;
  height: 30px;
  top: 75%;
  right: 12%;
  animation-duration: 9s;
  animation-delay: -1s;
}

.water-drop-5 {
  width: 16px;
  height: 20px;
  top: 45%;
  left: 48%;
  animation-duration: 5s;
  opacity: 0.7;
}

@keyframes floatDrop {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-15px) rotate(4deg) scale(1.05);
  }
  100% {
    transform: translateY(-28px) rotate(-3deg) scale(0.98);
  }
}

/* Water Ripple Effect on Buttons */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
  opacity: 0;
  pointer-events: none;
}

.ripple-btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: 0s;
}

/* Water Drop Icon Badge in Hero & Titles */
.water-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0ea5e9;
  filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.4));
}

/* Aqua Glow Card Accent */
.aqua-card-glow {
  position: relative;
}

.aqua-card-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #38bdf8, #0284c7, #06b6d4);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}