/* A finite film ident: one real world, a physical screen and oversized type. */
body.play-opening-active { overflow: hidden; }
.opening-focus-target:focus { outline: none; }
.play-opening { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: #101013; color: #f1f0ed; outline: none; animation: play-opening-arrive .28s ease both; }
.play-opening-header, .play-opening-footer { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 24px; padding-inline: clamp(24px, 4.8vw, 84px); }
.play-opening-header { padding-top: max(24px, env(safe-area-inset-top)); align-items: center; }
.play-opening-brand { display: flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 600; letter-spacing: -.7px; }
.play-opening-brand img { width: 28px; height: 28px; object-fit: contain; }
.play-opening-brand > span > span { font-weight: 350; color: #b7b7bf; }
.play-opening-skip { display: inline-flex; align-items: center; gap: 18px; padding: 0; font-size: 12px; color: #c3c2c8; }
.play-opening-skip span { font-size: 18px; }
.play-opening-stage { flex: 1; position: relative; min-height: 0; perspective: 1400px; perspective-origin: 50% 42%; }
.play-opening-screen { position: absolute; left: 50%; top: 45%; width: min(82vw, 1330px); aspect-ratio: 2.7; transform: translate(-50%, -50%); transform-style: preserve-3d; }
.play-opening-aperture { position: absolute; inset: 0; overflow: hidden; background: #1c1c22; clip-path: inset(0 49.9%); }
.play-opening-aperture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }
.play-opening-frame-label { position: absolute; top: -23px; left: 0; color: #aaa9b0; font: 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: 1.8px; opacity: 0; }
.play-opening-type { position: absolute; left: 50%; top: 46%; width: max-content; transform: translate(-50%, -22%); line-height: .76; pointer-events: none; }
.play-opening-prefix { display: block; margin-left: .045em; margin-bottom: .7em; font-size: clamp(16px, 2.1vw, 32px); font-weight: 450; letter-spacing: -.04em; opacity: 0; }
.play-opening-play { display: block; font-size: clamp(150px, 24vw, 365px); font-weight: 650; letter-spacing: -.08em; padding-right: .08em; opacity: 0; }
.play-opening-period { color: #ee783e; }
.play-opening-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.play-opening-footer { flex: 0 0 auto; align-items: flex-end; padding-top: 24px; padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.play-opening-kicker { display: block; color: #aba9b1; font: 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: 2.4px; }
.play-opening-statement p { margin-top: 16px; font-size: clamp(23px, 2.6vw, 40px); line-height: 1.35; letter-spacing: -.7px; font-weight: 450; }
.play-opening-caption { display: block; margin-top: 12px; color: #aaa9b2; font-size: 12px; }
.play-opening-enter { display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; min-height: 52px; min-width: 210px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #64636b; }
.play-opening-enter svg { color: #ee783e; transition: transform .2s ease; }
.play-opening-enter:hover svg { transform: translateX(5px); }
.play-opening.is-running .play-opening-screen { animation: play-screen-camera 4.7s cubic-bezier(.2,.65,.2,1) both; }
.play-opening.is-running .play-opening-aperture { animation: play-screen-aperture 1.7s .15s cubic-bezier(.65,0,.15,1) both; }
.play-opening.is-running .play-opening-aperture img { animation: play-world-camera 4.7s ease-out both; }
.play-opening.is-running .play-opening-frame-label { animation: play-type-reveal .8s 1s both; }
.play-opening.is-running .play-opening-prefix { animation: play-type-reveal 1.1s .85s cubic-bezier(.2,.7,.2,1) both; }
.play-opening.is-running .play-opening-play { animation: play-type-reveal 1.2s 1s cubic-bezier(.2,.7,.2,1) both; }
.play-opening.is-leaving { animation: play-opening-depart .65s cubic-bezier(.4,0,.5,1) both; pointer-events: none; }
.play-opening.is-static .play-opening-aperture { clip-path: none; }
.play-opening.is-static .play-opening-prefix, .play-opening.is-static .play-opening-play, .play-opening.is-static .play-opening-frame-label { opacity: 1; }
.play-opening.is-static, .play-opening.is-static * { animation: none !important; transition: none !important; }
@keyframes play-opening-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes play-screen-camera {
  0% { transform: translate(-44%,-52%) rotateY(-28deg) rotateX(7deg) scale(.78); }
  42% { transform: translate(-50%,-50%) rotateY(-4deg) rotateX(1deg) scale(.98); }
  100% { transform: translate(-50%,-50%) rotateY(0) rotateX(0) scale(1.025); }
}
@keyframes play-screen-aperture { from { clip-path: inset(0 49.9%); } to { clip-path: inset(0); } }
@keyframes play-world-camera { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes play-type-reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes play-opening-depart { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 600px) {
  .play-opening-header { padding-top: max(18px, env(safe-area-inset-top)); }
  .play-opening-brand { font-size: 20px; }
  .play-opening-screen { width: 89vw; aspect-ratio: .98; top: 42%; }
  .play-opening-aperture img { object-position: 74% center; }
  .play-opening-type { top: 52%; transform: translate(-50%, -5%); }
  .play-opening-play { font-size: 27vw; letter-spacing: -.075em; }
  .play-opening-prefix { font-size: 16px; }
  .play-opening-frame-label { font-size: 7px; letter-spacing: 1.2px; }
  .play-opening-footer { flex-direction: column; align-items: stretch; gap: 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); padding-top: 12px; }
  .play-opening-statement p { margin-top: 10px; font-size: 25px; }
  .play-opening-caption { margin-top: 8px; font-size: 11px; }
  .play-opening-enter { min-width: 0; width: 100%; min-height: 48px; font-size: 13px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .play-opening-screen { height: calc(100% - 60px); max-height: 48dvh; aspect-ratio: auto; top: 48%; }
}
@media (max-height: 620px) and (min-width: 601px) {
  .play-opening-header { padding-top: 14px; }
  .play-opening-footer { padding-bottom: 20px; padding-top: 12px; }
  .play-opening-screen { width: 58vw; top: 44%; }
  .play-opening-type { top: 44%; }
  .play-opening-play { font-size: 18vw; }
  .play-opening-statement p { font-size: 24px; margin-top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .play-opening, .play-opening * { animation: none !important; transition: none !important; }
  .play-opening-aperture { clip-path: none; }
  .play-opening-prefix, .play-opening-play, .play-opening-frame-label { opacity: 1; }
}