/* Rotating conic-gradient border (B01909) — reusable, opt-in component.
Not part of style.css on purpose: this effect is meant for one page at a time
(opt in per page via ), not loaded site-wide on every page's shared stylesheet.
Usage: in , then
wrap any element:
...
(--rb-radius defaults to 16px; override inline/page-scoped to match the wrapped
element's own border-radius so the ring lines up with its corners).
Real support confirmed 2026-08 (caniuse + MDN, both checked live): @property is
Chrome/Edge 85+, Safari 16.4+, Firefox 128+ (Baseline 2024, ~93% global usage).
No @supports gate is used to switch this on/off — @property is a self-degrading
enhancement by construction: a browser that doesn't recognize the @property block
below just treats --rb-angle as an ordinary, non-animatable custom property, so the
ring silently falls back to a static (non-rotating) gradient rather than breaking.
(Checked and deliberately NOT used: @supports at-rule(@property), the standards way
to test @property support directly — a live check found zero support for the
at-rule() test function itself in Firefox/Safari today, despite both fully
supporting @property; gating on it would have hidden the real animated effect from
both browsers even though they can render it.)
B01910 Task 2: the original box-shadow glow (`0 0 28px 3px rgba(255,115,0,.35)`) was
removed -- it was meant as a belt-and-suspenders fallback for a browser that can't
render the ring at all, but it was applied UNCONDITIONALLY, so it stacked visibly
behind/around the ring on every browser, including ones rendering the ring correctly.
Real, confirmed via direct test (both @property AND this box-shadow stripped
together): the ::before ring's own conic-gradient + mask does not depend on @property
at all -- only the ROTATION does. A non-supporting browser still gets a real, visible
static ring (this file's own ::before rule, unconditional), never "no effect at all" --
the glow was never actually load-bearing for that case. */
@property --rb-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.rotating-border {
position: relative;
display: block;
width: fit-content;
margin: 0 auto;
--rb-angle: 0deg;
--rb-radius: 16px;
}
.rotating-border::before {
content: '';
position: absolute;
inset: -3px;
/* B01910 Task 1: real, confirmed root cause of the corner gaps -- this ring is inset -3px
OUTSIDE the wrapped element's own edge, but was using the SAME radius as that inner edge
(var(--rb-radius), matched to .pass-mock's own 18px via the inline --rb-radius override).
Two curves of equal radius but different size/offset are not concentric -- the ring's own
corner sweep lands slightly inside where a truly concentric curve would, leaving a small
gap at each of the 4 corners where .pass-mock's own dark background peeks through. The
standard fix for a nested rounded shape offset outward by N is innerRadius + N, matching
the SAME 3px this rule's own inset already uses -- keeps the two curves genuinely
concentric at any --rb-radius value, not just the 18px this page happens to use today. */
border-radius: calc(var(--rb-radius) + 3px);
padding: 3px;
background: conic-gradient(from var(--rb-angle, 0deg),
#FF7300 0deg, transparent 90deg, #FF7300 180deg, transparent 270deg, #FF7300 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: rotating-border-spin 5s linear infinite;
pointer-events: none;
}
@keyframes rotating-border-spin {
to { --rb-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.rotating-border::before { animation: none; }
}
/* B02105: hover-only variant (opt-in modifier, combine with .rotating-border — the base class's
own always-on behavior above is completely unchanged for its existing real callers,
artists.html/memorial.html). The ring stays in the DOM at all times (position:absolute,
already out of normal flow — inset:-3px never affects layout) so toggling it never shifts
anything; only its opacity and animation-play-state change. Also serves as the affordance that
a card is clickable (B02103's lightbox). :focus-within (not just :hover) so a keyboard user
tabbing to the enlarge-image inside sees it too — real parity, not just a mouse effect. */
.rotating-border--hover-only::before {
opacity: 0;
animation-play-state: paused;
transition: opacity .18s ease;
}
.rotating-border--hover-only:hover::before,
.rotating-border--hover-only:focus-within::before {
opacity: 1;
animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
/* The base rule above already sets animation:none for EVERY .rotating-border, hover-only
included — this only re-states the real, required behavior for this variant specifically:
the ring may still appear on hover (a direct result of the user's own pointer action, not
ambient motion — the same real distinction RUNBOOK.md's own "decorative motion" standing
rule draws), it just never rotates. */
.rotating-border--hover-only:hover::before,
.rotating-border--hover-only:focus-within::before { opacity: 1; }
}