/* ═══════════════════════════════════════════════════════════════════════════ MARBLELENS V3 · ACT I — DEVELOP / HERO Three sheets in one grid cell, one geometry: .hero-draft the graphite working drawing (aria-hidden, inert) .hero-live THE real DOM — the only accessible copy; revealed left of the development boundary by a soft mask .hero-develop the active transformation, clipped to the lens circle, slightly magnified (aria-hidden, inert) REGISTRATION IS STRUCTURAL, NOT TUNED. All three sheets share the same layout classes; draft/develop modifiers may change ink, texture and decoration but never metrics (no font, size, spacing or border-width changes — draft boxes use transparent backgrounds and the SAME border width, restyled dashed). If the draft needs a mark the live page doesn't have, it goes in .draft-marks, an absolutely positioned overlay that cannot move the layout. The development boundary is `--reveal` (px, on .hero-pin), written by js/hero.js from the pure model. The live sheet is masked to the LEFT of it with a 36px feather that always sits under the lens glass during the sweep. `.is-live` removes the mask entirely — the finished page is a normal page, not a masked one. NO-JS AND REDUCED MOTION LAND HERE TOO: without html.js the mask never applies and the live sheet simply IS the page. ═══════════════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { overflow-x: clip; color: var(--ink-2); font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } /* ── travel + pin ───────────────────────────────────────────────────────── The hero pins for one viewport plus the SUNRISE scrub travel. Scroll is the specimen's clock (owner-locked: scroll = time scrub), so the travel below the pin is what a visitor spends driving the sunrise. */ .hero-travel { height: calc(100vh + var(--sunrise-travel, 120vh)); height: calc(100svh + var(--sunrise-travel, 120vh)); } .hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } /* reduced motion / no sequence: the travel collapses — no dead screens */ .is-static .hero-travel, .no-seq .hero-travel { height: 100vh; height: 100svh; } /* ── the three sheets ── */ .hero-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; } .hero-draft { z-index: 1; } .hero-live { z-index: 2; } .hero-develop { z-index: 3; visibility: hidden; /* the developer bath: warm, slightly soft, not yet committed */ filter: sepia(0.24) saturate(1.28) contrast(0.93) brightness(1.03); will-change: clip-path, transform; } .hero-draft, .hero-develop { pointer-events: none; } /* the development boundary — only under html.js, so a scriptless visit gets the finished page untouched */ html.js .hero-pin:not(.is-live) .hero-live { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--reveal, 0px) - 36px), transparent calc(var(--reveal, 0px) + 36px)); mask-image: linear-gradient(90deg, #000 calc(var(--reveal, 0px) - 36px), transparent calc(var(--reveal, 0px) + 36px)); pointer-events: none; } /* ── header ──────────────────────────────────────────────────────────────── Real
/