
.xfilm{padding:65px 0 20px}.xfilm-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}.xfilm h2{font-size:clamp(32px,4vw,52px);margin:12px 0}.xfilm-heading p{font-size:13px;color:#616259}
.xcinema{position:relative;isolation:isolate;background:#091014;color:#fff;overflow:hidden;border-radius:3px;min-height:590px}
.xshot{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}.xshot.active{opacity:1;visibility:visible;z-index:1}
.xshot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;transform:scale(1.035)}
.xshot:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,9,14,.93),rgba(3,9,14,.55) 58%,rgba(3,9,14,.15));z-index:0}
.xshot.contain>img{object-fit:contain;object-position:right center;background:#fff;opacity:.8}
.xshot-copy{position:relative;z-index:1;padding:105px 7% 90px;max-width:800px}.xshot-copy .xkicker{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#b6ff00;font-weight:700}.xshot-copy h3{font-size:clamp(40px,5.5vw,76px);line-height:1.02;letter-spacing:-.055em;font-weight:500;margin:25px 0 22px;color:#fff}.xshot-copy h3 span{color:#b6ff00}.xshot-copy p{font-size:19px;line-height:1.6;max-width:490px;color:#e1e4dc;margin:0}.xfilm-brand{position:absolute;z-index:2;top:27px;left:7%;font-size:21px;font-weight:700;letter-spacing:-.04em}.xfilm-brand span{color:#b6ff00}.xfilm-duration{position:absolute;z-index:2;right:6%;top:30px;font-size:11px;color:#e1e4dc}
.xfilm-signal{display:inline-flex;align-items:center;gap:16px;border:1px solid #ffffff60;padding:10px 16px;border-radius:40px;margin-top:25px;font-size:14px;background:#071014aa}.xfilm-switch{width:66px;height:34px;border-radius:30px;background:#b6ff00;position:relative}.xfilm-switch:after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;top:5px;left:37px;background:#111310}
.xcinema.running .active>img{animation:xpan 5s linear both}.xcinema.paused .active>img,.xcinema.paused .xfilm-switch{animation-play-state:paused}.xcinema.running .active .xfilm-switch{animation:xflip 5s step-end both}.xcinema.running .active .xfilm-switch:after{animation:xknob 5s step-end both}.xcinema.paused .active .xfilm-switch:after{animation-play-state:paused}
@keyframes xpan{from{transform:scale(1.035)}to{transform:scale(1.095)}}@keyframes xflip{0%,65%{background:#b6ff00}30%{background:#afb5aa}}@keyframes xknob{0%,65%{left:37px}30%{left:5px}}
.xfilm-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.xfilm-pills span{border:1px solid #ffffff60;border-radius:30px;padding:9px 13px;font-size:12px;background:#071014aa}
.xfilm-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid #cbd0c1}.xfilm-controls button{font:inherit;font-size:13px;cursor:pointer;border:1px solid #a5ad9a;border-radius:25px;padding:11px 18px;background:transparent;color:#111310}.xfilm-controls button:first-child{background:#111310;color:#fff;border-color:#111310}.xfilm-controls button:disabled{opacity:.45;cursor:default}.xfilm-controls output{font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums}
.xfilm-timeline{display:flex;gap:7px;margin:18px 0}.xfilm-timeline button{position:relative;background:#d7dccc;border:0;height:6px;padding:0;flex:1;cursor:pointer;border-radius:4px}.xfilm-timeline button[aria-current=true]{background:#71874a}.xfilm-timeline button span{position:absolute;left:0;top:0;height:100%;background:#111310;border-radius:4px;width:0}.xfilm-caption{font-size:12px!important;color:#616259;line-height:1.6!important;margin:10px 0}.xfilm-transcript{margin-top:20px}.xfilm-transcript ol{padding-left:22px}.xfilm-transcript li{font-size:15px;line-height:1.7;margin-bottom:10px}
@media(max-width:760px){.xcinema{min-height:600px}.xshot-copy{padding:110px 8% 55px}.xshot-copy h3{font-size:45px}.xshot-copy p{font-size:17px}.xshot:after{background:linear-gradient(0deg,rgba(3,9,14,.94),rgba(3,9,14,.63) 75%,rgba(3,9,14,.4))}.xfilm-heading{display:block}.xfilm-controls{gap:8px}.xfilm-controls button{padding:10px 13px}.xfilm-controls output{width:100%;margin:5px 0 0}.xfilm{padding-top:45px}}
@media(prefers-reduced-motion:reduce){.xshot{transition:none}.xcinema .xshot>img,.xcinema .xfilm-switch,.xcinema .xfilm-switch:after{animation:none!important;transform:none!important}}
