/* =====================================================================
   Bespoke Glass Kit — glass.css (the kit version is in VERSION)
   Load brand.css first, then this file, then glass.js (optional but
   recommended: the adaptive engine, mega menu, drawer, page transitions,
   one-colour branding and weather).
   Load order: brand.css → glass.css → add-on CSS → your own CSS; then
   glass.js → add-on scripts, all with defer.

   Every class starts with "gl-" so nothing here touches your existing
   site until you add a class. Nothing styles bare tags like nav or body
   except inside .gl-page.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Derived tokens (don't edit — change brand.css instead)
   --------------------------------------------------------------------- */
:root {
  --gl-fill-0: rgba(255, 255, 255, 0.000);
  --gl-fill-1: rgba(255, 255, 255, 0.022);   /* deep panels            */
  --gl-fill-2: rgba(255, 255, 255, 0.052);   /* standard panels        */
  --gl-fill-3: rgba(255, 255, 255, 0.090);   /* raised / hover         */
  --gl-fill-4: rgba(255, 255, 255, 0.130);   /* toasts / pressed       */

  --gl-edge-0: rgba(var(--gl-text), 0.08);
  --gl-edge-1: rgba(var(--gl-text), 0.15);
  --gl-edge-2: rgba(var(--gl-text), 0.26);
  --gl-edge-top: rgba(var(--gl-text), 0.24);    /* light catches the top  */
  --gl-edge-bottom: rgba(0, 0, 0, 0.18);     /* and falls off below    */

  --gl-t0: rgba(var(--gl-text), 0.96);
  --gl-t1: rgba(var(--gl-text), 0.80);
  --gl-t2: rgba(var(--gl-text), 0.65);
  --gl-t3: rgba(var(--gl-text), 0.45);

  --gl-sx: 50%;   /* mouse-light position, moved by glass.js */
  --gl-sy: 18%;

  --gl-header-h: 60px;
  --gl-z-header: 1000;
  --gl-z-mega: 1001;
  --gl-z-drawer: 1100;
  --gl-z-splash: 1200;

  --gl-material: blur(var(--gl-blur)) saturate(var(--gl-saturate)) brightness(var(--gl-brightness));
  --gl-material-deep: blur(var(--gl-blur-deep)) saturate(190%) brightness(1.06);
  --gl-rainbow: linear-gradient(120deg, rgb(var(--gl-brand)), rgb(var(--gl-accent)), rgb(var(--gl-brand-2)), rgb(var(--gl-brand-3)), rgb(var(--gl-brand)));
}

/* Every kit piece sizes its padding and border inside its width/height,
   whatever the rest of your site uses. */
.gl, .gl::before, .gl::after,
[class^="gl-"], [class^="gl-"]::before, [class^="gl-"]::after,
[class*=" gl-"], [class*=" gl-"]::before, [class*=" gl-"]::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   1. Page + sky  —  <body class="gl-page"> and <div class="gl-sky"></div>
   A fixed nebula sky with a star field. Glass needs something behind it
   to look like glass: this is that something.
   --------------------------------------------------------------------- */
.gl-page {
  margin: 0;
  background: var(--gl-sky-base);
  color: var(--gl-t0);
  font-family: var(--gl-font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.gl-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 150% 100% at 20% 10%, rgba(var(--gl-sky-glow-1), calc(0.40 * var(--gl-sky-strength, 1))) 0%, transparent 60%),
    radial-gradient(ellipse 140% 95% at 82% 22%, rgba(var(--gl-sky-glow-2), calc(0.26 * var(--gl-sky-strength, 1))) 0%, transparent 62%),
    radial-gradient(ellipse 160% 110% at 50% 80%, rgba(var(--gl-sky-glow-2), calc(0.20 * var(--gl-sky-strength, 1))) 0%, transparent 60%),
    radial-gradient(ellipse 130% 90% at 10% 96%, rgba(var(--gl-sky-glow-3), calc(0.18 * var(--gl-sky-strength, 1))) 0%, transparent 60%),
    var(--gl-sky-base);
}
.gl-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: calc(0.55 * var(--gl-stars));
  background-image:
    radial-gradient(1px 1px at 15% 30%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 88% 60%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(255, 255, 255, 0.50), transparent),
    radial-gradient(1px 1px at 8% 55%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 93% 88%, rgba(255, 255, 255, 0.50), transparent);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.gl-sky--twinkle::after { animation: gl-twinkle 7s ease-in-out infinite; }
@keyframes gl-twinkle { 0%, 100% { opacity: calc(0.35 * var(--gl-stars)); } 50% { opacity: calc(0.7 * var(--gl-stars)); } }

/* ---------------------------------------------------------------------
   2. Glass materials
   .gl          Glass: light frost (cards, menus, headers)
   .gl-deep     Deep Glass: heavier frost, added to .gl ("gl gl-deep")
                (the one moment that matters: hero, checkout, sign-up)
   .gl-feature  gradient edge + slow light sweep (one featured card; old name .gl-galaxy)
   .gl-atmos    Atmospheric Glass, the top tier (section 14)
   .gl-capsule  pills, tags, small buttons
   Put content inside .gl-c (or any child) — it sits above the effects.
   --------------------------------------------------------------------- */
.gl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gl-fill-2);
  -webkit-backdrop-filter: var(--gl-material);
  backdrop-filter: var(--gl-material);
  border: 1px solid var(--gl-edge-1);
  border-top-color: var(--gl-edge-top);
  border-bottom-color: var(--gl-edge-bottom);
  border-radius: var(--gl-radius);
  color: var(--gl-t0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.30) inset,
    0 12px 36px rgba(0, 0, 0, 0.40),
    0 0 24px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 0.8));
}
/* specular hotspot: follows the mouse when glass.js is loaded */
.gl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.8;
  /* the light follows the pointer across THIS pane (glass.js sets --gl-lx/--gl-ly per pane) */
  background: radial-gradient(ellipse 80% 55% at var(--gl-lx, var(--gl-sx)) calc(var(--gl-ly, 0%) * 0.3 - 14%), rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 1.8)) 0%, transparent 55%);
}
/* diagonal sheen across the pane */
.gl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(var(--gl-brand), 0.04) 25%,
    transparent 50%,
    rgba(var(--gl-brand), 0.025) 85%,
    rgba(255, 255, 255, 0.045) 100%);
}
.gl-deep {
  background: var(--gl-fill-1);
  border-color: var(--gl-edge-0);
  border-top-color: rgba(var(--gl-text), 0.32);
  -webkit-backdrop-filter: var(--gl-material-deep);
  backdrop-filter: var(--gl-material-deep);
  border-radius: var(--gl-radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.32) inset,
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 1.2));
}
.gl-hover { transition: transform 0.3s var(--gl-ease-spring), box-shadow 0.4s ease, background 0.4s ease, --gl-lx 160ms ease-out, --gl-ly 160ms ease-out; }
@media (hover: hover) {
  .gl-hover:hover {
    transform: translateY(-3px);
    background: var(--gl-fill-3);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.2) inset,
      0 22px 60px rgba(0, 0, 0, 0.55),
      0 0 44px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 2.2));
  }
}

