.opening {
  position: fixed;
  inset: 0;
  z-index: 30;
  width: min(100%, 680px);
  height: 100svh;
  margin: auto;
  background: #d2e2ed;
  overflow: clip;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s ease, visibility 1.1s;
  box-shadow: 0 0 80px #586b7417;
}
.opening.finished { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-stage { position: absolute; inset: 0; overflow: hidden; }
.opening-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The entire envelope shares one accessible tap target for opening and music. */
.seal-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.opening-stage { container-type: inline-size; }
.seal-button:focus-visible { outline: 2px solid #c4a15d; outline-offset: -8px; }
.seal-button:disabled { pointer-events: none; }
.cover-lettering {
  position: absolute;
  top: 77%;
  left: 12%;
  width: 76%;
  text-align: center;
  color: #647f98;
  pointer-events: none;
  text-shadow: 0 1px 1px #f2f7fbba;
  transition: opacity .35s;
}
.cover-lettering p { font: 400 clamp(32px, 8.5cqw, 55px) / 1.25 var(--script); }
.cover-lettering svg { display: block; width: 42%; max-width: 160px; height: auto; margin: 7px auto 0; fill: none; stroke: #a28e61; stroke-width: .9; stroke-linecap: round; }
.opening.playing .cover-lettering { opacity: 0; }
.cover-hint { position: absolute; width: 100%; bottom: max(32px, env(safe-area-inset-bottom)); text-align: center; color: #4d647b; pointer-events: none; transition: opacity .35s; }
.cover-hint p { font: 8px / 1.8 var(--serif); letter-spacing: 3px; text-shadow: 0 1px 8px #fff; }
.cover-hint span { display: block; width: 1px; height: 25px; margin: 15px auto 0; background: linear-gradient(#998165, transparent); }
.opening.playing .cover-hint { opacity: 0; }
.opening.loading .cover-hint p { letter-spacing: 1.5px; }
.opening.loading .cover-hint { bottom: 88px; }
.opening-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(max-width:760px) { .opening { width: 100%; } }
@media(prefers-reduced-motion:reduce) { .opening { transition-duration: .1s; } }

.hero { min-height: 0; max-height: none; }
.invitation-open .hero-copy { transition: none; }