/* ==========================================================================
   MS Kala — Liquid Glass design layer
   Loaded LAST on every page (linked right before </body>) so it wins the
   cascade over each page's own <style> block without needing to touch
   thousands of lines of per-brand markup. Pure additive/override layer —
   safe to drop onto any page that already has the .gnav / header.topbar /
   .card / table / button / input structure used across the site.
   ========================================================================== */

@property --lg-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --lg-shine {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

:root{
  --lg-glow-teal: rgba(8,145,166,0.55);
  --lg-glow-teal-soft: rgba(8,145,166,0.22);
  --lg-glow-white: rgba(255,255,255,0.85);
  --lg-glow-brass: rgba(190,138,68,0.5);
  --lg-glass-bg: rgba(255,255,255,0.10);
  --lg-glass-bg-strong: rgba(15,22,35,0.55);
  --lg-glass-border: rgba(255,255,255,0.35);
  --lg-glass-border-dim: rgba(255,255,255,0.14);
  --lg-blur: blur(20px) saturate(180%);
  --lg-blur-lite: blur(12px) saturate(150%);
}

/* --------------------------------------------------------------------
   Animated screen-edge light — a comet of light chasing the viewport
   frame, plus soft ambient corner glows that slowly breathe.
   -------------------------------------------------------------------- */
.lg-edgeglow{
  position:fixed; inset:0; z-index:2147483000; pointer-events:none;
}
.lg-edgeglow::before{
  content:''; position:fixed; inset:0; padding:2px; box-sizing:border-box;
  background:conic-gradient(from var(--lg-angle),
    transparent 0deg,
    transparent 300deg,
    rgba(8,145,166,0) 316deg,
    rgba(55,182,201,0.95) 328deg,
    rgba(255,255,255,0.98) 335deg,
    rgba(190,138,68,0.9) 342deg,
    rgba(8,145,166,0) 356deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(.6px);
  opacity:.85;
  animation: lgEdgeSpin 7s linear infinite;
}
@keyframes lgEdgeSpin{ to{ --lg-angle: 360deg; } }

.lg-edgeglow::after{
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(420px 240px at -6% -8%, rgba(8,145,166,0.16), transparent 60%),
    radial-gradient(420px 240px at 106% -8%, rgba(190,138,68,0.14), transparent 60%),
    radial-gradient(420px 260px at -6% 108%, rgba(190,138,68,0.12), transparent 60%),
    radial-gradient(420px 260px at 106% 108%, rgba(8,145,166,0.16), transparent 60%);
  animation: lgCornerBreathe 8s ease-in-out infinite;
}
@keyframes lgCornerBreathe{
  0%,100%{ opacity:.65; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .lg-edgeglow::before, .lg-edgeglow::after{ animation:none; }
}

/* --------------------------------------------------------------------
   Core liquid-glass surface mixin (applied directly to real selectors
   below — CSS has no @mixin, so the properties are repeated per rule).
   -------------------------------------------------------------------- */

/* ============ Global nav bar — the primary ask ============ */
.gnav{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 40%),
    rgba(15,22,35,0.55) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border:1px solid var(--lg-glass-border-dim) !important;
  box-shadow:
    0 18px 40px rgba(4,10,20,0.38),
    0 2px 10px rgba(4,10,20,0.25),
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 1px rgba(8,145,166,0.10),
    0 0 22px 2px var(--lg-glow-teal-soft) !important;
  animation: lgNavGlowPulse 5s ease-in-out infinite;
}
@keyframes lgNavGlowPulse{
  0%,100%{ box-shadow:0 18px 40px rgba(4,10,20,0.38), 0 2px 10px rgba(4,10,20,0.25), inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px rgba(8,145,166,0.10), 0 0 20px 1px var(--lg-glow-teal-soft); }
  50%{ box-shadow:0 18px 44px rgba(4,10,20,0.4), 0 2px 12px rgba(4,10,20,0.27), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px rgba(8,145,166,0.18), 0 0 30px 4px var(--lg-glow-teal); }
}
.gnav::before{
  /* Moving specular sheen — the "liquid" light streak sliding across the glass */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.22) 34%, rgba(255,255,255,0.02) 48%, transparent 60%);
  background-size:260% 100%;
  animation: lgSheenSweep 6s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes lgSheenSweep{
  0%{ background-position:120% 0; }
  50%{ background-position:-20% 0; }
  100%{ background-position:120% 0; }
}
.gnav-logo img{ filter:drop-shadow(0 0 6px rgba(8,145,166,0.5)); }
.gnav-logo span{ text-shadow:0 0 12px rgba(8,145,166,0.6); }

.gnav-menubtn{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05)) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 0 14px rgba(8,145,166,0.30) !important;
}
.gnav-menubtn:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 20px rgba(8,145,166,0.5) !important; }
.gnav-menubtn.open{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 24px rgba(8,145,166,0.65) !important; }

