.film {
    position: relative;
    background: #000;
    color: var(--ink);
}

.film__stage {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #000;
    border-radius: 0;
}

.film__track {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
    margin-top: -100svh;
    pointer-events: none;
}

.film__beat[data-beat="reel"] { height: 460vh; }
.film__beat[data-beat="black"] { height: 120vh; }
.film__beat[data-beat="portal"] { height: 150vh; }
.film__beat[data-beat="throne"] { height: 120vh; }

.film__plane {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 0;
}

.film__plane--got { z-index: 2; }
.film__plane--equus { z-index: 3; width: 0; }
.film__plane--portal,
.film__plane--throne { z-index: 4; visibility: hidden; }
.film__plane--portal {
    left: 41%;
    top: 42%;
    width: 18%;
    height: 16%;
}

.film__plane video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 46%;
    border-radius: 0;
    background: #000;
    pointer-events: none;
}

.film__plane--got video { object-position: 58% 40%; }
.film__plane--portal video,
.film__plane--throne video { object-position: 50% 42%; }

.film__plane--equus video[data-role="equus-board"] { visibility: hidden; opacity: 0; z-index: 1; }
.film__plane--equus.is-board video[data-role="equus"] { display: none; visibility: hidden; opacity: 0; }
.film__plane--equus.is-board video[data-role="equus-board"] { visibility: visible; opacity: 1; z-index: 2; }

.film__gold {
    position: absolute;
    inset: 0;
    z-index: 3;
    transform-origin: 50% 46%;
    background:
        radial-gradient(circle at 50% 46%, rgba(232, 184, 84, 0.95) 0%, rgba(214, 168, 74, 0.4) 7%, rgba(0, 0, 0, 0) 16%);
    opacity: 0;
    pointer-events: none;
}

.film__design,
.film__intel,
.film__experience {
    position: absolute;
    z-index: 8;
    margin: 0;
    pointer-events: none;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 0.78;
    letter-spacing: -0.07em;
}

.film__design {
    left: var(--pad);
    bottom: 7vh;
    font-size: clamp(4.6rem, 16vw, 13.5rem);
    opacity: 0;
}

.film__intel {
    left: var(--pad);
    bottom: 8vh;
    font-size: clamp(3.2rem, 11vw, 9.4rem);
    opacity: 0;
    transform-origin: left bottom;
}

.film__experience {
    left: var(--pad);
    bottom: 8vh;
    font-size: clamp(3.4rem, 12vw, 10rem);
    opacity: 0;
    transform-origin: left bottom;
}

.film.is-design .film__design { opacity: 1; }

.film[data-state="black"] .film__plane { visibility: hidden; }
.film[data-state="black"] .film__gold { opacity: 1; }
.film[data-state="black"] .film__design,
.film[data-state="black"] .film__intel,
.film[data-state="portal"] .film__design,
.film[data-state="portal"] .film__intel,
.film[data-state="throne"] .film__design,
.film[data-state="throne"] .film__intel,
.film[data-state="out"] .film__design,
.film[data-state="out"] .film__intel { opacity: 0; }

.film[data-state="portal"] .film__plane--got,
.film[data-state="portal"] .film__plane--equus,
.film[data-state="throne"] .film__plane--got,
.film[data-state="throne"] .film__plane--equus,
.film[data-state="out"] .film__plane { visibility: hidden; }

.film[data-state="portal"] .film__plane--portal,
.film[data-state="throne"] .film__plane--throne { visibility: visible; }
.film[data-state="throne"] .film__experience { opacity: 0; }
.film.is-experience .film__experience { opacity: 1; }

.breath {
    background: #080808;
    color: var(--ink);
}

.breath__panel {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header) + 2rem) var(--pad) 3rem;
}

.breath__one {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1;
    font-size: clamp(0.95rem, 1.6vw, 1.35rem);
    text-transform: uppercase;
    color: var(--faint);
}

.breath__two {
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.86;
    font-size: clamp(2.8rem, 8.4vw, 7.2rem);
    text-transform: uppercase;
}

