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

:root{
    --bg:#07090b;
    --text:#f5f6ef;
    --muted:#858b8d;
    --muted2:#60676b;
    --line:#252a2d;
    --lime:#cfff3a;
    --lime-soft:#cfff3a22;
    --panel:rgba(10,14,15,.72);
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

body{
    font-family:Vazirmatn,sans-serif;
    background:var(--bg);
    color:var(--text);
    cursor:none;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

.noise{
    position:fixed;
    inset:-50%;
    z-index:90;
    pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:noise .22s steps(2) infinite;
}

.svg-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-4;
    pointer-events:none;
}

.wire{
    fill:none;
    stroke:var(--lime);
    stroke-opacity:.08;
    stroke-width:1;
}

.wire2{
    stroke:#fff;
    stroke-opacity:.045;
}

/* =========================
   CURSOR
========================= */

.cursor{
    position:fixed;
    width:5px;
    height:5px;
    background:var(--lime);
    border-radius:50%;
    z-index:200;
    pointer-events:none;
}

.cursor-ring{
    position:fixed;
    left:0;
    top:0;
    width:34px;
    height:34px;
    border:1px solid var(--lime);
    border-radius:50%;
    z-index:199;
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease;
}

.cursor-ring.big{
    width:64px;
    height:64px;
    background:#cfff3a0c;
}

/* =========================================================
   MENU OPEN — DESKTOP CURSOR
========================================================= */

body.menu-open{
    cursor:auto;
}

body.menu-open .cursor,
body.menu-open .cursor-ring{
    display:none !important;
}

/*
 * در خود منوی تمام‌صفحه، موس واقعی مرورگر فعال باشد.
 */
body.menu-open .menu-panel{
    cursor:auto;
}

body.menu-open .menu-panel a,
body.menu-open .menu-panel .close{
    cursor:pointer;
}

/* =========================
   LOADER
========================= */

.loader{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:300;
    display:grid;
    place-content:center;
    transition:opacity .7s ease;
}

.loader-logo{
    font-size:55px;
    font-weight:900;
    letter-spacing:-6px;
}

.loader-logo span{
    color:var(--lime);
}

.loader-bar{
    width:200px;
    height:1px;
    background:#24282b;
    margin-top:24px;
    overflow:hidden;
}

.loader-bar i{
    display:block;
    width:0;
    height:100%;
    background:var(--lime);
    animation:load 1.3s forwards;
}

/* =========================
   HEADER
========================= */

header{
    position:fixed;
    inset:0 0 auto;
    height:82px;
    padding:0 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:100;
}

.brand{
    font-size:19px;
    font-weight:900;
    letter-spacing:-1px;
}

.brand span{
    color:var(--lime);
}

.brand b{
    font:7px monospace;
    color:#6b7074;
    margin-right:5px;
}

.progress{
    display:flex;
    align-items:center;
    gap:10px;
    font:9px monospace;
    color:#5e6368;
}

.progress strong{
    font-size:15px;
    color:var(--lime);
}

.progress i{
    width:75px;
    height:1px;
    background:#2a2e31;
}

.progress em{
    display:block;
    height:100%;
    width:16.6%;
    background:var(--lime);
    transition:width .7s ease;
}

.menu{
    width:43px;
    height:43px;
    border:1px solid #34393c;
    background:#0a0d0e;
    display:grid;
    place-content:center;
    gap:6px;
    cursor:none;
}

.menu span{
    display:block;
    width:17px;
    height:1px;
    background:#ddd;
}

/* =========================
   NAV DOTS
========================= */

.dots{
    position:fixed;
    left:34px;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:grid;
    gap:14px;
}

.dots button{
    width:7px;
    height:7px;
    padding:0;
    border:1px solid #596066;
    background:transparent;
    border-radius:50%;
    cursor:none;
    transition:.3s;
}

.dots button.active{
    background:var(--lime);
    border-color:var(--lime);
    box-shadow:0 0 18px var(--lime);
}

/* =========================
   SCENES
========================= */

.scene{
    position:absolute;
    inset:0;
    visibility:hidden;
    opacity:0;
    transform:scale(.97) rotateX(2deg);
    transition:
        opacity .85s cubic-bezier(.2,.8,.2,1),
        transform 1s cubic-bezier(.2,.8,.2,1),
        visibility .85s;
    overflow:hidden;
    isolation:isolate;
}

.scene.active{
    visibility:visible;
    opacity:1;
    transform:none;
}

.scene::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 70% 45%,
            transparent 0,
            transparent 35%,
            var(--bg) 100%
        );
    pointer-events:none;
    z-index:-1;
}

