/* The DOWNLOAD IT sample film player: a graded preview, a glass top bar, a brand-gradient play button and a caption.
   The branding layer lets touches pass through to the real <video>, so DOWNLOAD IT's Touch to Download outlines the
   film itself, and the video isn't autoplaying or muted-looping, so the "Video available" chip appears reliably. */
.film{max-width:720px;margin:0 auto;text-align:left}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#05040f;isolation:isolate;
  box-shadow:0 44px 90px -34px rgba(122,61,240,.75),0 18px 40px -20px rgba(0,0,0,.7)}
.film-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,rgba(169,184,255,.85),rgba(122,61,240,.25) 45%,rgba(79,107,255,.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:24px;cursor:pointer;background:#05040f}
.film video:focus-visible{outline:3px solid #A9B8FF;outline-offset:-3px}
.film-chrome{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .45s ease}
.film.playing .film-chrome{opacity:0}
.film-top{position:absolute;left:14px;right:14px;top:14px;display:flex;align-items:center;gap:9px;padding:8px 10px 8px 8px;border-radius:15px;
  background:rgba(10,9,32,.36);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.08em}
.film-top img{width:24px;height:24px;border-radius:7px;display:block}
.film-top .sep{opacity:.45;font-weight:400}
.film-top .kind{font-weight:600;letter-spacing:.02em;opacity:.85}
.film-top .pill{margin-left:auto;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.film-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  background:linear-gradient(135deg,#4F6BFF,#7A3DF0);box-shadow:0 16px 36px -10px rgba(122,61,240,.9),inset 0 1px 0 rgba(255,255,255,.35);
  display:grid;place-items:center}
.film-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(169,184,255,.55);animation:filmPulse 2.6s ease-out infinite}
.film-play svg{width:30px;height:30px;margin-left:4px;fill:#fff}
@keyframes filmPulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.film-bottom{position:absolute;left:22px;right:22px;bottom:18px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.film-bottom .title{display:block;font-size:24px;font-weight:800;letter-spacing:-.01em}
.film-bottom .meta{display:block;margin-top:2px;font-size:13.5px;color:rgba(255,255,255,.8);font-weight:500}
.film-credit{margin:12px 0 0;text-align:center;font-size:13px;color:rgba(245,246,250,.55)}
@media (max-width:560px){
  .film-frame,.film video{border-radius:18px}
  .film-top{left:10px;right:10px;top:10px;font-size:11px;gap:7px;padding:6px 8px 6px 6px}
  .film-top img{width:20px;height:20px;border-radius:6px}
  .film-top .kind{display:none}
  .film-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .film-play svg{width:24px;height:24px}
  .film-bottom{left:14px;bottom:12px}
  .film-bottom .title{font-size:19px}
  .film-bottom .meta{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.film-play::before{animation:none;opacity:.5}}