/* ==========================
   MILAD KAZEMI
   DARK RED CINEMATIC THEME
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Vazirmatn',sans-serif;
    background:#050505;
    color:white;
    overflow:hidden;

}


/* HERO */

.hero{

    width:100%;
    height:100vh;

    display:flex;
    align-items:center;

    padding:8%;

    position:relative;


    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.95),
        rgba(0,0,0,.75),
        rgba(30,0,0,.35)
    ),

    url("assets/photo.jpg");


    background-size:cover;
    background-position:center;

}


/* RED CINEMA LIGHT */

.hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-150px;
    top:-150px;


    background:

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


    filter:blur(30px);

}



/* OVERLAY */

.overlay{

    position:absolute;

    inset:0;


    background:


    radial-gradient(
        circle at 20% 80%,
        rgba(255,0,0,.18),
        transparent 40%
    );


}



/* CONTENT */

.content{

    max-width:650px;

    z-index:2;


    animation:fadeUp 1.5s ease;

}



/* SMALL TITLE */

.content h3{

    font-size:18px;

    letter-spacing:10px;

    color:#ff3030;

    margin-bottom:20px;

    text-shadow:

    0 0 15px rgba(255,0,0,.7);

}



/* MAIN TITLE */

.content h1{

    font-size:80px;

    font-weight:900;


    line-height:1.1;


    color:white;


    text-shadow:

    0 0 20px rgba(255,0,0,.25),
    0 0 50px rgba(255,0,0,.15);

}



/* DESCRIPTION */

.content p{

    margin-top:25px;


    font-size:20px;

    line-height:2;


    color:#ddd;

}



/* BUTTONS */

.buttons{

    margin-top:50px;


    display:flex;

    flex-direction:column;

    gap:18px;

}



.buttons a{


    width:300px;

    height:62px;


    display:flex;

    align-items:center;

    justify-content:center;



    color:white;

    text-decoration:none;


    font-size:18px;

    font-weight:700;



    border-radius:18px;



    background:

    rgba(255,255,255,.06);



    border:

    1px solid rgba(255,0,0,.45);



    backdrop-filter:blur(15px);



    box-shadow:


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



    transition:.35s;


}



/* BUTTON HOVER */

.buttons a:hover{


    background:#b00000;


    border-color:#ff3030;


    transform:

    translateY(-7px);



    box-shadow:


    0 0 35px rgba(255,0,0,.65);



}



/* ANIMATION */

@keyframes fadeUp{


from{

    opacity:0;

    transform:translateY(60px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}



/* MOBILE */

@media(max-width:900px){


.hero{


    justify-content:center;

    text-align:center;

    padding:30px;


    background-position:70% center;


}



.content h1{


    font-size:48px;


}



.content h3{


    font-size:14px;

    letter-spacing:6px;


}



.content p{


    font-size:16px;


}



.buttons{


    align-items:center;


}



.buttons a{


    width:100%;

    max-width:320px;


}



}

/* ==========================================================
   PREMIUM CINEMATIC POLISH
   Keeps the original dark/red identity, but removes the
   harsh first-paint flash and makes the UI feel more luxe.
   ========================================================== */

:root{
    --red:#e50914;
    --red-bright:#ff3341;
    --glass:rgba(12,12,14,.52);
    --glass-border:rgba(255,255,255,.12);
    --mouse-x:50%;
    --mouse-y:50%;
}

html{
    background:#050505;
}

body{
    font-family:'Manrope','Vazirmatn',sans-serif;
    background:#050505 url("assets/photo.jpg") center/cover no-repeat fixed;
}

/* Keep the image visible immediately once preloaded. */
.hero{
    isolation:isolate;
    background-color:#050505;
    background-image:
        linear-gradient(90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.72) 46%,
            rgba(18,0,0,.28) 100%),
        url("assets/photo.jpg");
}

/* Subtle cinematic vignette + mouse light. */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(
            420px circle at var(--mouse-x) var(--mouse-y),
            rgba(255,35,45,.10),
            transparent 65%
        ),
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0,0,0,.36) 100%
        );
}

