/* ═══ scenes.css — v4 Systems module. OWNER: Systems agent (SPEC.md v4 ownership table).
   Scene layout primitives, Glass v4 (.glass-live / .glass-refract), .wa-cta-band,
   .wa-card, .wa-gate modal, and the pre-reveal states for js/scene-engine.js.
   Linking this file marks a page as a SCENE PAGE — that is the scoping mechanism
   for the scroll-behavior override below. Consumes tokens.css only. ═══ */

/* ── Scroll ownership (v3 finding: scroll-behavior:smooth corrupts ScrollTrigger
   measurement). tokens.css sets html{scroll-behavior:smooth}; scene pages revert
   to auto and js/scene-engine.js owns smooth in-page anchor glides instead. ── */
html{scroll-behavior:auto;}

/* ── Stacking contract for scene pages (mirror of flow.css, which scene pages do
   NOT load): fixed #wa-aurora sits at z 0, particles at 1, all content at
   --z-content (2). main itself stays un-positioned so modals (z 500) still
   stack above the fixed nav (z 100). ── */
main>*,footer{position:relative;z-index:var(--z-content);}
#wa-particles{position:fixed;inset:0;z-index:1;pointer-events:none;}
#wa-particles canvas{display:block;width:100%;height:100%;}
@media (prefers-reduced-motion: reduce){#wa-particles{display:none!important;}}

/* ── Scene layout primitives ──
   Full-viewport flex centering + safe-area padding. Class selector outranks the
   tokens.css `section{padding:100px 64px}` element rule. Scenes are transparent
   by default so the aurora shows through; data-scene-bg opts into the B4-verified
   translucent fills (alpha .84 keeps every contrast ratio ≥4.5:1 over the
   darkest aurora state — see CHANGES.md B4 entry). ── */
.wa-scene{
  position:relative;
  z-index:var(--z-content);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100svh;
  padding:calc(var(--s-8) + env(safe-area-inset-top,0px))
          calc(var(--s-7) + env(safe-area-inset-right,0px))
          calc(var(--s-8) + env(safe-area-inset-bottom,0px))
          calc(var(--s-7) + env(safe-area-inset-left,0px));
  background:transparent;
}
.wa-scene-inner{width:100%;max-width:1240px;margin:0 auto;}
.wa-scene[data-scene-bg="navy"]{background:rgba(var(--ink-rgb),0.84);}
.wa-scene[data-scene-bg="navy-mid"]{background:rgba(var(--surface-alt-rgb),0.84);}
@media (max-width:1023px){
  .wa-scene{
    padding:calc(var(--s-7) + env(safe-area-inset-top,0px))
            calc(var(--s-3) + env(safe-area-inset-right,0px))
            calc(var(--s-7) + env(safe-area-inset-bottom,0px))
            calc(var(--s-3) + env(safe-area-inset-left,0px));
  }
}

/* ── Pre-reveal states — v2 wa-anim safety philosophy ──
   Hidden ONLY under the html[data-scenes] values the engine stamps AFTER a
   successful boot, and only inside registered scenes. If the engine never runs,
   errors out (it stamps "static"), or a browser lacks :where(), every rule here
   drops away and all content is fully visible.
   pinned: GSAP owns hide/reveal via inline styles (immediateRender fromTo);
   this opacity rule only covers the instant between stamp and first tick.
   stacked: hidden + translate, revealed by .wa-reveal-in (engine adds it with
   60–90ms staggered timers); transition ≤600ms var(--ease-out) per DESIGN_LAW. */
/* ── v5 SIGNATURE REVEAL: "masked line-rise" (ORCHESTRATOR-owned) ──
   One scroll language sitewide: content rises out of a clip mask with a short
   travel and settles crisp. Same signature on the GSAP pinned path (engine
   tweens the identical values inline), the stacked IO path (these transitions),
   and degrades to instant-visible under reduced-motion/static. End-state insets
   are negative so nothing (hover lifts, shadows, descenders) ever clips. */
html[data-scenes="pinned"] .wa-scene:where([data-scene="pin"],[data-scene="flow"]) :where([data-reveal],[data-reveal-group]>*){
  opacity:0;
}
html[data-scenes="stacked"] .wa-scene:where([data-scene="pin"],[data-scene="flow"]) :where([data-reveal],[data-reveal-group]>*){
  opacity:0;translate:0 26px;clip-path:inset(0 0 88% 0);
  transition:opacity var(--dur-max) var(--ease-out),translate var(--dur-max) var(--ease-out),clip-path var(--dur-max) var(--ease-out);
}
html[data-scenes="stacked"] .wa-scene :where([data-reveal],[data-reveal-group]>*).wa-reveal-in,
html[data-scenes="pinned"] .wa-scene :where([data-reveal],[data-reveal-group]>*).wa-in{
  opacity:1;translate:0 0;clip-path:inset(-15% -5% -15% -5%);
}

/* ── v2 reveal neutraliser inside scenes ──
   tokens.css hides .eyebrow/.section-h/.section-sub/.wa-r/.wa-stagger>* under
   html.wa-anim, but hero.js (the v2 revealer) is not loaded on scene pages.
   Inside a .wa-scene, data-reveal is the ONLY reveal system (SPEC: "data-reveal
   wins") — force the v2 targets visible; the engine re-hides via its own states. */
html.wa-anim .wa-scene .eyebrow,
html.wa-anim .wa-scene .section-h,
html.wa-anim .wa-scene .section-sub,
html.wa-anim .wa-scene .wa-r,
html.wa-anim .wa-scene .wa-stagger>*{opacity:1;translate:0 0;transition:none;}

/* ── Glass v4: live glass (SPEC Glass system v4 recipe) ──
   .glass-live = base glass + saturate(140%) so the animated aurora behind it
   reads THROUGH the pane; ::after carries the top-edge specular line (1px,
   rgba(var(--white-rgb),.18→0)) layered over the existing --glass-highlight sheen.
   ::before is reserved for .glass-refract. Square corners (site convention). */
.glass-live{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.glass-live::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--white-rgb),0.18),rgba(var(--white-rgb),0) 70%) left top/100% 1px no-repeat,
    var(--glass-highlight);
}

