/* =============================================================
   THE GIVING WATER — Water Design Language
   Waves, ripples, droplets, caustics, rising fills, liquid motion.
   Everything here is GPU-friendly (transform/opacity) & self-contained.
   ============================================================= */

/* ---------- Keyframes ---------- */
@keyframes waveScroll   { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes waveScrollRev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes bob          { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes bobSlow      { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(1.5deg); } }
@keyframes rise         { 0%{ transform:translateY(18px); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@keyframes bubbleUp     { 0%{ transform:translateY(0) scale(.6); opacity:0; }
                          15%{ opacity:.8; } 100%{ transform:translateY(-120px) scale(1); opacity:0; } }
@keyframes rippleOut    { 0%{ transform:scale(.2); opacity:.55; } 100%{ transform:scale(2.6); opacity:0; } }
@keyframes shimmer      { 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
@keyframes dropFall     { 0%{ transform:translateY(-40px) scaleY(.7); opacity:0; }
                          40%{ opacity:1; } 70%{ transform:translateY(0) scaleY(1); }
                          85%{ transform:translateY(-6px) scaleY(1.05); } 100%{ transform:translateY(0); opacity:1; } }
@keyframes spinDrop     { to{ transform:rotate(360deg); } }
@keyframes caustic      { 0%{ transform:translate3d(0,0,0) scale(1); }
                          50%{ transform:translate3d(-2%,1%,0) scale(1.05); }
                          100%{ transform:translate3d(0,0,0) scale(1); } }
@keyframes fillRise     { from{ height:0; } }

/* ---------- Animated wave divider (section→section flow) ---------- */
.wave-divider{ position:relative; line-height:0; width:100%; overflow:hidden; }
.wave-divider svg{ display:block; width:100%; height:clamp(48px,7vw,120px); }
.wave-divider--flip svg{ transform:rotate(180deg); }

/* Layered moving waves (hero foot / CTA foot) */
.waves{ position:absolute; left:0; right:0; bottom:-1px; height:clamp(70px,9vw,150px); pointer-events:none; overflow:hidden; }
.waves .layer{ position:absolute; bottom:0; left:0; width:200%; height:100%;
  background-repeat:repeat-x; background-position:0 bottom; will-change:transform; }
.waves .layer.l1{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'><path d='M0 60 C 150 110 350 10 600 60 C 850 110 1050 10 1200 60 L1200 120 L0 120 Z' fill='%23ffffff' opacity='.9'/></svg>");
  animation:waveScroll 14s linear infinite; opacity:.55; }
.waves .layer.l2{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'><path d='M0 70 C 200 20 400 120 600 70 C 800 20 1000 120 1200 70 L1200 120 L0 120 Z' fill='%23ffffff' opacity='.75'/></svg>");
  animation:waveScrollRev 20s linear infinite; opacity:.7; }
.waves .layer.l3{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'><path d='M0 80 C 150 50 450 110 600 80 C 750 50 1050 110 1200 80 L1200 120 L0 120 Z' fill='%23ffffff'/></svg>");
  animation:waveScroll 26s linear infinite; }

/* Bubbles rising within a section */
.bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bubbles i{ position:absolute; bottom:-30px; display:block; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(174,224,247,.25));
  box-shadow:0 0 8px rgba(174,224,247,.4); animation:bubbleUp linear infinite; }

/* Caustic light overlay (dappled water light on dark sections) */
.caustics{ position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:screen;
  background:
    radial-gradient(120px 90px at 20% 30%, rgba(120,210,255,.5), transparent 60%),
    radial-gradient(160px 120px at 70% 60%, rgba(90,190,240,.4), transparent 60%),
    radial-gradient(100px 80px at 45% 80%, rgba(150,225,255,.35), transparent 60%);
  animation:caustic 12s var(--ease-inout) infinite; }

/* ---------- Ripple interaction (buttons/links) ---------- */
.ripple-host{ position:relative; overflow:hidden; }
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform:scale(0); pointer-events:none; animation:rippleOut .7s var(--ease-out) forwards; }

/* ---------- Droplet loader ---------- */
.droplet-loader{ width:54px; height:54px; position:relative; margin:0 auto; }
.droplet-loader .drop{
  position:absolute; inset:0; background:var(--grad-brand);
  border-radius:50% 50% 50% 0; transform:rotate(45deg); box-shadow:var(--shadow-glow);
  animation:spinDrop 1.4s var(--ease-inout) infinite; }
.droplet-loader .drop::after{ content:""; position:absolute; left:26%; top:20%; width:22%; height:22%;
  background:rgba(255,255,255,.85); border-radius:50%; }

/* Full-screen preloader */
#preloader{
  position:fixed; inset:0; z-index:var(--z-toast); display:grid; place-items:center;
  background:var(--grad-hero); color:#eaf6fd; transition:opacity .6s ease, visibility .6s ease;
}
#preloader.done{ opacity:0; visibility:hidden; }
#preloader .pl-inner{ text-align:center; }
#preloader .pl-word{ font-family:var(--font-head); font-size:clamp(1.4rem,4vw,2rem); letter-spacing:.02em;
  margin-top:1.1rem; opacity:.92; }
