/* ==========================================================================
   FILE        assets/edgelit-hero.css
   UPLOAD TO   public_html/assets/edgelit-hero.css
   WHAT IT IS  The home page's hero, option D (spec 003, FR-1 to FR-12; RFC-0008, Jace's pictures and films
               of 25 October): the logo's page, see-through, the site's grid showing through, its unlit edges
               #2A4470 and its white edge drawn by edgelit-hero.js; the wordmark top left inside it; the top
               line; the heading in the blue card's light blue; Sign in blue, See the prices green, Watch the
               advert red, Meet the founder white; the build illustration in the page's bottom right on a
               computer; the player in its bottom left, or under the page on a phone; the atom behind.
               Loaded after edgelit.css and the player's sheets, on the home page only.
               Every rule starts "html body": the splash's sheets (aes-atom.css, edgelit-splash.css) must
               always win over anything here, and they do, being written the same way and loaded earlier
               for the splash's own elements, which nothing here names. "html body .hero-d #player" also
               outranks the chassis's "#player", so the player can sit in the page.
   VERSION     R36  (2026-10-28)
   CHANGES     R36 (spec 013, Jace, 28 October): Try it for free, white, in place of the green See the prices
               link (the white button's own rules were here already); hidden until edgelit.js shows it. (FR-15's
               round Ask EdgelitCV button shows on a phone and a computer, as Jace decided: no rule here.)
               R19: new, from the approved mock-up's styles (design/home-backlit/make.py and make_d.py).
   ========================================================================== */

/* The grid ground of the CV review's panel behind the whole page, so the see-through page shows it (FR-1). */
html body.home{background-color:#0A1220;background-image:
  linear-gradient(rgba(120,150,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,200,.07) 1px,transparent 1px);
  background-size:44px 44px,44px 44px}

/* The atom, drawn by edgelit-hero.js at its place on the page (FR-11): behind everything else, never in the way. */
html body canvas.atom{position:absolute;left:0;top:0;width:100%;height:100vh;z-index:0;pointer-events:none;opacity:.6}
html body.home main{position:relative;z-index:1}

/* ---------------- the page (FR-1) ---------------- */
html body .hero-d{position:relative}
html body .hero-d .doc{position:relative;display:flex;flex-direction:column;gap:18px;min-height:520px;background:transparent;
  padding:clamp(26px,4vw,56px) clamp(22px,4.5vw,72px) clamp(26px,3.6vw,48px) clamp(22px,4vw,56px)}
/* The page's outline, drawn in this SVG by the script; without JavaScript a plain unlit edge stands in for it. */
html body .hero-d .doc > svg.page{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html body .hero-d .doc:not(.drawn){outline:1.6px solid #2A4470}
html body .hero-d .doc > canvas.spark{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);pointer-events:none;z-index:3}
html body .hero-d .doc > .dtext{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px}

/* The slow white sweep across the page (FR-10), clipped to the page's own shape by the script. */
html body .hero-d .doc > .sweepbox{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
html body .hero-d .doc > .sweepbox::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(220,232,255,.13),transparent);animation:sweep 3.8s cubic-bezier(.45,0,.25,1) infinite}
@media (prefers-reduced-motion:reduce){html body .hero-d .doc > .sweepbox::before{animation:none;opacity:0}}

/* ---------------- the words (FR-3 to FR-6) ---------------- */
/* The wordmark and its horizon line on nothing: no glow, no ground (FR-3). */
html body .hero-d .doc .mark{display:block;width:min(560px,82%);height:auto;margin:0 0 6px -4px;filter:none;background:transparent}
/* The top line as the review panel's labels: bold Orbitron, a step larger (RFC-0001 answers 19 and 25). */
html body .hero-d .doc .eyebrow{font:800 .92rem/1.3 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:#C9D7EE;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
/* The heading in the blue card's light blue, lit in rgb(91,108,255) (FR-5). */
html body .hero-d .doc h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);max-width:22ch;color:#B9C2FF;
  text-shadow:0 0 18px rgba(91,108,255,.6),0 0 2px rgba(185,194,255,.5)}
