/* ============================================================
   Mixiee — Portfolio stylesheet v5 (dual-page)
   Sections: tokens · base · glass pill navbar (+ sliding
   indicator) · hero · sections · winding pathway · personal
   playground (bento) · footer · animation
   engine · mobile
   Edit the variables below to retheme the whole site.
   ============================================================ */

:root {
    /* Palette */
    --bg: #0a0e14;
    --bg-raised: #111722;
    --bg-card: #131a27;
    --border: rgba(148, 163, 184, 0.12);
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-2: #2563eb;
    --accent-3: #60a5fa;
    --accent-soft: rgba(59, 130, 246, 0.12);
    --accent-glow: rgba(59, 130, 246, 0.35);
    --ok: #10b981;

    /* Liquid glass */
    --glass-bg: rgba(15, 21, 32, 0.55);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-highlight: rgba(255, 255, 255, 0.06);

    /* Typography */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "Cascadia Code", Consolas, monospace;

    /* Layout */
    --container: 1080px;
    --section-pad: clamp(72px, 12vw, 140px);
    --radius: 14px;
    --radius-lg: 20px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-glide: cubic-bezier(0.4, 0, 0.1, 1);
}

/* ---------- Reset & base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 104px;
    /* Also needed on html, not just body: with only body clipped, the wide
       decorative orbs (some ~500px, positioned past the viewport edge on
       phones) can inflate the layout viewport that position:fixed elements
       (the nav) measure against, pushing the nav's controls off-screen. */
    overflow-x: hidden;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Plays once on a real document load (first visit, hard refresh, or
       the soft-router's fetch-failure fallback) */
    animation: page-in 0.5s ease both;
}

@keyframes page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Soft-navigation transition: the router (main.js) toggles these on #main
   only — the nav and audio player above are never touched, so playback
   and layout hold steady while the content underneath swaps. Cheap
   compositor-only properties (opacity/transform), no filter/blur, so it
   stays smooth even on lower-end hardware. */
#main {
    transition: opacity 0.22s ease, transform 0.28s var(--ease-out);
}

#main.main-exit {
    opacity: 0;
    transform: translateY(10px);
}

#main.main-enter {
    opacity: 0;
    transform: translateY(-8px);
}

/* Ambient aurora — the whole canvas breathes even when idle */
body::before {
    content: "";
    position: fixed;
    inset: -22%;
    z-index: -1;
    background:
        radial-gradient(42% 36% at 22% 24%, rgba(59, 130, 246, 0.07), transparent 70%),
        radial-gradient(36% 42% at 78% 72%, rgba(37, 99, 235, 0.06), transparent 70%);
    animation: aurora-drift 26s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes aurora-drift {
    from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
    50%  { transform: translate3d(2%, 2%, 0) scale(1.07); }
    to   { transform: translate3d(-1%, 1.5%, 0) scale(1.02); }
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
    font-weight: 700;
}

ul, ol, dl, dd {
    padding: 0;
}

a {
    color: var(--accent);
}

button {
    font: inherit;
    color: inherit;
}

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}

.accent {
    color: var(--accent);
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Thin scroll progress bar along the top edge (JS drives --progress) */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform-origin: left;
    transform: scaleX(var(--progress, 0));
    pointer-events: none;
}

/* ---------- Floating liquid-glass pill navbar ---------- */

.site-header {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding-inline: 16px;
    pointer-events: none;
}

.nav {
    pointer-events: auto;
    position: relative;
    /* Grid instead of flex: with unequal-width brand/controls groups,
       flex's space-between only balances the leftover space around
       whichever item happens to have the margin-left: auto (see git
       history) — it doesn't put the menu at the pill's true midpoint.
       1fr auto 1fr sizes the middle column to the menu's own content and
       lets the two 1fr side columns absorb the remainder equally, so the
       links land dead-center regardless of how wide the brand or the
       clock/theme-toggle cluster are. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    width: min(100%, var(--container));
    padding: 8px 10px 8px 14px;
    border-radius: 9999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 var(--glass-highlight);
    /* Clips the traveling wave below to the pill's rounded shape.
       Lifted at the mobile breakpoint so the dropdown menu isn't cut off. */
    overflow: hidden;
}

/* The "wave": a light beam that continuously sweeps across the entire
   pill, ported from the original site's `nav::before` / `navShimmer`
   keyframe and restyled in our accent gradient. Runs forever, independent
   of hover — this is the ambient idle motion, distinct from the
   per-link .nav__indicator below. */
.nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: -55%;
    width: 55%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(100deg,
            transparent,
            rgba(59, 130, 246, 0.22),
            rgba(37, 99, 235, 0.22),
            transparent);
    animation: nav-wave 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nav-wave {
    0%   { left: -55%; }
    100% { left: 100%; }
}

.nav__brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 11px;
    text-decoration: none;
    color: var(--text);
}

.nav__logo-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    padding: 2px;
    transition: transform 0.45s var(--ease-spring), box-shadow 0.3s ease;
}

.nav__logo-ring::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--bg);
}

.nav__brand:hover .nav__logo-ring {
    transform: rotate(-10deg) scale(1.08);
    box-shadow: 0 0 18px var(--accent-glow);
}

.nav__logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
    filter: invert(1);
}

