/* ============================================================
   CLARITY PURIFIED WATER — Crazy Animations Layer
   animations.css - loaded after style.css
   ============================================================ */

/* ── Animated Water Particle Canvas Overlay ──────────────── */
#waterCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  will-change: transform;
}

/* ── Cursor ripple ───────────────────────────────────────── */
.cursor-ripple {
  position: fixed;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(0,174,239,0.7);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0.125);
  animation: cursorRippleAnim 0.8s ease-out forwards;
}
@keyframes cursorRippleAnim {
  0%   { transform: translate(-50%, -50%) scale(0.125); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Custom cursor ──────────────────────────────────────── */
.custom-cursor {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%);
  transition: transform 0.1s ease, background 0.2s;
  will-change: transform;
  mix-blend-mode: screen;
}
.custom-cursor-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,174,239,0.5);
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%);
  transition: transform 0.1s ease;
  will-change: transform;
}
body:has(a:hover) .custom-cursor,
body:has(button:hover) .custom-cursor,
.custom-cursor.cursor-hover {
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%) scale(1.83) !important;
  background: rgba(0,174,239,0.7);
}
.custom-cursor-ring.cursor-hover {
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%) scale(1.44) !important;
}

/* ── Hero section: floating water drops ──────────────────── */
.hero-drops {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.water-drop {
  position: absolute;
  top: 0;
  width: 6px; height: 9px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: rgba(0,174,239,0.35);
  animation: dropFall linear infinite;
  filter: blur(0.5px);
  will-change: transform, opacity;
}
.water-drop:nth-child(1)  { left: 5%;  width:5px;  height:8px;  animation-duration:8s;  animation-delay:0s; }
.water-drop:nth-child(2)  { left: 12%; width:8px;  height:12px; animation-duration:11s; animation-delay:2s; }
.water-drop:nth-child(3)  { left: 20%; width:4px;  height:7px;  animation-duration:9s;  animation-delay:1s; }
.water-drop:nth-child(4)  { left: 30%; width:6px;  height:10px; animation-duration:13s; animation-delay:3s; }
.water-drop:nth-child(5)  { left: 40%; width:7px;  height:11px; animation-duration:7s;  animation-delay:0.5s; }
.water-drop:nth-child(6)  { left: 52%; width:5px;  height:8px;  animation-duration:10s; animation-delay:4s; }
.water-drop:nth-child(7)  { left: 63%; width:9px;  height:14px; animation-duration:12s; animation-delay:1.5s; }
.water-drop:nth-child(8)  { left: 75%; width:4px;  height:6px;  animation-duration:8.5s;animation-delay:2.5s; }
.water-drop:nth-child(9)  { left: 85%; width:7px;  height:11px; animation-duration:11s; animation-delay:0s; }
.water-drop:nth-child(10) { left: 93%; width:5px;  height:8px;  animation-duration:9.5s;animation-delay:3.5s; }
.water-drop:nth-child(11) { left: 8%;  width:3px;  height:5px;  animation-duration:14s; animation-delay:5s; }
.water-drop:nth-child(12) { left: 45%; width:6px;  height:9px;  animation-duration:6s;  animation-delay:1s; }
.water-drop:nth-child(13) { left: 70%; width:4px;  height:6px;  animation-duration:10s; animation-delay:6s; }
.water-drop:nth-child(14) { left: 25%; width:8px;  height:13px; animation-duration:15s; animation-delay:2s; }
.water-drop:nth-child(15) { left: 58%; width:5px;  height:8px;  animation-duration:7.5s;animation-delay:4.5s; }

@keyframes dropFall {
  0%   { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate3d(20px, 110vh, 0) rotate(10deg); }
}

/* ── Animated gradient text ─────────────────────────────── */
.hero-h1 .gradient-word {
  background: linear-gradient(90deg, #00AEEF, #33d4ff, #00e5ff, #00AEEF);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s linear infinite;
  display: inline-block;
}
@keyframes gradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ── Typewriter effect ──────────────────────────────────── */
.typewriter-wrap {
  display: inline-block;
  min-width: 180px;
}
.typewriter-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--cyan);
  color: var(--cyan);
  animation: blinkCursor 0.75s step-end infinite;
}
@keyframes blinkCursor {
  0%, 100% { border-color: var(--cyan); }
  50%       { border-color: transparent; }
}

/* ── Glowing pulse on buttons ───────────────────────────── */
.btn-primary {
  position: relative;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: rgba(0,174,239,0.4);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
  animation: btnGlow 2.5s ease-in-out infinite;
}
@keyframes btnGlow {
  0%, 100% { opacity: 0; transform: scale(0.98); }
  50%       { opacity: 1; transform: scale(1.05); }
}

