.films-section{position:relative;z-index:10;color:var(--c-cream);padding:112px 0 100px;overflow:hidden}
.film-card:disabled{opacity:1}.film-card:disabled:hover .film-art{transform:none}
.films-heading{position:relative;z-index:2;margin-bottom:54px}.films-heading h2{margin-top:28px;font-size:clamp(40px,6.8vw,104px);line-height:1.13;letter-spacing:-.045em}.films-intro{margin-top:24px;color:#fff8eed9;font-size:15px;max-width:29em}
.film-stage-wrap{position:relative;width:100%;max-width:1600px;aspect-ratio:16/9;margin:0 auto 38px;isolation:isolate}.film-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:var(--c-night);transform-origin:center center;will-change:transform;box-shadow:0 30px 75px #0003}.film-backdrop,.film-art,.film-video,.film-shade{position:absolute;inset:0;width:100%;height:100%}.film-backdrop{transition:opacity .4s}.film-art{overflow:hidden;background:radial-gradient(ellipse at 68% 40%,#566ccf8c,transparent 58%),linear-gradient(110deg,var(--c-cinema),var(--c-night) 65%,var(--c-indigo-deep))}.film-art img{position:absolute;width:49%;height:124%;right:0;bottom:-20%;object-fit:contain;filter:drop-shadow(0 16px 26px #0004)}.film-art.has-poster img{width:100%;height:100%;right:0;bottom:0;object-fit:cover;filter:none}.film-art.has-poster .film-art-index{display:none}.film-art-index{position:absolute;left:7%;top:-15%;font:900 clamp(140px,39vw,550px)/1 var(--font-serif);color:#fff8ee06;letter-spacing:-.08em}.film-ambient{position:absolute;inset:6% 4%;z-index:-1;filter:blur(60px) saturate(1.4);opacity:.5;transform:scale(1.08);pointer-events:none}.film-ambient .film-art{border-radius:30%}.film-ambient .film-art img{opacity:.6}.film-shade{pointer-events:none;background:linear-gradient(0deg,#050715cc,transparent 55%);transition:opacity .4s}.film-video{display:block;object-fit:contain;background:#000;z-index:2;touch-action:manipulation}.film-caption{position:absolute;bottom:18px;left:20px;right:20px;pointer-events:none;transition:opacity .35s,transform .5s var(--ease);z-index:3}.film-caption h3{font-size:clamp(20px,3vw,44px);line-height:1.3;margin-top:5px}.film-caption p{font-size:15px;line-height:1.5;opacity:.75;margin-top:5px;max-width:26em}.film-tag{font-size:10px;letter-spacing:.18em;color:var(--c-gold-soft)}.film-duration{font:11px var(--font-mono);position:absolute;right:0;bottom:0;color:#fff8eec9}.film-status-stamp{position:absolute;left:50%;top:50%;z-index:3;display:flex;flex-direction:column;align-items:center;border:1px solid var(--c-gold-soft);border-radius:4px;padding:4px 10px;color:var(--c-gold-soft);transform:translate(-50%,-50%) rotate(-8deg);font:600 14px/1.25 var(--font-serif);box-shadow:inset 0 0 0 3px #f7b84b12;background:#141a3c55}.film-status-stamp small{font:7px/1.8 var(--font-mono);letter-spacing:.16em;margin-top:2px}.film-play{position:absolute;left:50%;top:50%;width:80px;height:80px;border-radius:50%;background:var(--c-coral);color:var(--c-cream);z-index:4;display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .3s var(--ease),box-shadow .3s}.film-play::before{content:'';position:absolute;inset:-9px;border:1px solid #f36c5680;border-radius:50%;animation:film-breathe 2.4s ease-in-out infinite}.film-play svg{width:30px;height:30px;fill:currentColor;margin-left:3px}.film-play:active{transform:translate(-50%,-50%) scale(.96)}.film-fullscreen{position:absolute;right:10px;top:10px;z-index:5;display:flex;align-items:center;gap:6px;min-height:44px;padding:7px 12px;background:#0b0f26bf;border:1px solid #fff8ee30;border-radius:30px;font-size:12px;line-height:1.2}.film-fullscreen svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.film-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;padding:10px 18px;border-radius:24px;background:#0b0f26e8;font-size:13px;white-space:nowrap;pointer-events:none}.film-feedback,.film-ended{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center;padding:24px;z-index:7;background:#0b0f26c9;text-align:center}.film-feedback p{font-size:15px}.film-feedback .pill,.film-ended .pill{min-height:44px;font-size:14px;padding:8px 20px}.film-ended .pill svg{fill:currentColor;stroke:none;width:22px;height:22px}.film-ended .text-link{color:var(--c-cream)}.film-stage.is-started:not(.is-error) .film-caption,.film-stage.is-started:not(.is-error) .film-shade{opacity:0}.film-stage.is-started .film-caption{transform:translateY(8px)}.film-stage.is-loading::after{content:'';position:absolute;left:calc(50% - 15px);top:calc(50% - 15px);width:30px;height:30px;border:2px solid #fff8ee44;border-top-color:var(--c-gold);border-radius:50%;z-index:6;animation:film-load .8s linear infinite;pointer-events:none}
.film-list{display:flex;gap:16px;overflow-x:auto;padding-top:8px;padding-bottom:18px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#fff8ee22 transparent}.film-card{display:block;flex:0 0 72vw;max-width:420px;text-align:left;padding:0;scroll-snap-align:start;border-radius:16px;touch-action:pan-x pan-y}.film-card-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #fff8ee26;border-radius:14px;transition:border-color .3s,box-shadow .3s}.film-card .film-art{transition:transform .6s var(--ease)}.film-card .film-art-index{font-size:130px;top:-17%}.film-card .film-art img{width:54%;height:138%;bottom:-30%;right:7%}.film-card .film-art.has-poster img{width:100%;height:100%;bottom:0;right:0}.film-card-status{position:absolute;bottom:12px;left:12px;z-index:2;padding:3px 10px;border-radius:20px;background:#0b0f26cc;font-size:11px;line-height:1.5;color:#fff8eec9}.film-card-info{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:15px 1px 5px;align-items:baseline}.film-card-number{font:11px/1.5 var(--font-mono);color:var(--c-gold);opacity:.8}.film-card-title{font-size:16px;line-height:1.4}.film-card-duration{font:10px/1.5 var(--font-mono);opacity:.65}.film-card.is-selected .film-card-image{border-color:var(--c-coral);box-shadow:0 0 0 1px var(--c-coral)}.film-card.is-selected .film-card-title{color:var(--c-cream)}.film-card.is-playing .film-card-status{color:var(--c-gold-soft);padding-left:28px}.film-card.is-playing .film-card-status::before{content:'';position:absolute;left:10px;top:7px;width:2px;height:9px;background:currentColor;box-shadow:4px -3px currentColor,8px 1px currentColor;animation:film-meter .7s ease-in-out infinite alternate}.film-card-play{position:absolute;left:50%;top:50%;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--c-coral);transform:translate(-50%,-50%);opacity:0;transition:opacity .25s}.film-card-play svg{width:22px;height:22px;fill:var(--c-cream);margin-left:2px}
@keyframes film-breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes film-load{to{transform:rotate(360deg)}}@keyframes film-meter{to{transform:scaleY(.45)}}
@media(pointer:fine){.film-play:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 50px #f36c5666}.film-card:hover .film-art{transform:scale(1.05)}.film-card:hover .film-card-play{opacity:1}}
@media(min-width:768px){.films-section{padding-top:140px;padding-bottom:130px}.films-heading{margin-bottom:64px}.films-heading h2{font-size:clamp(56px,6.8vw,104px)}.films-intro{font-size:17px}.film-caption{left:36px;bottom:30px}.film-caption p{font-size:15px}.film-tag{font-size:12px}.film-status-stamp{font-size:26px;padding:12px 20px}.film-status-stamp small{font-size:10px}.film-card{flex-basis:40vw}.film-stage-wrap{margin-bottom:54px}}
@media(min-width:1100px){.films-section{padding-top:160px;padding-bottom:160px}.films-heading{display:grid;grid-template-columns:1fr 260px;column-gap:60px;margin-bottom:76px;align-items:end}.films-heading>.eyebrow{grid-column:1/-1}.films-heading h2{max-width:10em}.films-intro{padding-bottom:10px;margin-top:0;max-width:18em}.film-stage-wrap{width:calc(100% - var(--gutter)*2)}.film-caption{left:48px;bottom:42px}.film-status-stamp{font-size:36px;padding:18px 26px}.film-status-stamp small{font-size:12px;letter-spacing:.2em}.film-duration{font-size:14px}.film-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;overflow:visible;padding-top:12px}.film-card{max-width:none}.film-card-image{border-radius:16px}.film-card-title{font-size:18px}.film-card .film-art-index{font-size:180px}.film-fullscreen{right:20px;top:20px}.film-ended{flex-direction:row;gap:30px}.film-feedback p{font-size:18px}}
@media(min-width:1440px){.film-list:has(.film-card:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.film-stage{will-change:auto}.film-art,.film-caption{transition:none}}

/* The picture keeps its 16:9 frame; mobile captions sit in normal flow below it. */
.films-section .film-caption{padding:0;background:transparent;border-radius:0}
.films-section .film-caption .film-duration{right:0;bottom:0}
.film-stage.is-started:not(.is-error)~.film-caption{opacity:0;transform:translateY(8px)}
.film-shade{background:linear-gradient(to top,rgba(11,15,38,.85),rgba(11,15,38,0) 40%)}
@media(max-width:767px){
  .film-stage-wrap{aspect-ratio:auto}
  .films-section .film-caption{position:relative;inset:auto;margin:22px var(--gutter) 0;min-height:118px}
  .film-caption h3{font-size:25px;margin-top:8px}
  .film-caption p{padding-right:34px;margin-top:9px;opacity:.85}
  .films-section .film-caption .film-duration{position:relative;display:block;margin-top:12px}
  .film-shade{display:none}
  .films-section .film-status-stamp{top:50%}
  .film-ambient{inset:6% 4% 35%}
}