:root{
    --bg:#ffffff;
    --text:#111111;
    --muted:#888888;
    --dash:#cccccc;
    --card:#bbbbbb;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body.dark{
    --bg:#111111;
    --text:#ffffff;
    --muted:#aaaaaa;
    --dash:#444444;
    --card:#555555;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:12px;
    overflow-x:hidden;
}

main{
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

/* ======================
   NAVBAR
====================== */

.navbar{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:20px 28px;
    margin-bottom:20px;

    background:var(--bg);

    backdrop-filter:blur(8px);

    border:1px dashed var(--dash);
}

/* .logo{
    font-size:14px;
    font-weight:800;
    letter-spacing:.15em;
} */

.nav-links{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
}

.nav-links a{
    text-decoration:none;
    color:var(--text);
    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:.25s ease;
}

.nav-links a:hover{
    opacity:.6;
}

.nav-dot{
    color:#aaaaaa;
    font-size:18px;
}

.pulse-dot{
    animation:pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot{
    0%{
        opacity:.3;
        transform:scale(.8);
    }
    50%{
        opacity:1;
        transform:scale(1.3);
    }
    100%{
        opacity:.3;
        transform:scale(.8);
    }
}

/* ======================
   HERO
====================== */

.hero{
    min-height:70vh;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:24px;

    padding:60px;

    border:1px dashed var(--dash);
}

.section-label{
    font-size:18px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--muted);
}

.hero h1{
    font-size:clamp(56px,9vw,110px);
    font-weight:800;
    line-height:.95;
    letter-spacing:-0.04em;
}

.hero-roles{
    min-height:40px;
    display:flex;
    align-items:center;
}

#changing-role{
    font-size:22px;
    font-weight:500;
    transition:.4s ease;
}

.role-enter{
    opacity:0;
    transform:translateY(15px);
}

.primary-btn,
.outline-btn,
.contact-btn,
.cv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:fit-content;

    text-decoration:none;

    padding:14px 24px;

    border:1px dashed var(--card);

    background:#fff;
    color:#111;

    cursor:pointer;

    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;

    transition:.3s ease;
}

.primary-btn{
    background:#111;
    color:#fff;
}

.primary-btn:hover,
.outline-btn:hover,
.contact-btn:hover{
    background:#111;
    color:#fff;
}

/* ======================
   SECTIONS
====================== */

.section{
    padding:90px 0;
}

.divider{
    border-top:1px dashed var(--dash);
    margin-bottom:40px;
}

/* ======================
   SKILLS
====================== */

.skills-grid{
    margin-top:35px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.skill-card{
    border:1px dashed var(--card);

    padding:36px;

    position:relative;

    transition:.35s ease;
}

.skill-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:2px;

    background:var(--text);

    transform:scaleX(0);
    
    transform-origin:left;

    transition:.4s ease;
}

.skill-card:hover{
    transform:translateY(-8px);
}

.skill-card:hover::before{
    transform:scaleX(1);
}