.nav__wordmark {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.nav__brand-dot {
    color: var(--accent);
    display: inline-block;
    transition: transform 0.35s var(--ease-spring);
}

.nav__brand:hover .nav__brand-dot {
    transform: translateY(-3px);
}

.nav__menu {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 2px;
    list-style: none;
}

/* The "wave": a liquid capsule that glides behind the hovered / active
   link on an overshooting spring — a shared-layout-style indicator that
   measures the target link's real geometry (see main.js moveTo()) and
   snaps its own width/position to match, rather than being tied to a
   specific link via markup. Opacity here is intentionally strong: this
   needs to read at a glance, not just tint the glass. */
.nav__indicator {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 0;
    z-index: 0;
    border-radius: 9999px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 18px rgba(59, 130, 246, 0.45);
    opacity: 0;
    transition:
        transform 0.5s var(--ease-spring),
        width 0.5s var(--ease-spring),
        opacity 0.25s ease;
    pointer-events: none;
}

.nav__link {
    position: relative;
    z-index: 1;
    display: block;
    padding: 8px 15px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    background: none;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.3s ease;
}

/* .is-riding is applied by JS to whichever link the indicator is
   currently parked behind, so the text stays legible on the solid fill
   even between the CSS :hover window and the JS-driven settle */
.nav__link:hover,
.nav__link.is-active,
.nav__link.is-riding {
    color: #fff;
}

.nav__extra {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
}

.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    padding: 0 8px;
    cursor: pointer;
}

.nav__toggle-bar {
    width: 100%;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s var(--ease-spring), opacity 0.2s ease;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero (portfolio) ---------- */

.hero {
    position: relative;
    padding: calc(var(--section-pad) + 50px) 0 calc(var(--section-pad) + 30px);
    /* visible (not hidden): otherwise the hero__glow's lower radial gets
       sliced at the hero's bottom edge, leaving a brightness line where the
       hero meets the experience section. body's overflow-x:hidden still
       contains any sideways spill. */
    overflow: visible;
}

.hero__glow {
    position: absolute;
    /* Flush horizontally (no sideways spill now the hero is overflow:visible),
       extended vertically so the glow fades out smoothly past the edges. */
    inset: -20% 0;
    background:
        radial-gradient(ellipse 45% 40% at 72% 18%, rgba(59, 130, 246, 0.16), transparent 70%),
        radial-gradient(ellipse 35% 35% at 12% 85%, rgba(37, 99, 235, 0.1), transparent 70%);
    pointer-events: none;
    /* Idle shimmer; `scale` composes with the parallax transform */
    animation: glow-breathe 13s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
    from { scale: 1; opacity: 0.85; }
    to   { scale: 1.08; opacity: 1; }
}

.hero__inner {
    position: relative;
}

.hero__eyebrow {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hero__title {
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    letter-spacing: -0.02em;
    max-width: 22ch;
    margin-bottom: 24px;
}

.hero__lede {
    color: var(--text-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    max-width: 58ch;
    margin-bottom: 36px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- 404 page ---------- */
/* The 404 hero is the only section on the page, so it fills the viewport
   and centers its content instead of sitting at the top like the real hero. */
.error-page {
    min-height: 100svh;
    display: flex;
    align-items: center;
}

.error-page__inner {
    text-align: center;
    margin-inline: auto;
}

.error-page .hero__lede {
    margin-inline: auto;
}

.error-page .hero__actions {
    justify-content: center;
}

.hero__scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 1.5px solid var(--text-muted);
    border-radius: 14px;
    opacity: 0.6;
}

.hero__scroll-dot {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--accent);
    animation: scroll-drip 2.2s var(--ease-out) infinite;
}

@keyframes scroll-drip {
    0%   { transform: translateY(0); opacity: 0; }
    25%  { opacity: 1; }
    70%  { transform: translateY(18px); opacity: 0; }
    100% { transform: translateY(18px); opacity: 0; }
}

/* ---------- Buttons ---------- */

.btn {
    position: relative;
    display: inline-block;
    padding: 13px 28px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
    transform: translateX(-110%);
}

.btn:hover::after {
    transition: transform 0.65s var(--ease-glide);
    transform: translateX(110%);
}

.btn--primary {
    background: linear-gradient(135deg, var(--accent), #2563eb);
    color: #fff;
    box-shadow: 0 0 24px var(--accent-glow);
}

.btn--primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 36px var(--accent-glow);
}

.btn--ghost {
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--bg-raised);
}

.btn--ghost:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

/* ---------- Sections (shared) ---------- */

.section {
    position: relative;
    padding: var(--section-pad) 0;
    /* Was overflow:hidden — that clipped the blurred orbs at each section
       edge, leaving a hard brightness line at every boundary. Letting them
       bleed vertically makes the ambient light continuous; body's
       overflow-x:hidden still contains any horizontal spill. */
    overflow: visible;
}

/* Transparent so the WebGL aurora + orbs read as one continuous backdrop
   — no opaque block, no hard divider lines between sections. */
.section--experience {
    background: transparent;
}

.section__header {
    margin-bottom: clamp(40px, 6vw, 64px);
}

.section__header--center {
    text-align: center;
}

.section__header--center .section__sub {
    margin-inline: auto;
}

.section__eyebrow {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section__title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    letter-spacing: -0.01em;
}

.section__sub {
    color: var(--text-muted);
    margin-top: 12px;
    max-width: 55ch;
}

/* Parallax depth layers. Idle breathing animates the standalone
   `scale`/`opacity` properties so it composes with the JS-driven
   parallax `transform` instead of fighting it */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    animation: orb-breathe 11s ease-in-out infinite alternate;
}