.gnav-pool-scrim{ backdrop-filter:blur(10px) saturate(140%) !important; -webkit-backdrop-filter:blur(10px) saturate(140%) !important; }

.gnav-pool-panel{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.14) 45%),
    rgba(255,255,255,0.72) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border:1px solid rgba(255,255,255,0.5) !important;
  border-top:none !important;
  box-shadow:
    0 40px 80px rgba(2,20,28,0.30),
    0 14px 30px rgba(2,20,28,0.16),
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 0 30px rgba(8,145,166,0.18) !important;
  /* Full-screen takeover instead of a narrow centred card — the 520px cap
     left large dead space on wider/desktop screens. */
  max-width:none !important;
  width:100% !important;
  border-radius:0 !important;
}
.gnav-pool-stage.open .gnav-pool-panel{ max-height:100vh !important; }
@media (min-width:640px){
  /* Comfortable reading width on very wide screens, but still a true
     full-height takeover, not a small floating box. */
  .gnav-pool-panel{ max-width:900px !important; margin:0 auto !important; }
  #gnavPoolList{ grid-template-columns:repeat(4,1fr) !important; }
}

/* .gnav-row's deep glass/glow treatment lives entirely in "THE MENU" section
   below, since it now doubles as both a full brand tile and a small chip. */

/* ============ Home page (index.php) tiles & sheets ============ */
.brandtile, .grouplink{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)) !important;
  backdrop-filter: var(--lg-blur-lite) !important;
  -webkit-backdrop-filter: var(--lg-blur-lite) !important;
  border:1px solid rgba(255,255,255,0.6) !important;
}
.brandtile.available:hover{
  box-shadow:0 10px 26px rgba(8,145,166,0.18), 0 3px 10px rgba(16,24,38,0.08), 0 0 22px rgba(8,145,166,0.35) !important;
}
.brandtile.premium{
  box-shadow:0 0 18px rgba(190,138,68,0.18) !important;
}
.sheet{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.6), rgba(255,255,255,0.18) 50%),
    rgba(255,255,255,0.85) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border:1px solid rgba(255,255,255,0.55) !important;
  border-bottom:none !important;
  box-shadow:0 -12px 40px rgba(16,24,38,0.18), 0 0 30px rgba(8,145,166,0.14), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.overlay{ backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; }

/* ============ Search-tool pages (Kohler / Jaquar / Essco / etc.) ============ */
header.topbar{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.10) 60%),
    rgba(243,245,248,0.72) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom:1px solid rgba(255,255,255,0.4) !important;
}
header.topbar.scrolled{
  box-shadow:0 4px 22px rgba(16,24,38,0.08), 0 0 20px rgba(8,145,166,0.10) !important;
}
.brandstrip{
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 0 24px rgba(8,145,166,0.28) !important;
}
.brandstrip::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.14) 45%, transparent 60%);
  background-size:220% 100%;
  animation: lgSheenSweep 7s ease-in-out infinite;
  mix-blend-mode:screen;
}
.card{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.5), rgba(255,255,255,0.14) 55%),
    rgba(255,255,255,0.7) !important;
  backdrop-filter: var(--lg-blur-lite) !important;
  -webkit-backdrop-filter: var(--lg-blur-lite) !important;
  border:1px solid rgba(255,255,255,0.5) !important;
  box-shadow:0 8px 24px rgba(16,24,38,0.08), 0 0 18px rgba(8,145,166,0.10) !important;
}