.card-label{
    display:block;

    margin-bottom:24px;

    color:var(--muted);

    font-size:12px;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.skill-card ul{
    list-style:none;
}

.skill-card li{
    padding:12px 0;
    border-bottom:1px dashed #dddddd;
    font-size:14px;
}

.skill-card li:last-child{
    border-bottom:none;
}

/* ======================
   PROJECTS
====================== */

/* .project-arrow{

    color:var(--muted);

    font-size:14px;

    letter-spacing:.1em;
} */

.projects-grid{
    margin-top:35px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.project-card{
    border:1px dashed var(--card);

    padding:40px;

    position:relative;

    transition:.35s ease;
}

.project-card:hover{
    transform:translateY(-8px);
    border-color:var(--text);
}

.project-card::after{
    content:"</>";

    position:absolute;
    top:25px;
    right:25px;

    color:#cccccc;
    font-size:20px;

    transition:.3s ease;
}

.project-card:hover::after{
    color:var(--text);
    transform:translate(4px,-4px);
}

.project-number{
    color:#aaaaaa;
    font-size:14px;
    font-weight:600;
    letter-spacing:.2em;
}

.project-card h3{
    margin:15px 0;

    font-size:30px;
    font-weight:700;
    line-height:1.1;
}

.project-card p{
    font-size:14px;
    line-height:1.7;
    margin-bottom:20px;
}

.tech-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:24px;
}

.tech-tags span{
    border:1px dashed var(--dash);

    padding:8px 12px;

    color:var(--muted);

    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.project-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* ======================
   RESUME
====================== */

.resume-box{
    width:100%;

    background:var(--text);

    color:var(--bg);

    border:1px dashed #111;

    text-align:center;

    padding:100px 60px;
}

.resume-heading{
    font-size:clamp(36px,5vw,72px);
    font-weight:800;
    line-height:1;
    letter-spacing:-0.04em;

    margin-bottom:24px;
}

.resume-box p{
    max-width:700px;
    margin:0 auto 32px;

    color:#cccccc;

    line-height:1.8;
}

.cv-btn{

    background:#ffffff;

    color:#111111;

    border:1px dashed #111111;
}

.cv-btn:hover{

    background:transparent;

    color:#ffffff;

    border:1px dashed #ffffff;
}

/* ======================
   CONTACT
====================== */

.contact-title{
    font-size:clamp(42px,6vw,72px);
    font-weight:800;
    letter-spacing:-0.03em;

    margin:20px 0 30px;
}

.contact-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.contact-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-top:40px;
}

.contact-card{

    border:1px dashed var(--dash);

    padding:24px;

    transition:.3s ease;
}

.contact-card:hover{

    transform:translateY(-5px);
}

.contact-label{

    display:block;

    margin-bottom:12px;

    color:var(--muted);

    font-size:12px;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.contact-card a{

    color:var(--text);

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    word-break:break-word;
}

/* ======================
   SCROLL ANIMATION
====================== */

.fade-in{
    opacity:0;
    transform:translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.fade-in.show{
    opacity:1;
    transform:translateY(0);
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:1024px){

    .skills-grid{
        grid-template-columns:1fr;
    }

    .projects-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:50px;
    }
}

@media(max-width:768px){

    body{
        padding:10px;
    }

    .navbar{

        padding:16px;

        gap:12px;

        flex-direction:column;
    }

    .logo{

        font-size:20px;
    }

    .nav-links{

        display:grid;

        grid-template-columns:
            repeat(3,auto);

        justify-content:center;

        gap:12px 18px;
    }

    .nav-links a{

        font-size:11px;

        letter-spacing:.08em;
    }

    .nav-dot{

        display:none;
    }

    .hero{
        min-height:60vh;
        padding:40px 24px;
    }

    .hero h1{
        font-size:54px;
    }

    .resume-box{
        padding:50px 24px;
    }

    .contact-buttons{
        flex-direction:column;
    }

    .contact-btn,
    .cv-btn{
        width:100%;
    }
}

@media(max-width:480px){

    .hero h1{
        font-size:40px;
    }

    .section-label{
        font-size:14px;
    }

    .project-card,
    .skill-card{
        padding:24px;
    }

    .project-card h3{
        font-size:24px;
    }
}

/* Signature */
.cv-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin-top:35px;

    flex-wrap:wrap;
}

.signature{

    height:55px;

    width:auto;

    object-fit:contain;

    transition:.3s ease;
}

/* Light Theme */

body:not(.dark) .signature{

    filter:invert(1);
}

/* Dark Theme */

body.dark .signature{

    filter:none;
}

.signature:hover{

    transform:translateY(-3px);
}

/* ======================
   SNAKE GAME
====================== */
.snake-modal{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,.95);

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transition:.3s ease;
}

.snake-modal.active{

    opacity:1;
    visibility:visible;
}

.snake-container{

    position:relative;

    width:min(700px,90vw);

    padding:20px;

    background:#111;

    border:1px dashed #fff;
}

.snake-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:15px;
}

.snake-label{

    color:#888;

    font-size:11px;

    letter-spacing:.15em;

    text-transform:uppercase;
}

#scoreDisplay{

    color:#fff;

    font-size:11px;

    letter-spacing:.15em;

    text-transform:uppercase;
}

#snakeCanvas{

    width:100%;
    height:auto;

    display:block;

    background:#111;

    border:1px dashed #fff;
}

.game-over{

    position:absolute;
    inset:0;

    display:none;

    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(17,17,17,.97);
}

.game-over.show{
    display:flex;
}

.game-over h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:15px;
}

.game-over p{

    color:#fff;

    margin-bottom:20px;

    letter-spacing:.1em;
}

.snake-btn{

    background:transparent;

    color:#fff;

    border:1px dashed #fff;

    padding:14px 28px;

    cursor:pointer;

    text-transform:uppercase;

    letter-spacing:.1em;

    transition:.3s ease;
}

.snake-btn:hover{

    background:#fff;

    color:#111;
}

.logo{

    position:relative;

    display:flex;
    align-items:center;
    gap:8px;

    cursor:pointer;

    font-size:24px;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:.3s ease;

    animation:logoBreath 4s infinite ease-in-out;
}

