/* =========================================================
   STAFFER — CINEMATIC HERO
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --moss: #34483B;
    --moss-deep: #202F27;

    --beige: #D8C9B5;
    --rosy: #A98278;

    --charcoal: #171815;
    --ivory: #F4F0E7;

    --gold: #C7A76A;

}


/* =========================================================
   HERO WRAPPER
   ========================================================= */

.staffer-hero {

    position: relative;

    width: 100%;

    background: var(--charcoal);

    overflow: clip;

}


/*
   JS will dynamically increase this height
   according to the actual video durations.
*/

.hero-stage {

    position: sticky;

    top: 0;

    width: min(
        calc(100vw - 80px),
        1800px
    );

    height: 100vh;

    min-height: 680px;

    margin: 0 auto;

    overflow: hidden;

    background: var(--charcoal);

}


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

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    background: var(--charcoal);

    transform: scale(1.015);

    will-change: transform;

}


/* =========================================================
   CINEMATIC OVERLAYS
   ========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(23,24,21,.88) 0%,
            rgba(23,24,21,.52) 25%,
            rgba(23,24,21,.12) 58%,
            rgba(23,24,21,.38) 100%
        ),

        linear-gradient(
            0deg,
            rgba(23,24,21,.78) 0%,
            transparent 28%,
            transparent 72%,
            rgba(23,24,21,.42) 100%
        );

}


/* =========================================================
   FILM GRAIN
   ========================================================= */

.hero-grain {

    position: absolute;

    inset: -50%;

    z-index: 8;

    pointer-events: none;

    opacity: .075;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E");

    animation: grainMove .25s steps(2) infinite;

}


@keyframes grainMove {

    0% {
        transform: translate3d(0,0,0);
    }

    25% {
        transform: translate3d(-2%,1%,0);
    }

    50% {
        transform: translate3d(1%,-2%,0);
    }

    75% {
        transform: translate3d(2%,2%,0);
    }

    100% {
        transform: translate3d(-1%,-1%,0);
    }

}


/* =========================================================
   TOP CHAPTER
   ========================================================= */

.hero-chapter {

    position: absolute;

    top: 42px;

    left: 46px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--ivory);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: .22em;

    text-transform: uppercase;

}


.chapter-number {

    color: var(--gold);

    font-size: 11px;

    font-weight: 600;

}


.chapter-line {

    width: 46px;

    height: 1px;

    background: rgba(244,240,231,.5);

}


.chapter-name {

    color: var(--beige);

}


/* =========================================================
   STORY AREA
   ========================================================= */

.hero-story {

    position: absolute;

    left: clamp(50px, 7vw, 120px);

    top: 50%;

    z-index: 6;

    width: min(
        650px,
        48vw
    );

    transform: translateY(-50%);

}


/* =========================================================
   STORY PANELS
   ========================================================= */

.story-panel {

    position: absolute;

    left: 0;

    top: 50%;

    width: 100%;

    opacity: 0;

    visibility: hidden;

    transform:
        translate3d(0, 45px, 0)
        scale(.985);

    transform-origin: left center;

    transition:

        opacity .8s cubic-bezier(.22,1,.36,1),

        transform 1s cubic-bezier(.22,1,.36,1),

        visibility .8s;

}


.story-panel.active {

    position: relative;

    top: auto;

    opacity: 1;

    visibility: visible;

    transform:
        translate3d(0,0,0)
        scale(1);

}


/* =========================================================
   STORY KICKER
   ========================================================= */