.eyebrow,
.section-head small,
.contact-copy small{
    font:9px monospace;
    letter-spacing:2px;
    color:var(--lime);
}

/* =========================
   HOME
========================= */

.home-copy{
    position:absolute;
    right:10vw;
    top:21vh;
    width:min(43vw,620px);
    z-index:5;
}

.home-copy h1{
    font-size:clamp(75px,8vw,130px);
    line-height:.82;
    letter-spacing:-7px;
    margin:20px 0;
}

.home-copy h1 span,
.section-head h2 span,
.contact-copy h2 span{
    color:#cfff3d;
}

.home-copy p{
    font-size:14px;
    color:var(--muted);
    line-height:2;
    max-width:500px;
}

.home-copy p b{
    color:var(--lime);
    font-weight:500;
}

.actions{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:35px;
}

.actions>a:last-child{
    color:#686e72;
    font-size:10px;
}

.cta{
    display:inline-flex;
    align-items:center;
    background:var(--lime);
    color:#080a0b;
    padding:13px 20px;
    font-size:11px;
    font-weight:900;
}

.cta b{
    margin-right:25px;
}

.hero-art{
    position:absolute;
    width:min(46vw,600px);
    height:min(46vw,600px);
    left:12vw;
    top:18vh;
}

.planet{
    position:absolute;
    inset:15%;
    border-radius:50%;
    display:grid;
    place-items:center;
}

.planet-core{
    width:190px;
    height:190px;
    border-radius:50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            #d9ff50,
            #596e1b 42%,
            #10150b 72%
        );
    box-shadow:
        0 0 100px #cfff3a22,
        inset -35px -25px 50px #000;
    display:grid;
    place-items:center;
    animation:breathe 5s ease-in-out infinite;
}

.planet-core span{
    font-size:65px;
    font-weight:900;
    letter-spacing:-7px;
    color:#071007;
    text-shadow:0 1px #eaff8b;
}

.ring{
    position:absolute;
    border:1px solid #cfff3a30;
    border-radius:50%;
    transform:rotateX(65deg) rotateZ(15deg);
}

.r1{
    inset:-7%;
    animation:spin 15s linear infinite;
}

.r2{
    inset:7%;
    border-style:dashed;
    transform:rotateX(70deg) rotateZ(-20deg);
    animation:spinr 20s linear infinite;
}

.r3{
    inset:18%;
    border-color:#fff1;
    transform:rotateY(70deg) rotateZ(30deg);
    animation:spin 24s linear infinite;
}

.sat{
    position:absolute;
    padding:7px 10px;
    border:1px solid #30383b;
    background:#090d0e;
    color:var(--lime);
    font:10px monospace;
    box-shadow:0 10px 30px #000;
    animation:float 4s ease-in-out infinite;
}

.sat1{top:8%;right:8%}
.sat2{bottom:14%;right:5%;animation-delay:-1s}
.sat3{top:44%;left:2%;animation-delay:-2s}
.sat4{bottom:10%;right:33%;animation-delay:-3s}
.sat5{bottom:20%;left:55%;animation-delay:-1s}
.sat6{bottom:30%;right:66%;animation-delay:-2s}
.sat7{bottom:50%;left:88%;animation-delay:-3s}
.sat8{bottom:60%;right:77%;animation-delay:-1s}

.star-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    animation:spin 35s linear infinite;
}

.micro{
    position:absolute;
    bottom:4%;
    left:6%;
    font:9px monospace;
    color:#545b5f;
    line-height:2;
}

.micro span{
    color:var(--lime);
}

/* =========================
   SECTION HEAD
========================= */

.section-head{
    position:absolute;
    right:10vw;
    top:13vh;
    z-index:6;
}

.section-head.wide{
    right:10vw;
}

.section-head h2{
    font-size:clamp(60px,6vw,100px);
    line-height:.9;
    letter-spacing:-6px;
    margin:25px 0;
}

/* =========================
   ABOUT
========================= */

.about-copy{
    position:absolute;
    right:52%;
    top:28vh;
    width:min(35vw,520px);
    z-index:4;
}

.about-copy .lead{
    font-size:25px;
    line-height:1.9;
}

.about-copy p:not(.lead){
    font-size:12px;
    color:var(--muted);
    line-height:2.1;
}

