/**
 * Hero Particle Water Droplets
 * =============================
 * Animated water droplet particles for hero sections
 * Features falling, floating, and drifting animations
 * Includes parallax effect and accessibility support
 */

/* ====================
   CONTAINER SETUP
   ==================== */

/* Container for particle system */
.hero-section,
.entry-hero.page-hero-section {
  position: relative;
  overflow: visible;
}

/* Ensure particle container doesn't extend page */
.water-particles-container {
  position: relative;
  overflow-x: hidden;
}

/* Create droplets using pseudo-elements on a container */
.hero-droplets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

/* ====================
   DROPLET STYLES
   ==================== */

/* Individual droplet with trail effect */
.droplet {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(179, 229, 252, 0.7) 40%,
    rgba(0, 212, 228, 0.4) 100%);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(0, 212, 228, 0.3),
    /* Trail effect */
    0 -10px 8px -6px rgba(179, 229, 252, 0.4),
    0 -20px 12px -8px rgba(0, 212, 228, 0.2);
}

/* Enhanced trail for falling droplets */
.droplet.falling {
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(0, 212, 228, 0.3),
    0 -15px 10px -5px rgba(179, 229, 252, 0.5),
    0 -30px 15px -8px rgba(0, 212, 228, 0.3),
    0 -45px 20px -12px rgba(79, 195, 247, 0.15);
}

/* Different droplet sizes with more variety */
.droplet.small {
  width: 2px;
  height: 2px;
  opacity: 0.4;
}

.droplet.medium {
  width: 4px;
  height: 4px;
  opacity: 0.6;
}

.droplet.large {
  width: 6px;
  height: 6px;
  opacity: 0.8;
}

.droplet.tiny {
  width: 1px;
  height: 1px;
  opacity: 0.3;
}

.droplet.xlarge {
  width: 8px;
  height: 8px;
  opacity: 0.9;
}

/* ====================
   ANIMATIONS
   ==================== */

/* Falling animation with sway */
@keyframes dropletFall {
  0% {
    transform: translateY(-20px) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  25% {
    transform: translateY(25vh) translateX(-10px) scale(1.1);
  }
  50% {
    transform: translateY(50vh) translateX(10px) scale(1);
  }
  75% {
    transform: translateY(75vh) translateX(-5px) scale(0.95);
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) translateX(15px) scale(0.8);
    opacity: 0;
  }
}

/* Float up animation (bubbles) */
@keyframes dropletFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  25% {
    transform: translateY(75vh) translateX(10px) scale(0.9);
  }
  50% {
    transform: translateY(50vh) translateX(-10px) scale(1);
    opacity: 0.8;
  }
  75% {
    transform: translateY(25vh) translateX(5px) scale(1.1);
  }
  100% {
    transform: translateY(-20px) translateX(-15px) scale(1.2);
    opacity: 0;
  }
}

/* Gentle drift animation */
@keyframes dropletDrift {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(20px) translateY(10px);
  }
  50% {
    transform: translateX(-15px) translateY(20px);
  }
  75% {
    transform: translateX(10px) translateY(-10px);
  }
}

/* Shimmer effect on some droplets */
@keyframes dropletShimmer {
  0%, 100% {
    filter: brightness(1) blur(0);
  }
  50% {
    filter: brightness(1.5) blur(0.5px);
  }
}

/* ====================
   ANIMATION CLASSES
   ==================== */

/* Apply animations to droplets */
.droplet.falling {
  animation: dropletFall 8s linear infinite;
}

.droplet.floating {
  animation: dropletFloat 10s ease-in-out infinite;
}

.droplet.drifting {
  animation: dropletDrift 15s ease-in-out infinite;
}

.droplet.shimmer {
  animation:
    dropletFall 8s linear infinite,
    dropletShimmer 2s ease-in-out infinite;
}

/* ====================
   PARALLAX EFFECT
   ==================== */

/* Parallax on mouse move (via CSS custom properties) */
.hero-droplets {
  transform: translate(
    calc(var(--mouse-x, 0) * 20px),
    calc(var(--mouse-y, 0) * 20px)
  );
  transition: transform 0.3s ease-out;
}

