/* EpochAgent — Watermark band water animation.
   Loaded after ea-theme.css. */

/* ── "Watermarked." melting into droplets ─────────────────── */
.wm-word{ position:relative; display:inline-block; cursor:pointer; white-space:nowrap; }
.wm-letter{ position:relative; display:inline-block; color:var(--paper); opacity:1;
  transition:opacity .5s ease, transform .5s ease, filter .5s ease; will-change:transform,opacity,filter; }
.wm-letter .bead{
  position:absolute; left:50%; bottom:0.04em; width:0.34em; height:0.34em;
  border-radius:50% 50% 50% 0; transform:translate(-50%,0) rotate(45deg) scale(0);
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,0.95), rgba(168,150,247,0.7) 42%, rgba(106,61,240,0.7) 78%);
  box-shadow:0 1px 3px rgba(74,58,160,0.4), inset 0 0 2px rgba(255,255,255,0.6);
  opacity:0; pointer-events:none;
}

/* melt: letters sag and drip away, beads detach and fall */
.wm-h2.melt .wm-letter{ animation:wm-melt 760ms cubic-bezier(.55,.06,.3,1) forwards; animation-delay:calc(var(--li)*52ms); transition:none; }
.wm-h2.melt .wm-letter .bead{ animation:wm-bead 900ms cubic-bezier(.4,.1,.5,1) forwards; animation-delay:calc(var(--li)*52ms + 120ms); }
.wm-h2.drip .wm-letter{ opacity:0; transform:translateY(0.45em); filter:blur(2px); transition:none; }  /* hold dissolved */
.wm-h2.done .wm-letter{ opacity:1; transform:translateY(0); filter:blur(0); transition-delay:calc(var(--li)*28ms); }  /* reform */

@keyframes wm-melt{
  0%{ opacity:1; transform:translateY(0) scaleY(1); filter:blur(0); }
  28%{ transform:translateY(0.04em) scaleY(1.08); filter:blur(0); }
  100%{ opacity:0; transform:translateY(0.62em) scaleY(1.45); filter:blur(3px); }
}
@keyframes wm-bead{
  0%{ opacity:0; transform:translate(-50%,0) rotate(45deg) scale(0.2); }
  24%{ opacity:1; transform:translate(-50%,0.06em) rotate(45deg) scale(0.72); }
  100%{ opacity:0; transform:translate(-50%,1.5em) rotate(45deg) scale(0.5); }
}
@keyframes wm-reform{
  0%{ opacity:0; transform:translateY(-0.34em); filter:blur(3px); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ── droplets raining onto each provider ──────────────────── */
.prov{ position:relative; display:inline-block; }
.prov b{ position:relative; z-index:2; transition:color .3s; }

/* the falling teardrop */
.prov-drop{
  position:absolute; left:50%; top:0; width:13px; height:13px; z-index:3;
  border-radius:50% 50% 50% 0;
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,0.96), rgba(168,150,247,0.75) 42%, rgba(106,61,240,0.78) 80%);
  box-shadow:0 2px 5px rgba(74,58,160,0.45), inset 0 0 3px rgba(255,255,255,0.7);
  transform:translate(-50%,-64px) rotate(45deg) scale(0.5); opacity:0; pointer-events:none;
}
/* glassy bead that encapsulates the name */
.prov-bubble{
  position:absolute; left:50%; top:50%; width:calc(100% + 26px); height:calc(100% + 16px); z-index:1;
  transform:translate(-50%,-50%) scale(0.7); opacity:0; pointer-events:none;
  border-radius:999px;
  background:linear-gradient(160deg, rgba(255,255,255,0.42), rgba(168,150,247,0.14) 45%, rgba(106,61,240,0.12));
  box-shadow:
    inset 0 1px 6px rgba(255,255,255,0.7),
    inset 0 -3px 8px rgba(106,61,240,0.18),
    0 4px 14px -4px rgba(74,58,160,0.4);
  border:1px solid rgba(255,255,255,0.55);
}
.prov-bubble::before{ /* specular highlight */
  content:""; position:absolute; left:14%; top:16%; width:34%; height:32%;
  border-radius:50%; background:radial-gradient(circle at 40% 35%, rgba(255,255,255,0.9), transparent 70%);
}
/* impact ripple */
.prov-ripple{
  position:absolute; left:50%; top:50%; width:26px; height:26px; z-index:0;
  transform:translate(-50%,-50%) scale(0.4); opacity:0; pointer-events:none;
  border-radius:50%; border:2px solid rgba(106,61,240,0.5);
}

/* drip phase: drop falls, splashes, ripple expands, bubble pops in */
.wm-stacks.drip .prov-drop{ animation:prov-fall 1000ms cubic-bezier(.45,.05,.55,1) forwards; animation-delay:calc(var(--pi)*230ms); }
.wm-stacks.drip .prov-ripple{ animation:prov-ripple 900ms ease-out forwards; animation-delay:calc(var(--pi)*230ms + 620ms); }
.wm-stacks.drip .prov-bubble{ animation:prov-bubble-in 760ms cubic-bezier(.2,1,.3,1) forwards; animation-delay:calc(var(--pi)*230ms + 600ms); }
.wm-stacks.drip .prov b{ transition-delay:calc(var(--pi)*230ms + 640ms); color:#3b2c8f; }

/* done: bead stays wrapped, name tinted, drop & ripple gone */
.wm-stacks.done .prov-bubble{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.wm-stacks.done .prov b{ color:#3b2c8f; }

@keyframes prov-fall{
  0%{ opacity:0; transform:translate(-50%,-64px) rotate(45deg) scale(0.5,0.6); }
  16%{ opacity:1; }
  68%{ opacity:1; transform:translate(-50%,-3px) rotate(45deg) scale(0.95,1.05); }
  82%{ opacity:0.85; transform:translate(-50%,-1px) rotate(45deg) scale(1.25,0.7); } /* splash flatten */
  100%{ opacity:0; transform:translate(-50%,0) rotate(45deg) scale(1.6,0.25); }
}
@keyframes prov-bubble-in{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.66); }
  60%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes prov-ripple{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  18%{ opacity:0.7; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(2.1); }
}

@media (prefers-reduced-motion:reduce){
  .wm-word{ cursor:default; }
  .prov-drop,.prov-ripple,.prov-bubble{ display:none; }
}