/* SPORTLAZ glass: Liquid + Gloss (chosen 2026-10-07). A web approximation inspired by Apple's Liquid Glass, not an Apple material. Dark polished glass with a wet highlight across the top, a burgundy
   reflection at the bottom, a light blur so the brand lines show through, and edges that bend the light behind them (assets/liquid.js).
   Use: <div class="gx"><i class="grain"></i><i class="rim2"></i><i class="sheen"></i> … </div>; set --mx/--my from JS for the cursor light.
   The --lg-* tokens are shared, so any page can dress its own glass the same way.
   .gx-scene puts soft brandbook burgundy light behind a group of glass blocks so the glass has something to show through. */
:root{
  --lg-bg:radial-gradient(120% 55% at 30% -18%,rgba(255,255,255,.24),rgba(255,255,255,.05) 45%,transparent 46%),linear-gradient(180deg,rgba(14,6,8,.22),rgba(14,6,8,.42) 60%,rgba(163,21,42,.34));
  --lg-bf:blur(6px) saturate(1.9) brightness(1.06);
  --lg-shadow:inset 2px 2px 1px -1px rgba(255,255,255,.6),inset -2px -2px 1px -1px rgba(255,255,255,.25),inset 0 -14px 30px -10px rgba(242,84,91,.32),0 50px 80px -40px rgba(0,0,0,1),0 0 40px -14px rgba(226,50,62,.45);
  --lg-edge:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.1) 22%,rgba(255,255,255,.03) 60%,rgba(242,84,91,.6));
  --lg-sheen:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.16) 48%,transparent 49%,transparent 52%,rgba(255,255,255,.06) 53%,transparent 56%)}
body.lg-ok{--lg-bf:url(#lg) blur(4px) saturate(1.9) brightness(1.06)}
.gx{--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden;border-radius:24px;
  background:var(--lg-bg);
  -webkit-backdrop-filter:var(--lg-bf);backdrop-filter:var(--lg-bf);
  box-shadow:var(--lg-shadow)}
.gx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;pointer-events:none;transition:opacity .6s;
  background:var(--lg-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gx::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .15s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.09),rgba(242,84,91,.07) 35%,transparent 60%)}
.gx:hover::after{opacity:1;transition:opacity .8s ease .2s}
.gx>*{position:relative;z-index:1}
.gx .grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.gx .rim2{position:absolute;inset:7px;border-radius:18px;z-index:0;pointer-events:none;border:1px solid rgba(255,255,255,.035)}
.gx .sheen{position:absolute;inset:-50% -70%;z-index:2;pointer-events:none;opacity:0;transform:translateX(-62%);transition:none;
  background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.14) 49.5%,rgba(255,255,255,.04) 51%,transparent 56%)}
.gx:hover .sheen{opacity:1;transform:translateX(62%);transition:transform 1.6s cubic-bezier(.65,0,.25,1),opacity .2s ease}
/* Liquid + Gloss: no grain or inner rim (they made it matte); a resting gloss streak that glides on hover */
.gx .grain,.gx .rim2{display:none}
.gx .sheen{opacity:.55;transform:translateX(-30%);background:var(--lg-sheen)}
.gx:hover .sheen{opacity:.8;transform:translateX(30%);transition:transform 2.4s cubic-bezier(.65,0,.25,1)}
.gx.is-core{background:radial-gradient(120% 55% at 30% -18%,rgba(255,255,255,.26),rgba(255,255,255,.06) 45%,transparent 46%),linear-gradient(180deg,rgba(60,8,14,.3),rgba(120,14,28,.42) 60%,rgba(194,31,46,.5))}
.gx.is-core::before{background:linear-gradient(145deg,rgba(255,200,200,.8),rgba(242,84,91,.3) 26%,rgba(255,255,255,.05) 55%,rgba(242,84,91,.6) 100%)}
.gx .emblem,.hx-em{width:clamp(38px,5vh,46px);height:clamp(38px,5vh,46px);border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.3),rgba(242,84,91,.42) 34%,rgba(94,10,26,.75) 78%);border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -8px 14px rgba(42,4,9,.6),0 0 26px rgba(226,50,62,.45)}
.gx .emblem .ico{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gx-scene{position:relative;isolation:isolate}
.gx-scene::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;filter:blur(28px);
  background:radial-gradient(30% 40% at 15% 20%,rgba(194,31,46,.42),transparent 70%),radial-gradient(34% 40% at 85% 45%,rgba(163,21,42,.48),transparent 72%),
    radial-gradient(30% 40% at 30% 80%,rgba(94,10,26,.6),transparent 70%),radial-gradient(26% 34% at 75% 92%,rgba(194,31,46,.3),transparent 70%)}
@media (prefers-reduced-motion:reduce){.gx,.gx .sheen,.gx::after{transition:none!important}}

/* people who ask the system for less transparency get a solid, readable surface */
@media (prefers-reduced-transparency:reduce){
  .gx{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,#1a0d10,#2a0b12 60%,#4a0f1b)}
}