/* ── Shimmer on product cards ───────────────────────────── */
.product-card {
  position: relative;
  overflow: hidden;
}
.product-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  transform: translateX(-150%) skewX(-20deg);
  transition: none;
  pointer-events: none;
  will-change: transform;
}
.product-card:hover::after {
  animation: shimmerSlide 0.7s ease forwards;
}
@keyframes shimmerSlide {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* ── 3D Tilt on why-cards ───────────────────────────────── */
.why-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Animated step numbers ──────────────────────────────── */
.step-num {
  animation: stepPulse 3s ease-in-out infinite;
}
.step-item:nth-child(2) .step-num { animation-delay: 0.75s; }
.step-item:nth-child(3) .step-num { animation-delay: 1.5s; }
.step-item:nth-child(4) .step-num { animation-delay: 2.25s; }
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,174,239,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(0,174,239,0.12), 0 4px 30px rgba(0,174,239,0.7); transform: scale(1.08); }
}

/* ── Scroll progress bar ────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), #33d4ff, var(--navy));
  z-index: 9998;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
  box-shadow: 0 0 8px rgba(0,174,239,0.8);
  will-change: transform;
}

/* ── Floating bubbles in why section ────────────────────── */
.why {
  position: relative;
}
.why-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.why-bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,174,239,0.3), rgba(0,174,239,0.05));
  border: 1px solid rgba(0,174,239,0.2);
  animation: bubbleRise linear infinite;
  will-change: transform, opacity;
}
.why-bubble:nth-child(1) { width:30px;  height:30px;  left:5%;   animation-duration:12s; animation-delay:0s;  }
.why-bubble:nth-child(2) { width:18px;  height:18px;  left:15%;  animation-duration:9s;  animation-delay:3s;  }
.why-bubble:nth-child(3) { width:45px;  height:45px;  left:30%;  animation-duration:15s; animation-delay:1s;  }
.why-bubble:nth-child(4) { width:22px;  height:22px;  left:50%;  animation-duration:10s; animation-delay:5s;  }
.why-bubble:nth-child(5) { width:35px;  height:35px;  left:65%;  animation-duration:13s; animation-delay:2s;  }
.why-bubble:nth-child(6) { width:14px;  height:14px;  left:80%;  animation-duration:8s;  animation-delay:4s;  }
.why-bubble:nth-child(7) { width:28px;  height:28px;  left:90%;  animation-duration:11s; animation-delay:6s;  }
@keyframes bubbleRise {
  0%   { opacity: 0; transform: translate3d(0, 60px, 0) scale(0.8); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translate3d(30px, -110vh, 0) scale(1.1); }
}