.snake-hint{

    position:absolute;

    top:-12px;
    right:-18px;

    font-size:14px;

    opacity:0;

    transition:.3s ease;
}

.logo:hover{

    transform:scale(1.08);
}

.logo:hover .snake-hint{

    opacity:1;

    animation:snakeFloat 1.2s infinite ease-in-out;
}

@keyframes snakeFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }

    100%{
        transform:translateY(0);
    }
}

.logo:hover .snake-hint{

    opacity:1;

    transform:
        translateY(0)
        rotate(0deg);
}

@keyframes logoBreath{

    0%{
        opacity:1;
    }

    50%{
        opacity:.65;
    }

    100%{
        opacity:1;
    }
}

.secret-dot{

    width:5px;
    height:5px;

    border-radius:50%;

    background:#c0c0c0;

    animation:secretPulse 3s infinite;
}

@keyframes secretPulse{

    0%{
        opacity:.2;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.2;
    }
}

.easter-tooltip{

    position:absolute;

    top:120%;
    left:0;

    background:#111;
    color:#fff;

    border:1px dashed #fff;

    padding:6px 10px;

    font-size:10px;

    letter-spacing:.12em;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(5px);

    transition:.3s ease;

    white-space:nowrap;
}

.logo:hover .easter-tooltip{

    opacity:1;

    transform:translateY(0);
}

.close-game-btn{

    background:transparent;

    color:#fff;

    border:1px dashed #fff;

    padding:8px 14px;

    cursor:pointer;

    font-size:11px;

    letter-spacing:.1em;

    text-transform:uppercase;
}

.mobile-controls{

    display:none;

    margin-top:20px;

    flex-direction:column;

    align-items:center;

    gap:10px;
}

.middle-controls{

    display:flex;

    gap:10px;
}

.mobile-controls button{

    width:60px;

    height:60px;

    background:#111;

    color:#fff;

    border:1px dashed #fff;

    font-size:24px;

    cursor:pointer;
}

@media(max-width:1024px){

    .mobile-controls{
        display:flex;
    }

    .snake-container{
        width:95vw;
    }
}

/* Toggle */
.theme-toggle{

    background:none;

    border:1px dashed var(--dash);

    color:var(--text);

    width:40px;
    height:40px;

    cursor:pointer;

    font-size:16px;

    transition:.3s ease;
}

.theme-toggle:hover{

    background:var(--text);
    color:var(--bg);
}

.nav-links a,
.logo,
.theme-toggle{

    color:var(--text);
}

.contact-card,
.skill-card,
.project-card{

    background:var(--bg);
}

body.dark .navbar,
body.dark .skill-card,
body.dark .project-card,
body.dark .contact-card{

    background:var(--bg);
}

body.dark .primary-btn:hover{

    background:#ffffff;

    color:#111111;

    border-color:#ffffff;
}

body.dark .skill-card::before{

    background:#fff;
}

body.dark .cv-btn{

    background:#ffffff;

    color:#111111;

    border:1px dashed #111111;
}

body.dark .cv-btn:hover{

    background:#111111;

    color:#ffffff;

    border:1px dashed #111111;
}

/* =====================================
   Easter Egg 2 — Idle Cursor
===================================== */

body.idle,
body.idle *{

    cursor:none !important;
}

#idle-cursor{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:999999999;

    display:none;

    pointer-events:none;

    background:#111111;

    color:#ffffff;

    border:1px dashed #555555;

    padding:8px 12px;

    font-family:'Inter',sans-serif;

    font-size:12px;

    letter-spacing:.08em;

    text-transform:uppercase;

    animation:blink .8s infinite;
}

body.idle #idle-cursor{
    display:block;
}

@keyframes blink{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:0;
    }
}

#idle-cursor{

    transform:
        translate(-50%,-50%);
}

body.idle,
body.idle *,
body.idle *::before,
body.idle *::after{

    cursor:none !important;
}

/* =====================================
   Easter Egg 3 — Late Night Toast
===================================== */
/* #night-toast{

    position:fixed;

    left:50%;
    bottom:30px;

    transform:
        translateX(-50%)
        translateY(20px);

    opacity:0;

    z-index:999999;

    padding:14px 22px;

    background:#111;

    color:#fff;

    border:1px dashed #555;

    font-family:monospace;

    font-size:13px;

    letter-spacing:.08em;

    transition:.4s ease;

    box-shadow:
        0 0 25px rgba(255,255,255,.08);
}

#night-toast.show{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);
} */

