'; inherits: false; initial-value: 0; }
/* ─── Token-driven focus ring (use :focus-visible, not :focus) ─── */
.focus-ring:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.segmented > button:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* ─── View Transitions - calm, token-timed, reduced-motion safe ─── */
@media (prefers-reduced-motion: no-preference) {
::view-transition-group(*) { animation-duration: var(--duration-normal); }
::view-transition-old(root),
::view-transition-new(root) {
animation-timing-function: var(--ease-out);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ─── Signal field - the one sanctioned fixed background ───
position:fixed so content readability never shifts on
scroll. Palette-derived (teal + magenta-rose at low chroma)
over the flat canvas, with a masked dot grid that fades out
so it never competes with content. Opt-in: add
as the first body child. pointer-events:none, z-index:-1. */
.bg-signal {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60% 50% at 50% -10%,
color-mix(in oklch, var(--color-accent) 12%, transparent), transparent 70%),
radial-gradient(50% 45% at 100% 5%,
color-mix(in oklch, var(--color-secondary) 9%, transparent), transparent 70%),
var(--color-bg);
}
.bg-signal::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(
color-mix(in oklch, var(--color-text) 7%, transparent) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 30%, transparent 78%);
mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 30%, transparent 78%);
}
/* Cursor halo - JS writes --glow-x/--glow-y/--glow-opacity. */
.bg-signal::after {
content: '';
position: absolute;
inset: 0;
opacity: var(--glow-opacity);
transition: opacity var(--duration-slow) var(--ease-out);
background: radial-gradient(360px circle at var(--glow-x) var(--glow-y),
color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 60%);
}
/* ─── Cursor spotlight card - JS writes --glow-x/--glow-y ─── */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
background: radial-gradient(420px circle at var(--glow-x) var(--glow-y),
color-mix(in oklch, var(--color-accent) 13%, transparent), transparent 60%);
}
.spotlight:hover::before { opacity: 1; }
/* ─── Reading-progress bar - pure CSS scroll timeline ─── */
.read-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 200;
transform-origin: left center;
transform: scaleX(0);
background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.read-progress {
animation: read-progress-grow linear both;
animation-timeline: scroll(root block);
}
}
}
@keyframes read-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ─── Scroll-reveal - visible by default, animates only when supported ─── */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.reveal {
animation: reveal-rise linear both;
animation-timeline: view();
animation-range: entry 0% cover 26%;
}
}
}
@keyframes reveal-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* ─── Screen-reader-only utility (for live regions) ─── */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* v2.1 secondary (neon pink) usages */
.progress.secondary > span { background: var(--color-secondary); }
.kpi.secondary { border-left-color: var(--color-secondary); }
.btn.secondary { background: var(--color-secondary); color: var(--color-bg); border-color: var(--color-secondary); }
.btn.secondary:hover { filter: brightness(1.08); border-color: var(--color-secondary); }