/* ── Glass v4: edge refraction (Tier-1 hero panels ONLY, max 2 per viewport) ──
   Static SVG displacement (#wa-glass-edge, feTurbulence+feDisplacementMap,
   scale ≤4, never animated per-frame) applied to a DECORATIVE ::before ring
   only — NEVER to text. EVERY page using .glass-refract MUST include the
   #wa-glass-edge <svg><defs> block (copy it from /scenes-demo/index.html,
   end of body); without the def the filter silently no-ops to a plain ring.
   Fallbacks: scene-engine.js adds html.wa-no-refract on Safari/WebKit-non-Blink
   (v3 finding: SVG filters on HTML tank WebKit paint) and Firefox/Gecko (SPEC:
   skip refraction) → plain hairline ring, blur+tint glass only. */
.glass-refract{position:relative;}
.glass-refract::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:1.5px solid rgba(var(--white-rgb),0.16);
  filter:url(#wa-glass-edge);
}
html.wa-no-refract .glass-refract::before{filter:none;border-color:rgba(var(--white-rgb),0.12);}

/* ── .wa-card — glass card recipe (pair with .glass-live) ──
   Hover: 4–6px lift + shadow bloom + gold border at 150ms (DESIGN_LAW #4).
   The engine clears its entrance transform on complete so this hover transform
   is never fought by a stale inline value. */
.wa-card{
  display:block;
  padding:var(--s-4);
  transition:transform var(--dur-micro) var(--ease-soft),
             box-shadow var(--dur-micro) var(--ease-soft),
             border-color var(--dur-micro) var(--ease-soft);
}
.wa-card:hover,.wa-card:focus-within{
  transform:translateY(var(--lift));
  box-shadow:var(--glass-shadow-lift);
  border-color:var(--glass-border-gold);
}
.wa-card h3{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--white);font-weight:600;margin-bottom:10px;}
.wa-card p{font-size:var(--fs-base);color:var(--muted);line-height:1.75;}

/* ── .wa-cta-band — gold band: headline + one .btn-gold (component registry) ──
   Mirrors the v2 book-banner grammar; the button inverts to navy so it holds
   on the gold field, matching .banner-btn precedent. */
