/*==================================================
    SHAHAB EBADI
    AI PERSONAL WEBSITE
==================================================*/

/*-------------------------
    RESET
--------------------------*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050505;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.7;

}

/*-------------------------
    COLORS
--------------------------*/

:root{

    --black:#050505;

    --card:#111111;

    --card2:#191919;

    --yellow:#FFD400;

    --yellow2:#FFE875;

    --gray:#A8A8A8;

    --white:#FFFFFF;

}

/*-------------------------
    TYPOGRAPHY
--------------------------*/

h1,h2,h3,h4{

    font-family:'Space Grotesk',sans-serif;

}

h1{

    font-size:5rem;

    font-weight:700;

    line-height:1;

}

h2{

    font-size:2.6rem;

    margin-bottom:25px;

}

p{

    color:var(--gray);

    font-size:1.05rem;

}

/*-------------------------
    LINKS
--------------------------*/

a{

    text-decoration:none;

    color:white;

}

/*-------------------------
    BACKGROUND
--------------------------*/

.background{

    position:fixed;

    inset:0;

    z-index:-100;

    overflow:hidden;

}

/* Radial Glow */

.gradient{

    position:absolute;

    width:900px;

    height:900px;

    background:radial-gradient(circle,
    rgba(255,212,0,.06),
    transparent 70%);

    top:-300px;

    right:-250px;

    animation:floatGlow 12s ease-in-out infinite;

}

/* Grid */

.grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,212,0,.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(240, 202, 14, 0.05) 1px, transparent 1px);

    background-size:60px 60px;

    opacity:.25;

}

/*-------------------------
    NAVIGATION
--------------------------*/

header{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
    backdrop-filter:blur(14px);
    background:rgba(5,5,5,.75);
    border-bottom:1px solid rgba(255,212,0,.12);
}

