@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ═══════════════════════ ПЕРЕМЕННЫЕ ═══════════════════════ */
:root {
    --bg:           #020408;
    --bg-2:         #060d18;
    --bg-3:         #0a1628;
    --card-bg:      rgba(14, 165, 233, 0.06);
    --card-hover:   rgba(14, 165, 233, 0.12);
    --border:       rgba(14, 165, 233, 0.14);
    --border-hover: rgba(56, 189, 248, 0.5);
    --accent:       #0ea5e9;
    --accent-2:     #38bdf8;
    --accent-3:     #7dd3fc;
    --text:         #f0f9ff;
    --text-muted:   rgba(224,242,254,0.45);
    --text-dim:     rgba(224,242,254,0.14);
    --glow:         0 0 40px rgba(14,165,233,0.12);
    --glow-str:     0 0 70px rgba(14,165,233,0.22);
    --r:            20px;
}
body.light {
    --bg:         #f0f7ff;
    --bg-2:       #dff0ff;
    --card-bg:    rgba(14,165,233,0.07);
    --card-hover: rgba(14,165,233,0.13);
    --border:     rgba(14,165,233,0.18);
    --text:       #020408;
    --text-muted: rgba(2,4,8,0.45);
    --text-dim:   rgba(2,4,8,0.14);
    --glow:       0 0 30px rgba(14,165,233,0.08);
}

/* ═══════════════════════ BASE ═══════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Syne',sans-serif;
    background:var(--bg);
    color:var(--text);
    font-weight:400;
    overflow-x:hidden;
    transition:background-color .4s,color .4s;
}
@media(pointer:fine){body{cursor:none}}

/* ═══════════════════════ CURSOR ═══════════════════════ */
#cursor-dot,#cursor-ring{display:none}
@media(pointer:fine){
    #cursor-dot{
        display:block;position:fixed;width:6px;height:6px;
        background:var(--accent-2);border-radius:50%;
        pointer-events:none;z-index:9999;
        transform:translate(-50%,-50%);
        transition:width .2s,height .2s;
        box-shadow:0 0 12px var(--accent-2);
    }
    #cursor-ring{
        display:block;position:fixed;width:38px;height:38px;
        border:1px solid rgba(56,189,248,.4);border-radius:50%;
        pointer-events:none;z-index:9998;
        transform:translate(-50%,-50%);
        transition:width .25s,height .25s,border-color .25s;
    }
    body.cursor-hover #cursor-dot{width:10px;height:10px}
    body.cursor-hover #cursor-ring{width:56px;height:56px;border-color:var(--accent-2)}
}

/* ═══════════════════════ NOISE ═══════════════════════ */
body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;
}

/* ═══════════════════════ STARS CANVAS ═══════════════════════ */
#stars-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.65}

/* ═══════════════════════ BLOBS ═══════════════════════ */
.blob{
    position:fixed;width:650px;height:650px;
    background:radial-gradient(circle,rgba(14,165,233,.08) 0%,transparent 65%);
    z-index:0;filter:blur(100px);pointer-events:none;will-change:transform;
    animation:blobA 20s ease-in-out infinite;
}
.blob:nth-child(2){
    animation:blobB 27s ease-in-out infinite;
    background:radial-gradient(circle,rgba(56,189,248,.055) 0%,transparent 65%);
}
@keyframes blobA{
    0%{transform:translate(0,0) scale(1)}
    25%{transform:translate(70px,-50px) scale(1.07)}
    50%{transform:translate(30px,70px) scale(.94)}
    75%{transform:translate(-50px,25px) scale(1.05)}
    100%{transform:translate(0,0) scale(1)}
}
@keyframes blobB{
    0%{transform:translate(0,0) scale(1)}
    33%{transform:translate(-80px,65px) scale(1.1)}
    66%{transform:translate(55px,-45px) scale(.9)}
    100%{transform:translate(0,0) scale(1)}
}

/* ═══════════════════════ PROGRESS BAR ═══════════════════════ */
#progress-bar{
    position:fixed;top:0;left:0;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
    z-index:200;width:0%;transition:width .08s linear;
    box-shadow:0 0 12px var(--accent);
}

/* ═══════════════════════ GLASS CARD ═══════════════════════ */
.glass-card{
    background:var(--card-bg);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border);border-radius:var(--r);
    transition:all .4s cubic-bezier(.2,1,.3,1);position:relative;z-index:1;
}
@media(hover:hover){
    .glass-card:hover{
        border-color:var(--border-hover);background:var(--card-hover);
        transform:translateY(-5px);box-shadow:var(--glow-str);
    }
}

