/* The complete official film, fitted without altering its pixels or proportions. */
.case-cover .hero.official-cover-ready { background: #000; }
.case-cover .hero.official-cover-ready > img { visibility: hidden; }
.case-cover .hero > .official-cover-film {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  max-width: none; object-fit: contain; object-position: center; background: #000;
  pointer-events: none; visibility: hidden;
}
.case-cover .hero.official-cover-ready > .official-cover-film { visibility: visible; }
.official-cover-toggle {
  position: absolute; z-index: 3;
  top: calc(var(--mask-top) + 12px); right: calc(var(--mask-right) + 12px);
  width: 32px; height: 32px; display: grid; place-items: center;
  box-sizing: border-box; border: 1px solid #fff; border-radius: 0; padding: 0;
  background: #000; color: #fff; cursor: pointer;
}
.official-cover-toggle::after { content: ""; position: absolute; inset: -7px; }
.official-cover-toggle svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
@media (hover: hover) {
  .official-cover-toggle:hover { background: #fff; color: #000; }
}
.official-cover-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.official-cover-toggle[hidden], .official-cover-toggle .play-mark { display: none; }
.official-cover-toggle[data-paused="true"] .play-mark { display: block; }
.official-cover-toggle[data-paused="true"] .pause-mark { display: none; }
@media (prefers-reduced-motion: reduce) {
  .case-cover .hero > .official-cover-film, .official-cover-toggle { display: none !important; }
  .case-cover .hero.official-cover-ready > img { visibility: visible; }
}
@media print {
  .case-cover .hero > .official-cover-film, .official-cover-toggle { display: none !important; }
  .case-cover .hero.official-cover-ready > img { visibility: visible; }
}