/* ─────────────────────────────────────────────────────────────
   Water in Motion — shared scroll/motion system for Happywater
   Bouncy reveals · parallax droplets · letter-by-letter hero ·
   water-level scroll progress · liquid image wipes.
   Everything degrades to the static layout under reduced-motion.
   ───────────────────────────────────────────────────────────── */
:root{
  --wm-spring: cubic-bezier(.34,1.56,.64,1);
  --wm-liquid: cubic-bezier(.72,0,.24,1);
}

/* ── water-level scroll progress (left rail) ───────────────── */
.wm-progress{
  position:fixed; left:16px; top:50%; transform:translateY(-50%);
  width:7px; height:min(46vh,380px); border-radius:999px;
  background:rgba(36,47,64,.12); z-index:80; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.wm-progress-fill{
  position:absolute; left:0; bottom:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--lake,#94DEFF), var(--pink,#ff2e88));
  border-radius:999px;
}
.wm-progress-fill::after{ /* wobbling meniscus */
  content:""; position:absolute; left:-25%; top:-7px; width:150%; height:14px;
  background:radial-gradient(circle at 50% 100%, var(--lake,#94DEFF) 40%, transparent 42%);
  animation:wm-bob 2.4s ease-in-out infinite;
}
@keyframes wm-bob{0%,100%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
@media (max-width:768px){ .wm-progress{display:none} }

/* ── scroll reveals (bouncy rise) ──────────────────────────── */
.wm-on .wm-reveal{
  opacity:0; transform:translateY(46px) scale(.985);
  transition:opacity .7s ease, transform .8s var(--wm-spring);
  transition-delay:var(--d,0ms); will-change:opacity,transform;
}
.wm-on .wm-reveal.wm-in{ opacity:1; transform:none; }
@media (max-width:768px){ .wm-on .wm-reveal{ transform:translateY(26px) } }

/* ── liquid wipe (photo fills like a glass) ────────────────── */
.wm-on .wm-wipe{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--wm-liquid);
  transition-delay:var(--d,0ms);
}
.wm-on .wm-wipe.wm-in{ clip-path:inset(0 0 0 0); }

/* ── hero letter-by-letter drop-in (transition-based: end-state
      is deterministic, so letters can never get stuck hidden) ── */
.wm-char{ display:inline-block; will-change:transform,opacity; }
.wm-hero-split .wm-char{
  opacity:0; transform:translateY(-.62em) rotate(-7deg);
  transition:opacity .5s ease, transform .6s var(--wm-spring);
  transition-delay:calc(var(--i,0) * 26ms);
}
.wm-hero-split.wm-hero-in .wm-char{ opacity:1; transform:none; }

/* ── parallax droplet field ────────────────────────────────── */
.wm-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.wm-drop{ position:absolute; border-radius:50%; will-change:transform; }
.wm-bg--light .wm-drop{
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.26), rgba(255,255,255,.03));
  filter:blur(1px); opacity:.7;
}
.wm-bg--dark .wm-drop{
  background:radial-gradient(circle at 34% 30%, rgba(36,47,64,.10), rgba(36,47,64,.02));
  filter:blur(1px); opacity:.8;
}

/* ── reduced motion: show everything, kill the motion ──────── */
@media (prefers-reduced-motion: reduce){
  .wm-on .wm-reveal{ opacity:1!important; transform:none!important; transition:none; }
  .wm-on .wm-wipe{ clip-path:none!important; transition:none; }
  .wm-hero-split .wm-char{ opacity:1!important; transform:none!important; transition:none; }
  .wm-bg, .wm-progress{ display:none!important; }
}