:root{
    --bg:#07080a;
    --panel:#101216;
    --panel-2:#15181d;
    --line:#24282f;
    --text:#e9edf2;
    --text-dim:#8b93a1;
    --text-faint:#565d6b;
    --accent:#8fd6ff;
    --accent-soft:rgba(143,214,255,.14);
    --mirror-1:#f4f8ff;
    --mirror-2:#9fb6cc;
    --mirror-3:#57657a;
}

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

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-weight:300;
    overflow-x:hidden;
    position:relative;
}

/* subtle vertical light streaks to suggest a mirrored/glass surface */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
            linear-gradient(100deg, transparent 40%, rgba(255,255,255,.025) 50%, transparent 60%),
            repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 140px);
    pointer-events:none;
    z-index:0;
}

.eyebrow{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:.72rem;
    color:var(--accent);
}

h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    letter-spacing:-.01em;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--mirror-1); }

/* ---------- NAV ---------- */
.navbar{
    background:rgba(7,8,10,.7);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    z-index:50;
}
.navbar .brand-mark{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--text);
}
.navbar .brand-mark span{ color:var(--accent); }
.nav-link-custom{
    font-family:'JetBrains Mono', monospace;
    font-size:.78rem;
    letter-spacing:.05em;
    color:var(--text-dim) !important;
    margin:0 .65rem;
    transition:color .2s ease;
}
.nav-link-custom:hover{ color:var(--text) !important; }

/* ---------- HERO ---------- */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    padding-top:80px;
}
.hero-name{
    font-size:clamp(2.6rem, 8vw, 6rem);
    font-weight:700;
    line-height:.98;
    margin-bottom:0;
    background:linear-gradient(180deg, var(--mirror-1) 0%, var(--mirror-2) 55%, var(--mirror-3) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    position:relative;
    display:inline-block;
}
/* mirror reflection under the name */
.hero-name-wrap{ position:relative; }
.hero-name-reflect{
    font-size:clamp(2.6rem, 8vw, 6rem);
    font-weight:700;
    line-height:.98;
    transform:scaleY(-1);
    background:linear-gradient(180deg, rgba(159,182,204,.35) 0%, rgba(87,101,122,.06) 60%, transparent 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    position:absolute;
    left:0; top:100%;
    width:100%;
    pointer-events:none;
    user-select:none;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%);
}
.hero-role{
    font-family:'JetBrains Mono', monospace;
    font-size:clamp(.95rem, 2vw, 1.25rem);
    color:var(--text-dim);
    margin-top:1.4rem;
}
.hero-role .cursor{
    display:inline-block;
    width:2px; height:1.05em;
    background:var(--accent);
    margin-left:2px;
    animation:blink 1s steps(1) infinite;
    vertical-align:-.15em;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-desc{
    max-width:560px;
    color:var(--text-dim);
    font-weight:300;
    line-height:1.75;
    margin-top:1.6rem;
}

.btn-mirror{
    background:linear-gradient(135deg, var(--mirror-1), var(--mirror-2));
    color:#0a0d10;
    font-family:'JetBrains Mono', monospace;
    font-size:.82rem;
    letter-spacing:.04em;
    padding:.75rem 1.6rem;
    border-radius:2px;
    border:none;
    transition:transform .25s ease, box-shadow .25s ease;
}
.btn-mirror:hover{
    color:#0a0d10;
    transform:translateY(-2px);
    box-shadow:0 12px 30px -8px rgba(143,214,255,.35);
}
.btn-outline-mirror{
    border:1px solid var(--line);
    color:var(--text-dim);
    font-family:'JetBrains Mono', monospace;
    font-size:.82rem;
    letter-spacing:.04em;
    padding:.75rem 1.6rem;
    border-radius:2px;
    transition:all .25s ease;
}
.btn-outline-mirror:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.hero-contact{
    font-family:'JetBrains Mono', monospace;
    font-size:.78rem;
    color:var(--text-faint);
}
.hero-contact i{ color:var(--accent); width:1.1rem; }

/* ---------- PROFILE PHOTO ---------- */
.profile-wrap{
    width:280px; height:280px;
    max-width:65vw;
    margin:0 auto;
    position:relative;
}

/* --- Lightning outer glow pulse (color-shifting) --- */
.profile-wrap::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:50%;
    background:radial-gradient(ellipse at center,
        rgba(255,100,200,.18) 0%,
        rgba(100,255,180,.10) 35%,
        rgba(100,140,255,.08) 55%,
        transparent 72%);
    animation:lightning-glow 2.4s ease-in-out infinite, hue-cycle 4s linear infinite;
    pointer-events:none;
    z-index:0;
}
@keyframes lightning-glow{
    0%,100%{ opacity:.5; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.09); }
}
@keyframes hue-cycle{
    from{ filter:hue-rotate(0deg); }
    to{   filter:hue-rotate(360deg); }
}