/* ============ Universal form + table glass (broad, low-cost) ============ */
button, .sheet-cancel, input[type="button"], input[type="submit"]{
  transition: box-shadow .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
button:not(.gnav-menubtn):not(.gnav-pool-close):not(.gnav-search-clear):hover{
  box-shadow:0 0 14px rgba(8,145,166,0.28);
}
input[type="text"], input[type="search"], input[type="number"], select, textarea{
  background:rgba(255,255,255,0.55) !important;
  backdrop-filter: var(--lg-blur-lite);
  -webkit-backdrop-filter: var(--lg-blur-lite);
  transition: box-shadow .2s ease, border-color .2s ease;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 3px rgba(8,145,166,0.18), 0 0 16px rgba(8,145,166,0.30) !important;
  outline:none;
}
table thead th, thead th{
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2)) !important;
  backdrop-filter: var(--lg-blur-lite);
  -webkit-backdrop-filter: var(--lg-blur-lite);
}

/* Fine, subtle grain-free glow ring available for any element authors want
   to opt into by hand later, e.g. class="lg-glow" */
.lg-glow{
  box-shadow:0 0 0 1px rgba(8,145,166,0.25), 0 0 20px rgba(8,145,166,0.35) !important;
}

/* ==========================================================================
   Every heading / label glows — a soft resting halo that breathes gently,
   brightening further on hover/focus so the whole page reads as "alive".
   Kept low-opacity on dense body/data text so numbers stay legible; the
   strongest glow is reserved for headings and anything clickable.
   ========================================================================== */
h1, h2, h3, h4, .sheet-title, .gnav-sheet-title, .bt-name, .gl-name,
.brands-heading, .hero-name, .sheet-wave-label{
  text-shadow:0 0 1px rgba(8,145,166,0.15), 0 0 14px rgba(8,145,166,0.22);
  animation: lgTextBreathe 5s ease-in-out infinite;
}
b, strong, .sub b, .bt-status, .badge, .gnav-tag, .gnav-new-pill, .gnav-plus-pill,
.premium-divider-badge, .gl-status{
  text-shadow:0 0 10px currentColor;
  filter: drop-shadow(0 0 4px rgba(8,145,166,0.18));
}
@keyframes lgTextBreathe{
  0%,100%{ text-shadow:0 0 1px rgba(8,145,166,0.14), 0 0 12px rgba(8,145,166,0.18); }
  50%{ text-shadow:0 0 2px rgba(8,145,166,0.22), 0 0 20px rgba(8,145,166,0.32); }
}

/* ==========================================================================
   Every interactive element gets tactile glow: rest-state halo, brighter
   hover, brightest focus/active, plus a gentle lift. Applies globally via
   tag + role selectors so it reaches content generated by each brand's own
   JS without needing brand-specific classes.
   ========================================================================== */
a, button, input[type="button"], input[type="submit"], input[type="reset"],
select, .brandtile, .grouplink, .gnav-row, [role="button"], [tabindex]:not([tabindex="-1"]){
  transition: box-shadow .22s ease, text-shadow .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1), filter .22s ease;
}
a:not(.gnav-row):not(.grouplink):not(.brandtile){
  text-shadow:0 0 0 transparent;
}
a:not(.gnav-row):not(.grouplink):not(.brandtile):hover,
a:not(.gnav-row):not(.grouplink):not(.brandtile):focus-visible{
  text-shadow:0 0 12px rgba(8,145,166,0.55);
  filter: drop-shadow(0 0 6px rgba(8,145,166,0.35));
}
button, input[type="button"], input[type="submit"], input[type="reset"]{
  box-shadow:0 0 0 rgba(8,145,166,0);
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible{
  box-shadow:0 0 0 1px rgba(8,145,166,0.3), 0 0 18px rgba(8,145,166,0.4);
  transform:translateY(-1px);
}
button:active, input[type="button"]:active, input[type="submit"]:active{
  box-shadow:0 0 0 1px rgba(8,145,166,0.4), 0 0 10px rgba(8,145,166,0.5);
  transform:translateY(0) scale(.98);
}
:is(a, button, [role="button"], .brandtile, .grouplink, .gnav-row, input, select, summary):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(8,145,166,0.22), 0 0 18px rgba(8,145,166,0.45) !important;
}
:is(a, button, [role="button"], .brandtile, .grouplink, .gnav-row, summary){
  cursor:pointer;
}

