/* ===========================
   RESET
=========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Montserrat',sans-serif;
    background:#f8f6f3;
    color:#2f2a25;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{
    display:block;
    max-width:100%;
}
a{
    color:inherit;
    text-decoration:none;
}
button,
input,
textarea,
select{
    font:inherit;
}
ul,
ol{
    list-style:none;
}

/* ===========================
   ROOT
=========================== */
:root{
    /* Colors */
    --primary:#8b6b4a;
    --secondary:#b89b72;
    --dark:#2f2a25;
    --light:#ffffff;
    --cream:#f8f6f3;
    --border:rgba(255,255,255,.18);

    /* Font */
    --heading:'Cormorant Garamond',serif;
    --body:'Montserrat',sans-serif;

    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.15);
    --transition:.35s ease;
}

/* ===========================
   LAYOUT
=========================== */
.app{
    width:100%;
    overflow:visible;
}
section{
    position:relative;
    width:100%;
}

/* ========================================
   FULL PAGE SECTION SNAP
======================================== */
html{
    scroll-snap-type:y mandatory;
}
section{
    scroll-snap-align:start;
    scroll-snap-stop:always;
}

/* ===========================
   COMMON
=========================== */
.container{
    width:min(100%,1200px);
    margin:auto;
    padding:0 24px;
}
.title{
    font-family:var(--heading);
}
.text-center{
    text-align:center;
}

/* ===========================
   BUTTON
=========================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    transition:var(--transition);
}
.btn:hover{
    transform:translateY(-2px);
}

/* ===========================
   SCROLLBAR
=========================== */
body.lock-scroll{
    overflow:hidden;
    height:100vh;
}

/* ===========================
   MAIN LAYOUT
=========================== */
.main-layout{
    position:relative;
    width:100%;
    min-height:100vh;
}
.content-layout{
    position:relative;
    width:100%;
    min-height:100vh;
    isolation:isolate;
}
.side-opening{
    display:none;
    position:relative;
}

/* ===========================
   SIDE OPENING CONTENT
=========================== */
.side-opening-content{
    position:absolute;
    top:42px;
    left:42px;
    z-index:2;
    color:#fff;
}
.side-opening-subtitle{
    font-size:.8rem;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
    opacity:.9;
}
.side-opening-title{
    font-family:var(--heading);
    font-size:2.3rem;
    font-weight:600;
    line-height:1.05;
    text-shadow:0 4px 18px rgba(0,0,0,.25);
}

/* ===========================
   BACKGROUND VIDEO
=========================== */
.background-video{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
    pointer-events:none;
}
.content-layout::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0, 0, 0, 0.527);
    z-index:-2;
    pointer-events:none;
}

/* ===========================
   DESKTOP
=========================== */
@media (min-width:1200px){
    .main-layout{
        display:block;
    }

    .side-opening{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:45vw;
        height:100vh;
        overflow:hidden;
        background:
            linear-gradient(rgba(0,0,0,.573),rgba(0,0,0,.18)),
            url("../assets/images/Opening 2.png")
            center center / cover
            no-repeat;
        box-shadow:10px 0 40px rgba(0,0,0,.18);
        z-index:10;
    }

    .side-opening::before{
        content:"";
        position:absolute;
        inset:0;
        background:inherit;
        animation:sideOpeningZoom 18s ease-in-out infinite alternate;
        z-index:-1;
    }

    .content-layout{
        width:55vw;
        margin-left:45vw;
        min-height:100vh;
    }

    .background-video{
        left:auto;
        right:0;
        width:55vw;
    }

    .content-layout::before{
        left:auto;
        right:0;
        width:55vw;
    }
}

/* ===========================
   ANIMATION
=========================== */
@keyframes sideOpeningZoom{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.06);
    }
}