/*======================================================
                RESET
======================================================*/

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

:root{

    --bg:#090909;

    --glass:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.15);

    --white:#F5F3EE;

    --gold:#B08D57;

    --gray:#BDBDBD;

    --shadow:0 15px 50px rgba(0,0,0,.45);

    --radius:28px;

    --transition:.45s cubic-bezier(.22,.61,.36,1);

}

html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}

body{

    background:var(--bg);

    color:var(--white);

    font-family:"Vazirmatn",sans-serif;

    overflow-x:hidden;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

img{

    display:block;

    max-width:100%;

}

ul{

    list-style:none;

}


/*======================================================
                    INTRO
======================================================*/

#intro{

    position:fixed;

    inset:0;

    z-index:9999;

    overflow:hidden;

    background:#000;
    /* display: none; */

}

.intro-image{

    position:absolute;

    inset:0;

    background:url("/img/hero.jpg") center center;

    background-size:cover;

    animation:introZoom 5s ease forwards;

}


/*======================================================
                    HERO
======================================================*/
.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}
.hero-bg{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:url("../img/hero.jpg") center center no-repeat;

    background-size:cover;

    z-index:-2;

    transform:scale(1);

    animation:kenburns 25s ease-in-out infinite alternate;

}

.hero-overlay{

    position:fixed;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.18),
        rgba(0,0,0,.55)
    );

    z-index:-1;

}
header{

    position:absolute;

    top:40px;

    left:60px;

    right:60px;

    z-index:100;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    width:110px;

    transition:var(--transition);

}

.logo img:hover{

    transform:scale(1.05);

}


.language-switch{

    display:flex;

    gap:10px;

}

.lang-btn{

    width:52px;

    height:52px;

    border-radius:50%;

    color:var(--white);

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

    backdrop-filter:blur(12px);

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

    transition:var(--transition);

}

.lang-btn:hover{

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

}

.lang-btn.active{

    background:var(--gold);

    color:#111;

}

@keyframes kenburns{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.15);

    }

}

@keyframes introZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.1);

    }

}
/*======================================================
                    GLASS CARD
======================================================*/

.glass-card{

    width:min(700px,90%);

    min-height:420px;

    padding:55px;

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

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:28px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    transition:.6s;

    position:relative;

    z-index:20;

}
.hero-content{

    text-align:center;

}

.hero-type{

    color:var(--gold);

    font-size:15px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:64px;

    font-family:"Cormorant Garamond",serif;

    font-weight:600;

    margin-bottom:15px;

}

.hero-content h2{

    font-size:22px;

    font-weight:300;

    color:#ddd;

    margin-bottom:25px;

}

.statement{

    color:#cfcfcf;

    line-height:2;

    margin-bottom:40px;

    font-size:17px;

}
.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.gold-btn{

    padding:16px 35px;

    background:var(--gold);

    color:#111;

    border-radius:50px;

    transition:.4s;

    font-weight:600;

}

.gold-btn:hover{

    transform:translateY(-4px);

}

.glass-btn{

    padding:16px 35px;

    border-radius:50px;

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

    color:#fff;

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    transition:.4s;

}

.glass-btn:hover{

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

}


.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    z-index:20;

    font-size:13px;

    letter-spacing:3px;

    color:#ddd;

    animation:float 2s infinite;

}


@keyframes fadeHero{

    from{

        opacity:0;

        transform:translate(-50%,calc(-50% + 30px));

    }

    to{

        opacity:1;

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

    }

}

@keyframes float{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,8px);

    }

    100%{

        transform:translate(-50%,0);

    }

}


#intro{

    transition:1s;
}

/*======================================
        LANGUAGE
======================================*/

.en{
    display:none;
}

body.en-mode .fa{
    display:none;
}

body.en-mode .en{
    display:inline;
}

body.en-mode{

    direction:ltr;

    font-family:"Cormorant Garamond",serif;

}

/*============================*/

.about-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.about-modal.active{

    display:flex;

}

.modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

}

.modal-window{

    position:relative;

    width:min(900px,92%);

    max-height:90vh;

    overflow:auto;

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

    backdrop-filter:blur(30px);

    border-radius:30px;

    z-index:2;

    padding:50px;

}

/* footer{

    display:none;

} */

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

footer{

    padding:60px 20px 40px;

    text-align:center;

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

}

.footer-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.footer-logo img{

    width:70px;

    margin:0 auto;

}

.footer-name h3{

    font-family:"Cormorant Garamond",serif;

    font-size:24px;

    font-weight:500;

    margin-bottom:6px;

}

.footer-name p{

    color:var(--gray);

    font-size:14px;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--gold);

    color:#111;

}

.copyright{

    color:var(--gray);

    font-size:13px;

    letter-spacing:1px;

    line-height:2;

}

.designer-credit{

    color:var(--gold);

    font-weight:500;

    transition:var(--transition);

}

.designer-credit:hover{

    color:var(--white);

}


.about-modal{

    opacity:0;

    visibility:hidden;

    transition:.4s;

    display:flex;

}

.about-modal.active{

    opacity:1;

    visibility:visible;

}
.glass-card.expanded{

    min-height:760px;

}
.biography{

    display:none;

    margin-top:40px;

    animation:fade .5s;

}
.biography.show{

    display:block;

}
.biography h2{

    text-align:center;

    margin-bottom:30px;

    font-size:32px;

    font-family:"Cormorant Garamond",serif;

}
.biography p{

    text-align:center;

    line-height:2.2;

    color:#ddd;

    margin-bottom:20px;

}
.contact-panel{

    display:none;

    margin-top:35px;

}
.contact-panel.show{

    display:block;

}
.contact-btn{

    width:100%;

    height:64px;

    margin:12px 0;

    border-radius:18px;

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

    backdrop-filter:blur(15px);

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:18px;

    padding:0 24px;

    transition:.35s;

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

}
.contact-btn:hover{

    transform:translateY(-4px);

    background:rgba(176,141,87,.25);

}
@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

body.gallery-page{

    background:var(--bg);

}

body.gallery-page header{

    position:sticky;

    top:0;

    background:rgba(9,9,9,.75);

    backdrop-filter:blur(18px);

    padding:22px 60px;

    left:0;

    right:0;

}

.gallery-title{

    font-family:"Cormorant Garamond",serif;

    font-size:20px;

    letter-spacing:2px;

    color:var(--gold);

}

.gallery-grid{

    columns:3 320px;

    column-gap:20px;

    padding:50px 60px 100px;

    max-width:1500px;

    margin:0 auto;

}

.gallery-item{

    break-inside:avoid;

    -webkit-column-break-inside:avoid;

    margin-bottom:20px;

    position:relative;

    overflow:hidden;

    border-radius:16px;

    cursor:pointer;

    background:#111;

}

.gallery-item.span-square .photo{ aspect-ratio:1/1; }
.gallery-item.span-tall .photo{ aspect-ratio:3/4; }
.gallery-item.span-wide .photo{ aspect-ratio:16/10; }

.gallery-item .photo{

    display:block;

    width:100%;

    background-size:cover;

    background-position:center;

    transition:transform .7s cubic-bezier(.22,.61,.36,1);

    /* image protection: no drag / no select on the background layer */
    -webkit-user-drag:none;

    user-select:none;

    pointer-events:none;

}

.gallery-item .item-title{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:14px 16px;

    font-size:13px;

    letter-spacing:.5px;

    color:var(--white);

    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));

    z-index:2;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(rgba(0,0,0,0) 55%,rgba(0,0,0,.65));

    opacity:0;

    transition:.4s;

}

.gallery-item:hover::after{ opacity:1; }

.gallery-item:hover .photo{ transform:scale(1.08); }

/*======================================================
                LIGHTBOX
======================================================*/

