.watch-film-wrap {
  position:relative;
  flex:none;
}
.watch-film {
  border:0;
  padding:0;
  background:transparent;
}
.film-preview {
  position:absolute;
  right:0;
  bottom:calc(100% + 24px);
  width:clamp(220px,22vw,420px);
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#021d46;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.film-preview video {
  width:100%;
  height:100%;
  object-fit:cover;
}
.watch-film-wrap.is-previewing .film-preview {
  opacity:1;
  transform:none;
}
body.film-open {
  overflow:hidden;
}
.film-overlay[hidden] {
  display:none;
}
.film-overlay {
  position:fixed;
  z-index:120;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(20px,5vw,90px);
}
.film-overlay-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(1,15,34,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.film-overlay-player {
  position:relative;
  width:min(90vw,1440px);
  aspect-ratio:16 / 9;
  background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.48);
}
.film-overlay-player video {
  width:100%;
  height:100%;
  object-fit:contain;
}
.film-overlay-close {
  position:absolute;
  z-index:1;
  top:-52px;
  right:0;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  background:rgba(0,0,0,.3);
  color:#fff;
  font:300 32px/1 Arial,sans-serif;
}
@media (hover:none) {
  .film-preview { display:none }
}
@media (max-width:700px) {
  .film-overlay { padding:16px }
  .film-overlay-player { width:100%; }
  .film-overlay-close { top:-48px }
}
@media (prefers-reduced-motion:reduce) {
  .film-preview { transition:none }
}