/* Feature card (.gl-feature; old name .gl-galaxy still works): gradient border + a slow light sweep */
:is(.gl-galaxy, .gl-feature) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(22px) saturate(125%) brightness(1.04);
  backdrop-filter: blur(22px) saturate(125%) brightness(1.04);
  border-radius: calc(var(--gl-radius) + 4px);
  color: var(--gl-t0);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 30px rgba(var(--gl-brand), var(--gl-brand-seep));
  transition: transform 0.3s ease, box-shadow 0.4s ease, background 0.4s ease;
}
:is(.gl-galaxy, .gl-feature)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(var(--gl-brand), var(--gl-brand-edge)),
    rgba(var(--gl-brand-2), calc(var(--gl-brand-edge) * 0.5)) 40%,
    transparent 58%,
    rgba(var(--gl-brand-3), calc(var(--gl-brand-edge) * 0.75)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.8;
}
:is(.gl-galaxy, .gl-feature)::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -45%;
  width: 55%;
  height: 180%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: skewX(-18deg);
  animation: gl-sheen 8s ease-in-out infinite;
}
@keyframes gl-sheen {
  0%, 100% { left: -45%; opacity: 0; }
  45%, 55% { opacity: 0.7; }
  72% { left: 130%; opacity: 0; }
}
:is(.gl-galaxy, .gl-feature) > * { position: relative; z-index: 2; }
@media (hover: hover) {
  :is(.gl-galaxy, .gl-feature):hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      0 22px 60px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      inset 0 0 70px rgba(var(--gl-brand), 0.07),
      0 0 50px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 2.4));
  }
}

.gl-capsule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 0.6rem 1.2rem;
  background: var(--gl-fill-2);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--gl-edge-1);
  border-top-color: var(--gl-edge-top);
  border-bottom-color: var(--gl-edge-bottom);
  border-radius: 999px;
  color: var(--gl-t0);
  font: 500 14px/1.2 var(--gl-font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 14px rgba(0, 0, 0, 0.32),
    0 0 12px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 0.8));
  transition: transform 180ms var(--gl-ease-spring), box-shadow 180ms ease-out, background 180ms ease-out;
}
@media (hover: hover) {
  .gl-capsule:hover {
    transform: translateY(-1px);
    background: var(--gl-fill-3);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.16) inset,
      0 6px 18px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 1.5));
  }
}
.gl-capsule:active { transform: translateY(0) scale(0.98); }
.gl-capsule.is-active { position: relative; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%), rgba(var(--gl-brand), 0.14); border-color: transparent; }

/* ---------------------------------------------------------------------
   3. Type
   --------------------------------------------------------------------- */
.gl-display { font-family: var(--gl-font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.gl-glow { text-shadow: 0 1px 24px rgba(var(--gl-brand-2), 0.32); }
.gl-eyebrow { font: 800 12px/1 var(--gl-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--gl-accent)); }
.gl-muted { color: var(--gl-t2); }
/* Opal shimmer headline — silver that catches your brand colour as it moves */
.gl-text-opal {
  background: linear-gradient(90deg, #8a95a8 0%, #c8cdd8 22%, #edf2f7 42%, rgba(var(--gl-opal-tint, var(--gl-brand)), 0.9) 52%, #c8cdd8 72%, #8a95a8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gl-shimmer 6s ease infinite;
}
/* Flowing brand gradient text */
.gl-text-flow {
  background: var(--gl-rainbow);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gl-flow 8s linear infinite;
}
@keyframes gl-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes gl-flow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* ---------------------------------------------------------------------
   4. Buttons + inputs
   --------------------------------------------------------------------- */
.gl-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: 700 15px/1 var(--gl-font-body);
  letter-spacing: 0.01em;
  color: rgb(var(--gl-on-brand, 255, 255, 255));   /* glass.js picks white or near-black for your colour */
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(90deg, rgb(var(--gl-brand-2)), rgb(var(--gl-brand)));
  box-shadow: 0 8px 28px -8px rgba(var(--gl-brand), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 180ms var(--gl-ease-spring), box-shadow 180ms ease, filter 180ms ease;
}
@media (hover: hover) {
  .gl-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 34px -8px rgba(var(--gl-brand), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
.gl-btn:active { transform: scale(0.98); }
/* the flowing three-colour launcher look */
.gl-btn--flow {
  background: linear-gradient(90deg, rgb(var(--gl-brand-3)), rgb(var(--gl-brand-2)), rgb(var(--gl-brand)), rgb(var(--gl-brand-3)));
  background-size: 300% 100%;
  animation: gl-flow 6s linear infinite;
  text-shadow: 0 1px 3px rgba(0, 0, 0, var(--gl-on-brand-shadow, 0.35));
}
.gl-btn--glass {
  color: rgb(var(--gl-text));
  background: var(--gl-fill-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gl-edge-1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.gl-input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  font: 400 15px/1.2 var(--gl-font-body);
  color: var(--gl-t0);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gl-edge-1);
  border-radius: 14px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.gl-input::placeholder { color: var(--gl-t3); }
.gl-input:focus { border-color: rgba(var(--gl-brand), 0.6); box-shadow: 0 0 0 3px rgba(var(--gl-brand), 0.18); }

/* ---------------------------------------------------------------------
   5. Frosted header bar  —  <header class="gl-header">
   Links never disappear: they tighten step by step as the screen narrows.
   Add .is-active to the current link; .is-authed shows the glowing dot.
   glass.js adds .is-scrolled once the page scrolls (a touch more frost).
   --------------------------------------------------------------------- */
.gl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--gl-z-header);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--gl-header-h);
  padding: 10px clamp(14px, 3vw, 26px);
  background: rgba(8, 6, 18, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
  font-family: var(--gl-font-body);
  transition: background 240ms ease, box-shadow 240ms ease;
}
.gl-header.is-scrolled { background: rgba(8, 6, 18, 0.72); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.5); }
.gl-header__logo { display: inline-flex; align-items: center; flex: none; color: var(--gl-t0); text-decoration: none; font: 800 18px/1 var(--gl-font-display); letter-spacing: -0.01em; }
.gl-header__logo img, .gl-header__logo svg { height: 30px; width: auto; display: block; }
.gl-header__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 6px; }
.gl-header__nav a {
  position: relative;
  padding: 8px 13px;
  border-radius: 999px;   /* pill, so the hover and active shapes match a pill bar */
  color: var(--gl-t1);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.gl-header__nav a[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.07); }
@media (hover: hover) {
  .gl-header__nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
}
.gl-header__nav a.is-active { color: #fff; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%), rgba(var(--gl-brand), 0.12); }
.gl-header__nav a.is-active::before, .gl-capsule.is-active::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0.85;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.02) 65%, rgba(255, 255, 255, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gl-header__nav a.is-authed { color: rgb(var(--gl-accent)); text-shadow: 0 0 12px rgba(var(--gl-accent), 0.4); }
.gl-header__nav a.is-authed::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; vertical-align: middle; background: rgb(var(--gl-accent)); box-shadow: 0 0 8px rgba(var(--gl-accent), 0.9); }
.gl-header__icons { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* An icon (an icon-only link or button carries an aria-label, so screen readers can name it) is
   a 40px square, as it always was. A link or button with words and no aria-label ("Sign in")
   grows with its words instead of being squashed into the square; its padding is in :where(),
   so any class of the site's own wins over it. */
.gl-header__icons a, .gl-header__icons button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent;
  color: var(--gl-t1); cursor: pointer; position: relative;
  transition: color 0.18s ease, background 0.18s ease;
}
.gl-header__icons a:where([aria-label]), .gl-header__icons button:where([aria-label]) { width: 40px; }
:where(.gl-header__icons) :where(a, button):where(:not([aria-label])) { padding: 0 10px; white-space: nowrap; text-decoration: none; }
@media (hover: hover) {
  .gl-header__icons a:hover, .gl-header__icons button:hover { color: rgb(var(--gl-accent)); background: rgba(255, 255, 255, 0.07); }
}
.gl-header__icons svg { width: 20px; height: 20px; }
.gl-badge {
  position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font: 800 10px/16px var(--gl-font-body); text-align: center; color: #fff;
  background: rgb(var(--gl-brand)); box-shadow: 0 0 10px rgba(var(--gl-brand), 0.7);
}
.gl-badge:empty { display: none; }   /* an empty badge (count 0) hides itself */
.gl-below-header { padding-top: var(--gl-header-h); }
@media (max-width: 960px) { .gl-header { gap: 10px; } .gl-header__nav a { font-size: 12.5px; padding: 7px 10px; } }
@media (max-width: 820px) { .gl-header { gap: 8px; } .gl-header__nav { gap: 2px; margin-left: 4px; } .gl-header__nav a { font-size: 12px; padding: 6px 8px; } }
@media (max-width: 600px) {
  :root { --gl-header-h: 52px; }
  .gl-header { gap: 6px; padding: 8px 12px; }
  .gl-header__logo img, .gl-header__logo svg { height: 25px; }
  .gl-header__nav { gap: 0; margin-left: 2px; }
  .gl-header__nav a { font-size: 12px; padding: 7px 7px; }
  .gl-header__icons a, .gl-header__icons button { min-width: 36px; height: 36px; }
  .gl-header__icons a:where([aria-label]), .gl-header__icons button:where([aria-label]) { width: 36px; }
  :where(.gl-header__icons) :where(a, button):where(:not([aria-label])) { padding: 0 8px; }
}
@media (max-width: 430px) { .gl-header__nav a { font-size: 11.5px; padding: 7px 5px; } }
/* A text button in the header ("Book a table", "Get the app"): add .gl-header__cta to it,
   with .gl-btn for the filled look or .gl-btn .gl-btn--glass for a glass one. It's sized for
   the header (40px tall with a mouse, 44px on touch) and never squashed into an icon box. */
.gl-header__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-height: 40px; padding: 0 16px; border-radius: 999px; white-space: nowrap; font: 700 14px/1 var(--gl-font-body); text-decoration: none; }
.gl-header__cta:not(.gl-btn) { color: var(--gl-t0); background: var(--gl-fill-2); border: 1px solid var(--gl-edge-1); }
.gl-header__icons .gl-header__cta { width: auto; height: auto; }
/* Touch screens: everything you can press in the header is at least 44×44px to tap: the
   name or logo, every link however short ("FAQ"), text buttons and icons. Link text never
   drops below 13px. When the links no longer fit on one row at that size, don't shrink them:
     · a website: a menu button that opens a glass drawer with the links (.gl-hide-mobile on
       the nav, .gl-show-mobile on the menu button; recipes.md, "Phone menu");
     · an app-like site (a few screens people switch between all the time): the phone tab bar.
   Hiding a link that repeats another one (a "Home" link next to a logo that already goes
   home) is fine too. */