#night-toast{

    position:fixed;

    left:50%;
    bottom:50px;

    transform:
        translateX(-50%)
        translateY(30px);

    opacity:0;

    z-index:999999;

    min-width:420px;

    padding:22px 32px;

    background:rgba(17,17,17,.98);

    color:#fff;

    border:2px dashed #666;

    border-radius:8px;

    font-family:monospace;

    font-size:18px;

    font-weight:600;

    letter-spacing:.08em;

    text-align:center;

    backdrop-filter:blur(10px);

    box-shadow:
        0 0 30px rgba(255,255,255,.12),
        0 0 60px rgba(255,255,255,.05);

    transition:
        opacity .4s ease,
        transform .4s ease;
}

#night-toast.show{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

    animation:
        toastPulse 2s infinite;
}

@keyframes toastPulse{

    0%{
        box-shadow:
            0 0 20px rgba(255,255,255,.10);
    }

    50%{
        box-shadow:
            0 0 40px rgba(255,255,255,.25);
    }

    100%{
        box-shadow:
            0 0 20px rgba(255,255,255,.10);
    }
}

#night-toast::before{

    content:"🌙";

    margin-right:12px;
}

#night-toast::after{

    content:"_";

    animation:
        toastCursor .8s infinite;
}

@media(max-width:768px){

    #night-toast{

        width:90vw;

        min-width:auto;

        font-size:15px;

        padding:18px 20px;

        bottom:25px;
    }
}

@keyframes toastCursor{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:0;
    }
}

body.dark #idle-cursor{

    background:#ffffff;

    color:#111111;

    border:1px dashed #555555;
}

body.idle a,
body.idle button,
body.idle .project-card,
body.idle .skill-card{

    cursor:none !important;
}

/* ======================
   EXPERIENCE
====================== */

.experience-grid{

    margin-top:35px;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(350px,1fr));

    gap:24px;
}

.experience-card{

    border:1px dashed var(--card);

    padding:36px;

    transition:.35s ease;

    position:relative;

    background:var(--bg);
}

.experience-card:hover{

    transform:translateY(-8px);

    border-color:var(--text);
}

.experience-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:var(--text);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s ease;
}

.experience-card:hover::before{

    transform:scaleX(1);
}

.experience-date{

    display:block;

    color:var(--muted);

    font-size:12px;

    letter-spacing:.15em;

    margin-bottom:12px;

    text-transform:uppercase;
}

.experience-card h3{

    font-size:28px;

    margin-bottom:8px;

    line-height:1.2;
}

.experience-company{

    display:block;

    color:var(--muted);

    font-size:14px;

    margin-bottom:20px;
}

.experience-card p{

    font-size:14px;

    line-height:1.8;

    margin-bottom:24px;
}

/* ======================
   ABOUT
====================== */
.about-box{

    margin-top:35px;

    border:1px dashed var(--card);

    padding:50px;

    background:var(--bg);

    transition:.35s ease;
}

.about-box:hover{

    border-color:var(--text);
}

.about-box h2{

    font-size:clamp(32px,5vw,60px);

    line-height:1;

    margin-bottom:24px;

    letter-spacing:-0.04em;
}

.about-box p{

    max-width:900px;

    line-height:1.9;

    font-size:16px;

    color:var(--muted);

    margin-bottom:30px;
}

.about-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.about-tags span{

    border:1px dashed var(--dash);

    padding:10px 16px;

    font-size:12px;

    letter-spacing:.08em;

    text-transform:uppercase;
}

/* ======================
   EDUCATION
====================== */

.education-grid{

    margin-top:35px;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:24px;
}

.education-card{

    border:1px dashed var(--card);

    padding:36px;

    transition:.3s ease;
}

.education-card:hover{

    transform:translateY(-8px);

    border-color:var(--text);
}

.education-year{

    display:block;

    color:var(--muted);

    font-size:12px;

    letter-spacing:.15em;

    margin-bottom:12px;
}

.education-card h3{

    font-size:28px;

    margin-bottom:12px;
}

.education-card p{

    color:var(--muted);

    margin-bottom:20px;
}

.education-score{

    font-weight:700;

    font-size:18px;
}

.scroll-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    background: transparent;
    border: none;
    outline: none;

    color: #111;
    font-size: 32px;
    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
}

.scroll-to-top {
    color: #111;
}

/* Dark mode */
body.dark .scroll-to-top,
body.dark-mode .scroll-to-top,
body.night-mode .scroll-to-top {
    color: #fff !important;
}