/* More refined heading hierarchy. */
.content{
    max-width:720px;
    animation:fadeUp 1.15s cubic-bezier(.22,.61,.36,1);
}

.content h3{
    font-family:'Manrope',sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:8px;
    text-transform:uppercase;
    color:#ff4652;
    text-shadow:0 0 22px rgba(255,40,50,.38);
    margin-bottom:18px;
}

.content h1{
    font-family:'Manrope',sans-serif;
    font-size:clamp(54px,7vw,86px);
    font-weight:800;
    letter-spacing:-2px;
    line-height:.98;
    text-shadow:
        0 2px 18px rgba(0,0,0,.45),
        0 0 35px rgba(255,0,0,.13);
}

.content p{
    margin-top:24px;
    font-size:17px;
    font-weight:500;
    letter-spacing:.2px;
    line-height:1.9;
    color:rgba(255,255,255,.78);
}

/* Premium glass buttons: less muddy, more controlled. */
.buttons{
    margin-top:42px;
    gap:14px;
}

.buttons a{
    position:relative;
    width:300px;
    height:60px;
    overflow:hidden;
    border-radius:15px;
    background:
        linear-gradient(135deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        0 12px 35px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px) saturate(125%);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
    font-size:16px;
    font-weight:700;
    letter-spacing:.2px;
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

/* Soft red sheen stays behind the button content. */
.buttons a::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,.08) 48%,
        transparent 76%
    );
    transform:translateX(-110%);
    transition:transform .7s ease;
    pointer-events:none;
}

.buttons a i,
.buttons a{
    z-index:0;
}

.buttons a:hover::before{
    transform:translateX(110%);
}

.buttons a:hover{
    background:
        linear-gradient(135deg,
            rgba(165,0,10,.62),
            rgba(55,0,5,.48));
    border-color:rgba(255,55,65,.65);
    transform:translateY(-5px);
    box-shadow:
        0 16px 42px rgba(0,0,0,.46),
        0 0 28px rgba(255,0,20,.24),
        inset 0 1px 0 rgba(255,255,255,.12);
}

/* Make the initial state smoother instead of a sudden flash. */
body:not(.loaded) .content{
    opacity:0;
    transform:translateY(24px);
}

body.loaded .content{
    opacity:1;
}

/* Mobile refinement */
@media(max-width:900px){
    body{
        background-attachment:scroll;
    }

    .hero{
        background-position:70% center;
    }

    .content h1{
        font-size:clamp(42px,12vw,58px);
        letter-spacing:-1px;
    }

    .content h3{
        font-size:11px;
        letter-spacing:5px;
    }

    .content p{
        font-size:15px;
    }

    .buttons a{
        height:58px;
        border-radius:14px;
    }
}

@media(prefers-reduced-motion:reduce){
    .content,
    .buttons a,
    .buttons a::before{
        animation:none !important;
        transition:none !important;
    }
}


/* ==========================================================
   DIRECTOR CREDIT + PROFESSIONAL SOCIAL BUTTON LAYOUT
   ========================================================== */

.director-credit{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    color:rgba(255,255,255,.88);
    font-family:'Manrope',sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.director-credit span{
    color:#e50914;
    font-size:11px;
    text-shadow:0 0 12px rgba(255,0,20,.45);
}

/* Give each platform icon its own visual space. */
.buttons a{
    justify-content:flex-start;
    padding:0 24px;
    gap:18px;
}

.buttons a i{
    position:relative;
    width:28px;
    min-width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin:0;
    color:#fff;
    text-shadow:0 0 14px rgba(255,40,50,.20);
}

.buttons a i::after{
    content:"";
    position:absolute;
    right:-10px;
    top:3px;
    width:1px;
    height:22px;
    background:rgba(255,255,255,.12);
}

.buttons a{
    font-family:'Manrope','Vazirmatn',sans-serif;
}

.buttons a:hover i{
    color:#fff;
    text-shadow:0 0 18px rgba(255,60,70,.55);
}

@media(max-width:900px){
    .director-credit{
        justify-content:center;
        margin-top:12px;
        font-size:11px;
        letter-spacing:3px;
    }

    .buttons a{
        padding:0 22px;
        gap:17px;
    }
}