@media (pointer: coarse) {
  /* border-box, so the padding counts inside the 44px (without it a site with no global
     box-sizing reset got 58px-tall links, and the header wrapped to two rows) */
  .gl-header__logo, .gl-header__nav a, .gl-header__icons a, .gl-header__icons button, .gl-header__cta, .gl-header > a, .gl-header > button { box-sizing: border-box; }
  .gl-header__logo { min-height: 44px; min-width: 44px; }
  .gl-header__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* icons (with an aria-label) are 44px squares; a link or button with words in __icons ("Get the
     app") keeps its words, at least 44×44px, with 12px of padding each side */
  .gl-header__icons a, .gl-header__icons button { min-width: 44px; min-height: 44px; }
  .gl-header__icons a:where([aria-label]), .gl-header__icons button:where([aria-label]) { width: 44px; height: 44px; }
  .gl-header__icons a:where(:not([aria-label])), .gl-header__icons button:where(:not([aria-label])) { height: auto; }
  :where(.gl-header__icons) :where(a, button):where(:not([aria-label], .gl-header__cta)) { padding: 0 12px; }
  .gl-header__cta, .gl-header__icons .gl-header__cta { min-height: 44px; }
  .gl-header > a, .gl-header > button { min-height: 44px; min-width: 44px; }   /* a site's own header link or button (flex items, so the size applies) */
}
@media (pointer: coarse) and (max-width: 600px) {
  :root { --gl-header-h: 56px; }
  .gl-header { padding-block: 6px; }
  .gl-header__nav a { font-size: 13px; padding-inline: 8px; }
  .gl-header__cta { padding: 0 12px; }
}
@media (pointer: coarse) and (max-width: 430px) { .gl-header__nav a { font-size: 13px; padding-inline: 6px; } }
/* Phones: hide the header links (.gl-hide-mobile) when a menu button (.gl-show-mobile) or
   the glass tab bar takes over navigation, so the header stays one clean row. */
@media (max-width: 767px) { .gl-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .gl-show-mobile { display: none !important; } }

/* ---------------------------------------------------------------------
   6. Floating glass tab bar (phones)  —  <nav class="gl-tabbar">
   Shows under 768px wide by default; add .gl-tabbar--always to keep it.
   Mark the current tab with aria-current="page".
   --------------------------------------------------------------------- */
.gl-tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: var(--gl-z-header);
  display: none;
  align-items: center;
  justify-content: space-around;
  padding: 6px;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(1.07);
  backdrop-filter: blur(36px) saturate(180%) brightness(1.07);
  border: 1px solid transparent;   /* the visible edge is the feathered ::after rim below */
  border-radius: 999px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.50),
    0 0 28px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 1.8));
}
.gl-tabbar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(var(--gl-brand), 0.22) 0%, transparent 60%);
}
.gl-tabbar a, .gl-tabbar button {
  position: relative;
  flex: 1;
  max-width: 80px;
  min-height: 50px;
  margin: 0 2px;
  padding: 4px 2px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 999px;   /* concentric with the bar: bar radius 999 minus 6px padding is still a full pill */
  background: transparent;
  color: var(--gl-t2);
  font: 600 12px/1 var(--gl-font-body);   /* 12px: the smallest text size every checker allows */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.gl-tabbar svg { width: 22px; height: 22px; }
.gl-tabbar [aria-current="page"], .gl-tabbar .is-active {
  color: #fff;
  /* a soft lit pill: brightest at the top centre, fading to nothing at the ends, like the bar around it */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%),
    rgba(var(--gl-brand), 0.12);
  box-shadow: 0 0 18px rgba(var(--gl-brand), 0.20), 0 6px 14px rgba(0, 0, 0, 0.18);
}
/* Feathered rim: bright where light lands (top), fading out toward the sides and bottom.
   Same recipe on the bar (::after) and on the active pill (::before), so the two edges read as one family. */