.metrics{
    display:flex;
    gap:35px;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:35px;
}

.metrics div{
    display:flex;
    flex-direction:column;
}

.metrics b{
    font-size:28px;
}

.metrics span{
    font-size:9px;
    color:var(--muted2);
}

.about-shape{
    position:absolute;
    width:42vw;
    height:42vw;
    max-width:520px;
    max-height:520px;
    left:6vw;
    top:18vh;
    animation:spin 30s linear infinite;
    opacity:.8;
}

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

.timeline{
    position:absolute;
    right:43%;
    top:25vh;
    width:min(45vw,700px);
    z-index:4;
}

.timeline article{
    display:grid;
    grid-template-columns:120px 35px minmax(0,1fr);
    align-items:center;
    min-height:125px;
    border-bottom:1px solid var(--line);
}

.timeline .year{
    font:9px monospace;
    color:var(--lime);
}

.timeline .line{
    height:100%;
    border-right:1px solid #343a3d;
    position:relative;
}

.timeline .line i{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--lime);
    right:-4px;
    top:50%;
    box-shadow:0 0 15px var(--lime);
}

.timeline small{
    font:9px monospace;
    color:#555;
}

.timeline h3{
    font-size:18px;
    margin:7px 0;
}

.timeline p{
    font-size:10px;
    color:#666d71;
    margin:0;
    line-height:2;
}

.giant{
    position:absolute;
    left:5vw;
    bottom:-3vw;
    font-size:28vw;
    font-weight:900;
    color:transparent;
    -webkit-text-stroke:1px #ffffff08;
    line-height:.7;
}

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

#skills .section-head{
    right:8vw;
    top:11vh;
    width:min(300px,25vw);
}

#skills .section-head h2{
    font-size:clamp(55px,5vw,82px);
    line-height:.9;
    letter-spacing:-5px;
    margin-bottom:20px;
}

.skill-wheel{
    position:absolute;
    left:5vw;
    top:22vh;
    width:min(34vw,460px);
    height:min(34vw,460px);
    display:grid;
    place-items:center;
    z-index:3;
}

.skill-wheel svg{
    position:absolute;
    width:100%;
    height:100%;
    animation:spin 25s linear infinite;
}

.wheel-center{
    width:135px;
    height:135px;
    border-radius:50%;
    background:var(--lime);
    color:#071007;
    display:grid;
    place-content:center;
    text-align:center;
    font-weight:900;
    font-size:14px;
    line-height:1.3;
    z-index:2;
    box-shadow:0 0 70px #cfff3a16;
    padding:15px;
}

.wheel-center small{
    font-size:9px;
    display:block;
    margin-top:8px;
    line-height:1.4;
    font-weight:600;
    letter-spacing:1px;
}

.skill{
    position:absolute;
    background:#0a0e0f;
    border:1px solid #333a3d;
    padding:7px 13px;
    color:var(--lime);
    font-size:11px;
    font-weight:600;
    font-family:Vazirmatn,sans-serif;
    z-index:5;
    animation:float 4s ease-in-out infinite;
    border-radius:3px;
    letter-spacing:.3px;
    white-space:nowrap;
    box-shadow:0 8px 25px #0008;
}

.s1{top:1%;right:43%}
.s2{top:18%;right:2%;animation-delay:-.5s}
.s3{top:55%;right:0;animation-delay:-1s}
.s4{bottom:14%;right:18%;animation-delay:-1.5s}
.s5{bottom:1%;right:47%;animation-delay:-2s}
.s6{bottom:16%;left:15%;animation-delay:-2.5s}
.s7{top:52%;left:1%;animation-delay:-3s}
.s8{top:18%;left:15%;animation-delay:-3.5s}

.skill-bars{
    position:absolute;
    right:7vw;
    top:35vh;
    width:min(34vw,450px);
    min-width:350px;
    padding:24px 28px;
    z-index:6;
    background:var(--panel);
    border:1px solid #ffffff12;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 25px 70px #0006;
}

.skill-bars div{
    margin-bottom:25px;
}

.skill-bars div:last-child{
    margin-bottom:0;
}

.skill-bars label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:12px;
    color:#b8bebf;
    font-weight:500;
    white-space:nowrap;
}

.skill-bars label b{
    color:var(--lime);
    font-size:12px;
    font-weight:700;
}

