instead. A small, uniform lift across
the whole element, not a spotlight that chases the cursor — so there's
nothing for site-nav.js to track here, just a plain :hover/:focus-within. */
.glow-hover {
position: relative;
isolation: isolate;
}
.glow-hover::after {
content: '';
position: absolute;
inset: 0;
/* Matches whatever rounding the element already has — a background is
always clipped to border-radius on its own, with no need for
overflow: hidden, which would otherwise risk clipping something
else on the same element (e.g. a hover shadow that's meant to
spill outside the box, as on the .book-cover art below). */
border-radius: inherit;
background: rgba(242, 204, 143, 0.08);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
mix-blend-mode: screen;
}
.glow-hover:hover::after,
.glow-hover:focus-within::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.glow-hover::after { transition: none; }
}
/* ---- cursor-tracked tilt / "push" (hover) --------------------------------
Put .tilt-hover directly on an image (this one's fine on ![]()
— it's a
real transform, not generated content) for a lean away from wherever
the cursor is pushing from, in either direction on both axes — push
from the left and it leans right, push from below and it leans up,
and so on. Pairs well with .glow-hover on a wrapping element. */
.tilt-hover {
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transition: transform 0.12s ease-out;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.tilt-hover { transition: none !important; transform: none !important; }
}
/* ---- grand wave glow (always on) ------------------------------------------
Put .dye-hover on a card for a wide, luminous band just outside its
edges, with one bright, hot "crest" that travels slowly and smoothly
all the way around that band — like a single wave circling the
border. The band itself is a conic-gradient (a dim base tint all the
way around, with one wide, much brighter hump near one angle) masked
down to a ring using the padding/content-box XOR trick: .dye-blob is
a fully solid box, its background painted corner-to-corner, but the
mask keeps only the padding-thick band around its own edge and cuts
the solid middle out entirely — so what survives already has the
card's own rounded-rectangle shape, not a circle. site-nav.js rotates
the gradient's start angle (the --dye-angle custom property, set
directly on .dye-blob) a tiny bit every frame, which is what makes
the crest crawl around the band. The outer .dye-layer then
blurs that ring and, on top of the blur, stacks two drop-shadows at
different reaches — this is what gives it a big, layered bloom
instead of a single soft edge, so it reads as grand rather than
understated. Sits at z-index -1, so it always paints behind the
card's own heading, copy and button. Under prefers-reduced-motion the
ring is still drawn (so it's still visible) but --dye-angle is never
updated, so the crest holds at one fixed spot. */
.dye-hover {
position: relative;
isolation: isolate;
}
.dye-hover .dye-layer {
position: absolute;
inset: -54px;
pointer-events: none;
z-index: -1;
border-radius: 58px;
overflow: visible;
/* A single blur, not a blur-plus-two-drop-shadows stack. Every one
of these filters has to be recomputed from scratch each time the
gradient underneath repaints (see the note on .dye-blob below),
and drop-shadow is by far the priciest of the three — it renders
a whole separate blurred copy of the shape's alpha channel. Two
of them stacked on top of a moving gradient was the main source
of the lag; one blur, sized generously, gives most of the same
soft, wide glow for a fraction of the cost. */
filter: blur(26px);
}
.dye-hover .dye-blob {
position: absolute;
inset: 0;
border-radius: inherit;
box-sizing: border-box;
padding: 34px;
/* This background repaints every frame (site-nav.js rotates
--dye-angle), and a changing background can't be handed off to
the compositor the way a transform or opacity change can — the
browser has to re-rasterize it, then re-run .dye-layer's filter
on the result, every single time. site-nav.js throttles how often
that happens instead of doing it on every animation frame. */
background: conic-gradient(
from var(--dye-angle, 0deg),
color-mix(in srgb, var(--accent, #4a82c7) 22%, transparent) 0deg,
color-mix(in srgb, var(--accent, #4a82c7) 45%, transparent) 55deg,
color-mix(in srgb, var(--accent, #4a82c7) 100%, white 45%) 90deg,
color-mix(in srgb, var(--accent, #4a82c7) 45%, transparent) 125deg,
color-mix(in srgb, var(--accent, #4a82c7) 22%, transparent) 180deg,
color-mix(in srgb, var(--accent, #4a82c7) 22%, transparent) 360deg
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 1;
}
/* ---- ambient ember light ---------------------------------------------
Add one empty , once, right after the
opening tag. It sits behind nothing in particular — it's a
fixed, page-wide layer — and casts a soft warm light that drifts
toward wherever the cursor currently is, for atmosphere rather than
as a UI control: pointer-events: none keeps it out of the way of every
click, and it's the one accent on this page that simply doesn't render
at all under prefers-reduced-motion rather than just holding still. */
.ember-field {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.ember-field::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 640px;
height: 640px;
margin: -320px 0 0 -320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(217, 163, 92, 0.16), transparent 70%);
mix-blend-mode: screen;
transform: translate(var(--ex, 0px), var(--ey, 0px));
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.ember-field { display: none; }
}
/* ---- scroll parallax drift ------------------------------------------
Add .parallax, plus an optional data-speed (default 0.2), to anything
you want drifting at a different rate than the page scrolls — a
background portrait, a decorative rune, a title sitting behind copy.
Keep values small (0.1–0.4); this is a drift, not a scene change. */
.parallax {
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.parallax { transform: none !important; }
}
/* ---- scroll-scrubbed text glow ---------------------------------------
Add .reveal-text to a heading or paragraph of plain text (avoid nested
links or bold/italic spans — site-nav.js rebuilds the element word by
word). Words sit dim and brighten in sequence as the block travels
through the reveal band, scrubbed by the scrollbar exactly like
.pop-in above — scroll back up and they dim back down. */
.reveal-text .word {
display: inline-block;
opacity: 0.25;
}
@media (prefers-reduced-motion: reduce) {
.reveal-text .word { opacity: 1; }
}