.gl-tabbar::after,
.gl-tabbar [aria-current="page"]::before, .gl-tabbar .is-active::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10) 40%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gl-tabbar::after { opacity: 0.85; }
.gl-tabbar [aria-current="page"]::before, .gl-tabbar .is-active::before { opacity: 0.9; }
.gl-above-tabbar { padding-bottom: 0; }
@media (max-width: 767px) {
  .gl-tabbar { display: flex; }
  .gl-above-tabbar { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
.gl-tabbar--always { display: flex; }

/* ---------------------------------------------------------------------
   7. Mega menu (the picture menu), an optional extra, not the typical
   header: demo/mega-menu.html. See recipes.md. glass.js wires it to any link or
   button with data-gl-mega="<menu id>", on hover (desktop) and tap (touch).
   Tiles can hold an <img>, a muted <video>, or the built-in gradient art.
   --------------------------------------------------------------------- */
.gl-mega {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--gl-header-h) + 6px);
  z-index: var(--gl-z-mega);
  padding: 0 22px 22px;
  max-height: calc(100vh - var(--gl-header-h) - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.26s;
}
.gl-mega.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* The fade happens on the panel itself, never on .gl-mega: a fading parent
   stops the browser blurring what's behind the panel, so the frost would
   only snap on at the very end. */
.gl-mega .gl-mega__inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.gl-mega.is-open .gl-mega__inner { opacity: 1; transform: none; }
.gl-mega::-webkit-scrollbar { width: 10px; }
.gl-mega::-webkit-scrollbar-thumb { background: rgba(var(--gl-accent), 0.35); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.gl-mega__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  border-radius: var(--gl-radius-lg);
  background: linear-gradient(180deg, rgba(16, 10, 26, 0.70), rgba(8, 5, 16, 0.64));
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* soft colour clouds inside the panel */
.gl-mega__inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background:
    radial-gradient(620px 220px at 12% -20%, rgba(var(--gl-brand-2), 0.22), transparent 62%),
    radial-gradient(560px 220px at 100% 0%, rgba(var(--gl-accent), 0.16), transparent 58%),
    radial-gradient(520px 240px at 60% 120%, rgba(var(--gl-brand-3), 0.12), transparent 60%);
}
/* the travelling rainbow border */
.gl-mega__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.4px;
  background: var(--gl-rainbow);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: gl-flow 6s linear infinite;
}
.gl-mega__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 4px 14px; }
.gl-mega__all { font-size: 12px; color: var(--gl-t2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) {
  .gl-mega__all:hover { color: rgb(var(--gl-accent)); }
}
/* Columns follow the number of tiles (1, 2, 3, 4 across) so there's no lonely
   last tile. Force a count with style="--gl-mega-cols: 4" on .gl-mega__grid. */
.gl-mega__grid { --gl-mega-cols: 3; position: relative; display: grid; grid-template-columns: repeat(var(--gl-mega-cols), minmax(0, 1fr)); gap: 14px; }
@media (min-width: 901px) {
  .gl-mega__grid:has(> :only-child) { --gl-mega-cols: 1; }
  .gl-mega__grid:has(> :nth-child(2):last-child) { --gl-mega-cols: 2; }
  .gl-mega__grid:has(> :nth-child(4):last-child),
  .gl-mega__grid:has(> :nth-child(7):last-child),
  .gl-mega__grid:has(> :nth-child(8):last-child) { --gl-mega-cols: 4; }
  .gl-mega__inner:has(.gl-mega__grid > :nth-child(4)) { max-width: 1040px; }
}
.gl-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  background: #120c1c;
  box-shadow: inset 0 0 0 1px rgba(var(--gl-accent), 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gl-tile img, .gl-tile video, .gl-tile__art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
/* video melts into the tile instead of ending on a hard rectangle */
.gl-tile video {
  -webkit-mask-image: radial-gradient(130% 118% at 50% 42%, #000 0 62%, rgba(0, 0, 0, 0.86) 82%, rgba(0, 0, 0, 0.5) 100%);
  mask-image: radial-gradient(130% 118% at 50% 42%, #000 0 62%, rgba(0, 0, 0, 0.86) 82%, rgba(0, 0, 0, 0.5) 100%);
}
/* Built-in art for when you don't have photos yet. It's made only from your
   brand colours, rotated tile by tile so neighbours differ. To pick a tile's
   colours yourself: style="--gl-tile-a: 255, 61, 142; --gl-tile-b: 147, 51, 255" */
.gl-tile__art {
  --gl-tile-a: var(--gl-brand);
  --gl-tile-b: var(--gl-brand-2);
  --gl-tile-c: var(--gl-brand-3);
  background:
    radial-gradient(65% 85% at var(--gl-tile-x, 22%) 18%, rgba(var(--gl-tile-a), 0.95), transparent 62%),
    radial-gradient(75% 95% at calc(110% - var(--gl-tile-x, 22%)) 82%, rgba(var(--gl-tile-b), 0.85), transparent 62%),
    radial-gradient(55% 65% at 58% 42%, rgba(var(--gl-tile-c), 0.5), transparent 62%),
    linear-gradient(160deg, rgba(var(--gl-tile-b), 0.30), var(--gl-sky-base));
}
.gl-tile:nth-child(3n+2) .gl-tile__art { --gl-tile-a: var(--gl-brand-2); --gl-tile-b: var(--gl-brand-3); --gl-tile-c: var(--gl-brand); --gl-tile-x: 78%; }
.gl-tile:nth-child(3n) .gl-tile__art { --gl-tile-a: var(--gl-brand-3); --gl-tile-b: var(--gl-brand); --gl-tile-c: var(--gl-brand-2); --gl-tile-x: 40%; }
.gl-tile__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 4, 10, 0) 30%, rgba(6, 4, 10, 0.5) 64%, rgba(6, 4, 10, 0.9) 100%); }
.gl-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 14px 13px; }
.gl-tile__cap h4, .gl-tile__title { display: block; margin: 0; font: 800 14.5px/1.15 var(--gl-font-body); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }
.gl-tile__cap h4::after, .gl-tile__title::after {
  content: ""; display: block; width: 24px; height: 2px; margin-top: 7px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--gl-brand-3)), rgb(var(--gl-brand-2)), rgb(var(--gl-brand)));
  transition: width 0.28s ease;
}
.gl-tile__go { display: inline-block; margin-top: 6px; font: 700 11.5px/1 var(--gl-font-body); color: rgb(var(--gl-accent)); opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; }
@media (hover: hover) {
  .gl-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--gl-accent), 0.5); }
}
@media (hover: hover) {
  .gl-tile:hover img, .gl-tile:hover video, .gl-tile:hover .gl-tile__art { transform: scale(1.06); }
}
@media (hover: hover) {
  .gl-tile:hover .gl-tile__cap h4::after, .gl-tile:hover .gl-tile__title::after { width: 52px; }
}
@media (hover: hover) {
  .gl-tile:hover .gl-tile__go { opacity: 1; transform: translateX(3px); }
}
.gl-tile.is-soon { filter: grayscale(0.72) brightness(0.62); cursor: default; }
.gl-tile.is-soon .gl-tile__go { color: var(--gl-t2); }
@media (max-width: 900px) {
  .gl-mega__grid { --gl-mega-cols: 2; }
  /* an odd last tile spans the full row instead of sitting alone */
  .gl-mega__grid > .gl-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 32 / 10; }
}
@media (max-width: 560px) {
  .gl-mega { padding: 0 10px 12px; }
  .gl-mega__inner { padding: 14px 12px 16px; }
  .gl-mega__grid { gap: 11px; }
  .gl-tile { aspect-ratio: 16 / 11; }
  .gl-tile__cap { padding: 11px 11px 10px; }
  .gl-tile__cap h4, .gl-tile__title { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   8. Frosted drawer  —  <aside class="gl-drawer" id="cart"> (cart, menu,
   filters, settings). Open with data-gl-open="cart" or GlassKit.drawer.open("cart").
   --------------------------------------------------------------------- */
.gl-drawer { position: fixed; inset: 0; z-index: var(--gl-z-drawer); visibility: hidden; pointer-events: none; }
.gl-drawer.is-open { visibility: visible; pointer-events: auto; }
.gl-drawer__scrim {
  position: absolute; inset: 0; opacity: 0;
  background: rgba(4, 2, 10, 0.48);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity 0.3s ease;
}
.gl-drawer.is-open .gl-drawer__scrim { opacity: 1; }
.gl-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(var(--gl-brand-2), 0.10), rgba(11, 7, 22, 0.72));
  -webkit-backdrop-filter: blur(48px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(48px) saturate(190%) brightness(1.06);
  border-left: 1px solid var(--gl-edge-1);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.06);
  transform: translateX(104%);
  transition: transform 0.42s var(--gl-ease-spring);
  color: var(--gl-t0);
}
.gl-drawer--left .gl-drawer__panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--gl-edge-1); transform: translateX(-104%); }
.gl-drawer.is-open .gl-drawer__panel { transform: translateX(0); }
.gl-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--gl-edge-0); }
.gl-drawer__title { margin: 0; font: 800 18px/1.2 var(--gl-font-display); }
.gl-drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px; overscroll-behavior: contain; }
.gl-drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--gl-edge-0); }
/* The site's links in a drawer: the phone menu for websites (recipes.md, "Phone menu") */
.gl-drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.gl-drawer__nav a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px;
  color: var(--gl-t0); font: 600 16px/1.25 var(--gl-font-body); text-decoration: none; transition: background 0.18s ease; }
