@media screen and (min-width: 821px) {
  .has-opening #scene-01 > .film-stage {
    padding-bottom: 160px !important;
  }
}

@media screen {
  .has-opening[data-opening="pending"] #scene-01 [data-reveal],
  .has-opening[data-opening="active"] #scene-01 [data-reveal] {
    visibility: hidden;
  }

  .has-opening #scene-01.has-hinges [data-reveal]:not(.selected-copy) .letter-ink {
    opacity: clamp(0, calc(var(--typed, 10000) - var(--char)), 1);
  }
}

@media screen and (min-width: 821px) and (min-height: 500px),
       screen and (min-width: 821px) and (orientation: portrait) {
  .has-opening #scene-01 > .film-stage {
    height: 100svh;
    min-height: 0;
  }

  .has-opening #scene-01 .film-art {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .has-opening #scene-01 .film-art img,
  .has-opening #scene-01 .paper-film {
    object-fit: contain;
  }
}

@media screen and (min-width: 821px) {
  .has-opening #scene-01 .film-art {
    width: min(100%, max(260px, calc((100svh - 440px) * var(--film-ratio))));
    margin-inline: auto;
  }
}

@media screen and (min-width: 821px) and (max-height: 700px) {
  .has-opening #scene-01 > .film-stage {
    padding-top: 90px !important;
  }
  .has-opening #scene-01.has-hinges .film-art {
    margin-top: 0;
  }
}

@media screen and (min-width: 821px) {
  .has-opening #scene-01 > .film-stage {
    height: auto;
    min-height: 100svh;
    padding-bottom: 34px !important;
  }

  .has-opening #scene-01 .film-art {
    width: min(100%, max(260px, calc((100svh - 140px) * var(--film-ratio))));
    aspect-ratio: var(--film-ratio);
    flex: 0 0 auto;
  }
}

.opening-veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(20 24 24 / 60%);
  pointer-events: none;
  mask-image: radial-gradient(
    ellipse var(--spot-rx, 180px) var(--spot-ry, 55px)
      at var(--spot-x, 25%) var(--spot-y, 25%),
    transparent 100%, #000 135%
  );
  transition: opacity 360ms ease;
}

.opening-cue {
  --cue-size: 78px;
  --cue-center: 50svh;
  position: fixed;
  z-index: 21;
  top: calc(var(--cue-center) - var(--cue-size) / 2);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 70px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 20px/1.2 var(--serif);
  letter-spacing: .055em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 360ms ease;
}

[data-opening="active"] .opening-cue {
  animation: opening-fade 3.6s ease-in-out infinite;
}

.opening-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cue-size);
  height: var(--cue-size);
}

.opening-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.opening-ring svg {
  width: 32px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opening-cue:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 8px;
  border-radius: 28px;
}

[data-opening="active"] .opening-cue:focus-visible {
  animation: none;
  opacity: 1;
}

[data-opening="fading"] .opening-veil,
[data-opening="fading"] .opening-cue {
  opacity: 0;
}

[data-opening="fading"] .opening-cue {
  pointer-events: none;
}

@keyframes opening-fade {
  0%, 12%, 100% { opacity: 1; }
  45%, 60% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-opening="active"] .opening-cue { animation: none; }
  .opening-veil, .opening-cue { transition: none; }
}

@media print {
  .opening-veil, .opening-cue { display: none !important; }
}

@media screen and (max-width: 820px) {
  .has-opening:is([data-opening="pending"], [data-opening="active"], [data-opening="fading"]) .reading-progress {
    visibility: hidden;
  }
  .opening-cue {
    --cue-size: 52px;
    --cue-center: 48svh;
    gap: 9px;
    font-size: 15px;
  }
  .opening-ring svg { width: 24px; height: 28px; }
}

@media screen and (max-width: 820px) and (max-height: 700px) {
  .opening-cue { --cue-size: 46px; gap: 8px; font-size: 14px; }
}

@media screen and (max-width: 820px) and (max-height: 600px) {
  .opening-ring svg { width: 20px; height: 24px; }
  .opening-cue { --cue-size: 40px; --cue-center: 47svh; gap: 7px; font-size: 13px; }
}