.skill-bars i{
    display:block;
    margin-top:9px;
    height:2px;
    background:var(--lime);
    width:var(--w);
    box-shadow:0 0 14px #cfff3a66;
    border-radius:2px;
}

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

.projects{
    position:absolute;
    right:43%;
    top:24vh;
    width:min(45vw,700px);
    z-index:4;
}

.work{
    display:grid;
    grid-template-columns:45px minmax(0,1fr) 45px;
    align-items:center;
    border-top:1px solid var(--line);
    padding:17px 0;
    transition:.35s;
}

.work:last-child{
    border-bottom:1px solid var(--line);
}

.work em{
    font:10px monospace;
    color:#555;
    font-style:normal;
}

.work small{
    font:8px monospace;
    color:#61686c;
}

.work h3{
    margin:4px 0;
    font-size:18px;
}

.work>b{
    font-size:20px;
    color:var(--lime);
    text-align:left;
}

.work:hover,
.active-work{
    background:#cfff3a08;
    padding-right:18px;
}

.cube{
    position:absolute;
    left:10vw;
    top:28vh;
    width:250px;
    height:250px;
    transform-style:preserve-3d;
    transform:rotateX(-25deg) rotateY(35deg);
    animation:cube 14s linear infinite;
}

.cube span{
    position:absolute;
    inset:0;
    border:1px solid #cfff3a35;
}

.cube span:nth-child(1){transform:translateZ(125px)}
.cube span:nth-child(2){transform:rotateY(90deg) translateZ(125px)}
.cube span:nth-child(3){transform:rotateX(90deg) translateZ(125px)}
.cube span:nth-child(4){transform:translateZ(-125px)}

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

.contact-orb{
    position:absolute;
    left:17vw;
    top:18vh;
    width:min(38vw,480px);
    height:min(38vw,480px);
    border:1px solid #cfff3a45;
    border-radius:50%;
    display:grid;
    place-items:center;
    animation:spin 25s linear infinite;
}

.contact-orb::before,
.contact-orb::after{
    content:"";
    position:absolute;
    border:1px dashed #fff1;
    border-radius:50%;
    inset:35px;
}

.contact-orb::after{
    inset:95px;
}

.contact-orb div{
    font-size:32px;
    line-height:.85;
    font-weight:900;
    text-align:center;
    color:var(--lime);
    animation:spinr 25s linear infinite;
}

.contact-orb span{
    color:transparent;
    -webkit-text-stroke:1px var(--lime);
}

.contact-orb i{
    position:absolute;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--lime);
    top:18px;
    left:50%;
    box-shadow:0 0 20px var(--lime);
}

.contact-copy{
    position:absolute;
    right:11vw;
    top:25vh;
    width:min(38vw,560px);
    z-index:6;
}

.contact-copy h2{
    font-size:clamp(65px,7vw,115px);
    line-height:.85;
    letter-spacing:-7px;
    margin:25px 0 45px;
}

.email{
    display:inline-block;
    max-width:100%;
    font-size:clamp(17px,2.3vw,29px);
    border-bottom:1px solid #34393c;
    padding-bottom:10px;
    overflow-wrap:anywhere;
}

.email b{
    color:var(--lime);
}

.social{
    display:flex;
    gap:25px;
    margin-top:35px;
}

.social a{
    font-size:10px;
    color:#646b6f;
}

.contact-svg{
    position:absolute;
    width:450px;
    height:450px;
    right:0;
    bottom:-170px;
    animation:spinr 28s linear infinite;
    opacity:.7;
}

/* =========================
   MENU
========================= */

.menu-panel{
    position:fixed;
    inset:0;
    background:var(--lime);
    color:#071007;
    z-index:180;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
    transform:translateY(-100%);
    transition:.75s cubic-bezier(.77,0,.18,1);
}

.menu-panel.open{
    transform:none;
}

.menu-panel a{
    font-size:38px;
    font-weight:900;
    cursor:pointer;
}

.close{
    position:absolute;
    top:20px;
    right:5vw;
    border:0;
    background:none;
    font-size:40px;
    cursor:pointer;
    color:#071007;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes load{
    to{width:100%}
}

@keyframes spin{
    to{transform:rotate(360deg)}
}

@keyframes spinr{
    to{transform:rotate(-360deg)}
}

@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}

@keyframes breathe{
    50%{transform:scale(1.05)}
}

@keyframes cube{
    to{
        transform:rotateX(335deg) rotateY(395deg);
    }
}

