/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* ===== STAGGER DELAYS ===== */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* ===== WATER DROP ANIMATION (Hero) ===== */
@keyframes dropFall {
  0% {
    transform: translateY(-100vh) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) scale(1);
    opacity: 0;
  }
}
.water-drop {
  position: absolute;
  width: 6px;
  height: 8px;
  background: rgba(16, 185, 129, 0.3);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: dropFall linear infinite;
}

/* ===== PULSE RING (Emergency badge) ===== */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
.pulse-ring {
  position: relative;
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #10B981;
  animation: pulseRing 2s ease-out infinite;
}

/* ===== FLOATING ANIMATION (Hero cards) ===== */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.float {
  animation: float 4s ease-in-out infinite;
}
.float-delay {
  animation: float 4s ease-in-out 1s infinite;
}
.float-delay-2 {
  animation: float 4s ease-in-out 2s infinite;
}

/* ===== PIPE FLOW (Services top line) ===== */
@keyframes pipeFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.pipe-flow {
  background: linear-gradient(90deg, #D1FAE5, #10B981, #D1FAE5, #10B981);
  background-size: 200% 100%;
  animation: pipeFlow 3s linear infinite;
}

/* ===== CARD HOVER LIFT ===== */
.card-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* ===== MAGNETIC BUTTON ===== */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}
.magnetic-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(5, 150, 105, 0.35);
}
.magnetic-btn:active {
  transform: translateY(-1px);
}

/* ===== ANIMATED UNDERLINE (Nav links) ===== */
.animated-underline {
  position: relative;
}
.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #059669;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.animated-underline:hover::after {
  width: 100%;
}

/* ===== GRADIENT TEXT ===== */
.gradient-text {
  background: linear-gradient(135deg, #059669, #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== TOAST NOTIFICATIONS ===== */
@keyframes slideInRight {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}
.toast-in {
  animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast-out {
  animation: slideOutRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== SCROLL PROGRESS BAR ===== */
#scroll-progress {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open {
  transform: translateX(0);
}