/* ── Hero image: rotating ring ───────────────────────────── */
.hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px dashed rgba(0,174,239,0.4);
  animation: ringRotate 18s linear infinite;
  z-index: -1;
}
.hero-img-wrap::after {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(0,174,239,0.15);
  animation: ringRotate 30s linear infinite reverse;
  z-index: -1;
}
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Animated wave (more dramatic) ─────────────────────── */
.hero-wave svg path {
  animation: waveMotion 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes waveMotion {
  0%, 100% { d: path("M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z"); }
  50%       { d: path("M0,55 C360,10 1080,70 1440,25 L1440,80 L0,80 Z"); }
}

/* ── Marquee pulse ──────────────────────────────────────── */
.marquee-item {
  transition: color 0.3s, transform 0.3s;
}
.marquee-item:hover {
  color: var(--navy);
  transform: scale(1.1);
}

/* ── Floating card enhanced ─────────────────────────────── */
.hero-floating-card {
  transition: box-shadow 0.3s;
}
.hero-floating-card:hover {
  box-shadow: 0 0 30px rgba(0,174,239,0.45), var(--shadow-lg);
}

/* ── About badge counter glow ────────────────────────────── */
.about-badge-float {
  animation: badgePop 4s ease-in-out infinite;
}
@keyframes badgePop {
  0%, 100% { box-shadow: var(--shadow-md); transform: rotate(-3deg); }
  50%       { box-shadow: 0 0 30px rgba(0,174,239,0.5), var(--shadow-lg); transform: rotate(-3deg) scale(1.05); }
}

/* ── CTA banner: animated shimmer strip ─────────────────── */
.cta-banner {
  background-size: 200% 100%;
  animation: ctaGradientPan 6s ease-in-out infinite;
}
@keyframes ctaGradientPan {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── Testimonial cards: glow on hover ───────────────────── */
.testi-card:hover {
  box-shadow: 0 8px 40px rgba(0,174,239,0.18), var(--shadow-md);
  border-color: rgba(0,174,239,0.25);
}
.testi-stars {
  animation: starPulse 2s ease-in-out infinite;
}
@keyframes starPulse {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 10px rgba(0,174,239,0.7); }
}

/* ── Feature icons: spin on hover ───────────────────────── */
.feature-icon {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.3s;
}
.feature-item:hover .feature-icon {
  transform: rotate(360deg) scale(1.1);
  box-shadow: 0 0 20px rgba(0,174,239,0.5);
}

/* ── Contact form: animated focus border ────────────────── */
.form-group input, .form-group select, .form-group textarea {
  position: relative;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: inputGlow 0.4s ease forwards;
}
@keyframes inputGlow {
  0%   { box-shadow: 0 0 0 0 rgba(0,174,239,0); }
  100% { box-shadow: 0 0 0 4px rgba(0,174,239,0.2); }
}

/* ── Page Hero particles ─────────────────────────────────── */
.page-hero {
  position: relative;
}
.page-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,174,239,0.3);
  animation: particleFloat ease-in-out infinite;
}
.hero-particle:nth-child(1) { width:8px;  height:8px;  left:10%; top:20%; animation-duration:5s;  animation-delay:0s; }
.hero-particle:nth-child(2) { width:12px; height:12px; left:25%; top:60%; animation-duration:7s;  animation-delay:1s; }
.hero-particle:nth-child(3) { width:6px;  height:6px;  left:45%; top:35%; animation-duration:4s;  animation-delay:2s; }
.hero-particle:nth-child(4) { width:15px; height:15px; left:65%; top:70%; animation-duration:8s;  animation-delay:0.5s; }
.hero-particle:nth-child(5) { width:9px;  height:9px;  left:80%; top:25%; animation-duration:6s;  animation-delay:1.5s; }
@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50%       { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

/* ── Nav link: water drop underline ─────────────────────── */
.nav-link::after {
  background: linear-gradient(90deg, var(--cyan), #33d4ff);
  height: 2px;
}

/* ── Footer social: bounce ─────────────────────────────── */
.social-icon {
  transition: var(--transition), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-icon:hover {
  transform: translateY(-6px) scale(1.15);
}

/* ── Why card: icon spin on hover ───────────────────────── */
.why-icon {
  transition: transform 0.5s cubic-bezier(0.68,-0.55,0.27,1.55), background 0.3s;
}
.why-card:hover .why-icon {
  transform: rotateY(360deg) scale(1.1);
}

/* ── Animated blob morph ────────────────────────────────── */
@keyframes blobMorph {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 60%; }
  25%  { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
  50%  { border-radius: 70% 30% 50% 50% / 30% 70% 50% 50%; }
  75%  { border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%; }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 60%; }
}
.hero-img-wrap {
  animation: blobMorph 12s ease-in-out infinite !important;
}

/* ── Liquid fill on CTA button ──────────────────────────── */
.btn-white {
  position: relative;
  overflow: hidden;
}
.btn-white::before {
  content: '';
  position: absolute;
  bottom: -100%; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,174,239,0.15);
  transition: bottom 0.4s ease;
  z-index: 0;
  border-radius: inherit;
}
.btn-white > i, .btn-white > span, .btn-white {
  position: relative;
  z-index: 1;
}
.btn-white:hover::before {
  bottom: 0;
}

/* ── Staggered number counter sparkle ───────────────────── */
@keyframes sparkleCounter {
  0%, 90%, 100% { text-shadow: none; }
  95% { text-shadow: 0 0 20px rgba(0,174,239,0.9), 0 0 40px rgba(0,174,239,0.5); }
}
.stat-num.counted {
  animation: sparkleCounter 2s ease forwards;
}

/* ── Hero badge: ripple pulse ring ──────────────────────── */
.hero-badge {
  position: relative;
}
.hero-badge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(0,174,239,0.4);
  animation: badgeRingPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%       { transform: scale(1.06); opacity: 1; }
}

/* ── Scroll top: spin on hover ──────────────────────────── */
.scroll-top:hover i {
  animation: spinBounce 0.5s ease;
}
@keyframes spinBounce {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-20deg) scale(1.2); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ── Product image: alive with shimmer ──────────────────── */
.product-img {
  position: relative;
  overflow: hidden;
}
.product-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,174,239,0.15) 0%, transparent 70%);
  animation: imgGlow 3s ease-in-out infinite alternate;
}
@keyframes imgGlow {
  from { opacity: 0.3; transform: scale(0.9); }
  to   { opacity: 1;   transform: scale(1.1); }
}

/* ── Glassmorphism card enhancement ─────────────────────── */
.why-card, .testi-card, .contact-form {
  backdrop-filter: blur(10px);
}

/* ── Floating emoji animation in product cards ──────────── */
.product-img > span,
.product-img > :first-child {
  display: inline-block;
  animation: emojiFloat 3s ease-in-out infinite;
}
@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(5deg); }
}

/* ── Section divider: animated gradient line ────────────── */
.section-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  background-size: 200% auto;
  animation: dividerSweep 4s linear infinite;
  border: none;
  margin: 0;
}
@keyframes dividerSweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Reduced motion support ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}