#preloader .pl-bar{ width:min(240px,60vw); height:4px; border-radius:4px; background:rgba(255,255,255,.18);
  margin:1.2rem auto 0; overflow:hidden; }
#preloader .pl-bar > span{ display:block; height:100%; width:40%; border-radius:4px;
  background:linear-gradient(90deg,var(--crystal-400),#fff); animation:plload 1.1s var(--ease-inout) infinite; }
@keyframes plload{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }

/* ---------- Rising water fill (stat cards / meters) ---------- */
.fill-meter{ position:relative; overflow:hidden; border-radius:var(--radius); }
.fill-meter .fill{
  position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg, rgba(55,182,233,.18), rgba(28,134,201,.28));
  transition:height 1.4s var(--ease-water);
}
.fill-meter .fill::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12'><path d='M0 6 q30 -8 60 0 t60 0 v12 H0 Z' fill='%2337b6e9' opacity='.5'/></svg>") repeat-x;
  background-size:120px 12px; animation:waveScroll 6s linear infinite; }

/* ---------- Shine sweep (glass / cards on hover) ---------- */
.shine{ position:relative; overflow:hidden; }
.shine::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg,transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); transition:left .8s var(--ease-out); }
.shine:hover::after{ left:120%; }

/* ---------- Liquid reveal for images ---------- */
.liquid-img{ position:relative; overflow:hidden; border-radius:var(--radius-lg); }
.liquid-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.liquid-img:hover img{ transform:scale(1.06); }
.liquid-img::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%, rgba(6,38,63,.55)); }

/* ---------- Floating positive words (ambient encouragement) ---------- */
.word-drift{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.word-drift .wd{ position:absolute; font-family:var(--font-head); font-weight:600; white-space:nowrap;
  opacity:0; transform:translateY(20px); letter-spacing:.01em; will-change:transform,opacity;
  animation-name:wordFloat; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.word-drift--dark .wd{ color:#bfe6f8; }
.word-drift--light .wd{ color:#155e94; }
.word-drift .wd-logo{ position:absolute; opacity:0; transform:translateY(20px); will-change:transform,opacity;
  animation:wordFloat ease-in-out infinite; filter:drop-shadow(0 6px 12px rgba(6,38,63,.25)); }
.word-drift .wd-logo svg{ width:100%; height:auto; display:block; }
@keyframes wordFloat{
  0%{ opacity:0; transform:translateY(26px) translateX(-6px); }
  22%{ opacity:var(--o,.1); }
  50%{ opacity:calc(var(--o,.1) * 1.35); transform:translateY(-16px) translateX(6px); }
  78%{ opacity:var(--o,.1); }
  100%{ opacity:0; transform:translateY(-40px) translateX(-4px); }
}
/* In the hero the words sit above the veil so they read softly */
.hero .word-drift{ z-index:2; }
.cta-band .word-drift{ z-index:1; }
/* On normal sections, keep words safely BEHIND the content */
.section > .word-drift{ z-index:0; }
.section > .container{ position:relative; z-index:1; }

/* Reduced motion: freeze the ambient loops */
@media (prefers-reduced-motion: reduce){
  .waves .layer, .bubbles i, .caustics, .fill-meter .fill::before, .droplet-loader .drop,
  #preloader .pl-bar > span{ animation:none !important; }
  .word-drift .wd{ animation:none !important; opacity:var(--o,.08); transform:none; }
}