.wa-cta-band{
  position:relative;z-index:var(--z-content);
  background:var(--gold);
  padding:var(--s-4) var(--s-7);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap;
}
.wa-cta-band h2,.wa-cta-band h3{
  font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);
  color:var(--navy);font-weight:600;line-height:1.2;
}
.wa-cta-band p{font-size:0.85rem;color:rgba(var(--ink-rgb),0.8);margin-top:2px;}
.wa-cta-band .btn-gold{background:var(--navy);color:var(--white);}
.wa-cta-band .btn-gold:hover{background:var(--navy-mid);}
.wa-cta-band :focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
@media (max-width:1023px){.wa-cta-band{padding:var(--s-3) var(--s-3);}}

/* ── .wa-gate — email-gate modal (glass-strong recipe; component registry) ──
   Markup contract:
   <div class="wa-gate" role="dialog" aria-modal="true" aria-labelledby="…">
     <div class="wa-gate-panel">
       <button class="wa-gate-close" aria-label="Close">×</button>
       <h2 class="wa-gate-title">…</h2><p class="wa-gate-sub">…</p>
       <form class="wa-gate-form"> label.wa-gate-label + input.wa-gate-input
         + small.wa-gate-consent + button.wa-gate-submit </form>
       <div class="wa-gate-success" role="status">…</div>
     </div>
   </div>
   Page js toggles .is-open on open/close and .is-success after a successful
   Netlify post (form hides, success block shows). ── */
.wa-gate{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:none;align-items:center;justify-content:center;
  padding:var(--s-3);
  background:rgba(var(--shadow-rgb),0.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.wa-gate.is-open{display:flex;}
.wa-gate-panel{
  position:relative;width:100%;max-width:460px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur-strong)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow-lift);
  padding:var(--s-5);
}
.wa-gate-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--white-rgb),0.18),rgba(var(--white-rgb),0) 70%) left top/100% 1px no-repeat,
    var(--glass-highlight);
}
.wa-gate-close{
  position:absolute;top:6px;right:6px;z-index:1;
  width:44px;height:44px;                       /* ≥44px tap target (DESIGN_LAW #7) */
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);font-size:1.4rem;line-height:1;
  transition:color var(--dur-micro);
}
.wa-gate-close:hover,.wa-gate-close:focus-visible{color:var(--gold);}
.wa-gate-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);color:var(--white);font-weight:600;line-height:1.15;margin-bottom:8px;}
.wa-gate-sub{font-size:0.88rem;color:var(--muted);line-height:1.7;margin-bottom:var(--s-3);}
.wa-gate-label{display:block;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.wa-gate-input{
  width:100%;
  background:rgba(var(--white-rgb),0.04);
  border:1px solid var(--border-subtle);
  color:var(--white);padding:13px 14px;
  font-family:'DM Sans',sans-serif;font-size:0.9rem;
  outline:none;transition:border-color var(--dur-fast);
}
.wa-gate-input:focus{border-color:var(--gold);}
.wa-gate-input::placeholder{color:var(--muted);}
.wa-gate-consent{display:block;font-size:0.72rem;color:var(--muted);line-height:1.6;margin:10px 0 var(--s-2);}
.wa-gate-submit{
  width:100%;
  background:var(--gold);color:var(--navy);border:none;cursor:pointer;
  padding:15px;font-family:'DM Sans',sans-serif;font-size:0.78rem;
  font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  transition:background var(--dur-micro),transform var(--dur-micro),box-shadow var(--dur-micro);
}
.wa-gate-submit:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(var(--accent-rgb),0.32);}
.wa-gate-submit:active{transform:translateY(0);}
.wa-gate-success{display:none;}
.wa-gate.is-success .wa-gate-form,
.wa-gate.is-success .wa-gate-form-only{display:none;}
.wa-gate.is-success .wa-gate-success{display:block;}

/* ── No-backdrop-filter fallback (SPEC Glass v4 chain, mirrors tokens.css) ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-live{background:rgba(var(--glass-strong-rgb),0.96);}
  .wa-gate{background:rgba(var(--shadow-rgb),0.8);}
  .wa-gate-panel{background:rgba(var(--glass-strong-rgb),0.96);}
}