/* Table rows / list rows that carry a click handler commonly get cursor:pointer
   inline from each brand's own JS — give those a hover glow too without
   needing to know the exact class each page used. */
tr[onclick], li[onclick], div[onclick], [data-href]{
  transition: box-shadow .2s ease, background .2s ease;
}
tr[onclick]:hover, li[onclick]:hover, div[onclick]:hover, [data-href]:hover{
  box-shadow:inset 0 0 0 1px rgba(8,145,166,0.22), 0 0 14px rgba(8,145,166,0.20);
}

@media (prefers-reduced-motion: reduce){
  .gnav, .gnav::before, .brandstrip::after, h1, h2, h3, h4,
  .sheet-title, .gnav-sheet-title, .bt-name, .gl-name,
  .brands-heading, .hero-name, .sheet-wave-label{ animation:none !important; }
}

/* ==========================================================================
   THE MENU — "Liquid Glass Light Board"
   Not a dropdown list anymore: a lit grid of brand blocks, each one its own
   pane of colour-tinted glass with drifting light particles and a logo that
   quietly switches on/off like neon signage. Structure/layout comes from
   nav-links.js (#gnavPoolList grid, .gnav-tile / .gnav-group--wide / .gnav-chip
   markup); everything below is the deep glass + light layer on top of it.
   Runs on every page that shares the .gnav markup, i.e. all of them.
   ========================================================================== */

/* ---- Logo: slow-blinking status beacon ---- */
.gnav-logo{ position:relative; }
.gnav-logo::after{
  content:''; position:absolute; top:2px; right:-8px; width:6px; height:6px;
  border-radius:50%; background:#3DDBD9;
  box-shadow:0 0 6px #3DDBD9, 0 0 14px rgba(61,219,217,0.7);
  animation: lgBeaconBlink 3.4s ease-in-out infinite;
}
@keyframes lgBeaconBlink{
  0%, 82%, 100%{ opacity:1; transform:scale(1); }
  88%{ opacity:.15; transform:scale(.7); }
  94%{ opacity:1; transform:scale(1.15); }
}

/* ---- Menu button: power LED that switches on when the deck opens ---- */
.gnav-menubtn{ position:relative; }
.gnav-menubtn::after{
  content:''; position:absolute; top:6px; right:7px; width:5px; height:5px; border-radius:50%;
  background:#8A97A6; box-shadow:none; transition: background .25s ease, box-shadow .25s ease;
}
.gnav-menubtn.open::after{
  background:#3DDBD9; box-shadow:0 0 6px #3DDBD9, 0 0 16px rgba(61,219,217,0.85);
  animation: lgBeaconBlink 2.2s ease-in-out infinite;
}

/* ---- Panel shell: deep glass, no more full-panel white flash (that was
   the washed-out bug) — just a soft one-shot glow pulse at the edges. ---- */
.gnav-pool-panel{ position:relative; }
.gnav-pool-stage.open .gnav-pool-panel{
  animation: lgPanelPowerOn .5s ease-out 1;
}
@keyframes lgPanelPowerOn{
  0%{ box-shadow:0 40px 80px rgba(2,20,28,0.30), 0 14px 30px rgba(2,20,28,0.16), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 rgba(8,145,166,0); }
  40%{ box-shadow:0 40px 80px rgba(2,20,28,0.30), 0 14px 30px rgba(2,20,28,0.16), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 46px 6px rgba(8,145,166,0.35); }
  100%{ box-shadow:0 40px 80px rgba(2,20,28,0.30), 0 14px 30px rgba(2,20,28,0.16), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 30px rgba(8,145,166,0.18); }
}
.gnav-sheet-head, .gnav-search-wrap, .gnav-pool-list{ position:relative; z-index:1; }

