/* The film uses native page scrolling. Only the stage is sticky. */
.page-index .site-header {
    position:sticky;
    top:0
}
.hero-scroll {
    --hero-header-height:108px;
    --hero-stage-height:calc(100svh - var(--hero-header-height));
    --hero-scroll-travel:260svh;
    --hero-progress:0;
    position:relative;
    background:#252923;
    color:#fff
}
.hero-scroll-stage {
    position:relative;
    isolation:isolate;
    min-height:var(--hero-stage-height);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"registration" "copy" "footer";
    gap:20px;
    padding:20px var(--page-gutter) 24px
}
.hero-scroll.is-enhanced {
    height:calc(var(--hero-stage-height) + var(--hero-scroll-travel))
}
.hero-scroll.is-enhanced .hero-scroll-stage {
    position:sticky;
    top:var(--hero-header-height);
    height:var(--hero-stage-height);
    min-height:0
}
.hero-scroll-media,.hero-scroll-veil {
    position:absolute;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none
}
.hero-scroll-poster,.hero-scroll-canvas {
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.hero-scroll-poster {
    object-fit:cover;
    object-position:50% 50%
}
.hero-scroll-canvas {
    opacity:0
}
.hero-scroll.is-ready .hero-scroll-canvas {
    opacity:1
}
.hero-scroll.is-ready .hero-scroll-poster {
    opacity:0
}
.hero-scroll-veil {
    background:linear-gradient(90deg,rgba(13,18,15,.76),rgba(13,18,15,.35) 48%,rgba(13,18,15,.08)),linear-gradient(0deg,rgba(13,18,15,.45),transparent 30%);
    z-index:0
}
.hero-scroll .hero-registration,.hero-scroll .concept-copy,.hero-scroll .hero-bottom {
    position:relative;
    z-index:1;
    min-width:0
}
.hero-scroll .hero-registration {
    grid-area:registration;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 20px;
    font:400 9px/1.6 var(--font-en);
    letter-spacing:.12em;
    color:rgba(255,255,255,.75)
}
.hero-scroll .concept-copy {
    grid-area:copy;
    align-self:center;
    width:min(100%,620px);
    padding:8px 0
}
.hero-accessible-title {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}
.hero-copy-chapters {
    display:grid
}
.hero-copy-chapter {
    grid-area:1 / 1;
    min-width:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none
}
.hero-copy-chapter.is-active {
    opacity:1;
    visibility:visible;
    pointer-events:auto
}
.hero-copy-chapter.is-leaving {
    opacity:1;
    visibility:visible;
    pointer-events:none
}
.hero-scroll .hero-title-line {
    overflow:hidden;
    padding-block:.14em;
    margin-block:-.14em
}
.hero-scroll [data-hero-word] {
    display:block;
    transform-origin:left bottom
}
.hero-copy-chapter.is-active [data-hero-word],.hero-copy-chapter.is-leaving [data-hero-word] {
    will-change:transform,opacity
}
.hero-scroll [data-hero-floor] {
    display:inline-block
}
.hero-scroll .hero-kicker {
    display:flex;
    align-items:center;
    gap:10px;
    font:500 9px/1.7 var(--font-en);
    letter-spacing:.12em;
    margin:0 0 20px
}
.hero-scroll .hero-kicker>span {
    width:5px;
    height:5px;
    flex-shrink:0;
    background:#f05c54;
    border-radius:50%
}
.hero-scroll .hero-phase-title {
    display:grid;
    color:#fff;
    font:400 clamp(64px,min(7vw,13svh),116px)/.96 var(--serif);
    letter-spacing:-.035em;
    margin:0 0 24px
}
.hero-scroll .hero-phase-title>span {
    display:block;
    white-space:nowrap
}
.hero-scroll .hero-phase-title em,.hero-scroll .hero-period {
    color:#f05c54;
    font-style:normal
}
.hero-scroll .hero-jp {
    color:#fff;
    font:500 clamp(17px,1.4vw,23px)/1.8 var(--serif-jp);
    letter-spacing:.04em;
    margin:0 0 16px;
    overflow-wrap:anywhere
}
.hero-scroll .hero-description {
    color:rgba(255,255,255,.8);
    font-size:12px;
    line-height:2.1;
    margin:0 0 16px;
    overflow-wrap:anywhere
}
.hero-scroll .concept-copy .line-link {
    color:#fff;
    gap:28px
}
.hero-scroll .round-arrow {
    border-color:rgba(255,255,255,.45)
}
.hero-scroll .hero-bottom {
    grid-area:footer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px 24px;
    flex-wrap:wrap;
    font:9px/1.7 var(--font-en);
    letter-spacing:.08em;
    color:rgba(255,255,255,.8)
}
.hero-skip {
    display:inline-flex;
    gap:16px;
    align-items:center;
    color:#fff
}
.hero-skip:hover {
    color:#fff
}
.hero-skip>span {
    font-size:20px;
    line-height:1
}
.hero-scroll-progress {
    display:none;
    width:clamp(80px,15vw,220px);
    height:1px;
    background:rgba(255,255,255,.3);
    overflow:hidden
}
.hero-scroll.is-enhanced .hero-scroll-progress {
    display:block
}
.hero-scroll-progress>span {
    display:block;
    width:100%;
    height:100%;
    transform-origin:left;
    transform:scaleX(var(--hero-progress));
    background:#f05c54
}
@media(max-width:1100px) {
    .hero-scroll {
        --hero-header-height:94px
    }
}
@media(max-width:767px) {
    .hero-scroll {
        --hero-header-height:84px;
        --hero-scroll-travel:190svh
    }
    .hero-scroll-stage {
        gap:16px;
        padding-top:16px;
        padding-bottom:20px
    }
    .hero-scroll-poster {
        object-position:67% 50%
    }
    .hero-scroll-veil {
        background:linear-gradient(90deg,rgba(13,18,15,.76),rgba(13,18,15,.28)),linear-gradient(0deg,rgba(13,18,15,.45),transparent 40%)
    }
    .hero-scroll .hero-registration,.hero-scroll .hero-bottom {
        font-size:8px;
        letter-spacing:.05em
    }
    .hero-scroll .hero-registration>span:last-child {
        display:none
    }
    .hero-scroll .hero-phase-title {
        font-size:clamp(46px,min(17vw,10svh),96px)
    }
    .hero-scroll .hero-kicker {
        font-size:8px
    }
    .hero-scroll .hero-jp {
        font-size:clamp(16px,4.1vw,21px)
    }
    .hero-scroll .concept-copy .line-link {
        font-size:10px
    }
    .hero-scroll-progress {
        width:64px
    }
}
@media(max-height:740px) {
    .hero-scroll .hero-description {
        display:none
    }
    .hero-scroll .hero-phase-title {
        font-size:clamp(42px,min(14vw,12svh),90px);
        margin-bottom:16px
    }
}
@media(max-height:600px) {
    .hero-scroll-stage {
        padding-top:12px;
        padding-bottom:14px;
        gap:12px
    }
    .hero-scroll .hero-kicker {
        display:none
    }
    .hero-scroll .hero-phase-title {
        font-size:clamp(30px,10svh,64px);
        margin-bottom:12px
    }
    .hero-scroll .hero-jp {
        font-size:16px;
        margin-bottom:8px
    }
}
@media(max-height:450px) {
    .hero-scroll .hero-phase-title {
        font-size:clamp(24px,9svh,42px)
    }
    .hero-scroll .concept-copy .line-link {
        display:none
    }
    .hero-scroll .hero-jp {
        font-size:14px;
        margin-bottom:0
    }
}
@media(prefers-reduced-motion:reduce) {
    .hero-scroll.is-enhanced {
        height:auto
    }
    .hero-scroll.is-enhanced .hero-scroll-stage {
        position:relative;
        top:auto;
        height:auto;
        min-height:var(--hero-stage-height)
    }
    .hero-scroll-canvas,.hero-scroll-progress {
        display:none!important
    }
    .hero-scroll.is-ready .hero-scroll-poster {
        opacity:1
    }
}