/* =========================================================
   ALPHA — glass.css   v9.0 "AURORA GLASS"
   ---------------------------------------------------------
   One layer. One material. No fragile tricks.

   Deliberately avoided, because each one fails loudly on some
   browser and takes the whole surface down with it:
     · mask-composite / -webkit-mask-composite  (unsupported →
       the gradient paints as a SOLID BLOCK over the content)
     · mix-blend-mode on translucent chrome     (muddy or invisible
       depending on GPU and backdrop)
     · animating layout properties on the header (reflow jank)

   What builds the glass instead — all of it universally supported:
     · background-color with alpha  + backdrop-filter
     · inset box-shadow for the lit top edge (the "rim")
     · an outer shadow for thickness
     · a plain radial-gradient overlay for the specular sheen
     · opacity + transform only, for every animation

   Everything degrades on its own: if backdrop-filter is missing,
   the surface is simply a clean translucent panel.
   ========================================================= */

/* ---------------------------------------------------------
   1 · THE RECIPE
   --------------------------------------------------------- */
:root {
  --g-tint: 255, 255, 255;
  --g-alpha: 0.62;
  --g-blur: 26px;
  --g-sat: 180%;
  --g-edge: rgba(255, 255, 255, 0.72);      /* light on the top edge */
  --g-border: rgba(255, 255, 255, 0.5);
  --g-lift: 0 20px 46px -20px rgba(16, 18, 34, 0.42);
  --g-sheen: rgba(255, 255, 255, 0.5);
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1); /* the house easing */
}
html[data-theme="dark"] {
  --g-tint: 17, 18, 25;
  --g-alpha: 0.6;
  --g-edge: rgba(255, 255, 255, 0.16);
  --g-border: rgba(255, 255, 255, 0.1);
  --g-lift: 0 22px 54px -20px rgba(0, 0, 0, 0.78);
  --g-sheen: rgba(255, 255, 255, 0.22);
}

/* The material, applied to every floating surface in the product,
   so the whole site reads as cut from one sheet. */
.site-header .container.nav::before,
.cart-panel,
.welcome-card,
.pal-panel,
.dock .dock-in,
.modal-overlay .modal-card {
  background: rgba(var(--g-tint), var(--g-alpha));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border: 1px solid var(--g-border);
  /* inset line = the lit edge · outer = the thickness */
  box-shadow: inset 0 1px 0 var(--g-edge), var(--g-lift);
}

/* ---------------------------------------------------------
   2 · HEADER — a capsule that lifts off the page on scroll.
   The capsule is a pseudo-element behind the nav, so nothing
   in the layout moves: only opacity and transform animate.
   --------------------------------------------------------- */
.site-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.site-header .container.nav { position: relative; }
.site-header .container.nav > * { position: relative; z-index: 2; }

.site-header .container.nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px 6px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 460ms var(--g-ease), transform 560ms var(--g-ease);
  pointer-events: none;
}
.site-header.scrolled .container.nav::before { opacity: 1; transform: scale(1); }

/* the sheen rides on a second pseudo so it can fade independently */
.site-header .container.nav::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 5px 6px;
  border-radius: 999px;
  background: radial-gradient(60% 130% at var(--sheen-x, 30%) var(--sheen-y, 0%), var(--g-sheen), rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity 460ms ease;
  pointer-events: none;
}
.site-header.scrolled .container.nav::after { opacity: 0.85; }

/* over a dark section the capsule inverts, and its text with it */
.site-header.scrolled .container.nav.on-dark::before {
  background: rgba(14, 15, 21, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 54px -20px rgba(0, 0, 0, 0.7);
}
.site-header.scrolled .container.nav.on-dark .nav-links a,
.site-header.scrolled .container.nav.on-dark .brand .txt,
.site-header.scrolled .container.nav.on-dark .icon-btn { color: #f4f5f9; }
.site-header.scrolled .container.nav.on-dark .nav-links a:hover { background: rgba(255, 255, 255, 0.14); }

/* nav links get their own small pill */
.nav-links a {
  border-radius: 999px;
  transition: color 220ms ease, background 260ms ease, transform 110ms ease-out;
}
.nav-links a:active { transform: scale(0.95); }

/* reading progress — a gold hairline inside the capsule */
.nav-progress {
  position: absolute;
  z-index: 3;
  inset-inline: 26px;
  bottom: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(130, 130, 150, 0.18);
  overflow: hidden;
  opacity: 0;
  transition: opacity 460ms ease;
  pointer-events: none;
}
.site-header.scrolled .nav-progress { opacity: 1; }
.nav-progress i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--gold-grad);
  transform: scaleX(var(--read, 0));
  transform-origin: right center;
}

/* ---------------------------------------------------------
   3 · DOCK — the same capsule, floating off the bottom edge
   --------------------------------------------------------- */
