/* Portrait is a shot-specific miniature theatre, not a sliver cut out of a
   desktop film. Its quiet surroundings are still scenic plates, never a
   duplicate moving video. Desktop presentation is untouched. */
.opening-surround { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #231b30; }
.opening-surround-sky, .opening-surround-ground, .opening-surround-shade { position: absolute; inset: 0; }
.opening-surround[data-scene="space"] {
  background: radial-gradient(ellipse at 75% 70%, #634258 0, #292039 38%, #171424 75%);
}
.opening-surround[data-scene="space"] .opening-surround-sky,
.opening-surround[data-scene="space"] .opening-surround-ground { display: none; }
.opening-surround[data-scene="mars"] .opening-surround-sky {
  background: #c88c8b url('./assets/layers/sky.png') center 20% / auto 100% no-repeat;
}
.opening-surround[data-scene="mars"] .opening-surround-ground {
  top: 49%;
  background: url('./assets/layers/ground.png') center bottom / auto 150% no-repeat;
}
.opening-surround-shade {
  background: linear-gradient(180deg, rgb(33 21 36 / .40), transparent 35%, transparent 65%, rgb(46 25 29 / .58));
}
.theatre[data-mode="opening"][data-opening-frame="wide-action"] .poster,
.theatre[data-mode="opening"][data-opening-frame="wide-action"] .scene-video,
.theatre[data-mode="opening"][data-opening-frame="tracked"] .poster,
.theatre[data-mode="opening"][data-opening-frame="tracked"] .scene-video {
  /* Only feather the unused top/bottom border. Never mask the character body
     or the far-right crash, and never transition framing between shots. */
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}