/* ================================
   MR.AIWITHMAHDI
   CREATIVE PORTFOLIO V2
   PREMIUM STUDIO STYLE
================================ */


@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}



body {


    font-family:'Vazirmatn',Tahoma,sans-serif;


    background:

    radial-gradient(
    circle at 20% 10%,
    rgba(0,195,255,.18),
    transparent 30%
    ),


    radial-gradient(
    circle at 90% 80%,
    rgba(145,0,255,.18),
    transparent 35%
    ),


    #050509;


    color:#fff;


    overflow-x:hidden;


}



/* نور متحرک پس زمینه */


body::before {


    content:"";


    position:fixed;


    width:600px;

    height:600px;


    top:-250px;

    right:-200px;


    background:

    radial-gradient(
    circle,
    rgba(0,200,255,.25),
    transparent 70%
    );


    filter:blur(80px);


    animation:

    floatingLight 8s infinite alternate;


    z-index:-1;


}




@keyframes floatingLight {


from {

transform:translate(0,0);

}


to {

transform:translate(-80px,120px);

}


}







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


.hero {


    min-height:85vh;


    display:flex;


    justify-content:center;


    align-items:center;


    text-align:center;


    position:relative;


    padding:40px;



    background:


    linear-gradient(

    180deg,

    rgba(0,0,0,.35),

    #050509

    ),


    url("../images/project1.png");



    background-size:cover;


    background-position:center;


}




.hero::after {


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    90deg,

    rgba(0,200,255,.15),

    rgba(140,0,255,.15)

    );



}




.hero-content {


    position:relative;


    z-index:2;


    max-width:900px;


    animation:

    heroEnter 1.3s ease;


}




.hero span {


    display:inline-block;


    font-size:14px;


    letter-spacing:5px;


    color:#00d9ff;


    margin-bottom:25px;


    animation:

    glowText 3s infinite alternate;


}



@keyframes glowText {


from {

text-shadow:0 0 5px #00d9ff;

}


to {

text-shadow:0 0 25px #00d9ff;

}


}




.hero h1 {


    font-size:60px;


    line-height:1.4;


    font-weight:800;


    background:

    linear-gradient(

    90deg,

    #00eaff,

    #ffffff,

    #a000ff

    );


    -webkit-background-clip:text;


    color:transparent;



    margin-bottom:30px;


}



.hero p {


    font-size:21px;


    line-height:2.2;


    color:#ddd;


}



@keyframes heroEnter {


from {

opacity:0;

transform:translateY(60px);

}


to {

opacity:1;

transform:translateY(0);

}


}
 
/* ================================
            INTRO SECTION
================================ */


.intro {


    max-width:1100px;

    margin:80px auto 60px;

    padding:55px 45px;


    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    border:

    1px solid rgba(255,255,255,.12);



    border-radius:35px;



    backdrop-filter:blur(25px);



    box-shadow:


    0 30px 80px rgba(0,0,0,.45);



    text-align:center;



    animation:

    fadeReveal 1s ease;



}




.intro h2 {


    font-size:38px;


    font-weight:800;


    margin-bottom:30px;


    background:


    linear-gradient(

    90deg,

    #00ddff,

    #ffffff,

    #a855ff

    );


    -webkit-background-clip:text;


    color:transparent;


}



.intro p {


    max-width:850px;


    margin:auto;


    color:#d5d5d5;


    font-size:18px;


    line-height:2.4;


}







/* ================================
          GALLERY
================================ */



.portfolio {


    padding:70px 40px;


}



.gallery {


    max-width:1450px;


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(300px,1fr));


    gap:35px;


}







.card {


    position:relative;


    overflow:hidden;


    border-radius:30px;



    background:


    rgba(255,255,255,.04);



    border:


    1px solid rgba(255,255,255,.12);



    cursor:pointer;



    transform-style:preserve-3d;



    transition:


    transform .5s ease,

    box-shadow .5s ease;



    animation:


    cardShow .9s ease backwards;



}





.card::before {


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(0,220,255,.25),

    transparent

    );



    transform:

    translateX(-120%);



    transition:.7s;



    z-index:2;


}





.card:hover::before {


    transform:

    translateX(120%);



}





.card:hover {


    transform:


    translateY(-15px)

    rotateX(3deg);



    box-shadow:


    0 35px 80px rgba(0,200,255,.25);



}