.breath__scroll {
    margin: 0 0 1.4rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--faint);
}

.breath__note {
    max-width: 22rem;
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.whisper {
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: calc(var(--header) + 2rem) var(--pad) 4rem;
    background: #080808;
}

.whisper__kicker {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--faint);
}

.whisper__frame {
    margin: 0;
    max-width: 46rem;
}

.whisper__frame img {
    width: 100%;
    height: auto;
}

.whisper__title {
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.9;
    font-size: clamp(2rem, 5vw, 4.2rem);
    text-transform: uppercase;
}

.break {
    background: #050505;
    color: var(--ink);
}

.break__intro {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0 var(--pad) 8vh;
}

.break__title {
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.86;
    font-size: clamp(3.2rem, 9vw, 8rem);
    text-transform: uppercase;
}

.break__stage {
    position: relative;
    height: 92vh;
    margin: 0 var(--pad) 8vh;
}

.break__win {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #000;
}

.break__win--facade {
    left: 0;
    top: 6vh;
    width: min(54vw, 860px);
    aspect-ratio: 2 / 1;
}

.break__win--room {
    right: 0;
    bottom: 0;
    width: min(40vw, 620px);
    aspect-ratio: 2 / 1;
    box-shadow: 0 0 0 1px rgba(241, 241, 239, 0.28);
}

.break__end {
    height: 36vh;
    background: #050505;
}

.break.is-closed .break__win {
    opacity: 0;
    transform: scale(0.96);
}

@media (max-width: 899px) {
    .film__plane--got video { object-position: 64% 36%; }
    .film__design { font-size: clamp(3.4rem, 18vw, 5.2rem); }
    .film__intel,
    .film__experience { font-size: clamp(2.6rem, 12vw, 4.4rem); }
    .break__stage {
        height: auto;
        display: grid;
        gap: 18vh;
        margin-bottom: 12vh;
    }
    .break__win,
    .break__win--facade,
    .break__win--room {
        position: relative;
        inset: auto;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .film__stage {
        position: relative;
        height: auto;
        overflow: visible;
    }
    .film__track,
    .film__gold { display: none; }
    .film__plane,
    .film__plane--equus,
    .film__plane--portal,
    .film__plane--throne {
        position: relative;
        visibility: visible;
        width: 100% !important;
        height: 100svh;
        left: 0 !important;
        top: auto !important;
        transform: none !important;
    }
    .film__design,
    .film__intel,
    .film__experience {
        position: relative;
        left: auto;
        bottom: auto;
        opacity: 1 !important;
        transform: none !important;
        padding: 8vh var(--pad);
    }
    .breath__one,
    .breath__two { transform: none !important; }
}

#work-casa-warner { min-height: 130svh; }
#work-cartoon-network-land { min-height: 100svh; }
#work-tabata-guns,
#work-bigstudios,
#work-adriana-caldeira { min-height: 88svh; }
#work-pimenta-cravo { min-height: 72svh; }
#work-equus-pro .work-piece__media {
    inset: 16vh 22vw 18vh 7vw;
    outline: 1px solid rgba(241, 241, 239, 0.2);
}
#work-casa-warner .work-piece__frame {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 50%);
}
#work-tabata-guns {
    background:
        linear-gradient(rgba(241, 241, 239, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 241, 239, 0.045) 1px, transparent 1px),
        #07080a;
    background-size: 72px 72px, 72px 72px, auto;
}
#work-tabata-guns .work-piece__title { max-width: 9ch; }
#work-bigstudios .work-piece__mid { margin-left: auto; text-align: right; }
#work-bigstudios .work-piece__title { margin-left: auto; }
#work-cartoon-network-land .work-piece__title { letter-spacing: -0.07em; }
#work-pimenta-cravo .work-piece__title {
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 4rem);
}
#work-adriana-caldeira .work-piece__frame { padding-right: 28vw; }
#work-tabata-guns .work-piece__frame,
#work-bigstudios .work-piece__frame,
#work-pimenta-cravo .work-piece__frame,
#work-adriana-caldeira .work-piece__frame { background: transparent; }