/* screenPlay: the original angled outline becomes a masked video screen. */
.opening-frame.screenplay {
  --screenplay-wipe-time: 900ms;
  background: transparent;
  pointer-events: auto;
  isolation: isolate;
  transition: border-color .5s, box-shadow .7s;
}
.screenplay::before, .screenplay::after { display: none; }
.screenplay[data-open="true"] { border-color: #ffffffa6; box-shadow: 0 20px 60px #0005; }
.screenplay-reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050609;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--screenplay-wipe-time) cubic-bezier(.22,.68,.25,1);
  pointer-events: none;
  container-type: size;
}
/* Keep the original collage visible while the player connects and warms up. */
.screenplay[data-open="true"][data-surface-ready="true"] .screenplay-reveal { clip-path: inset(0); }
.screenplay-video {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Cover the frame's rotated/skewed bounds, then undo its orientation. */
  width: calc(103.55cqw + 18.26cqh + 2px);
  height: calc(13.92cqw + 99.03cqh + 2px);
  transform: translate(-50%, -50%) rotate(8deg) skew(18deg);
  transform-origin: center;
  container-type: size;
  opacity: 1;
  visibility: hidden;
  transition: none;
}
.screenplay[data-video-ready="true"] .screenplay-video { visibility: visible; }
/* Credits share the footage's wipe and visibility, while type stays upright. */
.screenplay-reveal::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: 1;
  background: linear-gradient(0deg, #000e, #0007 45%, transparent);
  pointer-events: none;
}
.screenplay-credit {
  position: absolute;
  z-index: 2;
  left: 7%;
  bottom: calc(22px + 9cqw);
  width: 78%;
  color: #fff;
  transform: rotate(8deg) skew(18deg);
  transform-origin: left bottom;
  pointer-events: none;
  text-shadow: 0 2px 14px #000b;
}
.screenplay-credit::before { content: ""; display: block; width: 32px; height: 1px; margin-bottom: 14px; background: #ffffffb3; }
.screenplay-project-title { font: 500 clamp(24px,5.4cqw,46px)/1.18 var(--display); letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.screenplay-project-roles { margin-top: 10px; font: 400 clamp(13px,2.3cqw,17px)/1.5 var(--sans); letter-spacing: -.015em; color: #f1f1f1; text-wrap: pretty; }
.screenplay-credit[hidden] { display: none; }
.screenplay-video iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  /* Per-clip zoom also removes the trailer's baked-in cinematic letterboxing. */
  width: max(calc(100% * var(--screenplay-video-zoom, 1)), calc(100cqh * 16 / 9 * var(--screenplay-video-zoom, 1)));
  height: max(calc(100% * var(--screenplay-video-zoom, 1)), calc(100cqw * 9 / 16 * var(--screenplay-video-zoom, 1)));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.screenplay-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #fff;
  box-shadow: 0 0 14px 2px #cbe9ff80;
  opacity: 0;
  pointer-events: none;
  transition: left var(--screenplay-wipe-time) cubic-bezier(.22,.68,.25,1), opacity .25s;
}
.screenplay[data-open="true"][data-surface-ready="true"] .screenplay-sweep { left: 100%; }
.screenplay[data-wiping="true"] .screenplay-sweep { opacity: .9; }
.screenplay-trigger { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.screenplay-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.screenplay-status { position: absolute; inset: auto 24px 24px; color: #e8edf4; font: 400 14px/1.5 var(--sans); pointer-events: none; }
.screenplay-status:not([hidden]) { width: fit-content; max-width: calc(100% - 48px); padding: 7px 10px; background: #050609cc; }
.screenplay-status a { display: block; width: fit-content; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; pointer-events: auto; }
.screenplay-retry { margin-top: 10px; padding: 7px 12px; border: 1px solid #ffffff80; color: inherit; font: inherit; background: #111820; cursor: pointer; pointer-events: auto; }
.screenplay-retry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.screenplay-status[hidden], .screenplay-status a[hidden], .screenplay-retry[hidden] { display: none; }
.screenplay[data-open="false"] .screenplay-status { visibility: hidden; }
/* Keep empty caption space transparent to the screen's pointer hit area. */
.opening-world .window-caption { pointer-events: none; }
.opening-world .window-caption h1, .opening-world .opening-baseline > p, .opening-world .opening-actions { pointer-events: auto; }
.opening-world .window-caption h1, .opening-world .opening-baseline > p { width: fit-content; }
.screenplay { z-index: 1; }
.motion-paused .screenplay { --screenplay-wipe-time: 0ms; }
.motion-paused .screenplay-video { width: 100%; height: 100%; transform: translate(-50%, -50%); }
.motion-paused .screenplay-credit { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .screenplay { --screenplay-wipe-time: 0ms; }
}
@media print { .screenplay { display: none; } }