.orb--b, .orb--d { animation-delay: -5.5s; animation-duration: 14s; }

@keyframes orb-breathe {
    from { scale: 1; opacity: 0.7; }
    to   { scale: 1.16; opacity: 1; }
}

.orb--a { width: 420px; height: 420px; top: -80px; right: -140px; background: rgba(59, 130, 246, 0.13); }
.orb--b { width: 300px; height: 300px; bottom: -60px; left: -110px; background: rgba(37, 99, 235, 0.1); }
.orb--c { width: 380px; height: 380px; top: 10%; left: -150px; background: rgba(59, 130, 246, 0.1); }
.orb--d { width: 320px; height: 320px; bottom: -40px; right: -120px; background: rgba(37, 99, 235, 0.12); }

/* ---------- Experience: winding pathway ---------- */

.pathway {
    position: relative;
}

.pathway__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.pathway__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.pathway__line--ghost {
    stroke: var(--border);
    stroke-dasharray: 2 9;
}

.pathway__line--draw {
    stroke: url(#path-gradient);
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

.pathway__list {
    list-style: none;
    position: relative;
    display: grid;
    gap: clamp(48px, 8vw, 88px);
    padding-top: 40px;
}

.pathway__item {
    position: relative;
    width: calc(50% - 40px);
}

.pathway__item--left  { margin-right: auto; }
.pathway__item--right { margin-left: auto; }

.pathway__item--end {
    width: auto;
    margin-inline: auto;
    text-align: center;
}

.pathway__node {
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--border);
    transition:
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.6s var(--ease-spring);
}

.pathway__node.is-lit {
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
    transform: scale(1.2);
}

.pathway__node--end {
    position: static;
    display: inline-block;
    margin: 0 0 10px;
}

.pathway__node--end.is-lit {
    border-color: var(--accent-2);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
    animation: end-node-pulse 2.6s ease-in-out infinite;
}

@keyframes end-node-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.35); }
    50%      { box-shadow: 0 0 24px rgba(37, 99, 235, 0.65); }
}

.pathway__endcap {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(22px, 3.5vw, 34px);
    transition:
        border-color 0.35s ease,
        transform 0.5s var(--ease-spring),
        box-shadow 0.35s ease;
}

.timeline__card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
}

.timeline__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.timeline__org {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--accent);
}

.timeline__period {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--accent-soft);
    padding: 3px 10px;
    border-radius: 20px;
}

.timeline__role {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.timeline__desc {
    color: var(--text-muted);
}

.timeline__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.timeline__tags li {
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 20px;
    transition: border-color 0.25s ease, transform 0.35s var(--ease-spring);
}

.timeline__tags li:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.timeline__stats {
    display: flex;
    gap: 40px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.timeline__stat {
    display: flex;
    flex-direction: column;
}

.timeline__stat dd {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.timeline__stat dt {
    font-size: 0.8rem;
    color: var(--text-muted);
    order: 1;
}

/* Shared idle float for lightweight decorative elements */
@keyframes idle-float {
    from { translate: 0 0; }
    to   { translate: 0 -6px; }
}

/* Pointer-tracking glow (JS feeds --mx / --my) */
.glow-card {
    position: relative;
}

.glow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
            rgba(59, 130, 246, 0.09), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.glow-card:hover::before {
    opacity: 1;
}

/* ---------- Testimonials (carousel) ---------- */

.section--testimonial {
    background: transparent;
}

.testimonial-carousel {
    max-width: 760px;
    margin-inline: auto;
}

/* The fixed card chrome: background/border/radius/tilt never move. Only
   the track inside slides. `overflow: hidden` clips the sliding strip to
   this rounded shape, and JS animates `height` to match whichever slide
   is currently active so shorter/longer testimonials resize smoothly
   instead of leaving dead space or clipping. */
.testimonial-shell {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, height 0.4s var(--ease-out);
}

.testimonial-shell.is-tilting {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.testimonial-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.5s var(--ease-out);
    touch-action: pan-y;
    cursor: grab;
}

.testimonial-track:active {
    cursor: grabbing;
}

.testimonial-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: clamp(28px, 4vw, 44px);
    overflow: visible;
}

.testimonial-card__mark {
    position: absolute;
    top: 4px;
    left: 28px;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 1;
    color: var(--accent);
    opacity: 0.15;
    pointer-events: none;
}

.testimonial-card__quote {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.62;
}

.testimonial-card__quote p {
    margin: 0;
}

.testimonial-card__quote p:first-child {
    color: var(--text);
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    box-shadow: 0 0 14px var(--accent-glow);
    flex-shrink: 0;
}

.testimonial-card__avatar--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.testimonial-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    font-size: 1.05rem;
}

.testimonial-card__role {
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
}

.testimonial-card__meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Prev/next + dots, hidden entirely while there's only one slide (see
   initTestimonials in js/main.js) */
.testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}

.testimonial-nav.is-hidden {
    display: none;
}

.testimonial-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s var(--ease-spring);
}

.testimonial-arrow:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
}

.testimonial-arrow:active {
    transform: scale(0.94);
}

.testimonial-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonial-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--border);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.3s var(--ease-spring), width 0.3s var(--ease-spring);
}

/* The visible dot stays tiny (8px), but the tappable area is a full 44px
   square centered on it via an invisible ::before — otherwise this is an
   8px touch target, well under the accessible minimum. */
.testimonial-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.testimonial-dot:hover {
    background: var(--text-muted);
}

