/* Yagrumo · Liquid Glass (pairs with /brand/glass.js) */

/* ---------- scroll portal: a glass squircle that opens onto the element */
.lg-zoom{--p:1;position:relative;isolation:isolate;
  --ix:calc((1 - var(--p)) * 18%);--iy:calc((1 - var(--p)) * 14%);--rr:calc(22px + (1 - var(--p)) * 90px);
  clip-path:inset(var(--iy) var(--ix) round var(--rr));-webkit-clip-path:inset(var(--iy) var(--ix) round var(--rr))}
.lg-zoom>.lg-zoom-inner{transform:scale(calc(1 + (1 - var(--p)) * .42));transform-origin:50% 45%;will-change:transform;
  position:relative;width:100%;height:100%;align-self:stretch;justify-self:stretch;grid-area:1/1;display:inherit;place-items:inherit;place-content:inherit;flex-direction:inherit;gap:inherit}
.lg-zoom>.lg-rim{position:absolute;inset:var(--iy) var(--ix);border-radius:var(--rr);pointer-events:none;z-index:3;
  opacity:calc(.25 + (1 - var(--p)) * .75);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -14px 36px rgba(0,0,0,.42),inset 16px 18px 48px rgba(255,255,255,.07),0 30px 80px -30px rgba(0,0,0,.7);
  background:
    radial-gradient(90% 55% at var(--mx,28%) var(--my,0%),rgba(255,255,255,.20),rgba(255,255,255,0) 46%),
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06))}
.lg-zoom.lg-open{clip-path:none;-webkit-clip-path:none}
.lg-zoom.lg-open>.lg-zoom-inner{transform:none;will-change:auto}

/* ---------- glass surface for UI */
.lg{position:relative;isolation:isolate;border-radius:var(--lg-r,20px);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.06);backdrop-filter:blur(16px) saturate(170%) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -8px 22px rgba(0,0,0,.25),0 18px 50px -24px rgba(0,0,0,.65)}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at var(--mx,25%) var(--my,0%),rgba(255,255,255,.16),rgba(255,255,255,0) 50%);mix-blend-mode:screen}

@media (prefers-reduced-motion: reduce){.lg-zoom{clip-path:none!important}.lg-zoom>.lg-zoom-inner{transform:none!important}.lg-zoom>.lg-rim{display:none}}