/* =========================================================
IMPERIUS.HU — Design system
Fonts: Sora (display) + Inter (body), both Google Fonts — loaded via
a in each page's , not @import here. @import forces the
browser to fetch this stylesheet, parse it, discover the @import,
and only then start the font request — one extra round trip added
to every single page load for no reason.
========================================================= */
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
/* Same [hidden]-vs-author-display tie-break gotcha as elsewhere in this
file: this reset's `display: block` on every svg beats the UA
stylesheet's `[hidden] { display: none }`, so a hidden icon (like the
now-playing widget's mute/unmute swap) would render anyway. */
svg[hidden] { display: none; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }
/* ---------- Design tokens ---------- */
:root {
--font-display: 'Sora', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--radius-s: 10px;
--radius-m: 16px;
--radius-l: 24px;
--container: 1180px;
--accent: #8b6bff;
--accent-2: #2fd9e8;
--gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
--shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.5);
--ease: cubic-bezier(.16,.84,.44,1);
}
/* Dark theme (default) */
:root,
:root[data-theme="dark"] {
--bg: #08080d;
--bg-alt: #0f0f18;
--surface: rgba(255,255,255,0.06);
--surface-strong: rgba(255,255,255,0.1);
--border: rgba(255,255,255,0.09);
--text: #f3f3f8;
--text-dim: #9d9db2;
--text-faint: #6c6c82;
--scrim: rgba(6,6,10,0.7);
--bg-glow:
radial-gradient(46vw 46vw at 18% 15%, color-mix(in srgb, #3b82f6 30%, transparent), transparent 68%),
radial-gradient(52vw 52vw at 88% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
radial-gradient(56vw 56vw at 6% 92%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 62%),
radial-gradient(44vw 44vw at 94% 90%, color-mix(in srgb, #60a5fa 26%, transparent), transparent 68%);
}
/* Light theme */
:root[data-theme="light"] {
--bg: #f6f5fb;
--bg-alt: #ffffff;
--surface: rgba(20,15,40,0.05);
--surface-strong: rgba(20,15,40,0.08);
--border: rgba(20,15,40,0.09);
--text: #16151f;
--text-dim: #55536b;
--text-faint: #85839a;
--scrim: rgba(255,255,255,0.7);
--accent: #6d3df0;
--accent-2: #0aa9bb;
--bg-glow:
radial-gradient(46vw 46vw at 18% 15%, color-mix(in srgb, #3b82f6 19%, transparent), transparent 68%),
radial-gradient(52vw 52vw at 88% 8%, color-mix(in srgb, #6d3df0 15%, transparent), transparent 62%),
radial-gradient(56vw 56vw at 6% 92%, color-mix(in srgb, #0aa9bb 14%, transparent), transparent 62%),
radial-gradient(44vw 44vw at 94% 90%, color-mix(in srgb, #60a5fa 17%, transparent), transparent 68%);
--shadow-soft: 0 20px 60px -24px rgba(30,20,60,0.25);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
transition: background .4s var(--ease), color .4s var(--ease);
}
/* Ambient animated background — four soft, bluish glows that drift
slowly. `inset: -10%` gives it overscan room so the drift/scale never
reveals a hard edge; only `transform` is animated (GPU-cheap, no
repaint), same discipline as the preloader — see the Teljesítmény
section in README.md for why that matters here. */
body::before {
content: '';
position: fixed;
inset: -10%;
z-index: -2;
background: var(--bg-glow);
animation: bg-drift 30s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes bg-drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-2.5%, 2%) scale(1.05); }
100% { transform: translate(2.5%, -2%) scale(1); }
}
/* Second ambient layer: columns of code quietly scrolling upward,
behind everything, on every page (injected once by main.js so it
isn't duplicated by hand across every HTML file). Each column's
text is rendered ONCE and only ever animated via `transform`, same
as the glow above — no per-frame JS, no layout work, so it costs
nothing to keep running for as long as the tab stays open. */
.code-bg {
position: fixed;
inset: 0;
z-index: -1;
display: flex;
justify-content: space-between;
gap: 2vw;
padding-inline: 3vw;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}
.code-col {
font-family: var(--font-mono);
font-size: .8rem;
line-height: 2;
white-space: pre;
color: color-mix(in srgb, var(--accent-2) 70%, transparent);
opacity: .16;
animation: code-scroll linear infinite;
will-change: transform;
}
.code-col:nth-child(3n+1) { color: color-mix(in srgb, var(--accent) 70%, transparent); }
.code-col:nth-child(3n+2) { color: color-mix(in srgb, #3b82f6 75%, transparent); }
:root[data-theme="light"] .code-col { opacity: .12; }
@keyframes code-scroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
@media (max-width: 900px) { .code-bg { display: none; } }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { color: var(--text-dim); }
::selection { background: var(--accent); color: #fff; }
/* Custom scrollbar: an inset gradient pill, not the browser default */
* { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
background-color: var(--accent);
background-image: var(--gradient);
border-radius: 999px;
border: 5px solid var(--bg);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { border-width: 4px; }
::-webkit-scrollbar-corner { background: var(--bg); }
/* Scroll progress bar — fills as the page is read */
#scroll-progress-track {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 600;
pointer-events: none;
background: transparent;
}
#scroll-progress-track span {
display: block;
height: 100%;
width: 0%;
background: var(--gradient);
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
}
/* Custom cursor — a small "+" reticle, desktop fine-pointer only (see
main.js). Same size and color in every state; hovering an
interactive element only rotates it 45° into an "×", nothing else. */
html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }
/* The universal `*` above doesn't reach into a range input's thumb —
::-webkit-slider-thumb/::-moz-range-thumb are UA shadow parts, not
matched by a bare `*` selector — so any slider's own `cursor: pointer`
(e.g. the now-playing volume slider) kept showing the native pointer
right where visitors actually drag it. */
html.has-custom-cursor input[type="range"]::-webkit-slider-thumb,
html.has-custom-cursor input[type="range"]::-moz-range-thumb { cursor: none !important; }
.cursor-ring {
/* Positioned via translate3d in JS (main.js) — that inline transform
replaces any transform set here entirely, so the rotation lives on
the .cursor-ring-mark child instead, which JS never touches. */
position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; opacity: 0;
width: 18px; height: 18px; margin: -9px 0 0 -9px;
transition: opacity .2s;
}
.cursor-ring-mark {
position: absolute; inset: 0;
transition: transform .3s var(--ease);
}
.cursor-ring-mark::before, .cursor-ring-mark::after {
content: '';
position: absolute;
background: var(--accent);
}
.cursor-ring-mark::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.cursor-ring-mark::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.cursor-ring.is-hover .cursor-ring-mark { transform: rotate(45deg); }
@media (max-width: 860px) { .cursor-ring { display: none; } }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--font-display);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .9rem;
}
.eyebrow::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gradient);
}
.gradient-text {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.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;
}
.skip-link {
position: fixed;
top: -60px; left: 1rem;
background: var(--accent);
color: #fff;
padding: .7rem 1.2rem;
border-radius: var(--radius-s);
z-index: 999;
transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Scroll reveal */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .85rem 1.5rem;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 600;
font-size: .95rem;
white-space: nowrap;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: var(--gradient);
color: #08080d;
box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-primary:hover { box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-ghost {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); background: var(--surface-strong); }
.btn-sm { padding: .6rem 1.1rem; font-size: .85rem; }
/* ---------- Preloader ---------- */
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
overflow: hidden;
transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* A single soft, STATIC ambient glow — no filter:blur, no animation.
A radial-gradient already fades softly on its own, so it gives the
same "ambient light" mood as the old animated, blurred blobs used
to, at effectively zero runtime cost. */
.loader-bg {
position: absolute; inset: 0; overflow: hidden;
background:
radial-gradient(45% 45% at 25% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
radial-gradient(45% 45% at 78% 82%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
}
.loader-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
/* ---------- The centerpiece: a liquid, rotating gradient orb ----------
Every animation here only ever touches `transform`, `border-radius`
and `opacity` — never `filter` or `background-position` — so the
compositor can run all of it without repainting anything, no matter
how long the loader is on screen. */
.loader-orb-wrap { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.loader-orb {
position: absolute; inset: 8px;
background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
animation: orb-spin 3.2s linear infinite, orb-morph 5s ease-in-out infinite;
box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-morph {
0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
33% { border-radius: 62% 38% 30% 70% / 60% 32% 68% 40%; }
66% { border-radius: 35% 65% 55% 45% / 38% 62% 38% 62%; }
}
/* Three small satellites orbiting the core in the opposite direction. */
.loader-orbit { position: absolute; inset: 0; animation: orb-spin 5s linear infinite reverse; }
.loader-orbit span {
position: absolute; top: 50%; left: 50%;
width: 6px; height: 6px; margin: -3px 0 0 -3px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 80%, transparent);
}
.loader-orbit span:nth-child(1) { transform: rotate(0deg) translateY(-56px); }
.loader-orbit span:nth-child(2) { transform: rotate(120deg) translateY(-56px); }
.loader-orbit span:nth-child(3) { transform: rotate(240deg) translateY(-56px); }
/* The brand mark sits still at the center, on top of the spinning orb. */
.loader-mark {
position: relative;
width: 34px; height: 34px;
border-radius: 10px;
background: var(--bg);
display: grid; place-items: center;
animation: mark-pulse 1.8s ease-in-out infinite;
}
/* A plain centered bar, not the brand mark's asymmetric flag-notch
shape — that shape's own clip-path only renders its left ~45%, so
the *visible* bar sat left-of-center inside its (correctly centered)
box. A symmetric shape is centered by construction, no math needed. */
.loader-mark::after {
content: '';
width: 5px; height: 19px;
border-radius: 1px;
background: var(--text);
}
@keyframes mark-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
/* A slim progress bar — the fill width-transition and a translateX
sheen sweep are the only moving parts, both cheap. */
.loader-bar-track {
position: relative;
width: 200px; height: 8px;
border-radius: 999px;
background: var(--surface-strong);
border: 1px solid var(--border);
overflow: hidden;
}
.loader-bar-fill {
position: relative;
height: 100%; width: 0%;
background: var(--gradient);
border-radius: 999px;
transition: width .15s linear;
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.loader-bar-sheen {
position: absolute; top: 0; bottom: 0; left: 0;
width: 45%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
transform: translateX(-220%);
animation: sheen-sweep 1.4s linear infinite;
mix-blend-mode: overlay;
}
@keyframes sheen-sweep { to { transform: translateX(320%); } }
.loader-percent {
font-family: var(--font-mono);
font-size: 1.7rem;
font-weight: 700;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-variant-numeric: tabular-nums;
}
.loader-status {
font-family: var(--font-mono);
font-size: .82rem;
color: var(--text-faint);
min-height: 1.3em;
letter-spacing: .01em;
}
/* ---------- Typewriter section reveal ---------- */
[data-typewriter] { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.tw-prompt { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.tw-target { font-family: var(--font-mono); }
.tw-target.typing::after {
content: '▍';
display: inline-block;
margin-left: 2px;
color: var(--accent-2);
animation: tw-blink .9s step-end infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
/* Page fade-in (progressive enhancement) */
/* Note: intentionally opacity-only — a transform here (even an identity
one left behind by animation-fill-mode) would turn body into the
containing block for its position:fixed children (header, preloader,
mobile menu), breaking them site-wide. */
body.page-transition-ready { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body.page-transition-out { opacity: 0; transition: opacity .28s var(--ease); }
/* ---------- Navbar ---------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
padding-block: .9rem;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .55rem .6rem .55rem 1.1rem;
border-radius: 999px;
/* A lighter blur than a typical frosted-glass nav — this bar stays
fixed on screen through every scroll frame, so a heavy compound
filter (blur+saturate) here is a real, continuous cost, not a
one-time one. Raising the backing opacity compensates visually. */
background: color-mix(in srgb, var(--bg) 82%, transparent);
border: 1px solid var(--border);
backdrop-filter: blur(8px);
box-shadow: var(--shadow-soft);
}
.brand {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.brand-mark {
width: 30px; height: 30px;
border-radius: 9px;
background: var(--gradient);
position: relative;
flex-shrink: 0;
}
.brand-mark::after {
content: '';
position: absolute; inset: 6px;
border-radius: 4px;
background: var(--bg);
clip-path: polygon(0 0, 45% 0, 45% 100%, 0 100%);
}
.nav-links {
display: flex;
align-items: center;
gap: .2rem;
}
.nav-links a {
position: relative;
padding: .55rem .9rem;
font-size: .92rem;
font-weight: 500;
color: var(--text-dim);
border-radius: 999px;
transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
content: '';
position: absolute;
left: 1rem; right: 1rem; bottom: .3rem;
height: 2px;
border-radius: 2px;
background: var(--gradient);
}
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.theme-toggle {
width: 40px; height: 40px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--surface);
border: 1px solid var(--border);
transition: background .25s var(--ease), transform .25s var(--ease);
}
.theme-toggle:hover { background: var(--surface-strong); transform: rotate(-12deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
.lang-toggle, .search-toggle {
height: 40px;
min-width: 40px;
padding-inline: .7rem;
border-radius: 999px;
display: grid; place-items: center;
background: var(--surface);
border: 1px solid var(--border);
transition: background .25s var(--ease);
}
.lang-toggle { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.lang-toggle:hover, .search-toggle:hover { background: var(--surface-strong); }
.search-toggle svg { width: 17px; height: 17px; }
.nav-toggle {
display: none;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
place-items: center;
flex-direction: column;
gap: 4px;
}
.nav-toggle span {
width: 16px; height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-menu {
position: fixed;
inset: 0;
z-index: 400;
background: var(--bg);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: .5rem;
padding: 2rem clamp(1.5rem, 8vw, 4rem);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
font-family: var(--font-display);
font-size: clamp(1.8rem, 8vw, 2.6rem);
font-weight: 700;
color: var(--text-dim);
padding: .4rem 0;
opacity: 0;
transform: translateY(14px);
transition: opacity .4s var(--ease), transform .4s var(--ease), color .25s;
}
.mobile-menu.is-open a { opacity: 1; transform: translateY(0); }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--text); }
.mobile-menu a.active { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 860px) {
.nav-links { display: none; }
.nav-toggle { display: grid; }
}
body.nav-open { overflow: hidden; }
/* ---------- Hero ---------- */
.hero {
padding-top: clamp(8rem, 16vw, 11rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
/* Grid items default to min-width: auto, i.e. never narrower than their
widest unshrinkable child (here, the now-playing volume slider) — so
without this the whole column (and the text inside it) refused to
shrink below that width and overflowed narrow viewports instead of
wrapping/resizing normally. */
.hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-tagline { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 46ch; margin-block: 1.4rem 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-stats {
display: flex;
gap: clamp(1.2rem, 3vw, 2.4rem);
margin-top: 2.8rem;
flex-wrap: wrap;
}
.hero-stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; }
.hero-stat span { font-size: .85rem; color: var(--text-faint); }
.hero-visual {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 420px;
margin-inline: auto;
animation: float 7s ease-in-out infinite;
}
.hero-glow {
position: absolute; inset: 12%;
border-radius: 50%;
background: var(--gradient);
filter: blur(28px);
opacity: .55;
}
.hero-avatar {
position: absolute; inset: 14%;
border-radius: 50%;
overflow: hidden;
padding: 4px;
background: var(--gradient);
box-shadow: var(--shadow-soft);
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; border: 3px solid var(--bg); }
/* Decorative ring — SVG stroke-dasharray renders crisp & anti-aliased at
any rotation, unlike a CSS `border-style: dashed` circle (which looked
chunky/choppy when spun). Concentric with .hero-avatar via matching inset. */
.hero-ring-wrap {
position: absolute; inset: -4%;
animation: spin-slow 40s linear infinite;
}
/* The