/* ═══════════════════════ TYPOGRAPHY ═══════════════════════ */
.text-accent{font-weight:200;letter-spacing:-.04em}
.hero-name-gradient{
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 45%,var(--accent-3) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.typewriter-text::after{content:'|';animation:blink 1s step-end infinite;color:var(--accent-2);margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-badge{font-family:'Space Mono',monospace;border:1px solid var(--border);color:var(--accent-2);font-size:10px}

/* ═══════════════════════ NAV ═══════════════════════ */
.nav-glass{
    background:rgba(2,4,8,.74);backdrop-filter:blur(24px);
    border:1px solid var(--border);border-radius:var(--r);
}
body.light .nav-glass{background:rgba(240,247,255,.8)}
#liveClock{font-family:'Space Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:.05em}

/* ═══════════════════════ DOT NAV ═══════════════════════ */
#dot-nav{
    position:fixed;right:20px;top:50%;transform:translateY(-50%);
    z-index:100;display:flex;flex-direction:column;gap:14px;
}
@media(max-width:767px){#dot-nav{display:none}}
.dot-nav-item{display:flex;align-items:center;gap:8px;cursor:pointer;justify-content:flex-end}
.dot-nav-item .dot-label{
    font-family:'Space Mono',monospace;font-size:9px;text-transform:uppercase;
    letter-spacing:.1em;color:var(--text-muted);opacity:0;
    transform:translateX(8px);transition:opacity .2s,transform .2s;white-space:nowrap;
}
.dot-nav-item:hover .dot-label,.dot-nav-item.active .dot-label{opacity:1;transform:translateX(0)}
.dot-nav-item .dot-pip{
    width:6px;height:6px;border-radius:50%;
    background:var(--text-dim);border:1px solid var(--border);
    transition:all .3s;flex-shrink:0;
}
.dot-nav-item.active .dot-pip{background:var(--accent-2);box-shadow:0 0 10px var(--accent-2);width:8px;height:8px}
.dot-nav-item:hover .dot-pip{background:var(--accent-3);border-color:var(--accent-3)}

/* ═══════════════════════ SPACE BG SECTIONS ═══════════════════════ */
.space-section{position:relative;overflow:hidden}
.space-section>.section-inner{position:relative;z-index:1}
.space-photo{
    position:absolute;inset:0;background-size:cover;background-position:center;
    background-attachment:fixed;opacity:.13;z-index:0;pointer-events:none;
    transition:opacity .5s;
}
body.light .space-photo{opacity:.06}

/* ═══════════════════════ GLITCH NUMBERS ═══════════════════════ */
.glitch-number{position:relative;display:inline-block}
.glitch-number.glitching{animation:glitchA .32s steps(1) forwards}
@keyframes glitchA{
    0%{opacity:1;transform:translate(0);color:var(--text)}
    12%{opacity:.8;transform:translate(-2px,1px);color:var(--accent-2)}
    28%{opacity:1;transform:translate(2px,-1px)}
    44%{opacity:.75;transform:translate(-1px,2px);color:var(--accent-3)}
    60%{opacity:1;transform:translate(3px,0)}
    76%{opacity:.9;transform:translate(-2px,1px);color:var(--accent-2)}
    100%{opacity:1;transform:translate(0);color:var(--text)}
}
.glitch-number.glitching::before{
    content:attr(data-value);position:absolute;top:0;left:0;
    color:var(--accent-3);clip:rect(0,300px,12px,0);
    animation:glitchClip .32s steps(1) forwards;opacity:.7;
}
@keyframes glitchClip{
    0%{clip:rect(15px,300px,35px,0);transform:translate(-3px)}
    33%{clip:rect(5px,300px,18px,0);transform:translate(3px)}
    66%{clip:rect(30px,300px,50px,0);transform:translate(-2px)}
    100%{clip:rect(0,0,0,0)}
}

/* ═══════════════════════ MARQUEE ═══════════════════════ */
.marquee-track{
    overflow:hidden;white-space:nowrap;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:16px 0;background:rgba(14,165,233,.025);position:relative;z-index:1;
}
.marquee-inner{display:inline-flex;animation:mq 32s linear infinite}
.marquee-inner:hover{animation-play-state:paused}
.marquee-item{
    display:inline-flex;align-items:center;gap:26px;padding:0 26px;
    font-family:'Space Mono',monospace;font-size:10px;
    text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);
}
.marquee-item .dot{width:3px;height:3px;background:var(--accent);border-radius:50%;flex-shrink:0;box-shadow:0 0 5px var(--accent)}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════ STATS ROW ═══════════════════════ */
.stats-row{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;border:1px solid var(--border);border-radius:var(--r);
    overflow:hidden;background:var(--border);
}
.stat-item{
    background:var(--card-bg);padding:clamp(20px,3vw,32px) 16px;
    text-align:center;backdrop-filter:blur(10px);transition:background .3s;
}
@media(hover:hover){.stat-item:hover{background:var(--card-hover)}}
.stat-num{
    font-family:'Space Mono',monospace;
    font-size:clamp(1.8rem,4vw,3rem);font-weight:700;
    background:linear-gradient(135deg,var(--accent-2),var(--accent-3));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    line-height:1;margin-bottom:6px;
}
.stat-label{font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted)}
@media(max-width:480px){.stats-row{grid-template-columns:1fr}}

