@font-face{font-family:Manrope;src:url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Locally hosted type: a film-title display face with a calm, readable UI. */
body{font-family:Manrope,Arial,sans-serif;font-weight:400}
.hero-title,.detail-copy h1,.page-shell h1,.shelf-heading h2,.wide-card h3,.browse-banner h2,.empty-state h2,.dialog-head h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;letter-spacing:.005em}
.hero-title{font-size:clamp(80px,7.5vw,126px);font-weight:700;line-height:.91;text-transform:uppercase;max-width:600px;margin:24px 0 27px;text-wrap:balance}
.hero-content{max-width:700px;padding-top:177px;padding-bottom:150px}
.cinema-hero,.hero-slide{min-height:800px}.cinema-hero{height:auto}.hero-slide{position:relative}
.hero-title,.detail-copy h1,.page-shell h1{font-weight:700}
/* Progressive enhancement: without JS the first feature stays visible. */
.cinema-hero.is-carousel{display:grid;grid-template-columns:minmax(0,1fr)}
.is-carousel .hero-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;z-index:0;transition:opacity .8s ease-in-out,visibility .8s}
.is-carousel .hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.is-carousel .hero-slide:not(.is-active) .hero-content>*{animation:none!important}
.is-carousel .hero-slide:not(.is-active) .hero-backdrop img,.is-carousel .hero-slide:not(.is-active) .hero-backdrop:after{animation-play-state:paused!important}
.detail-copy h1{font-size:clamp(56px,6vw,88px);line-height:.98;text-transform:uppercase;max-width:720px}
.page-shell h1{font-size:72px;line-height:1.03}
.shelf-heading h2{font-size:31px;line-height:1.1}
.wide-card h3{font-size:35px;line-height:1.02;max-width:220px}
.browse-banner h2{font-size:36px}.empty-state h2{font-size:36px}.dialog-head h2{font-size:34px}
.card-copy h3{font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.45}
.card-copy p{font-size:10px}.hero-description{font-size:14px}.eyebrow{font-weight:600}.hero-counter{font-variant-numeric:tabular-nums}
.brand{letter-spacing:-1.6px;font-weight:800}.brand-sub{letter-spacing:5px;font-weight:600}
.motion-toggle{display:inline-flex;gap:8px;align-items:center;background:transparent;color:#b9aebf;font-size:10px;min-height:44px;padding:0;white-space:nowrap}
.motion-toggle:hover{color:var(--lime)}.motion-toggle .icon{width:14px;height:14px}.motion-toggle:disabled{opacity:.75}
.hero-pagination .motion-toggle{margin-left:12px;border:1px solid #ffffff2c;width:38px;height:38px;min-height:38px;justify-content:center;border-radius:50%;color:#ddd6df}
.motion-play{display:none}[data-motion=off] .motion-play{display:initial}[data-motion=off] .motion-pause{display:none}
.footer nav{gap:0 23px}.hero-backdrop{overflow:hidden}
.hero-backdrop:after{content:'';position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(ellipse at 80% 14%,#e9bc981f,transparent 45%),radial-gradient(ellipse at 25% 65%,#d591cb1c,transparent 55%);opacity:.65;mix-blend-mode:screen}
.button.watch{position:relative;overflow:hidden;isolation:isolate}
.button.watch:after{content:'';position:absolute;inset:-50% -70%;z-index:-1;background:linear-gradient(110deg,transparent 40%,#ffffff65 49%,transparent 58%);transform:translateX(-55%) rotate(8deg);pointer-events:none}
.poster{transition:transform .35s ease,box-shadow .35s ease}.poster-rail{padding-top:10px;padding-bottom:15px}
.wide-card{transition:box-shadow .35s,transform .35s}.button,.icon-button{transition:background .2s,transform .25s,box-shadow .25s}

/* Every continuous effect is transform/opacity based and can be paused. */
[data-motion=on] .hero-slide:not([hidden]) .hero-backdrop img{animation:cinema-drift 18s ease-in-out infinite alternate;transform-origin:65% 38%}
[data-motion=on] .hero-slide:not([hidden]) .hero-backdrop:after{animation:cinema-light 12s ease-in-out infinite alternate}
[data-motion=on] .ambient{animation:ambient-breathe 14s ease-in-out infinite alternate}
[data-motion=on] .hero-slide:not([hidden]) .hero-content>*{animation:cinema-enter .8s cubic-bezier(.2,.7,.2,1) both}
[data-motion=on] .hero-content>:nth-child(2){animation-delay:.05s}[data-motion=on] .hero-content>:nth-child(3){animation-delay:.1s}[data-motion=on] .hero-content>:nth-child(4){animation-delay:.14s}[data-motion=on] .hero-content>:nth-child(5){animation-delay:.18s}[data-motion=on] .hero-content>:nth-child(6){animation-delay:.22s}
[data-motion=on] .is-revealed{animation:cinema-enter .65s cubic-bezier(.2,.7,.2,1) both}
[data-motion=on] .story-card.is-revealed:nth-child(3n+2){animation-delay:.06s}[data-motion=on] .story-card.is-revealed:nth-child(3n){animation-delay:.12s}
[data-motion=on] dialog[open]{animation:dialog-enter .23s ease-out both}
[data-motion=on] .save-button[aria-pressed=true] .check-icon{animation:save-confirm .3s ease-out}
[data-motion=on] .discover-link span{display:inline-block;animation:discover-nudge 3s ease-in-out infinite}
[data-background=paused] *,[data-background=paused] *:before,[data-background=paused] *:after{animation-play-state:paused!important}
.cinema-hero[data-hero-motion=paused] .hero-backdrop img,.cinema-hero[data-hero-motion=paused] .hero-backdrop:after{animation-play-state:paused!important}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 [data-motion=on] .poster:hover,[data-motion=on] .poster:focus-within{transform:translateY(-5px);box-shadow:0 16px 35px #0008,0 0 0 1px #c5f58a55}
 [data-motion=on] .wide-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px #0006}
 [data-motion=on] .button.watch:hover:after,[data-motion=on] .button.watch:focus-visible:after{animation:button-sheen .75s ease-out}
 [data-motion=on] .button:active,[data-motion=on] .icon-button:active{transform:scale(.96)}
}
@keyframes cinema-drift{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1%,.4%,0)}}
@keyframes cinema-light{from{opacity:.35;transform:translate3d(-2%,1%,0)}to{opacity:.85;transform:translate3d(3%,-2%,0)}}
@keyframes ambient-breathe{from{opacity:.3}to{opacity:.55}}
@keyframes cinema-enter{from{opacity:.25;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes save-confirm{0%{transform:scale(.6)}65%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes discover-nudge{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(5px)}}
@keyframes button-sheen{from{transform:translateX(-55%) rotate(8deg)}to{transform:translateX(55%) rotate(8deg)}}

@media(min-width:1700px){.hero-content{padding-top:195px;max-width:700px}.hero-title{font-size:138px;max-width:620px}.shelf-heading h2{font-size:33px}}
@media(max-width:1100px){.hero-content{padding-top:165px;max-width:590px}.hero-title{font-size:102px;max-width:480px}.detail-copy h1{font-size:65px}.wide-card h3{font-size:31px;max-width:180px}.hero-description{font-size:13px}}
@media(max-width:800px){.hero-title{font-size:92px;max-width:440px}.hero-content{padding-top:170px;max-width:550px}.shelf-heading h2{font-size:28px}.wide-card h3{font-size:29px}.detail-copy h1{font-size:55px}.page-shell h1{font-size:64px}.brand-sub{letter-spacing:4px}.footer nav{gap:0 18px}}
@media(max-width:600px){
 .cinema-hero,.hero-slide{min-height:740px}
 .hero-content{padding:330px var(--gutter) 104px;max-width:none}.hero-title{font-size:72px;line-height:.94;max-width:340px;margin:17px 0 20px}.hero-description{font-size:12px;max-width:345px}.hero-pagination{gap:5px}.hero-pagination .motion-toggle{margin-left:8px;width:34px;height:34px;min-height:34px}.brand-sub{letter-spacing:3.6px}
 .shelf-heading h2{font-size:27px}.card-copy h3{font-size:12px}.card-copy p{font-size:9px}.wide-card h3{font-size:35px;max-width:170px}.browse-banner h2{font-size:34px}.page-shell h1{font-size:57px}.detail-copy h1{font-size:58px}.information h1{font-size:55px}.dialog-head h2{font-size:30px}.footer nav{gap:0 24px}.motion-toggle{font-size:10px}
}
@media(max-width:380px){.hero-title{font-size:66px;max-width:315px}.shelf-heading h2{font-size:25px}.page-shell h1{font-size:52px}.detail-copy h1{font-size:54px}}
/* OS preferences always take precedence, including before JavaScript loads. */
[data-motion=off] *,[data-motion=off] *:before,[data-motion=off] *:after{animation:none!important;transition:none!important}
html[data-motion=off], [data-motion=off] .poster-rail{scroll-behavior:auto}
[data-motion=off] .poster:hover img,[data-motion=off] .poster:focus-within img,[data-motion=off] .wide-card:hover>img,[data-motion=off] .button:hover{transform:none}
@media(prefers-reduced-motion:reduce){html,.poster-rail{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.poster:hover img,.poster:focus-within img,.wide-card:hover>img,.button:hover{transform:none}}