@keyframes noise{
    0%{transform:translate(0,0)}
    50%{transform:translate(2%,-1%)}
    100%{transform:translate(-1%,2%)}
}

/* =========================
   TABLET
========================= */

@media (min-width:851px) and (max-width:1199px){

    .home-copy{
        right:7vw;
        width:43%;
    }

    .home-copy h1{
        font-size:78px;
    }

    .hero-art{
        left:-3vw;
        opacity:.55;
    }

    .section-head{
        right:8vw;
    }

    .about-copy{
        right:48%;
        width:42%;
    }

    .timeline,
    .projects{
        right:32%;
        width:60%;
    }

    #skills .section-head{
        right:6vw;
        width:260px;
    }

    #skills .skill-wheel{
        left:-2vw;
        width:38vw;
        height:38vw;
        opacity:.7;
    }

    #skills .skill-bars{
        right:5vw;
        top:42vh;
        width:38%;
        min-width:310px;
    }
}

/* =========================
   LARGE DESKTOP
========================= */

@media (min-width:1200px){

    #skills .skill-wheel{
        left:18vw;
        width:min(32vw,450px);
        height:min(32vw,450px);
    }

    #skills .skill-bars{
        right:12vw;
        top:36vh;
        width:min(32vw,440px);
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width:850px){

    body{
        cursor:auto;
    }

    .cursor,
    .cursor-ring{
        display:none;
    }

    .dots{
        display:none;
    }

    header{
        padding:0 7vw;
    }

    .progress{
        display:none;
    }

    .home-copy{
        right:9vw;
        width:82%;
        top:23vh;
    }

    .home-copy h1{
        font-size:70px;
        letter-spacing:-5px;
    }

    .home-copy p{
        font-size:12px;
    }

    .hero-art{
        opacity:.22;
        left:-15vw;
        top:25vh;
        width:95vw;
        height:95vw;
    }

    .planet-core{
        width:150px;
        height:150px;
    }

    .planet-core span{
        font-size:50px;
    }

    .section-head{
        right:9vw;
        top:10vh;
        width:80%;
    }

    .section-head h2{
        font-size:58px;
        letter-spacing:-4px;
    }

    .about-copy{
        right:9vw;
        top:40vh;
        width:82%;
    }

    .about-copy .lead{
        font-size:19px;
    }

    .about-copy p:not(.lead){
        font-size:11px;
    }

    .metrics{
        gap:20px;
        margin-top:20px;
    }

    .metrics b{
        font-size:22px;
    }

    .about-shape{
        left:-18vw;
        top:20vh;
        width:90vw;
    }

    .timeline{
        right:9vw;
        top:37vh;
        width:82%;
    }

    .timeline article{
        grid-template-columns:80px 20px minmax(0,1fr);
        min-height:105px;
    }

    .timeline h3{
        font-size:13px;
    }

    .timeline p{
        font-size:9px;
    }

    .giant{
        font-size:45vw;
    }

    /* Skills mobile */

    #skills .section-head{
        right:9vw;
        top:8vh;
        width:80%;
    }

    #skills .section-head h2{
        font-size:58px;
    }

    #skills .skill-wheel{
        left:-15vw;
        top:8vh;
        width:90vw;
        height:90vw;
        opacity:.28;
    }

    #skills .skill-bars{
        right:9vw;
        top:40vh;
        width:82%;
        min-width:0;
        padding:18px 20px;
    }

    #skills .skill-bars div{
        margin-bottom:17px;
    }

    #skills .skill-bars label{
        font-size:10px;
    }

    #skills .skill{
        font-size:9px;
        padding:5px 9px;
    }

    .projects{
        right:9vw;
        top:35vh;
        width:82%;
    }

    .work{
        grid-template-columns:30px minmax(0,1fr) 30px;
        padding:13px 0;
    }

    .work h3{
        font-size:14px;
    }

    .work small{
        font-size:7px;
    }

    .cube{
        left:-30vw;
        top:25vh;
        opacity:.15;
    }

    .contact-orb{
        left:-20vw;
        top:26vh;
        width:90vw;
        height:90vw;
        opacity:.25;
    }

    .contact-copy{
        right:9vw;
        top:23vh;
        width:82%;
    }

    .contact-copy h2{
        font-size:57px;
        letter-spacing:-4px;
    }

    .contact-svg{
        display:none;
    }

    .social{
        gap:18px;
    }
}

/* accessibility */

@media (prefers-reduced-motion:reduce){

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