.story-kicker {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: var(--gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .3em;

    text-transform: uppercase;

}


.story-kicker::before {

    content: "";

    width: 28px;

    height: 1px;

    background: var(--gold);

}


/* =========================================================
   HEADINGS
   ========================================================= */

.story-panel h1,
.story-panel h2 {

    margin: 0 0 27px;

    color: var(--ivory);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

    letter-spacing: -.045em;

    line-height: .98;

}


.story-panel h1 {

    max-width: 680px;

    font-size:
        clamp(
            58px,
            6.2vw,
            104px
        );

}


.story-panel h2 {

    max-width: 650px;

    font-size:
        clamp(
            45px,
            5vw,
            82px
        );

}


.story-panel h1 span,
.story-panel h2 span {

    display: block;

    color: var(--beige);

    font-style: italic;

}


.story-panel h1 span {

    color: var(--gold);

}


/* =========================================================
   BODY COPY
   ========================================================= */

.story-panel p {

    max-width: 590px;

    margin: 0 0 17px;

    color: var(--beige);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            14px,
            1.05vw,
            17px
        );

    font-weight: 300;

    line-height: 1.72;

    letter-spacing: .005em;

}


.story-panel em {

    color: var(--ivory);

}


/* =========================================================
   STATEMENT
   ========================================================= */

.statement {

    margin-top: 32px;

    padding-left: 20px;

    border-left: 1px solid var(--gold);

    color: var(--beige);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            18px,
            1.5vw,
            25px
        );

    line-height: 1.35;

}


.statement strong {

    display: block;

    margin-top: 4px;

    color: var(--ivory);

    font-weight: 400;

}


/* =========================================================
   STORY TRANSITION
   ========================================================= */

.story-transition {

    margin-top: 38px;

    color: var(--ivory);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            20px,
            1.7vw,
            29px
        );

    line-height: 1.35;

}


.story-transition span {

    display: block;

    margin-top: 6px;

    color: var(--rosy);

    font-size: .82em;

}


/* =========================================================
   FINAL MARK
   ========================================================= */

.final-mark {

    margin-top: 45px;

    color: var(--gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .45em;

}


/* =========================================================
   BOTTOM PROGRESS
   ========================================================= */

.hero-bottom {

    position: absolute;

    left: 46px;

    right: 46px;

    bottom: 38px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 22px;

}


.hero-progress {

    position: relative;

    width: min(
        300px,
        28vw
    );

    height: 1px;

    overflow: hidden;

    background: rgba(
        244,
        240,
        231,
        .22
    );

}


.hero-progress span {

    position: absolute;

    left: 0;

    top: 0;

    width: 0%;

    height: 100%;

    background: var(--gold);

    transform-origin: left center;

}


.hero-progress-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--beige);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: .2em;

}


#progressCurrent {

    color: var(--gold);

}


.progress-divider {

    opacity: .35;

}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.hero-scroll {

    position: absolute;

    right: 42px;

    bottom: 35px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--beige);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: .22em;

    writing-mode: vertical-rl;

}


.scroll-line {

    position: relative;

    width: 1px;

    height: 48px;

    overflow: hidden;

    background: rgba(
        244,
        240,
        231,
        .25
    );

}


.scroll-line span {

    position: absolute;

    left: 0;

    top: -100%;

    width: 100%;

    height: 100%;

    background: var(--gold);

    animation:
        scrollIndicator
        2.2s
        ease-in-out
        infinite;

}


@keyframes scrollIndicator {

    0% {
        top: -100%;
    }

    50% {
        top: 0%;
    }

    100% {
        top: 100%;
    }

}


/* =========================================================
   CINEMATIC EDGE
   ========================================================= */

.hero-stage::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 9;

    pointer-events: none;

    border: 1px solid rgba(
        244,
        240,
        231,
        .12
    );

}


/* =========================================================
   HOVER — DESKTOP
   ========================================================= */

