/* =========================================================
   BASE
========================================================= */

body{
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-main);
    overflow-x:hidden;
}

body.modal-open{
    overflow:hidden;
}

main{
    width:100%;
}


/* =========================================================
   HEADER
========================================================= */

.header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:var(--z-header);

    height:var(--header-height);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-inline:var(--container-padding);

    background:transparent;

    transition:
        background var(--transition),
        backdrop-filter var(--transition),
        -webkit-backdrop-filter var(--transition);
}

.header.scrolled{
    background:rgba(0,0,0,.28);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand img{
    width:32px;
    height:32px;

    flex-shrink:0;

    object-fit:contain;
}

.instagram{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.instagram:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-1px);
}


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

.hero-scene{
    position:relative;

    height:220vh;

    background:var(--color-bg);
}

.hero-sticky{
    position:sticky;
    top:0;

    width:100%;
    height:100vh;
    height:100svh;

    overflow:hidden;

    background:#000;
}

.hero-media{
    position:absolute;
    inset:0;

    overflow:hidden;
}

.hero-image{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:
        scale(var(--hero-scale, 1.05))
        translate3d(
            0,
            var(--hero-y, 0px),
            0
        );

    filter:
        saturate(var(--hero-saturation, 1))
        brightness(var(--hero-brightness, 1));

    will-change:transform, filter;
}

.hero-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.28),
            transparent 30%,
            transparent 68%,
            rgba(0,0,0,.48)
        );

    opacity:var(--shade-opacity, .5);

    pointer-events:none;
}

.poster-stage{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        calc(var(--header-height) + 24px)
        var(--container-padding)
        40px;

    pointer-events:none;

    perspective:1400px;
}

.floating-poster{
    width:min(39vw, 570px);
    max-height:76vh;

    object-fit:contain;

    border-radius:2px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.22),
        0 42px 110px rgba(0,0,0,.55);

    transform:
        translate3d(
            var(--poster-x, 0px),
            var(--poster-y, 80px),
            0
        )
        rotateZ(var(--poster-rotation, -2deg))
        rotateX(var(--poster-tilt, 0deg))
        scale(var(--poster-scale, .74));

    opacity:var(--poster-opacity, 0);

    transform-origin:center center;

    will-change:transform, opacity, filter;

    filter:
        brightness(var(--poster-brightness, .88))
        contrast(1.02);
}

.scroll-indicator{
    position:absolute;
    left:50%;
    bottom:26px;

    width:1px;
    height:56px;

    overflow:hidden;

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

    transform:translateX(-50%);

    opacity:var(--indicator-opacity, 1);
}

.scroll-indicator span{
    position:absolute;
    top:-70%;
    left:0;

    width:100%;
    height:70%;

    background:white;
}


/* =========================================================
   POSTER RESTING SPACE
========================================================= */

.poster-rest{
    position:relative;

    min-height:18vh;

    background:var(--color-bg);
}

.poster-space{
    width:100%;
    height:100%;
}


/* =========================================================
   VIDEO
========================================================= */

.video{
    min-height:100vh;
    min-height:100svh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        130px
        var(--container-padding)
        160px;

    background:var(--color-bg);
}

.video-button{
    position:relative;

    width:100%;
    max-width:1100px;

    overflow:hidden;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-soft);

    cursor:pointer;
}

.video-button img{
    width:100%;
    aspect-ratio:16 / 9;

    object-fit:cover;

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

.video-button:hover img{
    transform:scale(1.025);
    filter:brightness(.82);
}

.play-icon{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;

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

    transition:background var(--transition);
}

.video-button:hover .play-icon{
    background:rgba(0,0,0,.3);
}


/* =========================================================
   MODAL
========================================================= */

.video-modal{
    position:fixed;
    inset:0;

    z-index:var(--z-modal);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:rgba(0,0,0,.94);
}

.video-modal[hidden]{
    display:none;
}

.video-container{
    width:min(1200px, 100%);
    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:var(--radius-md);

    background:black;
}

.video-container iframe{
    width:100%;
    height:100%;

    border:0;
}

.close-modal{
    position:absolute;
    top:28px;
    right:28px;

    z-index:2;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;

    border-radius:50%;

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

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.close-modal:hover{
    background:rgba(255,255,255,.15);
    transform:rotate(90deg);
}


/* =========================================================
   UTILITIES
========================================================= */

.container{
    width:min(var(--container-width), 100%);
    margin-inline:auto;
}