.gl-drawer__nav a:hover, .gl-drawer__nav a.is-active, .gl-drawer__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.07); }
.gl-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  color: var(--gl-t0); background: var(--gl-fill-2); border: 1px solid var(--gl-edge-1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .gl-close:hover { background: var(--gl-fill-3); transform: rotate(90deg); }
}
.gl-close svg { width: 16px; height: 16px; }
html.gl-lock, html.gl-lock body { overflow: hidden; }

/* ---------------------------------------------------------------------
   9. Progress + level  —  <div class="gl-progress"><i style="width:62%"></i></div>
   --------------------------------------------------------------------- */
.gl-progress { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.gl-progress > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(100deg, rgb(var(--gl-brand)), rgb(var(--gl-brand-2)) 40%, rgb(var(--gl-brand-3)) 70%, rgb(var(--gl-accent)));
  box-shadow: 0 0 12px rgba(var(--gl-brand), 0.5);
  transition: width 0.6s var(--gl-ease-spring);
}
.gl-level {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font: 800 12px/1.3 var(--gl-font-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: #14100a;   /* dark text: --gl-accent should be a bright colour */
  background: linear-gradient(96deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%), rgb(var(--gl-accent));
}
.gl-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font: 700 11px/1.3 var(--gl-font-body); color: var(--gl-t2);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
}
.gl-chip.is-on { color: rgb(var(--gl-brand-3)); border-color: rgba(var(--gl-brand-3), 0.4); background: rgba(var(--gl-brand-3), 0.10); }

/* ---------------------------------------------------------------------
   10. Loading  —  .gl-spinner (glowing ring) and .gl-splash (intro screen)
   The glow and the colour drift live in ONE animation. Two animations on
   the same property (filter) silently cancel each other: the last wins.
   --------------------------------------------------------------------- */
.gl-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgb(var(--gl-brand));
  border-right-color: rgb(var(--gl-brand-2));
  border-bottom-color: rgba(var(--gl-brand-3), 0.55);
  box-shadow: 0 0 22px rgba(var(--gl-brand), 0.35);
  animation: gl-spin 0.9s linear infinite, gl-spinner-glow 2.4s ease-in-out infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }
@keyframes gl-spinner-glow {
  /* glow pulses in YOUR colours; no hue shifting, so it never goes off-brand */
  0%, 100% { filter: brightness(0.92) saturate(1)    drop-shadow(0 0 4px rgba(var(--gl-brand), 0.35)); }
  50%      { filter: brightness(1.22) saturate(1.35) drop-shadow(0 0 10px rgba(var(--gl-brand-2), 0.6)); }
}
.gl-skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.10) 40%, rgba(255, 255, 255, 0.04) 80%);
  background-size: 200% 100%;
  animation: gl-shimmer 1.6s ease-in-out infinite;
}
.gl-splash {
  position: fixed; inset: 0; z-index: var(--gl-z-splash);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px;
  background: var(--gl-sky-base);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.gl-splash__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgb(var(--gl-brand));
  box-shadow: 0 0 40px 14px rgba(var(--gl-brand), 0.55), 0 0 90px 30px rgba(var(--gl-brand-2), 0.35);
  animation: gl-splash-dot 1.1s var(--gl-ease-spring) both;
}
.gl-splash__mark {
  font: 900 clamp(34px, 8vw, 72px)/1 var(--gl-font-display); letter-spacing: -0.03em;
  opacity: 0; filter: blur(12px); transform: scale(1.08);
  animation: gl-splash-mark 0.9s var(--gl-ease-spring) 0.55s forwards;
}
.gl-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes gl-splash-dot { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes gl-splash-mark { to { opacity: 1; filter: blur(0); transform: scale(1); } }

/* ---------------------------------------------------------------------
   Brand-following darks: the header, menu, tiles and drawer are tinted
   from your --gl-sky-base, so a green brand gets green-black glass, not
   purple-black. (Browsers from before 2023 keep the neutral values above.)
   --------------------------------------------------------------------- */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .gl-header { background: color-mix(in srgb, var(--gl-sky-base) 55%, transparent); }
  .gl-header.is-scrolled { background: color-mix(in srgb, var(--gl-sky-base) 72%, transparent); }
  .gl-mega__inner { background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--gl-sky-base) 93%, white) 70%, transparent), color-mix(in srgb, var(--gl-sky-base) 64%, transparent)); }
  .gl-tile { background: color-mix(in srgb, var(--gl-sky-base) 92%, white); }
  .gl-tile__veil { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--gl-sky-base) 50%, transparent) 64%, color-mix(in srgb, var(--gl-sky-base) 90%, transparent) 100%); }
  .gl-drawer__scrim { background: color-mix(in srgb, var(--gl-sky-base) 48%, transparent); }
  .gl-drawer__panel { background: linear-gradient(170deg, rgba(var(--gl-brand-2), 0.10), color-mix(in srgb, var(--gl-sky-base) 72%, transparent)); }
}

