/* ═══════════════════════════════════════════════════════════════════════════ rzv.studio — glass.css (GLASS agent) Everything the raymarched glass solids need from CSS, which is almost nothing: somewhere to hang a canvas, a fade-in, a type scale, and a CSS-only fallback for when WebGL2 is not there. The shapes, the motion and every pixel of the objects themselves are glass.js's business. Load AFTER base.css (it reads --ease, --text and the pearl's gradient stack). Pairs with assets/js/glass.js. THE CANVAS IS TRANSPARENT. It composites over the live document rather than painting its own ground, which is why almost every rule that used to be here is gone: no feathering an opaque box into the page, no hiding the DOM text behind a timed cross-fade, no second copy of the aurora. The solid covers what is underneath it exactly where it is, and nowhere else. TRAP 1 (base.css) is respected by omission: nothing here uses backdrop-filter and nothing here uses mix-blend-mode, so there is no blend group for a blurred ancestor to isolate into a black box on iOS. FIVE PATHS, and only the first three are used by any page today: · PAGE LENS `canvas.rzv-glass--page` — one canvas fixed over the whole viewport at z 400, following the cursor. Every page but the home page. Needs no host rule at all; it hangs off and positions itself. · SECTION SOLID `.glass-sect > canvas.rzv-glass--sect` — one per content section, a different shape each. The home page, and every page where there is no cursor to follow. glass.js adds the class; the host is a real
and gets nothing else done to it. · HERO SOLID `.rzv-glass--hero` — a section solid on #hero, home page only: centred, tumbling, and the one canvas here whose opacity is driven from JS rather than from a class, because it has to LEAVE on scroll — it morphs cube → octahedron → cuboctahedron → sphere as the reader scrolls and cross-fades into the venn's 22px centre node at the end of the hero's runway. Everything else about it is a section solid, and its band is the one thing it does differently: it tracks the VIEWPORT rather than being clamped inside #hero, so the solid can sit dead centre for the whole of that run. See §THE HERO'S MORPH in glass.js. · AMBIENT HOST `.glass-host` — an empty decorative box a page asks for by name with [data-glass]. Carries the CSS-only pearl fallback. · TEXT HOST `.glass-host--text` + [data-glass-text] — a box whose words are measured per character and bent exactly. Kept and supported; no page currently uses it. For the last two the split between CLASS and ATTRIBUTE is load-bearing: the class lays things out and must be in the markup, because it is what makes the page correct with no JS, no WebGL2, or a dead shader; the attribute is what turns the glass on. Nothing in this file hides page content, ever. ═══════════════════════════════════════════════════════════════════════ */ /* ── THE HOST ──────────────────────────────────────────────────────────── An EMPTY decorative box in ambient mode: glass.js appends a canvas that fills it and nothing else. Content inside an ambient host is legal now that the canvas is transparent, but it will be silently refracted-over rather than measured — put it in a TEXT host if you want it bent. Put content beside it, never in it — unless it is a TEXT host, where the content is the point. `isolation` keeps the canvas out of any blend group a parent section might open, and `contain:paint` tells the compositor the canvas cannot paint outside the box — free, and it matters because this element repaints at 60fps. ── */ .glass-host{ position:relative; overflow:hidden; isolation:isolate; contain:paint; pointer-events:none; /* decorative: never eat a click meant for the page */ } /* The square is a DEFAULT, not a constraint. Wrapped in :where() so it carries ZERO specificity: a page stylesheet overrides it with a plain class whether it loads before or after this file, which is the one thing that must not depend on link order. Unlike .au in base.css the ratio is not load-bearing — the shader sizes the blob off the host's SHORT side and lets the aurora field follow the box, so a wide host widens the wash without deforming the object. Size the host however the layout wants. */ :where(.glass-host){aspect-ratio:1/1} /* ── THE CANVAS ────────────────────────────────────────────────────────── Fills the host exactly. glass.js owns the drawing-buffer size (host box × capped DPR); these are the CSS pixels it is stretched across, and the two are kept in step by a ResizeObserver. It arrives at 0 and glass.js adds .is-live after the first completed frame — and in text mode, not until the words have been measured, so the cube never appears with an empty pane in it. The fade is on the canvas, so what shows through while it happens is the page itself: the ambient fallback pearl, or in text mode the real headline. The box is never empty for a frame. ── */ .glass-host > canvas.rzv-glass{ position:absolute;inset:0; width:100%;height:100%; display:block; opacity:0; transition:opacity .9s var(--ease,cubic-bezier(0.16,1,0.3,1)); } .glass-host.is-live > canvas.rzv-glass{opacity:1} /* ── THE PAGE LENS ─────────────────────────────────────────────────────── One canvas, fixed to the viewport, over the whole document. The solid roams it following the cursor and refracts whatever it passes over. It is the cube everywhere except the portfolio index (work/index.html, data-page="work"), which draws the PUCK — a BICONCAVE glass lens in a bezel, drawn orthographically, centred on the cursor and banking into the direction the cursor is travelling. It reads as an instrument dragged across the work rather than as a turning solid. (It used to be biconvex and was described here as a magnifier. It is a reducing glass now: a concave lens diverges, so the type under the dish comes out at roughly two thirds size. See the puck block in glass.js for the optics.) Nothing in this file changes with any of it: the shape is chosen in glass.js's PAGE_TUNE and the canvas is the same canvas. z-index 400 is chosen, not arbitrary. Read upward from it, the real root order is: the lens at 400, base.css's header at 500, then the WHOLE constellation subtree at 530 — constellation.css raises `#constellation > .wrap` to 530, which makes it a stacking context, so the collapse veil (.cn-veil) resolves its own z-index of 10 INSIDE that wrap and lands at 530 in the root; the same is true of the ether layer, the stage, the core, the ink pearl and the statement (11–15 in there). This comment used to say the lid sat at 520, which is the number the veil had back when it was parented to ; it has not been true since the wrap was raised. Above all of it, .cn-flyer at 560 — the pearl that flies into the header on the collapse, parented to precisely so it clears everything. Every one of those must stay crisp ABOVE the lens: a bent nav bar is a broken nav bar, refracting the collapse would fight the phase cut, and the flyer is a 15px object whose whole job is to be legible while it travels. Everything else on the page is z 0–60 and passes underneath, which is the point. The page grain (z 60) therefore lies under the lens too, so the cube refracts a grained page rather than wearing grain itself, which is the right way round. pointer-events:none, absolutely: this covers every clickable thing on the site. It is also aria-hidden in the markup glass.js writes. TWO classes gate the fade, and both are required. `is-live` means the shader has produced a real frame; `is-active` means a cursor is actually in the document. Page mode only runs while there is something to follow, so before the first mouse move — and for a beat after it leaves — there is simply no lens. That is not a fallback, it is the behaviour. ── */ canvas.rzv-glass--page{ position:fixed;inset:0; width:100vw;height:100vh; z-index:400; pointer-events:none; opacity:0; transition:opacity .55s var(--ease,cubic-bezier(0.16,1,0.3,1)); } canvas.rzv-glass--page.is-live.is-active{opacity:1} /* ── SECTION SOLIDS ─────────────────────────────────────────────── One canvas per real content section, filling that section, refracting that section. The home page uses these instead of the roaming lens, and so does every page where there is no cursor to roam with. The host is a REAL
, not a decorative box, so almost nothing is done to it — no containment, no overflow clipping, no aspect ratio, and in particular none of `.glass-host`, whose contain:paint would change how a content section lays out. base.css already makes `.section` position:relative, which is all the canvas needs; this class is a hook and a promise that the positioning is there. z-index 2 puts the solid above `.wrap` (z 1) so it refracts the section's own copy rather than hiding beneath it, and above `.au` washes (z 0), which are never rasterised anyway. Far below the header at 500. The .9s fade is load-bearing: sections hand over as you scroll, and the outgoing one is still partly on screen when it loses the arbitration. Cutting it would be a blink; fading reads as one object giving way to the next. ── */ .glass-sect{position:relative} .glass-sect > canvas.rzv-glass--sect{ position:absolute;inset:0; width:100%;height:100%; display:block; z-index:2; pointer-events:none; opacity:0; transition:opacity .9s var(--ease,cubic-bezier(0.16,1,0.3,1)); } .glass-sect.is-live > canvas.rzv-glass--sect{opacity:1} /* ── THE HERO CUBE ─────────────────────────────────────────────────────── One extra class on one extra canvas: `.rzv-glass--hero`, on #hero, home page only, ~350px, tumbling, dead centre. It is a section solid in every respect this file cares about — same host class, same z-index 2, same pointer-events:none (so the hero CTA underneath it stays clickable), same band — so everything above applies and only the OPACITY is taken back. It is taken back because this object has to LEAVE, and now because of what it leaves INTO. Every other solid fades in once and then lives on a class: `.is-live` arrives, CSS spends .9s on it, done. The hero solid instead cross-fades with a real DOM element — constellation.js's 22px centre pearl, on the same pixel, at the same size — across a band that starts at the exact scroll position where #hero's bottom meets the top of the screen. A stylesheet has no way to know that position and no way to know that the two opacities have to sum to one, so glass.js drives the whole envelope (arrival × handoff) into --g-a from inside the loop it is already running, and publishes the other half of the sum as RZV.glass.handoff().hand. See §THE HERO'S MORPH and §THE SIGNAL there for the curve and the numbers. THE CANVAS OVERHANGS ITS HOST during the last of that run, on purpose: its band is the viewport, unclamped, so past #hero's bottom edge it reaches a little way down over #constellation. Nothing here needs to change for that — it is pointer-events:none, it is z-index 2 against the constellation subtree's 530, and it is at --g-a 0 within ~0.11 of a viewport — but do not add `overflow:hidden` to `.glass-sect` without reading that note first. `transition:none` is the load-bearing half, not the custom property. A scroll-linked value with .9s of transition on it lags the scroll by most of a second, which reads as the object being dragged out of frame rather than as it going — and the two terms would fight, the transition still chasing the arrival while the scroll term pulled the other way. Written as a pair of selectors so the value holds whether or not `.is-live` is on, and placed after the --sect rules so it wins on order at equal specificity rather than by a specificity trick. The default of 0 is what the canvas shows for the frame between glass.js appending it and the first --g-a write; there is never a visible frame at full opacity. ── */ .glass-sect > canvas.rzv-glass--hero, .glass-sect.is-live > canvas.rzv-glass--hero{ opacity:var(--g-a,0); transition:none; } /* ── FEATHER ───────────────────────────────────────────────────────────── VESTIGIAL, and kept only because it may be wanted again. It existed to hide the hard edge of an opaque self-painted backdrop; the canvas is transparent now, so there is no rectangle to hide and no host needs this. It is left in place — and off by default — for a future host that wants to fade the object's own reach rather than its box. `ellipse closest-side`, not farthest-corner: with farthest-corner the gradient's 100% lives at the CORNERS, so the box's edge midpoints sit at only ~71% of the ramp and keep ~0.5 alpha — a visible rectangle line on every straight edge. closest-side puts 100% at the edge midpoints and the corners fall past the ramp into the final transparent stop. Do NOT put this on a text host: it would eat the first letters of every left-aligned line, and there is nothing for it to fix. ── */ .glass-host--feather{ -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 0%,#000 74%,rgba(0,0,0,0.4) 87%,transparent 98%); mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 0%,#000 74%,rgba(0,0,0,0.4) 87%,transparent 98%); } /* ═══ TEXT MODE ═══════════════════════════════════════════════════════════ The host holds a real