/* ---- Search bar: a thin scanner light sweeps under it while focused ---- */
.gnav-search-wrap{ position:relative; overflow:hidden; }
.gnav-search-wrap::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, #3DDBD9, transparent);
  background-size:50% 100%; background-position:-50% 0; background-repeat:no-repeat;
  opacity:0; transition:opacity .2s ease;
}
.gnav-search-wrap:focus-within::after{
  opacity:1; animation: lgScanX 1.6s linear infinite;
}
@keyframes lgScanX{ 0%{ background-position:-50% 0; } 100%{ background-position:150% 0; } }
.gnav-pool-close{ position:relative; }
.gnav-pool-close:hover, .gnav-pool-close:focus-visible{
  box-shadow:0 0 0 8px rgba(8,145,166,0.10), 0 0 14px rgba(8,145,166,0.35);
  border-radius:50%;
}

/* ---- Brand light-blocks (.gnav-tile) — colour-tinted glass per brand ---- */
.gnav-tile{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08) 55%),
    var(--tile-c-soft, rgba(8,145,166,0.12)) !important;
  backdrop-filter: var(--lg-blur-lite) !important;
  -webkit-backdrop-filter: var(--lg-blur-lite) !important;
  border:1px solid rgba(255,255,255,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 6px 16px rgba(16,24,38,0.08),
    0 0 0 1px var(--tile-c-16, rgba(8,145,166,0.16)),
    0 0 16px var(--tile-c-30, rgba(8,145,166,0.30)) !important;
  transition: box-shadow .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.gnav-tile:hover, .gnav-tile:active{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 10px 22px rgba(16,24,38,0.12),
    0 0 0 1.5px var(--tile-c-45, rgba(8,145,166,0.45)),
    0 0 26px var(--tile-c-45, rgba(8,145,166,0.45)) !important;
}
.gnav-tile.active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 10px 24px rgba(16,24,38,0.14),
    0 0 0 2px var(--tile-c-60, rgba(8,145,166,0.60)),
    0 0 30px var(--tile-c-60, rgba(8,145,166,0.60)) !important;
}
/* Coming-soon tiles: same glass shell, dialled back — no lift on tap/hover,
   softer glow, slightly muted colour so they read as "not yet" rather than
   broken or ordinary-clickable. */