.navbar{

    width:min(1200px,92%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

}

.logo{

    font-size:1.5rem;

    font-weight:700;

    letter-spacing:2px;

}

.logo span{

    color:var(--yellow);

}

.nav-links{

    display:flex;

    list-style:none;

    gap:35px;

}

.nav-links a{

    position:relative;

    color:white;

    transition:.35s;

}

.nav-links a:hover{

    color:var(--yellow);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--yellow);

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

.menu-btn{

    display:none;

}

/*-------------------------
    HERO
--------------------------*/

.hero{

    width:min(1200px,92%);

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:60px;

}

.hero-small{

    color:var(--yellow);

    letter-spacing:3px;

    margin-bottom:20px;

    font-size:.85rem;

}

.hero span{

    color:var(--yellow);

}

.hero h2{

    color:#d5d5d5;

    font-size:1.5rem;

    margin:20px 0;

}

.hero-description{

    max-width:620px;

    margin-top:30px;

}

/*====================================
 AI PORTRAIT INTERFACE
====================================*/

.portrait-container{
    overflow:visible;
}

/* Golden energy ring */
.portrait-container::before{
    content:"";
    position:absolute;
    inset:-25px;
    border-radius:50%;
    border:1px solid rgba(255,212,0,.25);
    animation:pulseRing 5s infinite;
    z-index:0;
    pointer-events:none;
}

/* Inner circuit circle */
.portrait-container::after{
    content:"";
    position:absolute;
    inset:-60px;
    border-radius:50%;
    border:1px dashed rgba(255,212,0,.12);
    animation:rotateRing 30s linear infinite;
    z-index:0;
    pointer-events:none;
}

/* Technology orbit */
.tech-orbit{
    position:absolute;
    inset:-80px;
    border-radius:50%;
    animation:rotateRing 35s linear infinite;
    z-index:1; /* زیر scanner و بالای عکس */
    pointer-events:none;
}

/* Technology orbit nodes */
.tech-orbit span{

    position:absolute;

    background:#101010;

    border:1px solid rgba(255,212,0,.35);

    color:#FFD400;

    padding:8px 14px;

    border-radius:30px;

    font-size:.75rem;

    letter-spacing:1px;

    box-shadow:
    0 0 20px rgba(255,212,0,.08);

}

/* Position technology nodes */

.tech-orbit span:nth-child(1){
    top:0;
    left:45%;
}

.tech-orbit span:nth-child(2){
    right:5%;
    top:25%;
}

.tech-orbit span:nth-child(3){
    right:0;
    bottom:30%;
}

.tech-orbit span:nth-child(4){
    bottom:0;
    left:45%;
}

.tech-orbit span:nth-child(5){
    left:5%;
    bottom:30%;
}

.tech-orbit span:nth-child(6){
    left:0;
    top:25%;
}

.tech-orbit span:nth-child(7){
    top:18%;
    left:15%;
}

.tech-orbit span:nth-child(8){
    bottom:18%;
    right:15%;
}

/* Scanner line */
.scanner{
    display: none !important;
    position:absolute !important;

    left:0 !important;
    right:0 !important;

    top:5% !important;            /* برای شروع */
    width:100% !important;
    height:2px !important;

    background:#FFD400 !important;
    opacity:.55 !important;

    z-index:9999 !important;      /* از همه جلوتر */

    pointer-events:none !important;

    animation:scan 5s linear infinite !important;  /* جلوی override انیمیشن */

    -webkit-animation:scan 5s linear infinite !important;
    animation-play-state: running !important;
}
/* Status */
.system-status{

    position:absolute;

    bottom:-50px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:10px;

    background:#101010;

    padding:10px 20px;

    border-radius:30px;

    border:1px solid rgba(255,212,0,.2);

    z-index:4;
}

/* System status text */
.system-status p{
    font-size:.75rem;
    color:#FFD400;
    letter-spacing:2px;
}

/* Status dot */
.status-dot{
    width:8px;
    height:8px;
    background:#FFD400;
    border-radius:50%;
    animation:blink 1.5s infinite;
}

/* Animations */

@keyframes rotateRing{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes pulseRing{
    0%{
        transform:scale(.95);
        opacity:.4;
    }

    50%{
        transform:scale(1.05);
        opacity:1;
    }

    100%{
        transform:scale(.95);
        opacity:.4;
    }
}

@keyframes scan{
    from{
        top:5%;
    }
    to{
        top:95%;
    }
}

@keyframes blink{
    50%{
        opacity:.2;
    }
}

/*-------------------------
    BUTTONS
--------------------------*/

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.btn-primary,

.btn-secondary{

    padding:15px 34px;

    border-radius:60px;

    transition:.35s;

    font-weight:600;

}

.btn-primary{

    background:var(--yellow);

    color:black;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(255,212,0,.35);

}

.btn-secondary{

    border:1px solid var(--yellow);

}

.btn-secondary:hover{

    background:var(--yellow);

    color:black;

}

/*-------------------------
    PORTRAIT
--------------------------*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* مهم: portrait-container باید relative باشد و لایه‌ها ایزوله شوند */
.portrait-container{
    width:430px;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(255,212,0,.18);
    background:linear-gradient(180deg,#111,#050505);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    isolation:isolate; /* جلوگیری از تداخل z-index با عناصر دیگر */
}

.portrait-container img{
    width:88%;
    height:auto;

    position:relative;
    z-index:1; /* زیر scanner و بالای pseudoها */
}

/*-------------------------
    SECTIONS
--------------------------*/

.section{

    width:min(1200px,92%);

    margin:auto;

    padding:140px 0;

}

.section-title{

    margin-bottom:70px;

}

/*-------------------------
    FOOTER
--------------------------*/

footer{

    text-align:center;

    padding:70px 20px;

    border-top:1px solid rgba(255,212,0,.1);

}

footer h3{

    color:var(--yellow);

    margin-bottom:12px;

}

/*-------------------------
    ANIMATION
--------------------------*/

@keyframes floatGlow{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(40px);
    }
    100%{
        transform:translateY(0);
    }
}

/*-------------------------
    RESPONSIVE
--------------------------*/

@media(max-width:980px){

    .hero{
        grid-template-columns:1fr;
        padding-top:140px;
        text-align:center;
    }

    .hero-description{
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .nav-links{
        display:none;
    }

    .menu-btn{
        display:block;
        font-size:2rem;
        cursor:pointer;
    }

    h1{
        font-size:3.6rem;
    }

    .portrait-container{
        width:320px;
    }
}