/* --- Spinning electric ring (full rainbow) — purely decorative, sibling of photo --- */
.profile-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    z-index:1;
    background:conic-gradient(
        from 0deg,
        #ff3cac   0%,
        transparent 3%,
        #ff6b35  8%,
        #fff200  12%,
        #ffffff  13%,
        #fff200  14%,
        transparent 18%,
        #23ff6e  28%,
        #00ffe0  33%,
        #ffffff  34%,
        #00ffe0  35%,
        transparent 42%,
        #3c8fff  52%,
        #a855f7  57%,
        #ffffff  58%,
        #a855f7  59%,
        transparent 66%,
        #ff3cac  75%,
        transparent 79%,
        #ff6b35  88%,
        #ffffff  90%,
        transparent 94%,
        #ff3cac 100%
    );
    animation:ring-spin 3s linear infinite;
    box-shadow:
        0 0 20px 5px rgba(255,60,172,.6),
        0 0 40px 12px rgba(35,255,110,.25),
        0 0 55px 18px rgba(60,143,255,.2),
        inset 0 0 12px rgba(255,242,0,.08);
}
@keyframes ring-spin{
    from{ filter:hue-rotate(0deg);   transform:rotate(0deg); }
    to{   filter:hue-rotate(360deg); transform:rotate(360deg); }
}

/* --- Arc sparks orbiting the ring — colorful --- */
/* Spark layer 1 — magenta/pink, fast counter-clockwise */
.profile-ring::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2.5px solid transparent;
    border-top-color:#ff3cac;
    border-right-color:rgba(255,60,172,.4);
    animation:arc-spin1 1.1s linear infinite;
    filter:blur(.4px) drop-shadow(0 0 6px #ff3cac);
    pointer-events:none;
}
@keyframes arc-spin1{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(-360deg); }
}
/* Spark layer 2 — lime green, slower clockwise */
.profile-ring::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2.5px solid transparent;
    border-bottom-color:#23ff6e;
    border-left-color:rgba(35,255,110,.35);
    animation:arc-spin2 1.8s linear infinite;
    filter:blur(.4px) drop-shadow(0 0 6px #23ff6e);
    pointer-events:none;
}
@keyframes arc-spin2{
    from{ transform:rotate(120deg); }
    to{   transform:rotate(480deg); }
}

/* --- Inner photo container — absolute sibling, no spin needed --- */
.profile-photo{
    position:absolute;
    inset:4px;
    border-radius:50%;
    overflow:hidden;
    background:var(--panel);
    z-index:2;
    display:flex; align-items:center; justify-content:center;
}
.profile-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.profile-photo .initials{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:2.6rem;
    background:linear-gradient(180deg, var(--mirror-1), var(--mirror-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* glossy highlight sweep across the photo */
.profile-photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.05) 100%);
    pointer-events:none;
}

/* --- Extra lightning bolt sparks — each a different vivid color --- */
.profile-spark{
    position:absolute;
    border-radius:50%;
    border:2px solid transparent;
    pointer-events:none;
    z-index:2;
}
/* Spark 1 — electric orange, tight orbit, very fast */
.profile-spark:nth-child(1){
    inset:-14px;
    border-top-color:#ff6b35;
    border-right-color:rgba(255,107,53,.3);
    animation:arc-spin3 .65s linear infinite;
    filter:blur(.3px) drop-shadow(0 0 7px #ff6b35);
}
/* Spark 2 — violet/purple, wide orbit, reverse */
.profile-spark:nth-child(2){
    inset:-28px;
    border-bottom-color:#a855f7;
    border-left-color:rgba(168,85,247,.3);
    animation:arc-spin3 1.3s linear infinite reverse;
    filter:blur(.4px) drop-shadow(0 0 7px #a855f7);
}
/* Spark 3 — golden yellow, inner orbit */
.profile-spark:nth-child(3){
    inset:-5px;
    border-right-color:#fff200;
    border-top-color:rgba(255,242,0,.25);
    animation:arc-spin3 1.9s linear infinite;
    filter:blur(.3px) drop-shadow(0 0 6px #fff200);
}
@keyframes arc-spin3{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(360deg); }
}

/* flicker on hover — intensify all colors */
.profile-wrap:hover .profile-ring{
    animation:ring-spin .8s linear infinite;
    box-shadow:
        0 0 28px 8px rgba(255,60,172,.7),
        0 0 45px 16px rgba(35,255,110,.35),
        0 0 65px 22px rgba(60,143,255,.3),
        inset 0 0 16px rgba(255,242,0,.1);
}

.scroll-cue{
    position:absolute;
    bottom:2.2rem; left:50%;
    transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace;
    font-size:.68rem;
    letter-spacing:.2em;
    color:var(--text-faint);
    text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-cue .line{
    width:1px; height:34px;
    background:linear-gradient(var(--accent), transparent);
    animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ---------- SECTION SHELL ---------- */
section{ position:relative; z-index:1; padding:6.5rem 0; }
.section-head{ margin-bottom:3rem; }
.section-num{
    font-family:'JetBrains Mono', monospace;
    color:var(--text-faint);
    font-size:.78rem;
    letter-spacing:.1em;
}
.section-title{
    font-size:clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight:600;
    color:var(--text);
    margin-top:.4rem;
}
.section-rule{
    width:46px; height:2px;
    background:var(--accent);
    margin-top:1rem;
}

.divider{
    border:none;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
    margin:0;
}

/* ---------- ABOUT ---------- */
.about-panel{
    background:linear-gradient(160deg, var(--panel), var(--panel-2));
    border:1px solid var(--line);
    border-radius:6px;
    padding:2.4rem;
    position:relative;
    overflow:hidden;
}
.about-panel::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(143,214,255,.05) 48%, transparent 66%);
    transform:translateX(-100%);
    transition:transform 1.2s ease;
}
.about-panel:hover::after{ transform:translateX(100%); }
.about-panel p{ color:var(--text-dim); line-height:1.85; font-weight:300; font-size:1.02rem; }

.stat-line{
    display:flex; justify-content:space-between;
    font-family:'JetBrains Mono', monospace;
    font-size:.78rem;
    color:var(--text-faint);
    padding:.6rem 0;
    border-bottom:1px solid var(--line);
}
.stat-line span:last-child{ color:var(--text); }
.stat-line:last-child{ border-bottom:none; }

/* ---------- SKILLS ---------- */
.skill-group{ margin-bottom:2.1rem; }
.skill-group-label{
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--text-faint);
    margin-bottom:.9rem;
}
.chip{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:.8rem;
    color:var(--text-dim);
    border:1px solid var(--line);
    background:var(--panel);
    padding:.4rem .9rem;
    border-radius:2px;
    margin:0 .5rem .5rem 0;
    transition:all .2s ease;
}
.chip:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-soft);
    transform:translateY(-2px);
}