.lightbox{

    position:fixed;

    inset:0;

    z-index:999;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.9);

}

.lightbox-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:min(1100px,86%);

    max-height:92vh;

    overflow-y:auto;

    padding:10px 0;

}

.lightbox-image{

    width:100%;

    height:62vh;

    flex-shrink:0;

    background-size:contain;

    background-position:center;

    background-repeat:no-repeat;

    -webkit-user-drag:none;

    user-select:none;

    pointer-events:none;

}

.lightbox-caption{

    text-align:center;

    margin-top:20px;

    padding:0 20px;

    max-width:600px;

    flex-shrink:0;

}

.lightbox-caption h4{

    font-weight:500;

    color:var(--gold);

    font-size:20px;

    letter-spacing:.5px;

    margin-bottom:6px;

}

.lightbox-caption h4 .en{

    font-family:"Cormorant Garamond",serif;

    font-size:22px;

}

.lightbox-caption p{

    color:#ccc;

    font-size:14px;

    line-height:1.9;

}

.lightbox-caption:empty,
.lightbox-caption h4:empty,
.lightbox-caption p:empty{

    display:none;

}

.lightbox-close,
.lightbox-nav{

    position:absolute;

    z-index:3;

    width:52px;

    height:52px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:var(--white);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    transition:var(--transition);

}

.lightbox-close:hover,
.lightbox-nav:hover{

    background:var(--gold);

    color:#111;

}

.lightbox-close{

    top:30px;

    right:30px;

}

.lightbox-prev{ left:30px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:30px; top:50%; transform:translateY(-50%); }

/*======================================================
        FONT FIX — PERSIAN ALWAYS USES VAZIRMATN
        (Cormorant Garamond has no Persian glyphs,
        so without this override the browser silently
        falls back to a system default font)
======================================================*/

.hero-content h1 .fa,
.hero-content h2 .fa,
.biography h2 .fa,
.gallery-title .fa{

    font-family:"Vazirmatn",sans-serif;

}

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

@media (max-width: 768px){

    header{
        top:20px;
        left:20px;
        right:20px;
    }

    .logo img{
        width:80px;
    }

    .lang-btn{
        width:42px;
        height:42px;
        font-size:13px;
    }

    .glass-card{
        padding:35px 25px;
        min-height:auto;
    }

    .hero-content h1{
        font-size:42px;
    }

    .hero-content h2{
        font-size:17px;
    }

    .statement{
        font-size:15px;
    }

    .buttons{
        flex-direction:column;
        gap:14px;
    }

    .gold-btn,
    .glass-btn{
        width:100%;
        text-align:center;
        padding:14px 20px;
    }

    .modal-window{
        padding:30px 20px;
        width:95%;
    }

    .biography h2{
        font-size:24px;
    }

    .biography p{
        font-size:14px;
        line-height:1.9;
    }

    .scroll-indicator{
        display:none;
    }

    body.gallery-page header{
        padding:16px 20px;
    }

    .gallery-title{
        font-size:15px;
    }

    .gallery-grid{
        columns:2 160px;
        column-gap:12px;
        padding:25px 16px 60px;
    }

    .gallery-item{
        margin-bottom:12px;
        border-radius:10px;
    }

    .item-title{
        font-size:12px;
        padding:12px;
    }

    .lightbox-content{
        width:94%;
        max-height:94vh;
    }

    .lightbox-image{
        height:48vh;
    }

    .lightbox-caption h4{
        font-size:17px;
    }

    .lightbox-caption p{
        font-size:13px;
    }

    .lightbox-nav{
        width:42px;
        height:42px;
        font-size:15px;
    }

    .lightbox-prev{ left:12px; }
    .lightbox-next{ right:12px; }
    .lightbox-close{ top:16px; right:16px; }

}

@media (max-width: 420px){

    .hero-content h1{
        font-size:34px;
    }

    .glass-card{
        padding:28px 18px;
    }

    .contact-btn{
        height:56px;
        font-size:14px;
    }

}