/* ═══════════════════════════════════════════════════════════════════════════ rzv.studio — mission.css (/mission/ only) ONE PINNED STAGE (#mission-stage, 9 Sep) and then the page continues. Four layers inside the stage, crossed over in order by mission.js's single master scrub: (a) the hero, (b) the purpose row — head, 3:4 portrait, belief, three equal columns, both text columns centred, (c) the personal-projects line, (d) the ring field — a pearl at the centre, concentric rings of discs (6 / 12 / 12 / 12, phones 6 / 12 / 14: projects, mockup shots and about a third blank, tapering outward) that turn in alternate directions and bloom on scroll. Then the project modal (the .jm shell from work.css, a round logo head) and, below the pin, the three giving-back columns. ── Three states, one markup ────────────────────────────────────────────── STATIC (no JS): four blocks in document order, projects in a centred row. .mp-live (JS laid the rings out): seeds at their measured seats, fully visible, the rings spinning — still four blocks in document order. .ms-scrub (GSAP + ScrollTrigger + motion on): a 640vh runway, one sticky view under the header (top:var(--header-h), 100vh less that band), the four layers stacked and scrubbed. Nothing starts hidden. ═══════════════════════════════════════════════════════════════════════ */ /* ── hero 1: the mission line IS the hero ──────────────────────────────── .page-hero / .page-title / .page-lede are work.css's; only the size moves: the lede takes .range-line's display clamp (form.css). */ .mi-lede{max-width:24ch;font-size:var(--fs-statement);letter-spacing:-0.04em;line-height:1.06} /* 9 Sep, his brief: "center the hero content". Same treatment the service and contact pages take — the wrap centres its text, the lede centres its box. */ .mi-hero .wrap{text-align:center} .mi-lede{margin-inline:auto} /* §THE GLASS — the home hero's half-star, at rest, on THE VIEW rather than the hero (9 Sep, his brief: "keep 3d glass object all the way till project circles"). lava-hero.js's RZV.lavaStill mounts its canvas here (data-lava-still) as soon as this host has a real box, so display:none until the stage is scrubbed IS the gate: no .ms-scrub (no JS, no GSAP, motion off, reduced motion) and nothing mounts. It never fades — mission.js's master morphs it to a sphere on the field's centre instead — and never takes a pointer, so everything under it stays live. THE STACK (9 Sep, revised): the object is at the BACK (1); the purpose row and the field sit over it (2) — he reversed "3 columns section goes behind the glass" once he saw it — and the hero and the personal-projects line are over both (3), so their words stay the page's own type. */ .ms-glass{display:none} .ms-scrub .ms-glass{display:block;position:absolute;inset:0;z-index:1;pointer-events:none} /* 9 Sep: back BEHIND the columns */ .ms-scrub .ms-layer--tri,.ms-scrub .ms-layer--field{z-index:2} .ms-scrub .ms-layer--hero,.ms-scrub .ms-layer--line{z-index:3} /* Line masks — form.css's .rw / .rw-i word recipe, restated block-level for the smaller copy, which rises a whole LINE at a time (mission.js splitLines). */ .rl{display:block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em; -webkit-clip-path:inset(0);clip-path:inset(0)} .rl-i{display:block;will-change:transform} /* ── THE STAGE: one runway, one sticky view, four layers ───────────────── 9 Sep, his brief: "one pinned sequence: hero full screen - scroll driven words anim out > 3 columns animate in > 3 columns anims out > line about personal projects anims in > anims out > project circles anim in > hold > pin released rest of page continues." .ms-run is the runway (640vh); .ms-fv is the ONE sticky view — top at the header's band, standing 100vh less that band — so the stage holds still for 540vh of scroll while mission.js's single master ScrollTrigger crosses the four .ms-layer children over in order. Sticky, not ScrollTrigger.pin — on a coarse pointer the page scrolls inside #scroller and a pin-spacer there fights the shell (RZV.stShell points GSAP at that scroller either way). .ms-scrub is added by mission.js only once GSAP + ScrollTrigger + motion are confirmed. Without it — no JS, no GSAP, motion off, reduced motion — none of these rules apply: the four layers are ordinary blocks in document order, nothing is pinned and nothing is hidden. */ .ms-run{position:relative} /* 9 Sep: no forced ground — the page's own backdrop shows through */ .ms-fv{position:relative} .ms-layer{position:relative} /* IN FLOW ONLY (no .ms-scrub): the layers are four blocks that need their own breathing room — the hero has .page-hero's, these two had .mp-view's. */ .ms-layer--tri,.ms-layer--line{padding:clamp(48px,7vh,104px) 0} .ms-scrub .ms-run{height:calc(var(--vh,1vh) * 720)} /* 9 Sep, Haseeb: "pinned section hasn't properly compensated the header so there's an extra small scroll bump." The view stuck at top 0 and stood a full 100vh, so the header's band was counted twice — the stage had to travel its own height before the pin took, and that travel is the bump. It sticks BELOW the header now and stands exactly the space that leaves. */ .ms-scrub .ms-fv{position:sticky;top:var(--header-h,72px); height:calc(var(--vh,1vh) * 100 - var(--header-h,72px));overflow:hidden} .ms-scrub .ms-layer{position:absolute;inset:0;margin:0; padding:clamp(20px,3vh,40px) 0 44px; /* 9 Sep: the view already sits below the header */ display:flex;flex-direction:column;align-items:center;justify-content:center; pointer-events:none;will-change:transform,opacity} /* the wrap is the only thing that wants the layer's full width — the field layer's child is sized in px by mission.js and must not be stretched. */ .ms-scrub .ms-layer > .wrap{width:100%} .ms-scrub .ms-layer--field{padding:0 var(--gutter);pointer-events:auto} /* ── hero 2: three equal columns — head · portrait · belief ─────────────── 9 Sep, his brief: "1/3 1/3 1/3; striving for a greater purpose, image of me portraits aspect ratio parallax on scroll, my core beliefs". The full-bleed silhouette behind the copy is retired with this layout: the same file is now a 3:4 portrait in the middle third, sized 118% of its frame and centred, so mission.js can slide it ±9% of the frame without ever showing an edge. No JS, motion off, reduced motion: it simply sits centred. */ .mp-copy{position:relative;z-index:2} .mp-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px);align-items:center} /* 9 Sep, his follow-up: "make both text columns centered". The portrait between them is untouched. */ .mp-head{margin:0 auto;max-width:14ch;font-size:var(--fs-xl);text-align:center} .mp-col{margin:0;color:var(--text);text-align:center} .mp-portrait{margin:0;min-width:0} /* Pinned, the row has exactly one viewport to live in: the portrait can never be taller than what the stage leaves it (3:4, so width = 0.75 × that). width:100% is load-bearing: margin-inline:auto alone makes a grid item shrink-to-fit, and a figure whose only child is width:100% collapses. */ .ms-scrub .mp-portrait{width:100%;margin-inline:auto; /* 9 Sep: the circle is a third smaller than the space it was taking. */ max-width:min(67%, calc((var(--vh,1vh) * 100 - var(--header-h,72px) - 150px) * 0.50))} /* 9 Sep, Haseeb: "make my image cropped in a circle." A square frame with a full radius — the parallax still runs inside it, the circle just clips more of it. */ .mp-portrait-frame{position:relative;display:block;width:100%;aspect-ratio:1 / 1; overflow:hidden;border-radius:50%;border:1px solid var(--border); background:var(--bg-2)} .mp-portrait-img{position:absolute;inset:0;display:block; width:100%;height:100%;object-fit:cover;object-position:50% 32%;will-change:transform} /* ── the field ──────────────────────────────────────────────────────────── STATIC (no JS): the label, then the six project circles in a centred row; shots stay hidden — a ring needs a measured radius. mission.js adds .mp-live once it has laid the seeds out (every seed gets left/top/size in px from the field's centre; each ring