.card img {


    width:100%;


    height:430px;


    object-fit:cover;


    display:block;



    transition:


    transform .8s ease,

    filter .5s ease;



}





.card:hover img {


    transform:

    scale(1.12);



    filter:

    brightness(1.15);



}





@keyframes cardShow {


from {


opacity:0;


transform:

translateY(60px);


}



to {


opacity:1;


transform:

translateY(0);


}


}





@keyframes fadeReveal {


from {


opacity:0;


transform:

translateY(40px);


}


to {


opacity:1;


transform:

translateY(0);


}


}
 
/* ================================
            CTA SECTION
================================ */


.contact-box {


    max-width:1000px;


    margin:100px auto;


    padding:70px 50px;



    text-align:center;



    position:relative;


    overflow:hidden;



    border-radius:40px;



    background:


    linear-gradient(

    135deg,

    rgba(0,220,255,.15),

    rgba(160,0,255,.18)

    );



    border:


    1px solid rgba(255,255,255,.15);



    backdrop-filter:blur(20px);



    box-shadow:


    0 30px 90px rgba(0,0,0,.5);



}





.contact-box::before {


    content:"";


    position:absolute;


    width:300px;


    height:300px;


    background:


    radial-gradient(

    circle,

    rgba(0,220,255,.4),

    transparent 70%

    );



    top:-150px;


    left:-100px;



    animation:


    pulseLight 5s infinite alternate;



}





@keyframes pulseLight {


from {


transform:scale(1);


opacity:.5;


}



to {


transform:scale(1.5);


opacity:1;


}


}






.contact-box h2 {


    position:relative;


    font-size:40px;


    margin-bottom:25px;


    font-weight:800;


}





.contact-box p {


    position:relative;


    color:#ddd;


    font-size:19px;


    line-height:2.2;


    max-width:800px;


    margin:auto;


}





.contact-box a {


    position:relative;


    display:inline-flex;


    align-items:center;


    justify-content:center;



    margin-top:35px;



    padding:16px 55px;



    border-radius:60px;



    color:white;


    text-decoration:none;



    font-size:18px;


    font-weight:700;



    background:


    linear-gradient(

    90deg,

    #00d9ff,

    #8b00ff

    );



    box-shadow:


    0 15px 40px rgba(0,200,255,.35);



    transition:.4s;



}




.contact-box a:hover {


    transform:

    translateY(-8px)

    scale(1.05);



    box-shadow:


    0 25px 60px rgba(150,0,255,.5);



}







/* ================================
              FOOTER
================================ */



footer {


    padding:40px;


    text-align:center;


    color:#777;


    border-top:


    1px solid rgba(255,255,255,.08);



    margin-top:80px;


}



footer p {


    font-size:15px;


}





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



@media(max-width:768px){



.hero {


    min-height:75vh;


    padding:25px;


}




.hero h1 {


    font-size:34px;


}



.hero p {


    font-size:16px;


}





.intro {


    margin:50px 20px;


    padding:35px 25px;


}




.intro h2 {


    font-size:28px;


}




.intro p {


    font-size:15px;


}




.portfolio {


    padding:30px 20px;


}





.gallery {


    gap:22px;


}





.card img {


    height:350px;


}





.contact-box {


    margin:60px 20px;


    padding:45px 25px;


}




.contact-box h2 {


    font-size:28px;


}




.contact-box p {


    font-size:16px;


}




.contact-box a {


    padding:14px 35px;


}


}
 
/* REMOVE HERO IMAGE BACKGROUND - PREMIUM VERSION */

.hero {

    background:

    radial-gradient(
        circle at top right,
        rgba(0,220,255,0.22),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(160,0,255,0.20),
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #050509,
        #0b1020,
        #050509
    ) !important;


}


/* اضافه کردن حس نور استودیویی */

.hero::before {

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:

    radial-gradient(
        circle,
        rgba(0,200,255,.18),
        transparent 70%
    );


    top:10%;

    left:50%;

    transform:translateX(-50%);


    filter:blur(50px);


    animation:

    heroGlow 6s infinite alternate;


}



@keyframes heroGlow {


from {

opacity:.4;

transform:translateX(-50%) scale(1);

}


to {

opacity:.9;

transform:translateX(-50%) scale(1.4);

}


}