.dock {
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
.dock .dock-in { border-radius: 24px; padding: 6px 4px; }

/* ---------------------------------------------------------
   4 · CARDS — depth only.
   Deliberately NOT adding a sheen or a transform here:
     · theme-v5 / theme-v6 own .product::after (gold-thread border)
     · styles.css owns .btn-gold::after (the shine sweep)
     · main.js writes an INLINE transform for the 3D tilt, which
       beats any stylesheet — a hover transform here would either
       be ignored or fight it for one frame
   So this layer touches only box-shadow, which no one else
   animates. One property, one owner.
   --------------------------------------------------------- */
.product { transition: transform var(--t) var(--out), box-shadow 560ms var(--g-ease), border-color 320ms ease; }
.product:hover { box-shadow: 0 26px 56px -24px rgba(16, 18, 34, 0.4); }

/* ---------------------------------------------------------
   5 · SEGMENTED CONTROL — one gold pill travels between the
   category chips, the way an iOS picker does.
   --------------------------------------------------------- */
.filters { position: relative; isolation: isolate; }
.seg-pill {
  position: absolute;
  z-index: 0;
  top: 0;
  inset-inline-start: 0;
  border-radius: 999px;
  background: var(--gold-grad);
  box-shadow: 0 8px 20px -8px rgba(201, 162, 39, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
}
.filters.seg-on .seg-pill { opacity: 1; }
.filters .chip { position: relative; z-index: 1; }
.filters.seg-on .chip.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #2a2008;
}

/* ---------------------------------------------------------
   6 · MODAL — materialises (blur + scale together), and on
   phones becomes a grabbable sheet. Transform is owned by JS.
   --------------------------------------------------------- */
.modal-overlay { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
/* NOTE: --ox/--oy are already owned by apex.js + theme-v5, which use
   them as translate pixels for the "genie" entrance (the card grows
   from the tapped product). This layer must not reuse those names —
   doing so fed percentages into a translate and threw the card off
   position. The genie stays; we only add the material arrival. */
.modal-overlay .modal-card {
  filter: blur(7px);
  transition: transform 520ms var(--g-ease), opacity 300ms ease, filter 420ms var(--g-ease);
  will-change: transform, opacity, filter;
}
.modal-overlay.open .modal-card { filter: blur(0); }

@media (max-width: 720px) {
  .modal-overlay.as-sheet { align-items: flex-end; padding: 0; overflow: hidden; }
  .modal-overlay.as-sheet .modal-card {
    max-width: none;
    margin: 0;
    border-radius: 26px 26px 0 0;
    padding-top: 6px;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sheet-grab {
    position: sticky;
    top: 0;
    z-index: 4;
    display: block;
    margin: -6px -18px 4px;
    padding: 10px 0 8px;
    cursor: grab;
    touch-action: none;
  }
  .sheet-grab::before {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(20, 22, 40, 0.2);
  }
  html[data-theme="dark"] .sheet-grab::before { background: rgba(255, 255, 255, 0.24); }
  .sheet-grab:active { cursor: grabbing; }
}

/* ---------------------------------------------------------
   7 · RESPONSE — feedback on the press, not the release
   --------------------------------------------------------- */
.product, .tier, .pitem, .ptab, .chip, .modal-close { -webkit-tap-highlight-color: transparent; }
.product:active { transform: scale(0.985); transition: transform 100ms ease-out; }
.tier:active, .pitem:active { transform: scale(0.99); transition: transform 100ms ease-out; }
.ptab:active { transform: scale(0.96); transition: transform 100ms ease-out; }
.modal-close:active { transform: scale(0.92); transition: transform 100ms ease-out; }

/* ---------------------------------------------------------
   8 · TYPOGRAPHY — tracking is size-specific, never one value
   --------------------------------------------------------- */
.hero h1, .vband-content h2, .persona-head h2 {
  letter-spacing: -0.032em;
  line-height: 1.07;
  text-wrap: balance;
}
.section-head h2, .om-in h2 { letter-spacing: -0.024em; line-height: 1.15; text-wrap: balance; }
h3, .modal-head h3, .pp-title { letter-spacing: -0.012em; }
.modal-about, .section-head p, .hero p.sub, .product .desc { letter-spacing: 0; }

/* ---------------------------------------------------------
   9 · ACCESSIBILITY — three independent signals
   --------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .site-header .container.nav::before,
  .cart-panel, .welcome-card, .pal-panel,
  .dock .dock-in, .modal-overlay .modal-card, .modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(var(--g-tint), 0.98) !important;
  }
  .site-header .container.nav::after { display: none; }
}
@media (prefers-contrast: more) {
  .site-header .container.nav::before,
  .dock .dock-in,
  .modal-overlay .modal-card { border-color: rgba(20, 22, 40, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .container.nav::before,
  .site-header .container.nav::after,
  .product,
  .modal-overlay .modal-card { transition: opacity 200ms ease !important; transform: none !important; }
  .modal-overlay .modal-card { filter: none !important; }
  .product:active, .tier:active, .pitem:active, .ptab:active, .modal-close:active { transform: none; }
}