@media (hover: hover) {

    .hero-stage {

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

    }

    .hero-stage:hover {

        transform: scale(.997);

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .hero-stage {

        width: calc(100vw - 40px);

        min-height: 620px;

    }


    .hero-story {

        left: 50px;

        width: min(
            62vw,
            600px
        );

    }


    .story-panel h1 {

        font-size:
            clamp(
                52px,
                7vw,
                78px
            );

    }


    .story-panel h2 {

        font-size:
            clamp(
                42px,
                6vw,
                68px
            );

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .staffer-hero {

        width: 100%;

    }


    .hero-stage {

        position: sticky;

        width: 100%;

        height: 100svh;

        min-height: 0;

        margin: 0;

    }


    .hero-video {

        object-position: center;

    }


    .hero-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(23,24,21,.65) 0%,
                rgba(23,24,21,.08) 28%,
                rgba(23,24,21,.15) 42%,
                rgba(23,24,21,.9) 100%
            );

    }


    .hero-chapter {

        top: 25px;

        left: 22px;

        gap: 10px;

        font-size: 8px;

    }


    .chapter-line {

        width: 25px;

    }


    .hero-story {

        left: 22px;

        right: 22px;

        bottom: 112px;

        top: auto;

        width: auto;

        transform: none;

    }


    .story-panel {

        transform:
            translate3d(0,25px,0)
            scale(.99);

    }


    .story-panel.active {

        transform:
            translate3d(0,0,0)
            scale(1);

    }


    .story-kicker {

        margin-bottom: 15px;

        font-size: 8px;

        letter-spacing: .23em;

    }


    .story-kicker::before {

        width: 19px;

    }


    .story-panel h1 {

        margin-bottom: 19px;

        font-size:
            clamp(
                42px,
                12vw,
                62px
            );

        line-height: .96;

        letter-spacing: -.05em;

    }


    .story-panel h2 {

        margin-bottom: 18px;

        font-size:
            clamp(
                35px,
                10vw,
                54px
            );

        line-height: .98;

    }


    .story-panel p {

        max-width: 100%;

        margin-bottom: 11px;

        font-size: 13px;

        line-height: 1.55;

    }


    .statement {

        margin-top: 22px;

        padding-left: 14px;

        font-size: 18px;

    }


    .story-transition {

        margin-top: 24px;

        font-size: 18px;

    }


    .final-mark {

        margin-top: 25px;

        font-size: 9px;

    }


    .hero-bottom {

        left: 22px;

        right: 22px;

        bottom: 26px;

        gap: 13px;

    }


    .hero-progress {

        width: 100%;

    }


    .hero-progress-meta {

        flex-shrink: 0;

        font-size: 8px;

    }


    .hero-scroll {

        display: none;

    }


    .hero-stage::before {

        border: 0;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .hero-story {

        bottom: 104px;

    }


    .story-panel h1 {

        font-size: 39px;

    }


    .story-panel h2 {

        font-size: 33px;

    }


    .story-panel p {

        font-size: 12px;

        line-height: 1.48;

    }


    .story-transition {

        font-size: 16px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-grain,
    .scroll-line span {

        animation: none;

    }


    .story-panel {

        transition: none;

    }

}

/* =========================================================
   EXPLORE BRAND BUTTON
========================================================= */

.hero-explore-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 28px;

    margin-top: 34px;

    padding: 13px 5px 13px 0;

    color: var(--ivory);

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;

    overflow: hidden;

}


/* Gold underline */

.hero-explore-btn::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: var(--gold);

    transform:
        scaleX(.35);

    transform-origin: left;

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

}


/* Arrow */

.hero-explore-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    border: 1px solid
        rgba(199,167,106,.55);

    border-radius: 50%;

    color: var(--gold);

    font-size: 15px;

    line-height: 1;

    transition:
        transform .6s
        cubic-bezier(.22,1,.36,1),

        background .4s ease,

        color .4s ease;

}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .hero-explore-btn:hover::after {

        transform:
            scaleX(1);

    }


    .hero-explore-btn:hover
    .hero-explore-arrow {

        transform:
            translate(4px,-4px)
            rotate(0deg);

        background:
            var(--gold);

        color:
            var(--charcoal);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .hero-explore-btn {

        margin-top: 22px;

        padding: 10px 4px 10px 0;

        gap: 18px;

        font-size: 12px;

        letter-spacing: .18em;

    }


    .hero-explore-arrow {

        width: 24px;

        height: 24px;

        font-size: 13px;

    }

}