/* ---------------------------------------------------------------------
   11. Page transitions
   Multi-page sites (plain HTML, Shopify, WordPress, Webflow): modern
   browsers cross-fade between pages on their own with the rule below.
   Other browsers get a quick fade-out from glass.js.
   Single-page apps (React/Next/Vue): wrap the page in .gl-route and
   change its key on navigation (<PageTransition> in react/GlassKit.jsx).
   Keep fixed pieces (header, mega menu, drawer, tab bar) OUTSIDE .gl-route:
   its entrance animation moves them too while it runs.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: gl-page-out var(--gl-page-fade) ease both; }
::view-transition-new(root) { animation: gl-page-in calc(var(--gl-page-fade) * 1.4) var(--gl-ease-spring) both; }
.gl-header { view-transition-name: gl-header; }   /* the header stays put while the page changes */
.gl-route { animation: gl-page-in calc(var(--gl-page-fade) * 1.4) var(--gl-ease-spring) both; }
/* opacity only: moving <body> would drag the fixed header and tab bar along */
html.gl-fade-out body { animation: gl-page-out var(--gl-page-fade) ease both; }
@keyframes gl-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gl-page-out { to { opacity: 0; } }

/* ---------------------------------------------------------------------
   12. Fallbacks — the kit must still look right when glass can't render
   --------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gl, .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel, :is(.gl-galaxy, .gl-feature), .gl-btn--glass, .gl-close { background: rgba(14, 10, 24, 0.94); }
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .gl, .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel, :is(.gl-galaxy, .gl-feature), .gl-btn--glass, .gl-close { background: color-mix(in srgb, color-mix(in srgb, var(--gl-sky-base) 94%, white) 94%, transparent); }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .gl, .gl-deep, .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel, .gl-drawer__scrim, :is(.gl-galaxy, .gl-feature), .gl-btn--glass, .gl-close {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 10, 24, 0.96);
  }
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .gl, .gl-deep, .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel, .gl-drawer__scrim, :is(.gl-galaxy, .gl-feature), .gl-btn--glass, .gl-close { background: color-mix(in srgb, color-mix(in srgb, var(--gl-sky-base) 94%, white) 96%, transparent); }
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.gl-galaxy, .gl-feature)::after { animation: none; opacity: 0; }
  .gl-sky--twinkle::after { animation: none; }   /* stars stay, they just stop twinkling */
  .gl-text-opal, .gl-text-flow, .gl-btn--flow, .gl-mega__inner::after, .gl-skeleton { animation: none; }
  .gl-spinner { animation: gl-spin 1.6s linear infinite; }
  .gl-mega, .gl-mega .gl-mega__inner, .gl-drawer__panel, .gl-drawer__scrim, .gl-tile, .gl-tile img, .gl-tile video, .gl-hover, .gl-capsule, .gl-btn { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root), .gl-route, html.gl-fade-out body { animation: none; }
  .gl-splash__dot, .gl-splash__mark { animation: none; opacity: 1; filter: none; transform: none; }
}
@media (forced-colors: active) {
  .gl, .gl-deep, :is(.gl-galaxy, .gl-feature), .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel { border: 1px solid CanvasText; }
}
:where(.gl-header, .gl-tabbar, .gl-mega, .gl-drawer) :focus-visible {
  outline: 2px solid rgb(var(--gl-brand-3));
  outline-offset: 2px;
}

/* =====================================================================
   GLASS KIT — the material layer (v2)
   Everything below is driven by glass.js's adaptive engine:
     html[data-gl-tier="full|lite|flat"]  how much glass this device gets
     .gl-rest      a pane over the blur budget (renders like "lite")
     .gl-nested    glass inside glass (never blur twice)
     .gl-offscreen a pane you can't see (its animations pause)
     html.gl-still motion off (Reduce Motion, or simulated)
     html.gl-paused the tab is hidden (everything pauses)
   Without glass.js the materials still render at "full", and the
   @media fallbacks above still apply.
   ===================================================================== */

/* registered so the light glides instead of jumping */
@property --gl-lx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --gl-ly { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
:where(.gl, .gl-atmos, :is(.gl-galaxy, .gl-feature), .gl-feature) { transition: --gl-lx 160ms ease-out, --gl-ly 160ms ease-out; }

/* ---------------------------------------------------------------------
   13. Living sky — two slow ribbons drift behind everything.
   glass.js adds <i class="gl-sky__drift ..."> inside .gl-sky.
   Loops of different lengths (28s / 36s by default) so the pattern
   almost never repeats. Transform + opacity only (GPU-cheap).
   --------------------------------------------------------------------- */
.gl-sky { overflow: hidden; }
.gl-sky__drift {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  will-change: transform, opacity;
}
.gl-sky__drift::after { content: none; }
.gl-sky { --gl-sky-strength-d: var(--gl-sky-strength, 1); }
.gl-sky__drift--a {
  background:
    radial-gradient(ellipse 34% 26% at 36% 38%, rgba(var(--gl-sky-glow-1), calc(0.42 * var(--gl-sky-strength-d))) 0%, rgba(var(--gl-sky-glow-1), calc(0.10 * var(--gl-sky-strength-d))) 45%, transparent 72%),
    radial-gradient(ellipse 26% 20% at 66% 66%, rgba(var(--gl-sky-glow-3), calc(0.26 * var(--gl-sky-strength-d))) 0%, transparent 70%);
  animation: gl-drift-a var(--gl-drift-a, 28s) ease-in-out infinite;
}
.gl-sky__drift--b {
  background:
    radial-gradient(ellipse 30% 24% at 62% 30%, rgba(var(--gl-sky-glow-2), calc(0.34 * var(--gl-sky-strength-d))) 0%, rgba(var(--gl-sky-glow-2), calc(0.08 * var(--gl-sky-strength-d))) 45%, transparent 72%),
    radial-gradient(ellipse 22% 18% at 28% 72%, rgba(var(--gl-sky-glow-4, var(--gl-accent)), calc(0.12 * var(--gl-sky-strength-d))) 0%, transparent 70%);
  mix-blend-mode: screen;
  animation: gl-drift-b var(--gl-drift-b, 36s) ease-in-out infinite;
}
@keyframes gl-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  25% { transform: translate3d(8%, -4%, 0) scale(1.06); opacity: 1; }
  50% { transform: translate3d(12%, 6%, 0) scale(1.1); opacity: 0.7; }
  75% { transform: translate3d(4%, 10%, 0) scale(1.04); opacity: 0.9; }
}
@keyframes gl-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.7; }
  33% { transform: translate3d(-10%, 8%, 0) scale(1); opacity: 0.95; }
  66% { transform: translate3d(-6%, -8%, 0) scale(1.12); opacity: 0.55; }
}
/* crossfade layer used when the brand or look changes */
.gl-sky--leaving { z-index: -1; transition: opacity 700ms ease; }

/* ---------------------------------------------------------------------
   14. Atmospheric Glass — the top tier. A six-layer slab:
   sky shows through → gel body with grain → soft bloom → colour sweep
   bleeding in from two corners → two-point light → six-band edge.
   Use for ONE hero surface per view (two or three on a desktop).
     <div class="gl-atmos gl-atmos--sweep"><div class="gl-c">…</div></div>
   Shapes: add gl-atmos--tile (20px) / --sheet (28px) / --pill (32px).
   --------------------------------------------------------------------- */
