/* ==========================================================================
   Quantara Irrigation - Custom Styles & Drip-Line Visual Signature
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Work+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --color-terre: #5C4430;
  --color-feuille: #3F6B3B;
  --color-eau: #2F7B9E;
  --color-sable: #F3EEE3;
  --color-charbon: #23281F;
}

html {
  scroll-behavior: smooth;
  font-family: 'Work Sans', sans-serif;
  color: #23281F;
  background-color: #F3EEE3;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', serif;
  font-feature-settings: "liga", "clig", "kern";
}

/* Glassmorphism & Header blur */
.glass-nav {
  background: rgba(243, 238, 227, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(92, 68, 48, 0.12);
}

.glass-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.glass-card-dark {
  background: rgba(35, 40, 31, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Signature Visuelle : "Ligne Goutte-à-Goutte" (Drip-Line Animation)
   ========================================================================== */

/* The animated pipe line */
.drip-pipe {
  position: relative;
  height: 6px;
  background: linear-gradient(90deg, #5C4430 0%, #2F7B9E 30%, #3F6B3B 70%, #5C4430 100%);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(47, 123, 158, 0.25);
  overflow: visible;
}

/* Flow effect inside the pipe */
.drip-pipe::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: waterFlow 3.5s linear infinite;
  border-radius: 9999px;
}

@keyframes waterFlow {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Emitter nodes on the line */
.emitter-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: #23281F;
  border: 2px solid #2F7B9E;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(47, 123, 158, 0.2);
}

/* Droplet animation */
.water-drop {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 14px;
  background: linear-gradient(180deg, #64B5D6 0%, #2F7B9E 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  pointer-events: none;
}

/* Individual drip rhythms */
.drop-1 { animation: dripFall 2.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite 0.2s; }
.drop-2 { animation: dripFall 2.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite 1.1s; }
.drop-3 { animation: dripFall 2.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite 0.7s; }
.drop-4 { animation: dripFall 3.0s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite 1.8s; }
.drop-5 { animation: dripFall 2.6s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite 1.4s; }

@keyframes dripFall {
  0% {
    top: 6px;
    opacity: 0;
    transform: translateX(-50%) scale(0.6, 0.6);
  }
  15% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1, 1.2);
  }
  75% {
    top: 55px;
    opacity: 0.9;
    transform: translateX(-50%) scale(0.9, 1.4);
  }
  90% {
    top: 65px;
    opacity: 0;
    transform: translateX(-50%) scale(1.6, 0.3);
  }
  100% {
    top: 65px;
    opacity: 0;
    transform: translateX(-50%) scale(2, 0.1);
  }
}

/* Splash ripple under the drop */
.splash-ripple {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 22px;
  height: 8px;
  border: 1.5px solid #2F7B9E;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.ripple-1 { animation: rippleEffect 2.4s ease-out infinite 0.2s; }
.ripple-2 { animation: rippleEffect 2.8s ease-out infinite 1.1s; }
.ripple-3 { animation: rippleEffect 2.2s ease-out infinite 0.7s; }
.ripple-4 { animation: rippleEffect 3.0s ease-out infinite 1.8s; }
.ripple-5 { animation: rippleEffect 2.6s ease-out infinite 1.4s; }

@keyframes rippleEffect {
  0%, 70% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  78% {
    opacity: 0.8;
    transform: translateX(-50%) scale(0.6);
  }
  100% {
    transform: translateX(-50%) scale(2.2);
    opacity: 0;
  }
}

/* Pulse glow on emitter */
.emitter-node::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(47, 123, 158, 0.4);
  animation: emitterPulse 2.5s ease-in-out infinite;
}

@keyframes emitterPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* Section divider container */
.drip-divider-section {
  position: relative;
  padding: 2.5rem 0 3.5rem 0;
  overflow: visible;
}

/* Subtle background agricultural soil grid */
.soil-pattern {
  background-image: radial-gradient(rgba(92, 68, 48, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Interactive Card Hover Elevate */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px -10px rgba(35, 40, 31, 0.12);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #F3EEE3;
}
::-webkit-scrollbar-thumb {
  background: #5C4430;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3F6B3B;
}

/* Toast alert notification */
#toast-notification {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}