:root {
    --accent: #67e8f9;
    --accent-dim: rgba(255, 255, 255, 0.15);
    --glass-bg: rgba(16, 16, 16, 0.5);
    --glass-border: rgba(255, 255, 255, 0.07);
    --cursor-size: 8px;
    --follower-size: 32px;
}


#page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    color: #d9fbff;
    background: #06090c;
    transition: opacity .42s ease, visibility .42s ease;
}
#page-loader.is-hidden { opacity: 0; visibility: hidden; }
#page-loader.is-leaving { opacity: 1; visibility: visible; }
.loader-mark { font: 600 clamp(2rem, 7vw, 4rem)/1 monospace; letter-spacing: -.12em; }
.loader-mark span { color: #67e8f9; }
.loader-mark i { display: inline-block; width: .15em; height: .9em; margin-left: .16em; background: #67e8f9; vertical-align: -.1em; animation: loader-blink .7s steps(2, start) infinite; }
#page-loader p { margin: 0; font: 10px/1 monospace; letter-spacing: .32em; color: rgba(217,251,255,.55); }
@keyframes loader-blink { 50% { opacity: 0; } }


#code-rain { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .55; }
.code-fragment { position: absolute; font: 11px/1.7 monospace; color: rgba(103,232,249,.14); white-space: pre; animation: code-fall linear infinite; }
.code-fragment .token-key { color: rgba(167,139,250,.45); }
.code-fragment .token-string { color: rgba(134,239,172,.4); }
@keyframes code-fall { from { transform: translateY(-18vh); } to { transform: translateY(115vh); } }
#narrative-orb { position: fixed; width: 30rem; height: 30rem; left: -12rem; top: 25vh; z-index: -1; pointer-events: none; border-radius: 50%; opacity: .16; filter: blur(70px); background: radial-gradient(circle, #22d3ee 0%, transparent 66%); }
.narrative-section { transition: filter .5s ease; }


.project-card { min-height: 300px; }
.code-preview { max-height: 0; overflow: hidden; opacity: 0; padding: 0 .8rem; border-left: 1px solid rgba(103,232,249,.45); font: 11px/1.7 monospace; color: #a5f3fc; transform: translateY(12px); transition: max-height .45s ease, opacity .35s ease, padding .45s ease, transform .45s ease; }
.project-card:hover .code-preview { max-height: 5rem; padding-top: .4rem; padding-bottom: .4rem; opacity: 1; transform: translateY(0); }
.code-key { color: #c4b5fd; }.code-string { color: #86efac; }.code-value { color: #fcd34d; }


.constellation-board { position: relative; min-height: 620px; isolation: isolate; background: radial-gradient(circle at 50% 46%, rgba(34,211,238,.14), rgba(7,15,22,.92) 48%, #080808 100%); }
.constellation-board::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .32; background-image: radial-gradient(rgba(165,243,252,.65) .7px, transparent .8px); background-size: 32px 32px; mask-image: radial-gradient(circle at center, black, transparent 80%); }
#constellation-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.constellation-core { position: absolute; left: 50%; top: 48%; width: 175px; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(103,232,249,.22); border-radius: 50%; box-shadow: inset 0 0 45px rgba(34,211,238,.12), 0 0 55px rgba(34,211,238,.11); pointer-events: none; }
.constellation-core span { position: absolute; inset: 12px; border: 1px dashed rgba(167,139,250,.35); border-radius: inherit; animation: orbit 18s linear infinite; }.constellation-core span:last-child { inset: 29px; border-color: rgba(103,232,249,.35); animation-direction: reverse; animation-duration: 12s; }
@keyframes orbit { to { transform: rotate(360deg); } }
.constellation-copy { z-index: 1; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); text-align: center; font: 500 clamp(1rem, 2vw, 1.35rem)/1.45 monospace; color: #fff; text-shadow: 0 0 30px rgba(103,232,249,.5); pointer-events: none; }
.tech-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; padding: .65rem .85rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(6,14,20,.85); color: #d9fbff; font: 12px monospace; box-shadow: 0 0 0 0 rgba(103,232,249,0); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.tech-node:hover, .tech-node:focus, .tech-node.is-active { transform: translate(-50%, -50%) scale(1.15); border-color: #67e8f9; background: rgba(18,60,72,.95); box-shadow: 0 0 25px rgba(103,232,249,.38); outline: none; }
.tech-minecraft { border-color: rgba(134,239,172,.55); color: #bbf7d0; }.tech-system { border-color: rgba(196,181,253,.45); }.tech-data { border-color: rgba(252,211,77,.45); }
.constellation-detail { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: calc(100% - 3rem); text-align: center; font: 12px/1.5 monospace; color: rgba(217,251,255,.7); }
@media (max-width: 640px) { .constellation-board { min-height: 680px; }.constellation-core { width: 130px; top: 51%; }.tech-node { padding: .45rem .55rem; font-size: 10px; }.constellation-copy { top: 51%; font-size: .85rem; }.tech-node:nth-of-type(1) { left: 50% !important; top: 9% !important; }.tech-node:nth-of-type(2) { left: 75% !important; top: 19% !important; }.tech-node:nth-of-type(3) { left: 25% !important; top: 19% !important; }.tech-node:nth-of-type(4) { left: 84% !important; top: 37% !important; }.tech-node:nth-of-type(5) { left: 16% !important; top: 37% !important; }.tech-node:nth-of-type(6) { left: 85% !important; top: 64% !important; }.tech-node:nth-of-type(7) { left: 15% !important; top: 64% !important; }.tech-node:nth-of-type(8) { left: 27% !important; top: 82% !important; }.tech-node:nth-of-type(9) { left: 73% !important; top: 82% !important; }.tech-node:nth-of-type(10) { left: 50% !important; top: 91% !important; }.constellation-detail { bottom: 1.2rem; font-size: 10px; } }


html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}


.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

.depth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 85%, rgba(180, 180, 255, 0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
}

#webgl-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .86;
}


body.cycle-night { --cycle-accent: rgba(80, 150, 190, .16); }
body.cycle-morning { --cycle-accent: rgba(93, 188, 195, .16); }
body.cycle-day { --cycle-accent: rgba(62, 157, 201, .16); }
body.cycle-evening { --cycle-accent: rgba(129, 91, 164, .16); }
body.cycle-night .depth-bg,
body.cycle-morning .depth-bg,
body.cycle-day .depth-bg,
body.cycle-evening .depth-bg { background: radial-gradient(ellipse at 22% 14%, var(--cycle-accent), transparent 46%), radial-gradient(ellipse at 78% 86%, rgba(15,20,34,.22), transparent 48%); }

.system-clock { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 20; display: grid; gap: .38rem; min-width: 182px; padding: .75rem .85rem; border: 1px solid rgba(165,243,252,.15); border-radius: .75rem; background: rgba(5,10,14,.54); backdrop-filter: blur(12px); color: rgba(217,251,255,.72); font: 10px/1.25 monospace; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
.system-clock div { display: grid; grid-template-columns: 62px 1fr; gap: .55rem; }.system-clock span { color: rgba(165,243,252,.36); }.system-clock strong { color: rgba(217,251,255,.8); font-weight: 500; letter-spacing: .04em; }
.system-clock.is-footer-visible { opacity: 0; transform: translateY(12px); visibility: hidden; }
body.cycle-evening .system-clock { border-color: rgba(196,181,253,.20); } body.cycle-evening .system-clock strong { color: rgba(221,214,254,.82); }
@media (max-width: 640px) { .system-clock { right: .75rem; bottom: .75rem; min-width: 158px; padding: .6rem .65rem; font-size: 9px; opacity: .86; }.system-clock div { grid-template-columns: 54px 1fr; } }

body > main,
body > header,
body > footer {
    position: relative;
}

body > main,
body > header,
body > footer { z-index: 10; }


* { cursor: none !important; }

#cursor {
    position: fixed;
    width: var(--cursor-size);
    height: var(--cursor-size);
    background: #67e8f9;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    
    margin-left: calc(var(--cursor-size) / -2);
    margin-top:  calc(var(--cursor-size) / -2);
    top: 0;
    left: 0;
    transition: width .15s ease, height .15s ease, background .2s ease;
    mix-blend-mode: difference;
    will-change: left, top;
}

#cursor-follower {
    position: fixed;
    width: var(--follower-size);
    height: var(--follower-size);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    margin-left: calc(var(--follower-size) / -2);
    margin-top:  calc(var(--follower-size) / -2);
    top: 0;
    left: 0;
    transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1), border-color .3s ease;
    will-change: left, top;
}


body.cursor-hover #cursor,
#cursor.cursor-big {
    width: 18px;
    height: 18px;
}
body.cursor-hover #cursor-follower,
#cursor-follower.cursor-big {
    width: 56px;
    height: 56px;
    border-color: rgba(255, 255, 255, 0.7);
}


.glass,
.card-glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
}

.glass {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


a, button {
    transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
a:hover {
    transform: translateY(-2px);
}


.card-glass {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease,
        border-color .3s ease;
    will-change: transform;
}
.card-glass:hover {
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 50px rgba(255,255,255,0.04);
}


* {
    scrollbar-width: thin;
    scrollbar-color: #333 #0a0a0a;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }


::selection {
    background: var(--accent);
    color: #000;
}


.split-text .char {
    display: inline-block;
    overflow: hidden;
}
.hero-line {
    overflow: hidden;
    display: block;
}


.fade-in-element,
.stagger-item {
    will-change: opacity, transform;
}


.marquee-track {
    display: flex;
    gap: 3rem;
    will-change: transform;
}
.marquee-wrapper {
    overflow: hidden;
    display: flex;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}


@media (prefers-reduced-motion: reduce) {
    .fade-in-element, .stagger-item, .char, .hero-line {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    #page-loader, .code-fragment, .loader-mark i, .constellation-core span { animation: none !important; transition: none !important; }
}