/* ========================================================================== STONEGRAPH — the motion layer -------------------------------------------------------------------------- Five effects that sit on top of what site.js already does. They are additive on purpose: site.js owns the reveals (.reveal, .rise-mask, the spine, the counters) and nothing here touches those properties on those elements. 1. the transition between pages 2. photographs settling — a slow scale-down as they arrive 3. a shallow parallax drift on those same photographs 4. buttons that lean toward the cursor 5. a soft light following the pointer across the dark bands EVERY ONE OF THEM STARTS OFF. The rules below only bite once motion.js has added `motion-on` to , for the same reason site.js gates its reveals: a stylesheet that hides or moves content on its own leaves the page broken if the script never runs, and a script that never runs is a real state on a slow or blocked network. Anyone who has asked their system for less motion gets none of it — the media query below turns the whole layer off rather than softening it. ========================================================================== */ /* ---- 1. between pages ------------------------------------------------- A sheet of the page's own sand colour, not a white flash. It covers the viewport while the next document is fetched and lifts as it paints, so a navigation reads as one room becoming another rather than as a blink. */ .pt-veil { position: fixed; inset: 0; z-index: 9998; background: var(--sand, #EFEADC); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease, cubic-bezier(.16,1,.3,1)), visibility 0s .2s; } .motion-on .pt-veil.is-out { opacity: 1; visibility: visible; /* Leaving is quicker than arriving: the reader asked for this, and a slow fade on the way out is just latency they can see. */ transition: opacity .16s ease-out, visibility 0s; } /* There is no arrival state. See the note in motion.js: a veil that covers the document until a callback removes it can only fail toward a blank page, and this one covers everything. It goes up on the way out and never on the way in. */ /* ---- 2 & 3. photographs ---------------------------------------------- One transform carries both effects. Two rules writing `transform` on the same element means the later one wins and the earlier is simply gone, which is how the drift on the homepage's plates was lost once already. --ms is the settle (1.06 down to 1), --mp is the parallax offset. motion.js writes both; the element composites once. */ .motion-on .m-shot img, .motion-on .m-shot video { transform: translate3d(0, var(--mp, 0px), 0) scale(var(--ms, 1)); will-change: transform; } .motion-on .m-shot--settling img, .motion-on .m-shot--settling video { transition: transform 1.8s var(--ease, cubic-bezier(.16,1,.3,1)); } /* ---- 4. buttons that lean -------------------------------------------- Two or three pixels. Enough that the button feels like it noticed the cursor, not so much that it moves out from under a click. The translation is set from JS as --mx/--my; the scale is here so a button that is being pressed still reads as pressed. */ .motion-on .btn { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .5s var(--ease, cubic-bezier(.16,1,.3,1)), background-color .4s ease, color .4s ease, border-color .4s ease; } .motion-on .btn.is-pulling { transition: transform .18s ease-out; } .motion-on .btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.98); } /* ---- 5. light on the dark bands -------------------------------------- A wide, very low-contrast wash that follows the pointer. On near-black, 4% of warm white is the difference between a flat panel and a surface with a light source somewhere in the room. */ .motion-on .band--dark { position: relative; } .motion-on .band--dark > .m-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease, cubic-bezier(.16,1,.3,1)); background: radial-gradient( 420px circle at var(--gx, 50%) var(--gy, 50%), rgba(217, 119, 87, .13), rgba(217, 119, 87, .05) 42%, transparent 72%); } .motion-on .band--dark.is-lit > .m-glow { opacity: 1; } /* The wash is a background layer; everything written on the band has to stay above it. .wrap is the content box on every band on this site. */ .motion-on .band--dark > .wrap { position: relative; z-index: 1; } /* ---- the opt-out ------------------------------------------------------ Not a reduced version — none of it. The reveals site.js runs are already gated the same way, so a reader who has asked for stillness gets a page that is simply still. */ @media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) { /* OFF by the motion policy — see motion-always.css */ .motion-on .m-shot img, .motion-on .m-shot video { transform: none; transition: none; } .motion-on .btn { transform: none; } .pt-veil { display: none; } .motion-on .band--dark > .m-glow { display: none; } }