.testimonial-dot.is-active {
    width: 22px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------- Personal playground ---------- */

.p-hero {
    position: relative;
    padding: calc(var(--section-pad) + 50px) 0 clamp(40px, 6vw, 70px);
    /* visible (see .hero) — avoids a clipped-glow brightness line at the
       boundary with the section below. */
    overflow: visible;
}

.p-hero__inner {
    position: relative;
    text-align: center;
}

.p-hero__title {
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.p-hero__gradient {
    background: linear-gradient(100deg, var(--accent-3), var(--accent), var(--accent-2), var(--accent-3));
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-pan 8s ease-in-out infinite alternate;
}

@keyframes gradient-pan {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.p-hero .hero__lede {
    margin-inline: auto;
}

/* Equalizer — a living nod to the hub's music player. Real playback drives
   these bars via inline height (see the pageEqGroups resample in
   audio-player.js) — the canned bounce only kicks in as the
   no-Web-Audio-support fallback, same pattern as .player__visualizer. */
.eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 34px;
}

.eq span {
    width: 4px;
    height: 18%;
    border-radius: 2px;
    background: linear-gradient(to top, var(--accent), var(--accent-2));
    transition: height 0.05s ease;
}

.eq.is-fallback span {
    animation: eq-bounce 1.1s ease-in-out infinite alternate;
}

.eq.is-fallback span:nth-child(2n)  { animation-delay: -0.2s; }
.eq.is-fallback span:nth-child(3n)  { animation-delay: -0.45s; }
.eq.is-fallback span:nth-child(4n)  { animation-delay: -0.7s; }
.eq.is-fallback span:nth-child(5n)  { animation-delay: -0.9s; }

/* Force back to rest when nothing is playing — otherwise a real-data-driven
   bar can freeze at whatever height it last read instead of settling flat.
   These live outside .player entirely, so they key off a body class
   (toggled in updatePlayButton) instead of .player.is-playing. */
body:not(.music-playing) .eq span {
    height: 18% !important;
}

@keyframes eq-bounce {
    from { height: 18%; opacity: 0.65; }
    to   { height: 100%; opacity: 1; }
}

/* Bento grid */
.section--bento {
    padding-top: clamp(24px, 4vw, 48px);
}

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: dense;
    gap: 18px;
    perspective: 1400px;
}

.bento__tile {
    position: relative;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bento__tile.is-tilting {
    will-change: transform;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.bento__depth {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    transform: translateZ(0);
    transition: transform 0.5s var(--ease-spring);
}

.bento__tile.is-tilting .bento__depth {
    transform: translateZ(28px);
}

.bento__depth--center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Tile placement (6-col canvas). `dense` auto-flow backfills gaps, so
   spans below are chosen to lock together into a deliberate masonry
   silhouette rather than a uniform grid. */
.bento__tile--intro { grid-column: span 4; }
.bento__tile--discord { grid-column: span 2; }
.bento__tile--rig   { grid-column: span 6; }
.bento__tile--code  { grid-column: span 4; }
.bento__tile--boots { grid-column: span 2; }
.bento__tile--game  { grid-column: span 3; }
.bento__tile--snow  { grid-column: span 3; }
.bento__tile--edit  { grid-column: span 3; }
.bento__tile--vibes { grid-column: span 3; }

/* Per-tile ambient tints. background-IMAGE (not the shorthand) so the solid
   var(--bg-card) from .bento__tile stays as the base colour — the tile is
   fully opaque, no aurora bleeding through the translucent top of the tint
   (which otherwise left a faint diagonal seam where it turned opaque). */
.bento__tile--intro { background-image: linear-gradient(140deg, rgba(59, 130, 246, 0.09), var(--bg-card) 55%); }
.bento__tile--discord { background-image: linear-gradient(160deg, rgba(88, 101, 242, 0.12), var(--bg-card) 55%); }
.bento__tile--rig   { background-image: linear-gradient(170deg, rgba(37, 99, 235, 0.09), var(--bg-card) 45%); }
.bento__tile--code  { background-image: linear-gradient(140deg, rgba(96, 165, 250, 0.08), var(--bg-card) 55%); }
.bento__tile--boots { background-image: linear-gradient(140deg, rgba(37, 99, 235, 0.09), var(--bg-card) 60%); }
.bento__tile--game  { background-image: linear-gradient(140deg, rgba(59, 130, 246, 0.08), var(--bg-card) 60%); }
.bento__tile--snow  { background-image: linear-gradient(140deg, rgba(96, 165, 250, 0.1), var(--bg-card) 60%); }
.bento__tile--edit  { background-image: linear-gradient(140deg, rgba(29, 78, 216, 0.08), var(--bg-card) 60%); }
.bento__tile--vibes { background-image: linear-gradient(140deg, rgba(37, 99, 235, 0.08), var(--bg-card) 60%); }

.bento__eyebrow {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bento__title {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.bento__sub {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.bento__body {
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* Terminal mockup for the desk setup tile */
.code-mock {
    min-width: 0;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(6, 9, 14, 0.65);
    border: 1px solid var(--border);
}

.code-mock__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
}

.code-mock__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.code-mock__dot--r { background: #ef4444; }
.code-mock__dot--y { background: #f59e0b; }
.code-mock__dot--g { background: #10b981; }

.code-mock__file {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.code-mock__body {
    margin: 0;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
}

.code-mock__c { color: var(--text-muted); font-style: italic; }
.code-mock__k { color: #93c5fd; }
.code-mock__v { color: var(--text); }
.code-mock__p { color: #60a5fa; }
.code-mock__s { color: #bfdbfe; }

.bento__intro-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bento__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
    animation: idle-float 4.5s ease-in-out infinite alternate;
}

.bento__bg-icon {
    position: absolute;
    right: 6px;
    bottom: 2px;
    font-size: 4.6rem;
    color: var(--text);
    opacity: 0.1;
    transform: rotate(-12deg);
    pointer-events: none;
    animation: idle-float 5.5s ease-in-out infinite alternate;
}

.bento__title-icon {
    color: var(--accent-2);
    font-size: 0.9em;
    margin-right: 4px;
}

.bento__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    transition: gap 0.3s var(--ease-spring), color 0.2s ease;
}

.bento__link:hover {
    gap: 11px;
    color: #fff;
}

.eq--tile {
    height: 44px;
    margin-bottom: 4px;
}

/* Social chips */
.chip-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 9999px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
}

.chip:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.chip__badge {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.72rem;
    color: #fff;
}


.chip__badge--dc   { background: linear-gradient(135deg, #5865f2, #4045a8); }
.chip__badge--yt   { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.chip__badge--ig   { background: linear-gradient(135deg, #a855f7, #ec4899, #f59e0b); }
.chip__badge--x    { background: linear-gradient(135deg, #334155, #0f172a); }
.chip__badge--pp   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.chip__badge--mail { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Used on the Contact footer, where chips sit centered rather than
   left-aligned inside a bento tile */
.chip-row--center {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 28px;
}

/* The Discord chip has no real profile URL to link to (just a
   username), so it's a button that copies to the clipboard instead of
   an <a>, with a brief "Copied!" overlay confirming it worked */
.chip--copy {
    position: relative;
    border: 1px solid var(--border);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
}

.chip__copied {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg-raised);
    border-radius: inherit;
    color: var(--ok);
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.chip--copy.is-copied .chip__copied {
    opacity: 1;
    transform: none;
}

/* Visually hidden but still announced by screen readers */
.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;
}

/* Hardware spec rows */
.spec-list {
    display: grid;
    gap: 8px;
}

.spec-list--bento {
    margin-top: 4px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.spec-list--bento .spec-row {
    min-width: 0;
    min-height: 104px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}

.spec-list--bento .spec-row__value {
    text-align: left;
}

.spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: rgba(10, 14, 20, 0.55);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.25s ease;
}

.spec-row:hover {
    border-color: rgba(59, 130, 246, 0.45);
}

.spec-row__label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    flex-shrink: 0;
}

.spec-row__label i {
    margin-right: 5px;
    opacity: 0.85;
}

.spec-row__value {
    min-width: 0;
    color: var(--text);
    font-size: 0.9rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.spec-row__sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* OS rows */
.os-list {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.os-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(10, 14, 20, 0.55);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.25s ease, transform 0.35s var(--ease-spring);
}

.os-row:hover {
    border-color: rgba(59, 130, 246, 0.45);
    transform: translateX(4px);
}

.os-row__icon {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
}

.os-row__icon--win   { color: #60a5fa; }
.os-row__icon--linux { color: #fbbf24; }
.os-row__icon--mac   { color: #e2e8f0; }

.os-row__name {
    font-weight: 500;
    font-size: 0.92rem;
}

.os-row__use {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

/* Stat chips */
.stat-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.stat-chips li {
    font-size: 0.78rem;
    font-family: var(--font-display);
    color: var(--accent);
    background: var(--accent-soft);
    padding: 4px 12px;
    border-radius: 20px;
}

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    padding: clamp(56px, 8vw, 90px) 0 40px;
    text-align: center;
}

/* Soft divider that fades out at both ends — no hard full-width line */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.site-footer__title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin-bottom: 18px;
}

.site-footer__note {
    color: var(--text-muted);
    margin-bottom: 36px;
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.link-button:hover {
    color: #fff;
}

.site-footer__copy {
    color: var(--text-muted);
    font-size: 0.82rem;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- Audio player (ported from the original site's
   GlobalMusicPlayer, reskinned in liquid glass) ---------- */

.player {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 65;
}

.player__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 18px;
    border-radius: 9999px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 30px var(--accent-glow);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
    animation: player-toggle-pulse 3.4s ease-in-out infinite;
}

.player__toggle:hover {
    transform: scale(1.07);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4), 0 0 42px var(--accent-glow);
}

@keyframes player-toggle-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 24px var(--accent-glow); }
    50%      { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 40px var(--accent-glow); }
}

.player__toggle-icon {
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    width: 16px;
}

/* Mini equalizer riding the toggle pill — still while paused, alive
   while playing (driven by the same analyser as the panel's bars) */
.player__toggle-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.player__toggle-eq span {
    width: 2px;
    height: 15%;
    border-radius: 1px;
    background: #fff;
    transition: height 0.12s ease;
}

/* Real playback drives these bars via inline height (see runVisualizerLoop
   in audio-player.js) — the canned bounce below only kicks in as the
   no-Web-Audio-support fallback, same pattern as .player__visualizer. */
.player.is-playing .player__toggle-eq.is-fallback span {
    animation: eq-bounce 1.1s ease-in-out infinite alternate;
}

.player.is-playing .player__toggle-eq.is-fallback span:nth-child(2) { animation-delay: -0.25s; }
.player.is-playing .player__toggle-eq.is-fallback span:nth-child(3) { animation-delay: -0.5s; }
.player.is-playing .player__toggle-eq.is-fallback span:nth-child(4) { animation-delay: -0.75s; }

/* Force back to rest when paused — otherwise a real-data-driven bar can
   freeze at whatever height it last read instead of settling flat. */
.player:not(.is-playing) .player__toggle-eq span {
    height: 15% !important;
}

.player__panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 300px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-highlight);
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-spring);
    pointer-events: none;
}

.player.is-open .player__panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.player__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.player__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.player__art {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 0.95rem;
}

.player__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player__sub {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.player__close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, background 0.25s ease, transform 0.3s var(--ease-spring);
}

.player__close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(90deg);
}

/* Visualizer: real FFT bars when the analyser is live, CSS fallback
   bounce otherwise — same dual-path idea as the legacy player */
.player__visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 40px;
    margin-bottom: 16px;
    padding: 6px 0;
}

.player__visualizer span {
    width: 4px;
    height: 15%;
    border-radius: 2px;
    background: linear-gradient(to top, var(--accent), var(--accent-2));
    transition: height 0.05s ease;
    transform-origin: bottom;
}

.player__visualizer.is-paused span {
    height: 15% !important;
    transition: height 0.3s ease;
}

.player__visualizer.is-fallback span {
    animation: eq-bounce 1.2s ease-in-out infinite alternate;
}

.player__visualizer.is-fallback span:nth-child(3n)  { animation-delay: -0.2s; }
.player__visualizer.is-fallback span:nth-child(4n)  { animation-delay: -0.45s; }
.player__visualizer.is-fallback span:nth-child(5n)  { animation-delay: -0.7s; }

/* Seek + volume: a filled track (JS sets --fill 0-100) under a glowing
   thumb, replacing the flat default range input look */
.player__seek {
    margin-bottom: 16px;
}

.player__range {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background:
        linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--fill, 0%) 100% no-repeat,
        rgba(255, 255, 255, 0.1);
    transition: height 0.2s ease;
}

.player__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}

.player__range:hover::-webkit-slider-thumb,
.player__range:active::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 14px var(--accent-glow);
}

.player__range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}

.player__range:hover::-moz-range-thumb,
.player__range:active::-moz-range-thumb {
    transform: scale(1.25);
}

.player__time {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.player__controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.player__btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.25s ease,
        background 0.25s ease, border-color 0.25s ease;
}

.player__btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
}

.player__btn:active {
    transform: scale(0.94);
}

.player__btn--play {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px var(--accent-glow);
}

.player__btn--play:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px var(--accent-glow);
    filter: brightness(1.1);
}

/* Prev/next flank the play button, smaller and plainer so play stays the
   visual anchor of the row. */
.player__btn--skip {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
}

.player__volume {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* ---------- Visitor counter (ported from the original site) ---------- */

.visitor-counter {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px 10px 10px;
    border-radius: 9999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-highlight);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-spring);
}

.visitor-counter.is-visible {
    opacity: 1;
    transform: none;
}

.visitor-counter__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 0.9rem;
    animation: pulse 3s ease-in-out infinite;
}

.visitor-counter__content {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.visitor-counter__label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.visitor-counter__number {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.counter-loading {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 1.1rem;
}

.counter-loading__bar {
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: counter-bars 0.9s ease-in-out infinite;
}

.counter-loading__bar:nth-child(2) { animation-delay: 0.15s; }
.counter-loading__bar:nth-child(3) { animation-delay: 0.3s; }

@keyframes counter-bars {
    0%, 100% { height: 8px; opacity: 0.5; }
    50%      { height: 16px; opacity: 1; }
}

@media (max-width: 760px) {
    .spec-list--bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visitor-counter {
        left: 14px;
        bottom: 14px;
        padding: 8px 16px 8px 8px;
        gap: 10px;
    }

    .visitor-counter__icon {
        width: 32px;
        height: 32px;
    }

    .visitor-counter__number {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .spec-list--bento {
        grid-template-columns: 1fr;
    }
}

/* ---------- Animation engine ---------- */

.load-in {
    opacity: 0;
    animation: rise-in 1s var(--ease-out) var(--d, 0s) both;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(7px);
    transition:
        opacity 0.75s var(--ease-out),
        transform 0.75s var(--ease-out),
        filter 0.75s var(--ease-out);
    transition-delay: calc(var(--stagger, 0) * 95ms);
}

[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }

[data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

[data-reveal].is-in.is-settled {
    transition-delay: 0s;
}

[data-parallax] {
    will-change: transform;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .load-in,
    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }

    .hero__scroll-hint,
    .eq {
        display: none;
    }
}

/* ---------- Custom cursor porting ---------- */

/* Hide the native cursor ONLY where a real mouse is present. This must stay
   gated behind the same (hover: hover) and (pointer: fine) check that
   cursor-effects.js uses to decide whether to create the replacement dot —
   otherwise any device the JS's UA-sniff misses (iPadOS 13+ reports as
   "Macintosh", Android tablets in desktop mode, touchscreen laptops) gets
   NO cursor at all: native hidden, custom one never created. */
@media (hover: hover) and (pointer: fine) {
    body,
    a, button, input, textarea, select, .btn, .card, .chip, [role="button"], .testimonial-track {
        cursor: none !important;
    }
}

.custom-cursor {
    position: fixed;
    left: -100px;
    top: -100px;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    opacity: 0;
    box-shadow:
        0 0 20px var(--accent),
        0 0 40px var(--accent);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.cursor-glow {
    position: fixed;
    left: -100px;
    top: -100px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    opacity: 0;
}

.custom-cursor.hover {
    transform: scale(1.5);
    background: var(--accent-3);
    box-shadow:
        0 0 30px var(--accent-3),
        0 0 60px var(--accent-3);
    transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}

.cursor-glow.hover {
    transform: scale(1.3);
    opacity: 0.8;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.custom-cursor.click {
    transform: scale(0.8);
    background: #ffffff;
    box-shadow:
        0 0 40px #ffffff,
        0 0 80px var(--accent);
    transition: transform 0.05s ease, background 0.05s ease, box-shadow 0.05s ease;
}

/* ---------- Mobile ---------- */

@media (max-width: 980px) {
    .bento__tile--intro { grid-column: span 6; }
    .bento__tile--discord { grid-column: span 6; }
    .bento__tile--rig   { grid-column: span 6; grid-row: auto; }
    .bento__tile--code  { grid-column: span 6; }
    .bento__tile--boots,
    .bento__tile--game,
    .bento__tile--snow,
    .bento__tile--edit { grid-column: span 3; }
    /* .bento__tile--vibes inherits the desktop span-3 rule here — it
       still pairs evenly with edit at this width */
}

@media (max-width: 860px) {
    .pathway__item,
    .pathway__item--left,
    .pathway__item--right {
        width: auto;
        margin: 0 0 0 34px;
    }

    .pathway__node {
        left: -34px;
        top: 26px;
        margin-left: 0;
    }

    .pathway__item--end {
        margin-inline: auto;
        text-align: center;
    }

    .pathway__node--end {
        position: static;
        margin: 0 0 10px;
    }
}

@media (max-width: 760px) {
    .nav__toggle {
        display: flex;
    }

    /* The dropdown menu below hangs outside the pill's box, so the pill
       can no longer clip its own wave sweep to a rounded shape here —
       let it show fully and retire the wave rather than have it square
       off at the edges. */
    .nav {
        overflow: visible;
    }

    .nav::before {
        display: none;
    }

    /* Menu becomes a frosted dropdown card under the pill.
       Near-opaque: backdrop-filter can't reach past the pill's own
       backdrop root, so blur alone won't hide page content behind it */
    .nav__menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: rgba(14, 19, 29, 0.97);
        border: 1px solid var(--glass-border);
        border-radius: 22px;
        box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--glass-highlight);
        padding: 10px;
        display: none;
    }

    .nav__menu.is-open {
        display: flex;
    }

    .nav__indicator {
        display: none;
    }

    .nav__link {
        padding: 12px 14px;
        text-align: center;
        width: 100%;
        border-radius: 14px;
    }

    .nav__link.is-active {
        background: rgba(255, 255, 255, 0.06);
    }

    .timeline__stats {
        gap: 24px;
    }

    .orb {
        filter: blur(50px);
        opacity: 0.7;
    }

    .bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento__tile--intro,
    .bento__tile--discord,
    .bento__tile--rig,
    .bento__tile--code,
    .bento__tile--boots,
    .bento__tile--game,
    .bento__tile--snow,
    .bento__tile--edit,
    .bento__tile--vibes {
        grid-column: auto;
        grid-row: auto;
    }

    .player {
        right: 14px;
        bottom: 14px;
    }

    .player__panel {
        width: min(88vw, 300px);
    }
}

/* ============================================================
   ADD-ONS v6 — WebGL scene · nav controls (theme/install) ·
   visitor milestone badge · Discord live pill · light theme
   ============================================================ */

/* ---------- WebGL premium background ---------- */
/* Fixed light field behind everything. z-index -1 keeps it above the
   body background but under all static content. Fades in once scene.js
   confirms WebGL is live, so non-WebGL clients never see an empty box. */
.scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.scene.is-live {
    opacity: 1;
}

/* ---------- Nav control buttons (theme toggle + install) ---------- */
.nav__ctrl {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--glass-border);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
        transform 0.2s var(--ease-out);
}

.nav__ctrl:hover {
    color: var(--text);
    background: var(--accent-soft);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.nav__ctrl:active {
    transform: translateY(0) scale(0.94);
}

.nav__ctrl:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav__ctrl[hidden] {
    display: none;
}

.nav__install.is-ready {
    color: var(--accent-3);
    border-color: rgba(59, 130, 246, 0.35);
}

/* Sun/moon crossfade — moon shows in dark, sun shows in light */
.nav__ctrl-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-spring);
}

.nav__ctrl-icon--sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.nav__ctrl-icon--moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .nav__ctrl-icon--sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .nav__ctrl-icon--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* ---------- Visitor milestone badge ---------- */
.visitor-counter__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 2px 9px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    opacity: 0;
    transform: translateY(4px) scale(0.8);
    transform-origin: left center;
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-spring);
}

.visitor-counter__badge.is-unlocked {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.visitor-counter__badge i {
    font-size: 0.7rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ---------- Discord live presence pill ---------- */
.bento__tile--discord .bento__depth {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.discord-status-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.discord-status-pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #747f8d;
    transition: background 0.3s ease;
}

.discord-status-pill.online::before { background: #23a55a; }
.discord-status-pill.idle::before { background: #f0b232; }
.discord-status-pill.dnd::before { background: #f23f43; }
.discord-status-pill.offline::before { background: #80848e; }

.dpill__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dpill__fallback {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dpill__fallback .fa-discord {
    color: #5865f2;
    font-size: 1.1rem;
}

.dpill__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.dpill__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-raised);
}

.dpill__dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #80848e;
    border: 3px solid var(--bg-card);
}

.online .dpill__dot { background: #23a55a; }
.idle .dpill__dot { background: #f0b232; }
.dnd .dpill__dot { background: #f23f43; }
.offline .dpill__dot { background: #80848e; }

.dpill__id {
    min-width: 0;
    flex: 1;
}

.dpill__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dpill__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpill__badges {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dpill__badge {
    width: 16px;
    height: 16px;
}

.dpill__status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.dpill__emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.dpill__bio {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.dpill__activity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.dpill__activity-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-3);
}

.dpill__rich {
    display: flex;
    align-items: center;
    gap: 12px;
}

a.dpill__rich {
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    outline-offset: 5px;
}

a.dpill__rich:hover .dpill__rich-name,
a.dpill__rich:focus-visible .dpill__rich-name {
    color: #1ed760;
}

.dpill__rich-art {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bg-raised);
}

.dpill__rich-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dpill__rich-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.dpill__rich-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   LIGHT THEME — set via <html data-theme="light">. Re-tints the
   design tokens (which flips most surfaces automatically) plus a
   few hardcoded spots that don't read from the tokens.
   ============================================================ */
[data-theme="light"] {
    --bg: #eef2f8;
    --bg-raised: #ffffff;
    --bg-card: #ffffff;
    --border: rgba(15, 23, 42, 0.1);
    --text: #101828;
    --text-muted: #55617a;
    --accent: #2563eb;
    --accent-2: #1d4ed8;
    --accent-3: #3b82f6;
    --accent-soft: rgba(37, 99, 235, 0.1);
    --accent-glow: rgba(37, 99, 235, 0.22);

    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] body {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(37, 99, 235, 0.08), transparent 60%),
        var(--bg);
}

[data-theme="light"] .nav {
    box-shadow:
        0 10px 40px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 var(--glass-highlight);
}

[data-theme="light"] .nav__ctrl {
    background: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .nav__ctrl:hover {
    background: var(--accent-soft);
}

[data-theme="light"] .nav__menu.is-open {
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .nav__link.is-active {
    background: rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .player__panel,
[data-theme="light"] .visitor-counter {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .discord-status-pill {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dpill__dot {
    border-color: #ffffff;
}

/* Inner panels that hardcoded a dark fill — flip them light so their text
   (now dark) stays readable. The terminal code-mock stays dark on purpose. */
[data-theme="light"] .spec-row,
[data-theme="light"] .os-row {
    background: rgba(15, 23, 42, 0.05);
}

/* ---------- Logo splash ---------- */

.logo-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: var(--bg);
    opacity: 1;
    visibility: visible;
    transition:
        background-color 0.62s ease,
        opacity 0.38s ease,
        visibility 0.38s ease;
}

.logo-splash.is-morphing {
    background-color: transparent;
}

.logo-splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.logo-splash__lockup {
    display: flex;
    align-items: center;
    gap: 18.526px;
    visibility: visible !important;
    transform-origin: center;
    will-change: transform, opacity;
    transition: opacity 0.16s ease;
}

.logo-splash__lockup.is-handing-off {
    opacity: 0;
}

.logo-splash__mark-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    padding: 3.368px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.88);
    transition:
        opacity 0.42s ease,
        filter 0.58s var(--ease-out),
        transform 0.64s var(--ease-spring),
        box-shadow 0.5s ease;
}

.logo-splash__mark-ring::before {
    content: "";
    position: absolute;
    inset: 3.368px;
    border-radius: 50%;
    background: var(--bg);
}

.logo-splash__mark {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
    filter: invert(1);
}

.logo-splash__wordmark {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 2.0547rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.38s ease 0.16s, transform 0.58s var(--ease-out) 0.16s;
}

.logo-splash__wordmark span {
    display: inline-block;
    color: var(--accent);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.28s ease 0.4s, transform 0.38s var(--ease-out) 0.4s;
}

.logo-splash.is-revealed .logo-splash__mark-ring {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.logo-splash.is-revealed .logo-splash__wordmark {
    opacity: 1;
    transform: translateX(0);
}

.logo-splash.is-revealed .logo-splash__wordmark span {
    opacity: 1;
    transform: translateY(0);
}

.logo-splash.is-morphing .logo-splash__mark-ring {
    box-shadow: 0 0 24px var(--accent-glow);
}

.nav__brand--splash-target {
    opacity: 0 !important;
    animation: none !important;
}

.nav__brand--splash-arrived {
    opacity: 1 !important;
    animation: none !important;
    transition: opacity 0.16s ease;
}

.nav__brand--splash-arrived .nav__logo-ring {
    animation: splash-ring-settle 0.6s ease-out both;
}

@keyframes splash-ring-settle {
    from { box-shadow: 0 0 18px var(--accent-glow); }
    to { box-shadow: 0 0 0 transparent; }
}

[data-theme="light"] .nav__logo,
[data-theme="light"] .logo-splash__mark {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .logo-splash__mark-ring,
    .logo-splash__lockup,
    .logo-splash__wordmark,
    .logo-splash__wordmark span {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}

/* The scene fades to near-invisible in light mode via scene.js's u_light
   uniform — nothing more needed here. */