.gl-atmos {
  --gl-atmos-blur: 22px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  color: var(--gl-t0);
  background-color: rgba(255, 255, 255, 0.02);
  background-image:
    linear-gradient(135deg, rgba(var(--gl-brand-2), 0.18) 0%, transparent 42%, transparent 58%, rgba(var(--gl-brand), 0.15) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' fill='white'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--gl-brand), 0.14) 0%, transparent 70%);
  background-size: 220% 220%, 160px 160px, auto;
  background-position: 0% 0%, 0 0, 0 0;
  background-blend-mode: screen, overlay, normal;
  -webkit-backdrop-filter: blur(var(--gl-atmos-blur)) saturate(180%) brightness(1.05);
  backdrop-filter: blur(var(--gl-atmos-blur)) saturate(180%) brightness(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(var(--gl-brand-2), 0.28),
    inset -1px 0 0 rgba(var(--gl-brand), 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32),
    inset 0 -22px 28px -22px rgba(0, 0, 0, 0.38),
    0 14px 40px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(var(--gl-brand), calc(var(--gl-brand-seep) * 0.9));
}
.gl-atmos--tile { border-radius: 20px; }
.gl-atmos--sheet { border-radius: 28px; }
.gl-atmos--pill { border-radius: 32px; }
/* top light: enters the slab where the pointer (or tilt) says */
.gl-atmos::before, .gl-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.gl-atmos::before {
  background: radial-gradient(ellipse 78% 50% at var(--gl-lx, 50%) calc(var(--gl-ly, 0%) * 0.25 - 10%), rgba(255, 255, 255, 0.17) 0%, transparent 60%);
}
/* back light: the refraction at the opposite corner moves the other way */
.gl-atmos::after {
  background: radial-gradient(ellipse 55% 40% at calc(138% - var(--gl-lx, 50%)) 112%, rgba(var(--gl-brand-3), 0.16) 0%, transparent 55%);
}
.gl-atmos > * { position: relative; z-index: 2; }
.gl-atmos--sweep { animation: gl-color-sweep 14s ease-in-out infinite; }
@keyframes gl-color-sweep {
  0%, 100% { background-position: 0% 0%, 0 0, 0 0; }
  50% { background-position: 100% 100%, 0 0, 0 0; }
}

/* ---------------------------------------------------------------------
   15. Gel ripple — a soft pulse from where you press (glass.js adds it
   to .gl-btn, .gl-capsule, .gl-tile, .gl-atmos and [data-gl-ripple]).
   --------------------------------------------------------------------- */
.gl-ripple {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(var(--gl-brand), 0.10) 70%, transparent 72%);
  mix-blend-mode: plus-lighter;
  transform: scale(0);
}
.gl-atmos:active, [data-gl-press]:active { transform: scale(0.985); transition: transform 90ms ease-out; }
.gl-atmos, [data-gl-press] { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), --gl-lx 160ms ease-out, --gl-ly 160ms ease-out; }

/* ---------------------------------------------------------------------
   16. Kintsugi — two fine repair lines that breathe inside a pane.
   "Felt when you're not looking." One or two panes per page, never all.
     <div class="gl gl-kintsugi">…</div>   (glass.js draws the lines)
   --------------------------------------------------------------------- */
.gl-kintsugi__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  animation: gl-kintsugi-breathe 9s ease-in-out infinite alternate;
}
@keyframes gl-kintsugi-breathe { from { opacity: 0.35; } to { opacity: 0.9; } }

/* ---------------------------------------------------------------------
   17. Identity gems — a glass bead with colour sweeping in from a corner.
     <span class="gl-gem">RS</span>   (brand colour)
     <span class="gl-gem" style="--gem: 94, 234, 212; --gem-deep: 20, 184, 166">…</span>
   --------------------------------------------------------------------- */
.gl-gem {
  --gem: var(--gl-brand);
  --gem-deep: var(--gl-brand-2);
  --gem-x: 28%;
  --gem-y: 24%;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  font: 800 15px/1 var(--gl-font-body);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.34),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0.38),
    0 6px 18px -6px rgba(var(--gem), 0.6);
}
.gl-gem::before, .gl-gem::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.gl-gem::before { z-index: -1; background: radial-gradient(circle at var(--gem-x) var(--gem-y), rgb(var(--gem)) 0%, rgb(var(--gem)) 18%, rgb(var(--gem-deep)) 62%, transparent 105%); }
.gl-gem::after { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 255, 255, 0.30), transparent 70%); }
.gl-gem { isolation: isolate; }
.gl-gem--lg { width: 72px; height: 72px; font-size: 22px; }

/* ---------------------------------------------------------------------
   18. Adaptive tiers (set by glass.js — see "adaptive engine")
   --------------------------------------------------------------------- */
/* LITE: lighter blur, no grain, no sweep, one sky ribbon. Same look, less work. */
html[data-gl-tier="lite"] .gl, .gl.gl-rest { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
html[data-gl-tier="lite"] .gl-deep, .gl-deep.gl-rest { -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
html[data-gl-tier="lite"] .gl-atmos, .gl-atmos.gl-rest {
  --gl-atmos-blur: 12px;
  background-image:
    linear-gradient(135deg, rgba(var(--gl-brand-2), 0.14) 0%, transparent 42%, transparent 58%, rgba(var(--gl-brand), 0.12) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--gl-brand), 0.12) 0%, transparent 70%);
  background-size: 100% 100%, auto;
  animation: none;
}
html[data-gl-tier="lite"] .gl-sky__drift--b { display: none; }
html[data-gl-tier="lite"] .gl-sky__drift--a { animation-duration: calc(var(--gl-drift-a, 28s) * 1.5); }
html[data-gl-tier="lite"] :is(.gl-galaxy, .gl-feature)::after { animation: none; opacity: 0; }

/* FLAT: no blur at all — solid, tinted plates that keep the edges and light. */
html[data-gl-tier="flat"] :is(.gl, .gl-deep, .gl-atmos, :is(.gl-galaxy, .gl-feature), .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel, .gl-btn--glass, .gl-close) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(18, 14, 26, 0.94);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  html[data-gl-tier="flat"] :is(.gl, .gl-deep, .gl-atmos, :is(.gl-galaxy, .gl-feature), .gl-capsule, .gl-header, .gl-tabbar, .gl-mega__inner, .gl-drawer__panel, .gl-btn--glass, .gl-close) {
    background-color: color-mix(in srgb, color-mix(in srgb, var(--gl-sky-base) 90%, white) 95%, transparent);
  }
}
html[data-gl-tier="flat"] .gl-atmos { background-image: linear-gradient(135deg, rgba(var(--gl-brand-2), 0.10), transparent 45%, transparent 60%, rgba(var(--gl-brand), 0.08)); background-size: 100% 100%; animation: none; }
html[data-gl-tier="flat"] .gl-sky__drift { display: none; }

/* Budget + nesting + visibility */
.gl-atmos.gl-rest, :is(.gl-galaxy, .gl-feature).gl-rest { animation: none; }
:is(.gl, .gl-deep, .gl-atmos, :is(.gl-galaxy, .gl-feature)).gl-nested { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, 0.045); }
.gl-offscreen, .gl-offscreen::before, .gl-offscreen::after, .gl-offscreen * { animation-play-state: paused !important; }
html.gl-paused *, html.gl-paused *::before, html.gl-paused *::after { animation-play-state: paused !important; }