/* ====================
   DROPLET POSITIONING
   ==================== */

/* Different animation delays for natural effect */
.droplet:nth-child(1) { animation-delay: 0s; left: 10%; top: -5%; }
.droplet:nth-child(2) { animation-delay: 0.5s; left: 20%; top: -5%; }
.droplet:nth-child(3) { animation-delay: 1s; left: 30%; top: -5%; }
.droplet:nth-child(4) { animation-delay: 1.5s; left: 40%; top: -5%; }
.droplet:nth-child(5) { animation-delay: 2s; left: 50%; top: -5%; }
.droplet:nth-child(6) { animation-delay: 2.5s; left: 60%; top: -5%; }
.droplet:nth-child(7) { animation-delay: 3s; left: 70%; top: -5%; }
.droplet:nth-child(8) { animation-delay: 3.5s; left: 80%; top: -5%; }
.droplet:nth-child(9) { animation-delay: 4s; left: 90%; top: -5%; }
.droplet:nth-child(10) { animation-delay: 4.5s; left: 15%; top: -5%; }
.droplet:nth-child(11) { animation-delay: 5s; left: 25%; top: -5%; }
.droplet:nth-child(12) { animation-delay: 5.5s; left: 35%; top: -5%; }
.droplet:nth-child(13) { animation-delay: 6s; left: 45%; top: -5%; }
.droplet:nth-child(14) { animation-delay: 6.5s; left: 55%; top: -5%; }
.droplet:nth-child(15) { animation-delay: 7s; left: 65%; top: -5%; }
.droplet:nth-child(16) { animation-delay: 7.5s; left: 75%; top: -5%; }
.droplet:nth-child(17) { animation-delay: 8s; left: 85%; top: -5%; }
.droplet:nth-child(18) { animation-delay: 8.5s; left: 95%; top: -5%; }
.droplet:nth-child(19) { animation-delay: 9s; left: 5%; top: -5%; }
.droplet:nth-child(20) { animation-delay: 9.5s; left: 12%; top: -5%; }

/* ====================
   LIGHT MODE ADJUSTMENTS
   ==================== */

/* Light mode: Reduce droplet opacity for subtlety */
body:not(.dark-mode) .droplet.tiny {
  opacity: 0.15;
}

body:not(.dark-mode) .droplet.small {
  opacity: 0.2;
}

body:not(.dark-mode) .droplet.medium {
  opacity: 0.3;
}

body:not(.dark-mode) .droplet.large {
  opacity: 0.4;
}

body:not(.dark-mode) .droplet.xlarge {
  opacity: 0.5;
}

/* Light mode: Softer droplet colors */
body:not(.dark-mode) .droplet {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(179, 229, 252, 0.5) 40%,
    rgba(0, 212, 228, 0.3) 100%);
  box-shadow:
    0 0 1px rgba(255, 255, 255, 0.6),
    0 0 4px rgba(0, 212, 228, 0.2),
    0 -10px 6px -6px rgba(179, 229, 252, 0.2),
    0 -20px 10px -8px rgba(0, 212, 228, 0.1);
}

body:not(.dark-mode) .droplet.falling {
  box-shadow:
    0 0 1px rgba(255, 255, 255, 0.6),
    0 0 4px rgba(0, 212, 228, 0.2),
    0 -15px 8px -5px rgba(179, 229, 252, 0.3),
    0 -30px 12px -8px rgba(0, 212, 228, 0.2),
    0 -45px 16px -12px rgba(79, 195, 247, 0.1);
}

/* ====================
   ACCESSIBILITY
   ==================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .droplet {
    animation: none !important;
  }
  .hero-droplets {
    transform: none !important;
    transition: none !important;
  }
}

/* ====================
   MOBILE OPTIMIZATION
   ==================== */

/* Performance optimization for mobile */
@media (max-width: 768px) {
  /* Use fewer droplets on mobile */
  .droplet:nth-child(n+11) {
    display: none;
  }
  /* Simplify animations */
  .droplet {
    animation-duration: 12s !important;
  }
}