/* The rippling hero bead (js/ui/liquid.js): a WebGL canvas, or the CSS + SVG-filter fallback.
   The float (6 s) and the shadow under it live here; the ripples and the wobble are drawn by the shader. */

.liquid-bead {
  --lq-size: 116px;
  --lq-shadow: 28, 27, 26;
  --lq-lift: clamp(-7px, calc(var(--lq-size) * -0.045), -5px);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--lq-size);
  height: var(--lq-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.liquid-bead:focus { outline: none; }
.liquid-bead:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 12px; }

.liquid-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 78%;
  height: 40%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--lq-shadow), 0.34), rgba(var(--lq-shadow), 0.16) 45%, rgba(var(--lq-shadow), 0.05) 75%, rgba(var(--lq-shadow), 0) 100%);
  animation: lq-shadow 6s ease-in-out infinite;
}
.liquid-float, .liquid-press { position: absolute; inset: 0; display: block; pointer-events: none; }
.liquid-float { animation: lq-float 6s ease-in-out infinite; }
.liquid-press { transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.liquid-bead.is-pressed .liquid-press { transform: scale(0.975); transition: transform 90ms ease-out; }
.liquid-canvas { position: absolute; left: -12.5%; top: -12.5%; width: 125%; height: 125%; display: block; }
.liquid-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes lq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--lq-lift)); } }
@keyframes lq-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.88); opacity: 0.72; } }

/* ---------- fallback: layered gradients, three expanding rings, a turbulence wobble ---------- */
.liquid-css {
  --lq-c0: #615E5A; --lq-c1: #1F1E1D; --lq-c2: #0B0B0A; --lq-c3: #34322F;
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 34% 22% at 33% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.32) 45%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 72% 80%, rgba(150, 175, 255, 0.42), rgba(150, 175, 255, 0) 36%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.16) 94%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 40% 36%, var(--lq-c0) 0%, var(--lq-c1) 45%, var(--lq-c2) 85%, var(--lq-c3) 100%);
  animation: lq-blob 9s ease-in-out infinite;
}
.lq-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
  opacity: 0;
  animation: lq-ring 4.5s ease-out infinite;
}
.lq-ring.r2 { animation-delay: 1.5s; }
.lq-ring.r3 { animation-delay: 3s; }
.liquid-bead.is-pressed .lq-ring { border-color: rgba(255, 255, 255, 0.5); }

@keyframes lq-blob {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  25% { border-radius: 53% 47% 50% 50% / 48% 52% 48% 52%; }
  50% { border-radius: 48% 52% 54% 46% / 52% 47% 53% 48%; }
  75% { border-radius: 51% 49% 46% 54% / 47% 52% 48% 53%; }
}
@keyframes lq-ring { 0% { transform: scale(0.12); opacity: 0; } 18% { opacity: 0.6; } 100% { transform: scale(1.02); opacity: 0; } }

/* ---------- fallback, two inks (liquidBead({ level })): a soft white drop, then a still yin-yang ---------- */
.liquid-css.is-yin {
  --lq-milk: 231, 228, 221;
  background: radial-gradient(circle at 40% 36%, var(--lq-c0) 0%, var(--lq-c1) 45%, var(--lq-c2) 85%, var(--lq-c3) 100%);
}
/* the glaze over both inks: window, cool bounce, rim, and the shading that rounds the white */
.liquid-css.is-yin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 26% 15% at 33% 25%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(circle at 72% 80%, rgba(150, 175, 255, 0.2), rgba(150, 175, 255, 0) 34%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.14) 94%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 38% 34%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.28) 100%);
}
.lq-yin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: lq-turn var(--lq-turn, 60s) linear infinite;
}
.lq-blob {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--lq-milk), 0.95) 0%, rgba(var(--lq-milk), 0.82) 42%, rgba(var(--lq-milk), 0.32) 72%, rgba(var(--lq-milk), 0) 100%);
}
.lq-yin.is-taiji .lq-blob { display: none; }
/* white on the left, its head below, the black head above, each with the other's eye (as the shader): the white
   eye in the black from Advanced 1, the black eye in the white from Advanced 3, soft until Master */
.lq-yin.is-taiji {
  --lq-eye-w: 25%;
  --lq-eye-w-soft: 2%;
  --lq-eye-b: 25%;
  --lq-eye-b-soft: 2%;
  background:
    radial-gradient(circle closest-side at 50% 25%, rgb(var(--lq-milk)) calc(var(--lq-eye-w) - var(--lq-eye-w-soft)), rgba(var(--lq-milk), 0) calc(var(--lq-eye-w) + var(--lq-eye-w-soft))),
    radial-gradient(circle closest-side at 50% 75%, #121110 calc(var(--lq-eye-b) - var(--lq-eye-b-soft)), rgba(18, 17, 16, 0) calc(var(--lq-eye-b) + var(--lq-eye-b-soft))),
    radial-gradient(circle closest-side at 50% 25%, #121110 97%, rgba(18, 17, 16, 0) 100%),
    radial-gradient(circle closest-side at 50% 75%, rgb(var(--lq-milk)) 97%, rgba(var(--lq-milk), 0) 100%),
    linear-gradient(90deg, rgb(var(--lq-milk)) 49.6%, rgba(var(--lq-milk), 0) 50.4%);
}
.liquid-css.is-still .lq-yin { animation: none; }
@keyframes lq-turn { to { transform: rotate(-360deg); } }
/* a tap before Master: the inks cloud over grey, then clear again slowly over the band's settle time (9 s at
   Easy … 5 s at Expert; the WebGL drop separates them like ink in water in that time). The easing follows
   yinClarity() in js/ui/liquid.js: hardly clearing at first, a third of the way by 60 %, the rest at the end. */
.lq-mud {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 60% 40% at 38% 62%, rgba(214, 210, 203, 0.55), rgba(214, 210, 203, 0) 70%),
    radial-gradient(ellipse 45% 55% at 66% 34%, rgba(150, 146, 140, 0.5), rgba(150, 146, 140, 0) 72%),
    radial-gradient(circle, rgba(104, 101, 97, 0.92) 0%, rgba(84, 81, 78, 0.9) 70%, rgba(60, 58, 56, 0.85) 100%);
  transition: opacity var(--lq-settle, 7s) cubic-bezier(0.65, 0, 0.95, 0.9);
}
.lq-mud.is-on { opacity: calc(0.9 * var(--lq-stir, 1)); transition-duration: 0.25s; }

/* still: reduced motion, or liquidBead({ still: true }) */
.liquid-bead.is-still .liquid-float, .liquid-bead.is-still .liquid-shadow, .liquid-css.is-still { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .liquid-float, .liquid-shadow, .liquid-css, .lq-yin { animation: none; }
  .lq-ring, .lq-mud { display: none; }
  .liquid-css { filter: none !important; }
  .liquid-press, .liquid-bead.is-pressed .liquid-press { transition: none; transform: none; }
}

/* dark paper (system or Settings): a black shadow */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .liquid-bead { --lq-shadow: 0, 0, 0; }
}
:root[data-theme='dark'] .liquid-bead { --lq-shadow: 0, 0, 0; }