/* Siqwes glass v3: "liquid glass" panels floating over the space-scroll v2 galaxy (Creative, 2026-10-20). DRAFT for Web. Not deployed.
   Spec: brand/specs/glass-v3.md. Founder 21:45 UTC: "hovering bubbles/clouds on top of the galaxy... almost see-through but blurry".
   Replaces the v2 float (rgba(16,28,58,.72), blur 10px, 1px cyan hairline) on every panel, card and box of all 6 sites,
   the blog and the members area. Pure CSS, CSP-safe (no JS, no inline style). Existing tokens only, plus the --glass-* set below.
   Load order: tokens > dark-tokens > dark-site > polish-v1 > flow-v2 > space-scroll-v2 > cancel-footer-v1 > blog-v1 (+web)
               > site-header-v1 > blog-chips-v1 > members-area-v1 (members routes) > glass-v3.css
               > signup-hero-panel-v1.css > blog-band-v1.css (both read the --glass-* tokens).
   Readability: the glass dims what it blurs (backdrop-filter brightness(.65)), so bright ribbon peaks and stars behind a panel
   never pull text under AA. Measured numbers: glass-v3.md section 5. */

:root{
  /* ---- fill: a white sheen over a thin navy tint; the galaxy shows through, blurred ---- */
  --glass-tint:rgba(14,26,56,.40);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --glass-fill:var(--glass-sheen),var(--glass-tint);                       /* use with background: */
  --glass-fill-hover:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),var(--glass-tint);
  /* ---- the frost: blur + saturation, and a dim so ribbon peaks behind a panel stay quiet ---- */
  --glass-blur:blur(22px) saturate(160%) brightness(.65);
  /* ---- edge: hairline (a COLOUR: use as 1px solid var(--glass-border)), top highlight, faint inner glow ---- */
  --glass-border:rgba(255,255,255,.14);
  --glass-border-hover:rgba(255,255,255,.24);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.22);
  --glass-glow:inset 0 0 28px rgba(155,232,246,.05);
  /* ---- floating depth ---- */
  --glass-shadow:0 20px 50px -12px rgba(0,0,0,.55),0 0 0 1px rgba(47,211,238,.06);
  --glass-shadow-hover:0 28px 60px -12px rgba(0,0,0,.60),0 0 0 1px rgba(47,211,238,.12);
  --glass-radius:24px;          /* big panels: signup, hero panel, FAQ, coming soon, CTA2, blog band, members panels */
  --glass-radius-card:16px;     /* cards: features, who, steps, niche cards, blog cards, members cards */
  --glass-lift:-4px;
  --glass-ease:200ms ease;
  /* ---- fallbacks: no backdrop-filter, or the user asks for less transparency ---- */
  --glass-solid:rgba(14,26,56,.85);
  /* ---- header: same recipe, thinner ---- */
  --glass-header-fill:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(14,26,56,.30);
  --glass-header-blur:blur(18px) saturate(160%) brightness(.75);
  /* ---- fields inside glass ---- */
  --glass-input-bg:rgba(5,11,24,.55);
  --glass-input-border:rgba(255,255,255,.18);   /* a COLOUR: 1px solid var(--glass-input-border) */
  /* ---- unchanged accents, restated for one place ---- */
  --glass-accent-bar:linear-gradient(90deg,var(--color-electric-500,#1677FF),var(--color-cyan-400,#2FD3EE));
  --glass-focus-ring:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE);
  /* v2 names now point at v3, so any rule still reading them gets the new glass edge and depth */
  --sp-float-hair:var(--glass-border);
  --sp-float-shadow:var(--glass-shadow);
  --m-glass-hair:var(--glass-border);
  --m-float-shadow:var(--glass-shadow);
}

/* ================= 1. The utility ================= */
.glass{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow);
}
.glass--card{border-radius:var(--glass-radius-card)}
.glass--interactive{transition:transform var(--glass-ease),background var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
@media (hover:hover){
  .glass--interactive:hover{transform:translateY(var(--glass-lift));background:var(--glass-fill-hover);border-color:var(--glass-border-hover);
    box-shadow:var(--glass-shadow-hover),var(--glass-highlight),var(--glass-glow)}
}
.glass--interactive:focus-visible,.glass--interactive:focus-within:has(:focus-visible){outline:none;
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-focus-ring)}

/* ================= 2. Site mapping: existing classes take the glass (no markup change) =================
   space-scroll-v2 sets .card/.signup/.faq backgrounds with !important, so the fill does too. */

/* 2a. Big panels, radius 24 */
.signup,.faq,.soon,.cta2,.blog-try,.blog-cta,
.m-glass,.m-module,.m-preview__cta,.m-codes{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow) !important;
}
/* 2b. Cards, radius 16 */
.card,.steps>li,.notice,.m-card,.m-next,.m-pager a{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius-card);
  box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow);
}
/* cards with an opaque image inside only take the frame (border + highlight + depth); the image is the fill */
.hero__art.motif-panel,.m-hero__art{border:1px solid var(--glass-border);border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow),var(--glass-highlight)}

