/** * RSI Toolkit — Project Panels. * * Design from Figma nodes 10869:506 / 10915:508 / 10915:535 / 10915:562: a * full-bleed photograph, a dark gradient over it, and content on the reading edge * at the foot — brand mark, title, paragraph, glass play + "visit site" pill. * * ── The motion, measured off the reference ────────────────────────────────── * * The client's reference is floema.com/en. Read off that page rather than * guessed, and every number below came from it: * * 1. ONE sticky stage, pinned for the whole section. Its `.collections-wrapper` * holds position:sticky and stays at top 0 for all 8100px of the section. * The panels themselves never translate — measured `transform: none` on every * one of them at every scroll position. * * 2. Each photograph is revealed by a CLIP CURTAIN wiping upward from the * bottom: `clip-path: inset(P% 0px 0px)` with P driven from 100 → 0 by * scroll. That is what "loads from the bottom" actually is on that site — * not a panel sliding over the one before, and there is no shadow anywhere * on it. Measured rate: 4.27% per 100px of scroll, so ~2340px per panel, * against a 1440px slot — consecutive curtains deliberately overlap. * * 3. Inside the curtain the image drifts up and grows a little the whole time * it is on screen: translateY 0 → -180px with scale 1 → 1.03, both capped. * Measured on three panels at once (-30/-120/-180 with 1.005/1.02/1.03). * * 4. The line is ONE full-viewport-width hairline, rgba(255,255,255,.2), with a * fill inside it whose WIDTH runs 0% → 100% linearly across the entire * section from the leading edge. Continuous, not stepped, and not a marker * that hops between numbers. * * 5. The number does not travel along the line. All of them sit stacked in one * place on the gutter and simply swap, with a small vertical roll on the * change (measured mid-swap as scaleY 1.0027 / translateY -0.14px). * * Logical properties throughout, so Arabic mirrors with no rtl.css entry — the * fill grows from the right in Arabic because it is anchored inline-start. * * Nothing is hidden unless carries `rsi-anim`, which an inline head * snippet sets and a failsafe removes if the scripts never start: with no JS this * is a stack of readable photographs, never an empty black box. */ /* ==================== THE HEADER ON THIS PAGE ONLY ======================= */ /* * The language switch is invisible on the Projects page, and it is not this * page's fault so much as its background. * * The theme's own Custom CSS (an inline