/* LiquidType (from lab/fx/liquid-type) — component styles. Font: any variable font with a wght axis (wdth optional).
   Tokens: --lt-font, --lt-rest (ink at rest), --lt-hot (ink under the mass), --lt-ls, --lt-glow. */

.lt {
  --lt-font: var(--f-liquid, 'Unbounded'), sans-serif;
  --lt-rest: color-mix(in oklab, var(--text, #f1f0ec) 86%, transparent);
  --lt-hot: color-mix(in oklab, var(--text, #fff) 70%, var(--accent, #fff));
  --lt-glow: 0.5;
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--lt-font);
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--lt-rest);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: text;
}
.lt-inner { position: relative; display: block; }
.lt-line { display: block; white-space: nowrap; }
.lt-word { display: inline-block; white-space: nowrap; }
.lt-ch {
  display: inline-block;
  font-variation-settings: 'wght' var(--w, 300), 'wdth' var(--d, 100), 'opsz' 144;
  letter-spacing: calc(var(--m, 0) * var(--lt-ls, -0.03em));
  color: color-mix(in oklab, var(--lt-hot) calc(var(--m, 0) * 100%), var(--lt-rest));
  text-shadow: 0 0 calc(var(--m, 0) * 0.42em) rgb(var(--lt-ripple, 255 255 255) / calc(var(--m, 0) * var(--lt-glow)));
}
.lt[data-liquid='weight'] { --lt-ls: -0.065em; }
.lt[data-liquid='width'] { --lt-ls: -0.015em; }
.lt[data-liquid='breathe'] { --lt-ls: -0.02em; --lt-glow: 0.38; }

/* glow + ripples layer (drawn by JS) */
.lt-fx {
  position: absolute; left: 0; right: 0; top: -45%; bottom: -45%;
  width: 100%; height: 190%;
  z-index: -1; pointer-events: none;
  /* feather the edges so the glow never shows the canvas box */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
}

/* appear: letters rise out of a blur, then the mass wave runs through */
.lt.lt-pre .lt-ch { opacity: 0; }
.lt.lt-intro .lt-ch {
  opacity: var(--a, 0);
  transform: translateY(calc((1 - var(--a, 0)) * 0.32em));
  filter: blur(calc((1 - var(--a, 0)) * 10px));
}

@media (prefers-reduced-motion: reduce) {
  .lt .lt-ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lt-fx { display: none; }
}