/* ============================================================ 02 · Hero — "the thing you already are gets left behind" Ported from 01_Hero/agency-hero-final.html. Spec: 01_Hero/Specs.md · Board Specs/landing-01-hero.md Prototype's fixed scene + runway became .act > .chapter (§4.9) — same maths, composes with the page. ============================================================ */ #hero-act{height:380vh} #hero{--chapter-bg:var(--cream)} /* max-width in em so the drawn 3-line break ("AI transformation / has lost sight of / its goal.") holds at every size now Aqva renders: the wrap window in Aqva 900 with the -.02em tracking is [8.48em, 8.76em) — measured 25 Aug 2026. */ #hero .h1{position:absolute;left:var(--m);top:19vh;z-index:8;max-width:min(74vw,8.6em); font-family:var(--display);font-size:clamp(40px,7.2vw,108px);line-height:1;letter-spacing:-.015em} /* Aqva at the brand book's −1.5% (was −2%, 10 Sep 2026) */ /* The board draws line 2 in the DECK face (the §3 table said display — the board wins, §5). Clamp restored to the spec's (26px,4.1vw,60px) now the real faces render; Aqva-era retune (24 Aug) no longer applies. Its drawn 3-line break is semantic, not width-driven — hero.js inserts the two break points. */ #hero .h2{position:absolute;left:var(--m);bottom:8vh;z-index:8;max-width:min(48vw,700px); color:var(--cobalt); font-family:var(--deck-display);font-weight:500;font-size:clamp(26px,4.1vw,60px);line-height:1.08;letter-spacing:-.02em} /* board draws it Semibold (A/B vs crop, 25 Aug 2026). ~48-60px at rest — Forma's Display optical size, not Deck (19 Sep 2026, DJR optical-size pass) */ /* every character is its own object, so it can be knocked off the line */ #hero .ch{display:inline-block;will-change:transform} #hero .car-rig{position:absolute;bottom:1vh;left:0;z-index:8; width:clamp(360px,52vw,780px);aspect-ratio:820/319;transform-origin:50% 100%} #hero .car-rig img.body{width:100%;display:block} #hero .car-rig img.wheel{position:absolute;aspect-ratio:1;will-change:transform} #hero .w1{left:15.0%;top:58.8%;width:15.5%} #hero .w2{left:76.4%;top:58.1%;width:16.1%} /* fixed at body level, above the opaque nav (z 120 > 100): inside the sticky chapter its z-index was trapped below the bar — sticky creates a stacking context (Julian, 26 Aug 2026). Off-screen before the pin ends, so it never lingers over later sections. */ .hero-plane{position:fixed;left:0;top:0;width:clamp(420px,68vw,1180px);z-index:120;opacity:0; pointer-events:none} /* divergence from the Specs.md text ("Right --m"): the board crop draws line 3 on the LEFT margin, aligned with line 1 — and the board wins (§5). Left-anchored per Julian, 24 Aug 2026. */ /* size: the Specs.md text says clamp(34,5.6vw,88) but the board's final frame sets line 3 at the SAME size as line 1 (line pitch identical, ~108px) — board wins (§5; Julian, 25 Aug 2026). Width in em so the drawn 3-line break holds: "something you've" needs ≥8.6em with the tracking; 66vw carries the same measure below the clamp ceiling. */ #hero .h3{position:absolute;z-index:16;left:var(--m);bottom:9vh;width:min(66vw,9.2em); text-align:left;opacity:0; font-family:var(--display);font-size:clamp(40px,7.2vw,108px);line-height:1;letter-spacing:-.015em} /* Aqva at the brand book's −1.5% (was −2%, 10 Sep 2026) */ #hero .h3.on{opacity:1} #hero .hint{position:absolute;right:var(--m);bottom:34px;z-index:30;font-family:var(--mono); font-size:11px;letter-spacing:.16em;text-transform:uppercase} /* full-strength ink (a11y pass, 25 Sep 2026; was 40%, 2.45:1) */ /* own compositor layer: un-layered text in a pinned (sticky) chapter is re-snapped to device pixels every frame during fractional trackpad scrolls in Chrome — it visibly wobbles while the layered artwork holds (Julian, 27 Aug 2026; same fix in every pinned section) */ #hero .h1,#hero .h2,#hero .h3,#hero .hint{will-change:transform} /* ---- mobile (§3; Julian, 6 Sep 2026 — replaces the first pass) ---- The same three beats, recomposed for a tall frame: · line 2 sits IN the car's lane (the car's body spans ~6–22svh; the line's three rows sit inside that), so the Beetle crosses in front of it and the words are there only where it has already been — as on the board, where the two overlap at the foot of the frame. The first pass had the line 24vh up, clear of the car, so nothing was uncovered. hero.js runs the car fully off the right edge here and measures the reveal against the line's own box. · line 1 at the top (17svh) at 11vw — "transformation" caps it; line 2 in the car's lane at the foot at 7vw, three rows as drawn; line 3 at the foot. The gap between lines 1 and 2 is the phone's proportions, not a choice (a 12.5vw line 1 closed 22px of it; a foot-anchored line 1 read as a different composition). (A first cut put line 1 at 17svh and line 3 in its place — the gap between lines 1 and 2 read as two separate things. Julian, 6 Sep 2026.) · svh, not vh: Safari's toolbar collapses as you scroll and vh would move every line with it. · the runway is 260vh (desktop 380): the beats keep their windows, the thumb travels 30% less. */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #hero-act{height:260vh} /* 10.3vw (was 11): "AI transformation" on one line. Measured at 375: the pair needs the 88vw measure at 10.4vw or less, and below 10.2vw "its" climbs to line 2 and leaves "goal." alone — a [10.2, 10.4] window; everything here is vw, so the breaks hold across phone widths. Re-measure if the copy or the face changes (Fred, 10 Sep 2026) */ #hero .h1{font-size:10.3vw;max-width:88vw;top:17svh} /* line 2 at 7vw, three rows as drawn, inside the car's lane (the car is 92vw × 319/820 = 36vw tall from 6svh; the line's rows sit within it). A 10.5vw / four-row cut matched line 3's block height but read too big (Julian, 6 Sep 2026) */ #hero .h2{font-family:var(--deck);font-size:7vw;max-width:88vw;bottom:calc(6svh + 5vw)} /* phone size drops under Display's 48px floor — back to Deck (19 Sep 2026) */ #hero .h3{font-size:11vw;width:min(88vw,9.2em);bottom:9svh} #hero .car-rig{width:92vw;bottom:6svh} #hero .hint{bottom:max(18px,2.4svh)} .hero-plane{width:150vw} } /* reduced motion: the runway collapses and line 3 is there from the start (§4) */ @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #hero-act{height:auto !important} #hero .h3{opacity:1} } /* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer at a narrow or short window — where 200% browser zoom lands — this section is in its stacked, still layout, and its type is set at the size the board draws it, in rem, so zoom enlarges it (the phone sizes above are fitted to the screen and would cancel the zoom). !important beats the sizes the js writes inline; utils.js zoomFit() then eases back any line whose longest word would run past the edge. */ @media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #hero .h1{font-size:6.5rem!important;line-height:1!important} #hero .h2{font-size:3.7rem!important;line-height:1.08!important} #hero .h3{font-size:6.5rem!important;line-height:1!important} /* the hero as a plain stack: all three lines in order, one even gap apart, no car — the still state's conclusion drops lines 1 and 2 (fallen letters), but a zoomed reader must get the whole argument */ #hero{display:flex!important;flex-direction:column;gap:3rem;height:auto!important;min-height:0; padding:max(96px,11svh) var(--m) 6svh!important} #hero .h1,#hero .h2,#hero .h3{position:static!important;inset:auto!important;transform:none!important; width:auto!important;max-width:none!important;opacity:1!important;margin:0!important} #hero .h1 .ch,#hero .h2 .ch{transform:none!important;opacity:1!important} #hero .h3{order:3} #hero .car-rig{display:none!important} /* without the plane's run it's a parked car (Julian, 25 Sep 2026) */ #hero .hint,.hero-plane{display:none!important} /* a word never breaks inside itself: too wide, it's eased back whole by zoomFit() */ #hero .h1 > span,#hero .h2 > span{white-space:nowrap} }