/* ==========================================================================
   exp34 . v2-top.css
   The top of the v2 homepage story: hero band + background film.
     partials2/hero.html  .hr-  the hero band (copy + film mount)
     assets/hero-film.js   .rf-  the film the script builds in the mount
   This file also lands the semantic color contract for every v2 section:
   the --sem-* and --struct-inactive defaults at :root. A theme re-keys
   these inside its own block (see THEME-VERIFIED.md) and wins by
   specificity plus cascade order. hero-film.js reads colors only as
   var(--sem-*) strings, so a theme swap re-colors the film with no
   script change.
   Everything else comes from site.css tokens. No token is redefined.
   ========================================================================== */

/* ---------- semantic state colors (contract) ---------- */
:root{
  --sem-verified:var(--pass);
  --sem-changed:#B45309;
  --sem-stale:var(--fail);
  --sem-unknown:#6B6F66;
  --struct-inactive:rgba(21,20,15,.32);
}

/* ---------- 01 . hero band: a near-black stage in every theme ----------
   The hero is dark on the paper themes (a dark band at the top of a
   light page) and blends with the verified theme ground. The semantic
   vars are re-keyed inside the band to the dark-stage palette so the
   film and the state marks read correctly there; sections below the
   hero keep the :root contract untouched. Structure is #3A403B, prose
   grays are #A5AAA5, headline ink is #F1F3EF: all AA or better on
   #060806. Phosphor (#91FF65) and the failure/changed tones appear
   only as meaningful state marks, applied by the script. */
.hr-hero{
  --sem-verified:#91FF65;
  --sem-stale:#FF6B4A;
  --sem-changed:#FFB454;
  --sem-unknown:#8B908B;
  --struct-inactive:#3A403B;
  background:#060806;
  color:#F1F3EF;
  padding:clamp(4.6rem,9vw,7.6rem) 0 clamp(3.4rem,6vw,5.4rem);
}
.hr-wrap{position:relative;z-index:1;}
.hr-copy h1{font-size:clamp(2.75rem,6.5vw,4.9rem);letter-spacing:-.033em;color:#F1F3EF;}
.hr-sub{margin-top:1.5rem;color:#A5AAA5;}
.hr-hero .btn-video{color:#F1F3EF;}
.hr-hero .btn-video:hover{color:#FFFFFF;}
.hr-hero .cta-quiet{color:#A5AAA5;border-bottom-color:#3A403B;}
.hr-hero .cta-quiet:hover{color:#F1F3EF;border-bottom-color:rgba(241,243,239,.55);}

/* the film mount: full-bleed behind the copy, owned by hero-film.js */
.hr-film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hr-film svg{display:block;width:100%;height:100%;}

/* ---------- 01 . film (markup is built by hero-film.js) ----------
   Two type languages: human intent (requirement prose) in the site
   sans, machine evidence (ids, paths, tests, commits, states) in the
   site mono. Structure uses the inactive structure tone; state color
   is only ever applied by the script as a var(--sem-*,fallback)
   string. Per-element opacities are driven by the script and stay at
   or below .55 for text. */
.rf-src{font-family:var(--mono);font-size:12.5px;fill:#A5AAA5;}
.rf-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:#A5AAA5;}
.rf-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;fill:#A5AAA5;}
.rf-state{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;}
.rf-diff{font-family:var(--mono);font-size:12px;fill:#A5AAA5;}
.rf-anno{font-family:var(--mono);font-size:10px;letter-spacing:.12em;fill:#A5AAA5;}
.rf-prose{font-family:var(--sans);font-size:15.5px;letter-spacing:.002em;fill:#F1F3EF;}
.rf-card{fill:rgba(9,12,9,.66);stroke:#3A403B;stroke-width:1.2;}
.rf-box{fill:rgba(9,12,9,.5);stroke:#3A403B;stroke-width:1.2;}
.rf-cst{fill:none;stroke-width:1.6;}
.rf-edge{fill:none;stroke:#4E564F;stroke-width:1.3;stroke-linecap:round;}
.rf-ve{fill:none;stroke-width:1.7;stroke-linecap:round;}
.rf-glow{fill:none;stroke-width:7;stroke-linecap:round;}
.rf-glowb{fill:none;stroke-width:9;}
.rf-check{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.rf-dot{stroke:none;}
.rf-on{fill:none;stroke:#3A403B;stroke-width:1.2;}
.rf-oe{fill:none;stroke:#3A403B;stroke-width:1.1;}
.rf-og{fill:none;stroke-width:1.6;}
.rf-ogw{fill:none;stroke-width:6;stroke-linecap:round;}
.rf-hdot{stroke:none;}
.rf-vig{pointer-events:none;}
.rf-grid{pointer-events:none;opacity:.05;}
.rf-crt{pointer-events:none;opacity:.07;}
.rf-drift{stroke:#A5AAA5;stroke-width:1;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hr-hero{padding:3.6rem 0 3rem;}
}