/* =====================================================================
   Foxfire "Liquid Glass" — shared surface primitive (SOURCE OF TRUTH)
   ---------------------------------------------------------------------
   One frosted-glass recipe for the whole marketing site. Link it LAST in
   <head> (after a page's inline <style>) so it wins by source order:

       <link rel="stylesheet" href="/foxfire-glass.css">

   It is ADDITIVE and DARK-ONLY. It only adds glass material + the hover
   recipe on top of the existing dark theme; it never redefines brand
   tokens, fonts, or layout. New pages get glass for free via the
   new:marketing scaffold. cohesion:check requires every marketing page to
   link this file (see scripts/check-cohesion.mjs).

   Performance notes:
   - REST is cheap: blur + a neutral depth shadow. No colored halo at rest.
   - HOVER is compositor-pure: the blue glow lives on a pseudo-element and
     only its OPACITY animates (no per-frame box-shadow/paint). The lift is
     a transform. Both are GPU-composited. The faint sheen is the only
     paint, is transient, and is gated behind prefers-reduced-motion.
   - backdrop-filter blur is the real cost; it is limited to chrome + cards
     (not full-page) and effectively idle on touch devices (no :hover).
   ===================================================================== */

:root{
  --glass-fill:rgba(18,22,31,.42);
  --glass-fill-strong:rgba(18,22,31,.62);
  --glass-border:rgba(255,255,255,.14);
  --glass-hi:rgba(255,255,255,.40);                 /* specular top edge   */
  --glass-shadow:0 10px 34px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.34);
  --glass-blur:blur(18px) saturate(165%);
  --glass-accent:17,162,218;                        /* secondary blue, rgb */
}

/* ---- Rest material: every glass surface + the generic utility -------- */
.foxfire-glass,
nav#topnav,nav#topnav.scrolled,
.stat,.foxfire-tile,.logo-tile,.step,.g-card,.proof-chip,.feat-panel,.video-frame,
.bio-card,.cred,.element,.est,.panel,.ind-card,.doc-card,.cmp-wrap,.hero-shot,.cert-shot,.outcome-shot,.state-grid li,
.faq-list details,
.btn-ghost,.nav-cta,.f-contact a,.f-contact span,.q-nav>button,
.bm-card{
  position:relative;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);
}

/* Nav + footer chips read as glass but keep their own height/shape. */
nav#topnav,nav#topnav.scrolled{
  border-width:0 0 1px 0;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 6px 24px rgba(0,0,0,.18);
}

/* FAQ rows become discrete glass cards. */
.faq-list details{border-radius:14px;margin-bottom:.6rem;padding:0 1.15rem}

/* The green CTA keeps its brand fill, gains a glassy specular highlight. */
.btn-cta{box-shadow:0 4px 28px rgba(151,238,0,.32),inset 0 1px 0 rgba(255,255,255,.45)}

/* Heavier blur for the booking-modal scrim. */
#bm-overlay{
  background:rgba(6,10,16,.42);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
}

/* ---- Compositor-pure hover glow ------------------------------------- */
/* The blue halo lives on ::after and only fades via opacity (GPU). The
   border tint is a cheap one-shot repaint. No box-shadow is animated. */
.foxfire-glass::after,
.stat::after,.foxfire-tile::after,.logo-tile::after,.step::after,.g-card::after,
.bio-card::after,.cred::after,.element::after,.est::after,.panel::after,.ind-card::after,.doc-card::after,.cmp-wrap::after,.hero-shot::after,.cert-shot::after,.outcome-shot::after,.state-grid li::after,
.proof-chip::after,.feat-panel::after,.video-frame::after,
.faq-list details::after,
.btn-ghost::after,.nav-cta::after,.q-nav>button::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity .28s ease;
  box-shadow:0 0 0 1px rgba(var(--glass-accent),.34),
             0 14px 40px -10px rgba(var(--glass-accent),.55);
}
.foxfire-glass:hover,
.stat:hover,.foxfire-tile:hover,.logo-tile:hover,.step:hover,.g-card:hover,
.bio-card:hover,.cred:hover,.element:hover,.est:hover,.panel:hover,.ind-card:hover,.doc-card:hover,.cmp-wrap:hover,.hero-shot:hover,.cert-shot:hover,.outcome-shot:hover,.state-grid li:hover,
.proof-chip:hover,.feat-panel:hover,.video-frame:hover,
.faq-list details:hover,
.btn-ghost:hover,.nav-cta:hover,.f-contact a:hover{
  border-color:rgba(var(--glass-accent),.55);
  background:var(--glass-fill-strong);
}
.foxfire-glass:hover::after,
.stat:hover::after,.foxfire-tile:hover::after,.logo-tile:hover::after,.step:hover::after,
.bio-card:hover::after,.cred:hover::after,.element:hover::after,.est:hover::after,.panel:hover::after,.ind-card:hover::after,.doc-card:hover::after,.cmp-wrap:hover::after,.hero-shot:hover::after,.cert-shot:hover::after,.outcome-shot:hover::after,.state-grid li:hover::after,
.g-card:hover::after,.proof-chip:hover::after,.feat-panel:hover::after,
.video-frame:hover::after,.faq-list details:hover::after,
.btn-ghost:hover::after,.nav-cta:hover::after,.q-nav>button:hover::after{opacity:1}

/* ---- Motion flourishes: lift + sheen (skipped under reduced-motion) -- */
@media (prefers-reduced-motion:no-preference){
  .foxfire-glass,
  .stat,.foxfire-tile,.logo-tile,.step,.g-card,.proof-chip,.feat-panel,.video-frame,
.bio-card,.cred,.element,.est,.panel,.ind-card,.doc-card,.cmp-wrap,.hero-shot,.cert-shot,.outcome-shot,.state-grid li,
  .faq-list details,.btn-ghost,.nav-cta{
    transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s ease,background .28s ease;
  }
  .foxfire-glass:hover,
  .stat:hover,.foxfire-tile:hover,.logo-tile:hover,.step:hover,.g-card:hover,
.bio-card:hover,.cred:hover,.element:hover,.est:hover,.panel:hover,.ind-card:hover,.doc-card:hover,.cmp-wrap:hover,.hero-shot:hover,.cert-shot:hover,.outcome-shot:hover,.state-grid li:hover,
  .proof-chip:hover,.feat-panel:hover,.btn-ghost:hover,.nav-cta:hover{
    transform:translateY(-4px);
  }

  /* Specular sheen swept via background-position (stays inside the rounded
     box, so no overflow clipping is needed and the glow halo is free). */
  .foxfire-glass::before,
  .step::before,.g-card::before,.feat-panel::before,.logo-tile::before,
  .bio-card::before,.cred::before,.element::before,.est::before,.panel::before,.ind-card::before,.doc-card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;z-index:1;opacity:0;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
    background-size:260% 100%;background-position:150% 0;
    transition:background-position .8s ease,opacity .45s ease;
  }
  .foxfire-glass:hover::before,
  .step:hover::before,.g-card:hover::before,.feat-panel:hover::before,.logo-tile:hover::before,
  .bio-card:hover::before,.cred:hover::before,.element:hover::before,.est:hover::before,.panel:hover::before,.ind-card:hover::before,.doc-card:hover::before{
    opacity:1;background-position:-60% 0;
  }
}