html body .hero-d .doc .lede{font-size:1.12rem;color:#DCE5F3;max-width:60ch}
html body .hero-d .doc .small{color:#D3DDEE}

/* The buttons (FR-6): Sign in blue; R36 (spec 013): Try it for free white beside it, in place of the green See the
   prices link, written hidden and shown by edgelit.js while the server says it shows; Watch the advert red. Each
   keeps the class btn, so the mouseover atom and its sound still find it. */
html body .hero-d .doc .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
html body .hero-d .doc .cta .btn{color:#EEF1FF;border:1px solid rgba(150,162,255,.9);
  background:radial-gradient(120% 140% at 0% 0%,rgba(91,108,255,.55),transparent 70%),linear-gradient(180deg,rgba(60,74,190,.55),rgba(24,32,90,.6));
  box-shadow:0 0 0 1px rgba(91,108,255,.25),0 0 22px rgba(91,108,255,.45),inset 0 1px 0 rgba(255,255,255,.12)}
html body .hero-d .doc .cta .btn[hidden]{display:none}
html body .hero-d .doc .cta .btn.b-red{--bc:229,56,59;color:#FFC2C5}
html body .hero-d .doc .cta .btn.b-white{--bc:220,232,255;color:#FFFFFF}
html body .hero-d .doc .cta .btn.b-red,html body .hero-d .doc .cta .btn.b-white{border-color:rgba(var(--bc),.8);
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--bc),.22),transparent 70%),rgba(var(--bc),.06);
  box-shadow:0 0 0 1px rgba(var(--bc),.2),0 0 18px rgba(var(--bc),.35),inset 0 1px 0 rgba(255,255,255,.06)}
html body .hero-d .doc .cta .textlink{color:#9CF0C3;text-decoration-color:rgba(156,240,195,.6);text-shadow:0 0 12px rgba(47,210,126,.35)}
html body .hero-d .doc .vbtn svg{width:12px;height:12px;fill:currentColor;margin-right:10px}

/* ---------------- the build illustration and the player (FR-7, FR-8) ---------------- */
/* The hero's own copy of the build illustration shows on a computer only; on a phone the one in "How we check"
   stays where it is. edgelit.js lights both the same way. */
html body .hero-d .dbuild{display:none}
html body .hero-d #player{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none;margin:0;width:100%;max-width:460px;z-index:2}

@media (min-width:1000px){
  /* The words on the left, the build illustration in the page's bottom right corner. */
  html body .hero-d .doc{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(24px,3vw,44px);
    grid-template-rows:repeat(7,auto) 1fr;row-gap:14px;min-height:600px;padding:48px 64px 44px 56px}
  html body .hero-d .doc > .dtext{display:contents}
  html body .hero-d .doc > .dtext > *{grid-column:1;min-width:0;position:relative;z-index:2}
  html body .hero-d .doc .dtext > .mark{grid-row:1;width:min(470px,88%)}
  html body .hero-d .doc .dtext > .eyebrow{grid-row:2}
  html body .hero-d .doc .dtext > h1{grid-row:3;font-size:clamp(1.5rem,.8rem + 1.45vw,2.05rem);max-width:none;white-space:nowrap}
  html body .hero-d .doc .dtext > h1 > span{display:block}   /* one sentence, one line */
  html body .hero-d .doc .dtext > .lede{grid-row:4;font-size:1.02rem}
  html body .hero-d .doc .dtext > .cta{grid-row:5}
  html body .hero-d .doc .dtext > .cta.films{grid-row:6}
  html body .hero-d .doc .dtext > .small{grid-row:7;font-size:.82rem}
  html body .hero-d .doc .dtext > .dplayer{grid-row:8;align-self:end;justify-self:start;margin-top:18px}
  html body .hero-d .doc .cta .btn{min-height:40px;padding:0 16px;font-size:.88rem}
  html body .hero-d .doc .cta .textlink{font-size:.92rem}
  html body .hero-d .dbuild{display:block;grid-column:2;grid-row:1 / span 8;align-self:end;justify-self:end;width:100%;max-width:470px;
    min-width:0;margin-top:120px;position:relative;z-index:2}
  html body .hero-d .dbuild .build{background:rgba(14,26,44,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  html body .hero-d .dbuild .stages li{font-size:.86rem;padding:10px 12px 10px 38px;background:rgba(27,40,64,.6)}
  html body .hero-d .dbuild .key{font-size:.74rem}
  html body .hero-d .dbuild .report{font-size:.84rem}
  /* The hero holds the build illustration on a computer, so "How we check" keeps its words alone. */
  html body #check .check{grid-template-columns:minmax(0,1fr)}
  html body #check .check > #build{display:none}
}

/* ---------------- a phone (FR-1, FR-4, FR-8, FR-12, NFR-5) ---------------- */
/* The top line breaks after "résumés", without the dot (FR-4). */
@media (max-width:700px){
  html body .hero-d .doc .eyebrow .eb-sep{display:none}
  html body .hero-d .doc .eyebrow .eb-2{display:block}
}
/* The logo and EDGELIT CV top left on a phone as on a computer (FR-12); the menu's document stays on the right. */
@media (max-width:900px){html body.home header.nav .brand img{height:34px;width:auto}}
@media (max-width:720px){
  /* The player under the upright page, as wide as the page, clear of its foot (FR-8). The room it needs is
     measured by the script (--pl-h). */
  html body .hero-d{padding-bottom:var(--pl-h,220px)}
  html body .hero-d .doc .dtext > .dplayer{position:absolute;top:calc(100% + clamp(26px,3.6vw,48px) + 26px);
    left:calc(-1 * clamp(22px,4vw,56px));right:calc(-1 * clamp(22px,4.5vw,72px));width:auto}
  html body .hero-d #player{max-width:100%}
  html body .hero-d .doc{min-height:0;padding-top:40px}
  html body .hero-d .doc .mark{width:66%;margin:0 0 24px -4px}   /* top left, clear of the folded corner */
  /* Every control at least 44 px tall to a finger (NFR-5). */
  html body .hero-d .doc .cta .textlink{display:inline-flex;align-items:center;min-height:44px}
  html body .hero-d .doc .cta .btn{min-height:46px}
  html body .hero-d #player button{min-width:44px;min-height:44px}
  /* The chassis's SKIN button lives in its 16 px title bar; on a phone the bar grows to hold it at 44 px. */
  html body .hero-d #player .aes-wamp-title{height:44px;font-size:10px}
  html body .hero-d #player .aes-skinbar-toggle{align-self:stretch;font-size:10px}
}

/* ---------------- the sections below the hero (the approved option D pictures) ---------------- */
/* Every label above a heading on the home page as the review panel's: bold Orbitron, a step larger
   (RFC-0001 answers 19 and 25). The sections' cards come from edgelit-backlit.css. */
html body.home main .eyebrow{font:800 .92rem/1.3 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:#C9D7EE;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}