/* ---------- TIMELINE / PROJECTS ---------- */
.timeline{ position:relative; padding-left:2.4rem; }
.timeline::before{
    content:"";
    position:absolute; left:6px; top:6px; bottom:6px;
    width:1px;
    background:linear-gradient(var(--accent), var(--line) 30%, var(--line) 70%, transparent);
}
.t-item{ position:relative; padding-bottom:3rem; }
.t-item:last-child{ padding-bottom:0; }
.t-item::before{
    content:"";
    position:absolute; left:-2.4rem; top:.35rem;
    width:9px; height:9px;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--accent);
}
.t-date{
    font-family:'JetBrains Mono', monospace;
    font-size:.75rem;
    color:var(--accent);
    letter-spacing:.04em;
}
.t-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.2rem;
    font-weight:600;
    color:var(--text);
    margin:.3rem 0 .2rem;
}
.t-role{
    font-family:'JetBrains Mono', monospace;
    font-size:.75rem;
    color:var(--text-faint);
    margin-bottom:.8rem;
    display:block;
}
.t-item ul{ color:var(--text-dim); font-weight:300; padding-left:1.1rem; line-height:1.8; }
.t-item ul li::marker{ color:var(--accent); }

/* ---------- EDUCATION ---------- */
.edu-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:1.8rem;
    height:100%;
    transition:border-color .25s ease, transform .25s ease;
}
.edu-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.edu-year{
    font-family:'JetBrains Mono', monospace;
    color:var(--accent);
    font-size:.78rem;
}
.edu-card h3{ font-size:1.15rem; color:var(--text); margin:.6rem 0 .2rem; }
.edu-card .edu-sub{ color:var(--text-dim); font-size:.92rem; font-weight:300; }

/* ---------- LANGUAGES ---------- */
.lang-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 0;
    border-bottom:1px solid var(--line);
}
.lang-row:last-child{ border-bottom:none; }
.lang-name{ font-family:'Space Grotesk', sans-serif; font-size:1.05rem; color:var(--text); }
.lang-bar-track{ width:180px; height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.lang-bar-fill{ height:100%; background:linear-gradient(90deg, var(--mirror-3), var(--accent)); }
.lang-tag{ font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--text-faint); }

/* ---------- REFERENCES ---------- */
.ref-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:1.8rem;
    height:100%;
}
.ref-card .ref-name{ font-family:'Space Grotesk', sans-serif; font-size:1.05rem; color:var(--text); }
.ref-card .ref-role{ font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--accent); letter-spacing:.05em; text-transform:uppercase; }
.ref-card .ref-detail{ color:var(--text-dim); font-size:.88rem; margin-top:.9rem; line-height:1.9; }
.ref-detail i{ color:var(--text-faint); width:1.1rem; }

/* ---------- CONTACT / FOOTER ---------- */
.contact-panel{
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:6px;
    padding:3.2rem;
    text-align:center;
}
.contact-panel h2{
    font-size:clamp(1.8rem, 4vw, 2.8rem);
    background:linear-gradient(180deg, var(--mirror-1), var(--mirror-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-weight:700;
}
footer{
    border-top:1px solid var(--line);
    padding:2rem 0;
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    color:var(--text-faint);
}

.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ transition:none; opacity:1; transform:none; }
    .about-panel::after{ display:none; }
}

@media (max-width: 767px){
    .lang-bar-track{ width:110px; }
}