/* STILL: motion off (Reduce Motion, or simulated) */
html.gl-still .gl-sky__drift, html.gl-still .gl-atmos--sweep, html.gl-still :is(.gl-galaxy, .gl-feature)::after,
html.gl-still .gl-kintsugi__svg, html.gl-still .gl-text-opal, html.gl-still .gl-text-flow, html.gl-still .gl-btn--flow,
html.gl-still .gl-mega__inner::after, html.gl-still .gl-sky--twinkle::after { animation: none !important; }
html.gl-still .gl-kintsugi__svg { opacity: 0.55; }
html.gl-still .gl-ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gl-sky__drift, .gl-atmos--sweep, .gl-kintsugi__svg { animation: none !important; }
  .gl-ripple { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .gl-atmos { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(18, 14, 26, 0.96); }
  .gl-sky__drift { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gl-atmos { background-color: rgba(18, 14, 26, 0.94); }
}

/* ---------------------------------------------------------------------
   19. Weather + window scenes (glass.js draws the rain, snow and clouds)
   Page sky:     <html data-gl-weather="rain">  (your brand colours stay)
   Window scene: <div class="gl-scene" data-gl-weather="snow" data-gl-time="night">
                   … glass panels …
                 </div>
   Kinds: clear · clouds · rain · storm · snow.  Times: dawn · day · dusk · night · auto.
   --------------------------------------------------------------------- */
.gl-sky > .gl-weather { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.gl-scene {
  position: relative; isolation: isolate; overflow: hidden;
  --gl-scene-sky: radial-gradient(circle at 78% 20%, rgba(255, 244, 214, 0.5) 0, rgba(255, 244, 214, 0.12) 12%, transparent 30%), linear-gradient(180deg, #0d3561 0%, #2b69a3 50%, #7fb0d4 86%, #c9dde8 100%);
  --gl-scene-veil: transparent;
  background: var(--gl-scene-sky);
}
.gl-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--gl-scene-veil); transition: opacity 700ms ease; }
.gl-scene > .gl-weather { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mix-blend-mode: screen; }
.gl-scene[data-gl-daypart="dawn"]  { --gl-scene-sky: radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255, 196, 140, 0.75), transparent 70%), linear-gradient(180deg, #17142c 0%, #4b3356 40%, #c07468 76%, #f6b98a 100%); }
.gl-scene[data-gl-daypart="dusk"]  { --gl-scene-sky: radial-gradient(ellipse 80% 50% at 30% 100%, rgba(255, 150, 100, 0.7), transparent 70%), linear-gradient(180deg, #100b22 0%, #36204c 36%, #a4485f 72%, #ec9366 100%); }
.gl-scene[data-gl-daypart="night"] { --gl-scene-sky: radial-gradient(circle at 76% 18%, rgba(230, 236, 255, 0.34) 0, rgba(230, 236, 255, 0.08) 6%, transparent 16%), linear-gradient(180deg, #02030a 0%, #080c26 55%, #151c44 100%); }
.gl-scene[data-gl-weather="clouds"] { --gl-scene-veil: linear-gradient(180deg, rgba(92, 100, 118, 0.62), rgba(120, 128, 146, 0.42)); }
.gl-scene[data-gl-weather="rain"]   { --gl-scene-veil: linear-gradient(180deg, rgba(22, 34, 48, 0.8), rgba(40, 64, 84, 0.58)); }
.gl-scene[data-gl-weather="storm"]  { --gl-scene-veil: linear-gradient(180deg, rgba(8, 8, 16, 0.9), rgba(38, 30, 70, 0.72)); }
.gl-scene[data-gl-weather="snow"]   { --gl-scene-veil: linear-gradient(180deg, rgba(110, 126, 150, 0.55), rgba(196, 210, 230, 0.34)); }
.gl-scene[data-gl-daypart="night"][data-gl-weather="clouds"] { --gl-scene-veil: linear-gradient(180deg, rgba(18, 22, 38, 0.72), rgba(40, 46, 70, 0.5)); }
.gl-scene[data-gl-daypart="night"][data-gl-weather="snow"]   { --gl-scene-veil: linear-gradient(180deg, rgba(30, 38, 60, 0.6), rgba(70, 86, 116, 0.4)); }
/* stars on clear nights */
.gl-scene[data-gl-daypart="night"][data-gl-weather="clear"]::after {
  content: ""; position: absolute; inset: 0 0 35% 0; z-index: -1; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 57% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 45%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 52%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 55%, #fff 50%, transparent 51%);
}
html[data-gl-tier="flat"] .gl-weather { display: none; }

/* ---------------------------------------------------------------------
   20. Metal text + live progress
   Metal:  <h1 class="gl-text-metal">Made to last.</h1>          (in your brand colour)
           <h1 class="gl-text-metal gl-text-metal--gold">…</h1>   (always gold)
           <h1 class="gl-text-metal gl-text-metal--silver">…</h1> (always silver)
   Live:   <div class="gl-progress gl-progress--live"><i style="width:64%"></i></div>
           (a light travels along the bar and the glow breathes)
   Both go still with Reduce Motion.
   --------------------------------------------------------------------- */
.gl-text-metal {
  --gl-metal-dark: var(--gl-brand-2);
  --gl-metal-mid: var(--gl-brand);
  --gl-metal-light: var(--gl-brand-3);
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.85) 48%, transparent 58%) 0 0 / 250% 100% no-repeat,
    linear-gradient(180deg, rgb(var(--gl-metal-light)) 0%, rgb(var(--gl-metal-mid)) 46%, rgb(var(--gl-metal-dark)) 54%, rgb(var(--gl-metal-mid)) 78%, rgb(var(--gl-metal-light)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gl-metal-sheen 5.5s ease-in-out infinite;
}
.gl-text-metal--gold { --gl-metal-dark: 138, 104, 30; --gl-metal-mid: 212, 169, 62; --gl-metal-light: 248, 230, 180; }
.gl-text-metal--silver { --gl-metal-dark: 104, 112, 128; --gl-metal-mid: 176, 184, 198; --gl-metal-light: 246, 248, 252; }
@keyframes gl-metal-sheen { 0% { background-position: 130% 0, 0 0; } 55%, 100% { background-position: -130% 0, 0 0; } }

.gl-progress--live { overflow: visible; }
.gl-progress--live > i { position: relative; overflow: hidden; animation: gl-progress-glow 2.6s ease-in-out infinite; }
.gl-progress--live > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  width: 40%; transform: translateX(-120%);
  animation: gl-progress-run 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes gl-progress-run { to { transform: translateX(320%); } }
@keyframes gl-progress-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--gl-brand), 0.45); }
  50%      { box-shadow: 0 0 20px rgba(var(--gl-brand), 0.8), 0 0 4px rgba(var(--gl-accent), 0.9); }
}
html.gl-still .gl-text-metal, html.gl-still .gl-progress--live > i, html.gl-still .gl-progress--live > i::after { animation: none !important; }
html.gl-still .gl-progress--live > i::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gl-text-metal, .gl-progress--live > i { animation: none; }
  .gl-progress--live > i::after { display: none; }
}