/* ============================================================
   Reusable frosted-glass container for the guest pages.
   ONE component, tuned per element via data attributes:
     .glass-panel                 the frosted material
     data-glass="1|2|3"           frost tier (1 subtle · 2 standard/cg-2 · 3 heavy/must-read)
     data-tone="light|dark"       light = lavender-white tint + plum ink;
                                  dark  = plum tint + light ink
     .glass-wrap  (optional)      parent that carries the depth shadow

   Material = the shipped countdown-cell language: backdrop-filter blur+saturate,
   translucent gradient tint, crisp 1px top-edge highlight, hairline inner border.

   Squircle corners + resize re-bake are applied by glass.js (setSquircle, ported
   from hero-preview.html, superellipse exponent N=5). The CSS `border-radius`
   below is the no-JS / pre-JS fallback so nothing ever renders square.

   Shadow rule (hero-proven): clip-path clips a box-shadow away, so the depth
   shadow must live OUTSIDE the clipped panel. It is drawn on .glass-wrap's
   ::before — a SIBLING behind the panel, NOT an ancestor. (A `filter`/`box-shadow`
   on an ANCESTOR of a backdrop-filter element breaks the child's backdrop
   sampling in Chrome/Safari; a sibling does not.)
   ============================================================ */

.glass-panel {
  position: relative;
  border-radius: 24px;                       /* fallback; glass.js replaces with a squircle clip-path */
  padding: var(--glass-pad, clamp(20px, 5vw, 32px));
  -webkit-backdrop-filter: var(--glass-frost, blur(8px) saturate(1.3));
  backdrop-filter: var(--glass-frost, blur(8px) saturate(1.3));
  /* ?frost milk veil (bright lavender-white; 0 at frost 1, set on :root by glass-gpu.js) over the tint — thickens
     the frost while staying luminous. Then the per-tone body tint. */
  background:
    linear-gradient(rgba(250,248,255, var(--milk, 0.112)), rgba(250,248,255, var(--milk, 0.112))),
    linear-gradient(160deg, rgba(var(--g-a), var(--g-oa)), rgba(var(--g-b), var(--g-ob)));
  box-shadow:
    inset 0 1px 0 var(--g-edge),             /* crisp 1px top-edge highlight */
    inset 0 0 0 1px var(--g-hair);            /* hairline inner border */
  color: var(--g-ink);
}

/* ---- tones ----
   light / dark are FIXED tones: pick the one that reads against the panel's own
   backdrop. On this site every panel sits over PHOTOGRAPHY, so the tone is dictated
   by the image (and by hardcoded on-photo / must-read text colours), NOT the OS theme
   — flipping them by prefers-color-scheme would fight the photo. They therefore stay
   explicit. `auto` (below) is for glass over the PAGE surface, of which there is none
   yet — it's the ready primitive so future page-backed glass can track the OS. */
.glass-panel[data-tone="light"] {
  --g-a: 255,255,255; --g-b: 244,238,251;
  --g-edge: rgba(255,255,255,0.92);
  --g-hair: rgba(203,177,236,0.18);
  --g-ink: #241a2e;
}
.glass-panel[data-tone="dark"] {
  --g-a: 44,30,60; --g-b: 26,17,38;
  --g-edge: rgba(255,255,255,0.22);
  --g-hair: rgba(255,255,255,0.10);
  --g-ink: #fdfbff;
}

/* ---- auto tone: resolves light↔dark by the OS theme (prefers-color-scheme).
   Default (and no-query support) = light tokens; dark media flips to the dark tokens.
   Tint opacities track the same split as the fixed tones. */
.glass-panel[data-tone="auto"] {
  --g-a: 255,255,255; --g-b: 244,238,251;
  --g-edge: rgba(255,255,255,0.92);
  --g-hair: rgba(203,177,236,0.18);
  --g-ink: #241a2e;
}
.glass-panel[data-tone="auto"][data-glass="1"] { --g-oa: 0.44; --g-ob: 0.30; }
.glass-panel[data-tone="auto"][data-glass="2"] { --g-oa: 0.70; --g-ob: 0.52; }
.glass-panel[data-tone="auto"][data-glass="3"] { --g-oa: 0.84; --g-ob: 0.72; }
@media (prefers-color-scheme: dark) {
  .glass-panel[data-tone="auto"] {
    --g-a: 44,30,60; --g-b: 26,17,38;
    --g-edge: rgba(255,255,255,0.22);
    --g-hair: rgba(255,255,255,0.10);
    --g-ink: #fdfbff;
  }
  .glass-panel[data-tone="auto"][data-glass="1"] { --g-oa: 0.34; --g-ob: 0.46; }
  .glass-panel[data-tone="auto"][data-glass="2"] { --g-oa: 0.54; --g-ob: 0.64; }
  .glass-panel[data-tone="auto"][data-glass="3"] { --g-oa: 0.74; --g-ob: 0.82; }
}

/* ---- per-OS calibration of the FIXED tones (understated, edge-only) ----
   Only the 1px top-edge highlight moves — ink, tint and contrast are untouched, so
   there is zero legibility/form risk. A bright white card is a touch of glare at night,
   so soften light glass in dark mode; a dark panel over a bright photo wants a crisper
   edge in bright ambient, so lift dark glass in light mode. Subtle by design. */
@media (prefers-color-scheme: dark) {
  .glass-panel[data-tone="light"] { --g-edge: rgba(255,255,255,0.78); }
}
@media (prefers-color-scheme: light) {
  .glass-panel[data-tone="dark"] { --g-edge: rgba(255,255,255,0.30); }
}

/* ---- frost tiers (blur + saturate) — base blur × the ?frost thickness dial (var(--frost), default 1) ---- */
.glass-panel[data-glass="1"] { --glass-frost: blur(calc(3px * var(--frost, 1.8))) saturate(1.2); }
.glass-panel[data-glass="2"] { --glass-frost: blur(calc(8px * var(--frost, 1.8))) saturate(1.3); }
.glass-panel[data-glass="3"] { --glass-frost: blur(calc(14px * var(--frost, 1.8))) saturate(1.45); }

/* ---- tint opacity per tier × tone ---- */
.glass-panel[data-tone="light"][data-glass="1"] { --g-oa: 0.44; --g-ob: 0.30; }
.glass-panel[data-tone="light"][data-glass="2"] { --g-oa: 0.70; --g-ob: 0.52; }
.glass-panel[data-tone="light"][data-glass="3"] { --g-oa: 0.84; --g-ob: 0.72; }
.glass-panel[data-tone="dark"][data-glass="1"]  { --g-oa: 0.34; --g-ob: 0.46; }
.glass-panel[data-tone="dark"][data-glass="2"]  { --g-oa: 0.54; --g-ob: 0.64; }
.glass-panel[data-tone="dark"][data-glass="3"]  { --g-oa: 0.74; --g-ob: 0.82; }

/* ---- depth shadow: on the wrapper, behind the (clipped) panel ---- */
.glass-wrap { position: relative; display: block; border-radius: 24px; }
.glass-wrap > .glass-panel { z-index: 1; }
.glass-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  box-shadow: var(--glass-drop, 0 24px 44px -20px rgba(12,7,24,0.5), 0 4px 12px -6px rgba(12,7,24,0.4));
  pointer-events: none;
}