/* ============================================================ 10 · Agency Intro — "Agency is the oldest tool we have." Built from Board Specs/landing-09-agency-intro.md: pinned, 3 scroll steps, steps(1,end) for the copy and star — those changes are cuts (§4.2). Copy arrives one line at a time; the acid star only exists in step 3, full size, no scale-in. The two hands travel toward each other continuously (deliberate divergence from the spec's step cuts — Neena, 27 Aug 2026). The hands never touch — the gap is the point. Deliberate divergence (Neena, 24 Aug 2026): in steps 2–3 the top hand's forearm passes behind the middle nav links. Unavoidable — the bottom hand anchors to the bottom-right corner and the tips meet mid-right, so the arm must cross the links' zone. The nav renders on top and stays clickable. Don't "fix" this. ============================================================ */ #aintro-act{height:300vh} #aintro{--chapter-bg:var(--coral);color:var(--cream)} /* board-fit contain; the bars are coral so the frame is seamless */ /* the 1440×900 frame IS the viewport — the header band is drawn inside its top 120px, so it renders full-width from the top-left and the real nav rides over the band (Julian, 25 Aug 2026) */ #aintro .board{position:absolute;left:50%;top:0;transform:translateX(-50%); width:100vw;aspect-ratio:1440/900;overflow:hidden; container-type:size;container-name:b} #aintro .board > *{position:absolute} /* the words' layer: the board's geometry, so nothing moved when the copy left the board (Julian, 6 Sep 2026); .copy dissolves here */ #aintro .text{position:absolute;left:50%;top:0;transform:translateX(-50%); width:100vw;aspect-ratio:1440/900;pointer-events:none; container-type:size;container-name:b;z-index:3} #aintro .copy{display:contents} #aintro .text > .copy > *{position:absolute} #aintro h2{left:6.944%;top:27.5%;width:44%; font-family:var(--display);font-weight:900; font-size:5.2cqw;line-height:1.12;letter-spacing:-.015em} #aintro .l2{left:6.944%;top:59.58%;width:30%; font-size:2.8cqw;line-height:1.2;font-weight:500;visibility:hidden} /* 32.917% = 474 board px: the 27 Aug 2026 body breaks after the colon — "…reaches alone: / a business that keeps transforming itself." The window where the real Deck AND the Archivo fallback both break there is [472, 480), so the font swap can't re-wrap it. Tight window — re-measure if the copy changes at all (Julian, 27 Aug 2026) */ #aintro .body{left:6.944%;top:69.08%;width:32.917%; font-size:1.667cqw;line-height:1.45;font-weight:400;visibility:hidden} /* body Regular (brand book, 10 Sep 2026); the board read as Deck Medium */ /* the hands are one drawing each; the step is a reposition, not a move */ #aintro .hand{pointer-events:none;z-index:2} #aintro .hand img{display:block;width:100%} #aintro .hand-top{width:56%;transform-origin:50% 50%;transform:rotate(62deg)} #aintro .hand-bottom{width:56%;transform-origin:50% 50%;transform:rotate(45deg)} /* hand positions — the left/top anchors are the START of the travel (the old step-1 cuts). The approach is continuous (Neena, 27 Aug 2026, diverging from the spec's step cuts): the JS scrubs each hand from here to its old step-2/3 position over p ∈ [0, 2/3] — a +12cqw/+25cqh translate and a 62→50deg tilt for the top hand, −12cqw/−12cqh for the bottom — arriving exactly on the body/star beat, then holding. Travel is linear and 1:1 with scroll (§4.1). Board: the top hand dangles in from the top edge; the bottom hand's index points up-left (Creation-of-Adam) from the bottom-right corner. Offsets keep each asset's cut edge off-board throughout. The end positions preserve the fingertip gap — the hands never touch. */ #aintro .hand-top{left:14.4%;top:-39.6%} #aintro .hand-bottom{left:70.4%;top:73.6%} #aintro[data-step="2"] .l2, #aintro[data-step="3"] .l2{visibility:visible} #aintro[data-step="3"] .body{visibility:visible} /* own layer — pinned-text wobble, see 02-hero.css */ #aintro h2,#aintro .l2,#aintro .body{will-change:transform} /* the star exists only in step 3, at full size, bridging the fingertip gap BEHIND both hands — the bottom index all but touches its lower point (board frame 3) */ #aintro .star{left:63%;top:37.7%;width:13%;z-index:1;visibility:hidden; transform:rotate(-74deg)} #aintro[data-step="3"] .star{visibility:visible} /* reduced motion: step 3 only (spec fallback) */ @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){#aintro-act{height:auto !important}} /* the chapter is one viewport tall and the frame fits inside it: full-width down to a 16:10 window, height-fit and centred on shorter, wider ones (laptops) — the coral ground makes the gutters seamless (Fred, 28 Aug 2026; supersedes the 62.5vw frame, Julian, 25 Aug 2026) */ @media(min-width:761px) and (not ((pointer:fine) and (max-height:560px))){ #aintro .board,#aintro .text{width:min(100vw,160svh); /* the chapter clips at the real screen edge instead, so the bottom hand still bleeds off the true screen corner when height-fit */ overflow:visible} } /* ---- mobile (§3 stacked flow; Julian, 6 Sep 2026) ---- The 1440×900 board goes as the frame (at 375 it put 10px body copy in a 234px strip). Two bands: the copy at the top inside --m — the three lines still cut in on the same steps — and the hands' scene centred in whatever height is left. The scene IS the board, 130vw wide so the hands keep their size, nudged so the fingertip gap (board x ~66%, y ~42%) sits mid-band; the hands' travel is in board units (cqw/cqh of .board) and is untouched. Type carries the board's height ratios (the mobile type rule): the headline block is 28% of the screen (3 × 75 × 1.12 = 252 of 900), line 2 and the body keep their ratios to it, with floors — set by fitMobile() in the JS from measured text, so new copy can't break it. The drawn headline breaks are hidden here; it wraps in the column. Runway 220vh (desktop 300). */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #aintro-act{height:220vh} #aintro{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:100%; padding:max(96px,11svh) 0 0} #aintro .text{display:contents} /* the copy block is a coral panel over the scene: on short screens the top hand's wrist would otherwise run behind the body line — it emerges from under the block instead, as the desktop's hand enters from the frame's top edge (the stats headline's cap, same device) */ #aintro .copy{display:block;position:relative;grid-area:1/1;margin:0;padding:0 var(--m) 22px; background:var(--coral);z-index:3} #aintro .text > .copy > *{position:static;width:auto} #aintro h2{font-size:clamp(30px,11vw,48px);line-height:1.08} /* size: the JS's */ #aintro h2 br{display:none} #aintro .l2{margin-top:.6em;font-size:clamp(20px,5.9vw,26px)} #aintro .body{margin-top:.8em;font-size:17px;line-height:1.4;max-width:30em} /* the scene turns 12° anticlockwise: the approach reads a little more horizontal, and the top hand's wrist — which rose right under the body line at the end of the travel — sits lower, giving the "Together…" line its room (Julian, 6 Sep 2026). Board units, the hands' own travel and the star are untouched; the frame is coral to the edges so the turn shows nothing. */ /* 150vw (Julian, 26 Sep 2026; was 130): at 130 the top hand's forearm, which the drawing ends in a straight cut, swung its end into the screen's left edge by the end of the travel (and the 112vw below sliced it flat under the copy panel). Larger, the cut stays off the left edge on every phone; the scene scales about its centre, so the fingertip gap stays mid-band. */ #aintro .board{position:relative;grid-area:2/1;left:auto;top:auto; width:150vw;justify-self:center;align-self:center;overflow:visible; transform:translate(-16%,10%) rotate(-12deg)} /* the fingertip gap to mid-band */ } /* short phones: a smaller scene so the hands stay clear of the copy */ @media(max-width:760px) and (max-height:760px),(pointer:fine) and (max-height:560px){ #aintro{padding-top:max(84px,10svh)} #aintro .board{width:150vw} /* was 112vw: see the 150vw note above */ } /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #aintro h2,#aintro .l2,#aintro .body{white-space:pre-line} /* 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){ #aintro .copy h2{font-size:4.7rem!important;line-height:1.05!important} #aintro .copy .l2{font-size:2.5rem!important;line-height:1.15!important} #aintro .copy .body{font-size:1.5rem!important;line-height:1.4!important} } /* HIGH CONTRAST (Julian, 25 Sep 2026): with (the switch in the footer, the phone menu, or the privacy page; or the device's increase-contrast setting) the light type on this section's coloured ground turns ink. Nothing else changes. */ html[data-contrast="high"] #aintro{color:var(--ink)}