/* 2c. Kept accents */
/* signup card: 6px electric->cyan top bar (::before, unchanged) + the Try-it-free accent edge on niche landings */
.section--free .signup{box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow),0 0 0 1px color-mix(in srgb,var(--niche-accent,#2FD3EE) 30%,transparent) !important}
.signup::before{background:var(--glass-accent-bar)}
/* How it works: keep the 3px niche top accent */
.steps>li{border-top:var(--card-step-accent-w,3px) solid var(--card-step-accent,var(--niche-accent,#2FD3EE))}
/* callouts: keep the 4px left accent */
.notice{border-left:4px solid var(--dk-notice-border,#2FD3EE)}
/* blog "Try it" box: keep the 4px niche bar */
.blog-try{box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow),inset 4px 0 0 var(--niche-accent,#2FD3EE) !important}
/* hub niche cards, members course cards, CTA panels keep their niche wash over the glass */
.niche-card,.m-card{
  background:linear-gradient(150deg,color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 11%,transparent) 0%,transparent 62%),var(--glass-fill) !important;
  border-color:color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 26%,rgba(255,255,255,.10));
}
.m-preview__cta,.blog-cta{
  background:linear-gradient(160deg,color-mix(in srgb,var(--niche-accent,#2FD3EE) 14%,transparent),transparent 70%),var(--glass-fill) !important}
/* FAQ rows sit inside one glass panel: transparent rows, light hairlines, a soft wash on hover */
.faq details,.faq details:hover{background:transparent}
.faq details{border-top-color:rgba(255,255,255,.10)}
.faq details:hover{background:rgba(255,255,255,.04)}
/* inner wells inside the signup card */
.signup__what,.signup__full{background:rgba(5,11,24,.30);border-radius:12px}
/* coming-soon pill stays a hairline pill */
.soon__badge{border-color:rgba(255,255,255,.22)}

/* 2d. Interactive cards: lift 4px, brighter fill + edge, 200ms. Static cards (features, who, steps, FAQ) no longer lift. */
.card,.signup,.faq,.steps>li,.soon,.cta2,.m-card,.m-module,.m-pager a{
  transition:transform var(--glass-ease),background var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
.card:hover,.benefits .card:hover{transform:none;box-shadow:var(--glass-shadow),var(--glass-highlight),var(--glass-glow)}
@media (hover:hover){
  .niche-card:hover,.m-card:hover,.m-pager a:hover{
    transform:translateY(var(--glass-lift));
    border-color:color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 45%,rgba(255,255,255,.18));
    box-shadow:var(--glass-shadow-hover),var(--glass-highlight),var(--glass-glow),0 0 28px color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 16%,transparent)}
  .niche-card:hover,.m-card:hover{
    background:linear-gradient(150deg,color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 14%,transparent) 0%,transparent 62%),var(--glass-fill-hover) !important}
  .m-pager a:hover{background:var(--glass-fill-hover) !important}
  .m-module:hover{border-color:var(--glass-border-hover)}
}
/* keyboard: the shared ring on the card that holds focus (niche card CTA, members card link) */
.niche-card:focus-within:has(:focus-visible),.m-card:focus-within:has(:focus-visible){border-color:var(--glass-border-hover)}

/* 2e. Header: same recipe, thinner (blur 18, tint lighter); niche hairline from site-header-v1 stays */
.site-header,.site-header.sh{
  background:var(--glass-header-fill) !important;
  -webkit-backdrop-filter:var(--glass-header-blur);backdrop-filter:var(--glass-header-blur);
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px -18px rgba(0,0,0,.6);
}

/* 2f. Fields inside glass: darker translucent wells with a light edge; hover/focus/error keep the dark-theme rules */
:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select,textarea,input[type="email"],input[type="text"],input[type="password"]){
  background-color:var(--glass-input-bg);border:1px solid var(--glass-input-border)}
:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select):hover{border-color:var(--dk-blue-250,#9CC8FF)}
:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select):focus-visible{outline:none;border-color:var(--dk-focus,#2FD3EE);box-shadow:var(--glass-focus-ring)}
:is(.glass,.signup) .field.is-error :is(.input,.select),:is(.glass,.signup) [aria-invalid="true"]{border:2px solid var(--dk-error,#FFA59B)}
:is(.glass,.signup) .select option{background:#0E1A38;color:#FFFFFF}

/* ================= 3. No backdrop-filter: the see-through fill would show crisp ribbons, so go solid ================= */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-fill:var(--glass-solid);--glass-fill-hover:rgba(18,32,66,.88);--glass-header-fill:rgba(7,18,43,.92)}
}

/* ================= 4. Less transparency (macOS/iOS "Reduce transparency", Windows "Transparency effects" off) ================= */
@media (prefers-reduced-transparency:reduce){
  :root{--glass-fill:var(--glass-solid);--glass-fill-hover:rgba(18,32,66,.88);--glass-header-fill:rgba(7,18,43,.94);
    --glass-blur:none;--glass-header-blur:none}
}

/* ================= 5. Reduced motion: no lift, no transition on transform ================= */
@media (prefers-reduced-motion:reduce){
  .glass--interactive,.card,.signup,.faq,.steps>li,.soon,.cta2,.m-card,.m-module,.m-pager a{transition:background var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
  .glass--interactive:hover,.niche-card:hover,.m-card:hover,.m-pager a:hover{transform:none !important}
}