/* ═══════════════════════ MANIFESTO ═══════════════════════ */
.manifesto-quote{
    font-size:clamp(1.5rem,3.5vw,3rem);font-weight:300;font-style:italic;
    letter-spacing:-.03em;line-height:1.25;color:var(--text);
}
.manifesto-quote::before{content:'\201C';color:var(--accent-2);font-size:1.3em;margin-right:3px;vertical-align:-.1em}
.manifesto-quote::after{content:'\201D';color:var(--accent-2);font-size:1.3em;margin-left:3px;vertical-align:-.1em}

/* ═══════════════════════ SKILL CARDS ═══════════════════════ */
.skill-card{overflow:hidden}
.skill-card::before{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(135deg,transparent 55%,rgba(14,165,233,.07));
    opacity:0;transition:opacity .4s;
}
@media(hover:hover){.skill-card:hover::before{opacity:1}}

/* ═══════════════════════ PROJECTS SCROLL ═══════════════════════ */
.projects-scroll{
    display:flex;gap:20px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:16px;cursor:grab;
}
.projects-scroll:active{cursor:grabbing}
.projects-scroll::-webkit-scrollbar{height:3px}
.projects-scroll::-webkit-scrollbar-track{background:transparent}
.projects-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.project-card{
    flex:0 0 clamp(260px,42vw,460px);scroll-snap-align:start;
    height:clamp(280px,38vw,400px);border-radius:var(--r);
    overflow:hidden;position:relative;
    border:1px solid var(--border);transition:border-color .4s,transform .4s;
}
@media(hover:hover){
    .project-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--glow-str)}
}
.project-card::after{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(2,4,8,.92) 0%,rgba(2,4,8,.35) 55%,transparent 100%);
}
.project-bg{
    position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform .6s cubic-bezier(.2,1,.3,1);z-index:0;
}
@media(hover:hover){.project-card:hover .project-bg{transform:scale(1.06)}}
.project-bg-grid{
    background-color:var(--bg-2);
    background-image:linear-gradient(rgba(14,165,233,.07) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(14,165,233,.07) 1px,transparent 1px);
    background-size:40px 40px;
}
.project-content{position:absolute;bottom:0;left:0;right:0;padding:24px;z-index:2}
.project-desc{
    font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.5;
    max-height:0;overflow:hidden;opacity:0;transition:max-height .4s,opacity .4s;
}
@media(hover:hover){.project-card:hover .project-desc{max-height:60px;opacity:1}}

/* ═══════════════════════ CONTACT ═══════════════════════ */
.contact-link{
    position:relative;padding-bottom:4px;
    font-family:'Space Mono',monospace;font-size:11px;
    letter-spacing:.1em;text-transform:uppercase;transition:opacity .2s;
}
.contact-link::after{
    content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
    background:var(--accent-2);transition:width .3s;box-shadow:0 0 6px var(--accent-2);
}
@media(hover:hover){.contact-link:hover::after{width:100%}}

/* ═══════════════════════ MOBILE MENU ═══════════════════════ */
.mobile-menu{
    position:fixed;top:0;right:-100%;width:min(72%,300px);height:100vh;
    background:rgba(2,4,8,.97);backdrop-filter:blur(30px);
    z-index:1000;transition:right .35s cubic-bezier(.2,1,.3,1);
    padding:88px 32px;border-left:1px solid var(--border);
}
body.light .mobile-menu{background:rgba(240,247,255,.97)}
.mobile-menu.active{right:0}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999;display:none;backdrop-filter:blur(4px)}
.menu-overlay.active{display:block}

/* ═══════════════════════ SCANLINE ═══════════════════════ */
.scanline{
    position:fixed;top:0;left:0;right:0;height:2px;
    background:linear-gradient(transparent,rgba(14,165,233,.06),transparent);
    z-index:5;pointer-events:none;opacity:.5;
    animation:scanMove 10s linear infinite;
}
@keyframes scanMove{0%{transform:translateY(-4px)}100%{transform:translateY(100vh)}}

/* ═══════════════════════ MISC ═══════════════════════ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(14,165,233,.35);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::selection{background:var(--accent);color:#020408}
.theme-transition{transition:background-color .4s,color .4s,border-color .4s}

/* Section spacing — responsive */
.section-pad{padding:3.5rem 1.25rem}
@media(min-width:640px){.section-pad{padding:5rem 1.5rem}}
@media(min-width:1024px){.section-pad{padding:7rem 1.5rem}}

.bento-p{padding:1.25rem}
@media(min-width:640px){.bento-p{padding:2rem}}
@media(min-width:1024px){.bento-p{padding:2.5rem}}