.gnav-tile--soon{
  filter: saturate(.55) brightness(.98);
}
.gnav-tile--soon:hover, .gnav-tile--soon:active{
  transform:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 6px 16px rgba(16,24,38,0.08),
    0 0 0 1px var(--tile-c-16, rgba(8,145,166,0.16)),
    0 0 16px var(--tile-c-30, rgba(8,145,166,0.30)) !important;
}
.gnav-tile--soon .gnav-tile-name{ color:var(--steel-light, #64748B); }
.gnav-tile--soon .gnav-tile-glow{ animation-duration:6s; opacity:.6; }
.gnav-tile--soon .gnav-spark{ opacity:.5; }

/* Belt-and-suspenders: guarantee the chip row is always visible/flex no
   matter what other stylesheet (cached or otherwise) might be in play. */
.gnav-group-body{ display:flex !important; flex-wrap:wrap !important; visibility:visible !important; opacity:1 !important; }

.gnav-tile-glow{
  background:radial-gradient(90px 70px at 20% 15%, var(--tile-c-45, rgba(8,145,166,0.45)), transparent 70%);
  animation: lgTileGlowPulse 3.6s ease-in-out infinite;
}
@keyframes lgTileGlowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ---- Floating light particles — "wave of lights" drifting inside each block ---- */
.gnav-spark{
  background:var(--tile-c, #3DDBD9);
  box-shadow:0 0 6px 1px var(--tile-c, #3DDBD9);
  opacity:0;
  animation-name: lgSparkFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes lgSparkFloat{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  18%{ opacity:.9; }
  55%{ transform:translateY(-46px) scale(1); opacity:.7; }
  85%{ opacity:0; }
  100%{ transform:translateY(-64px) scale(.5); opacity:0; }
}
.gnav-chip .gnav-chip-dot{ box-shadow:0 0 5px 1px var(--chip-c, #0891A6); }
.gnav-chip .gnav-chip-logo{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 0 6px var(--chip-c-45, rgba(8,145,166,0.45)); }

/* ---- Logo badges: on/off neon flicker, staggered so the grid never syncs ---- */
.gnav-tile-logo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px var(--tile-c-45, rgba(8,145,166,0.45));
  animation: lgLogoFlicker 6s ease-in-out infinite;
  animation-delay: var(--gr-delay, 0s);
}
.gnav-tile-logo--img{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 0 10px rgba(8,145,166,0.25); }
@keyframes lgLogoFlicker{
  0%, 46%, 100%{ opacity:1; filter:none; }
  48%{ opacity:.25; }
  50%{ opacity:1; }
  52%{ opacity:.35; }
  54%{ opacity:1; filter:none; }
}

/* ---- Entrance: the whole grid powers up block by block when opened ----
   Deliberately never sets opacity below 1 — only transform/filter — so
   worst case (animation doesn't fire, delay math goes wrong, a stray
   cached stylesheet interferes) the block is still fully visible and
   clickable by default instead of stuck invisible. */
.gnav-tile, .gnav-group--wide, .gnav-chip{ opacity:1; }
.gnav-pool-stage.open .gnav-tile,
.gnav-pool-stage.open .gnav-group--wide{
  animation: lgTileSwitchOn .5s cubic-bezier(.2,.85,.3,1.15) both;
  animation-delay: var(--gr-delay, 0s);
}
@keyframes lgTileSwitchOn{
  0%{ transform:translateY(10px) scale(.94); filter:brightness(1.7) saturate(1.35); }
  60%{ transform:translateY(-1px) scale(1.02); }
  100%{ transform:translateY(0) scale(1); filter:none; }
}
.gnav-pool-stage.open .gnav-chip{
  animation: lgChipSwitchOn .4s ease both;
  animation-delay: var(--gr-delay, 0s);
}
@keyframes lgChipSwitchOn{
  0%{ transform:translateX(-4px) scale(.92); filter:brightness(1.5); }
  100%{ transform:translateX(0) scale(1); filter:none; }
}

/* ---- Group blocks: same glass treatment, wide format ---- */
.gnav-group--wide{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.45), rgba(255,255,255,0.06) 55%),
    var(--tile-c-soft, rgba(71,85,105,0.10)) !important;
  backdrop-filter: var(--lg-blur-lite) !important;
  -webkit-backdrop-filter: var(--lg-blur-lite) !important;
  border:1px solid rgba(255,255,255,0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 16px rgba(16,24,38,0.08),
    0 0 16px var(--tile-c-30, rgba(71,85,105,0.30)) !important;
}
.gnav-group--wide.has-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 8px 20px rgba(16,24,38,0.10),
    0 0 24px var(--tile-c-45, rgba(71,85,105,0.45)) !important;
}
.gnav-chip{
  background:rgba(255,255,255,0.55) !important;
  border:1px solid var(--chip-c-30, rgba(8,145,166,0.30)) !important;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.gnav-chip:hover, .gnav-chip:active{
  background:rgba(255,255,255,0.8) !important;
  box-shadow:0 0 12px var(--chip-c-45, rgba(8,145,166,0.45));
  transform:translateY(-1px);
}
.gnav-chip.active{
  box-shadow:0 0 14px var(--chip-c-60, rgba(8,145,166,0.60));
  border-color:var(--chip-c-60, rgba(8,145,166,0.60)) !important;
}

/* "Here" tag dot blinks like a live indicator */
.gnav-tag::before{ animation: lgBeaconBlink 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .gnav-logo::after, .gnav-menubtn.open::after, .gnav-pool-panel,
  .gnav-tile-glow, .gnav-spark, .gnav-tile-logo, .gnav-search-wrap::after,
  .gnav-tile, .gnav-group--wide, .gnav-chip, .gnav-tag::before{ animation:none !important; }
}