.opening-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: min(100%, 480px);
  height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 252, 240, 0.95), rgba(226, 207, 177, 0.72) 68%),
    #e8d9c0;
  box-shadow: var(--shadow);
  isolation: isolate;
  transition: opacity 750ms ease, visibility 750ms ease;
}

.opening-stage[hidden] {
  display: none;
}

.opening-art-shell {
  position: relative;
  width: min(100%, calc(100dvh * 0.5628));
  aspect-ratio: 941 / 1672;
  isolation: isolate;
  perspective: 1300px;
}

.opening-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: filter, transform;
  transition: filter 900ms ease, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.envelope-inside {
  position: absolute;
  z-index: 3;
  left: 5.25%;
  top: 35.5%;
  width: 89.5%;
  height: 25.5%;
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 50% 89%);
  background:
    radial-gradient(ellipse at 50% 72%, rgba(184, 166, 107, 0.28), transparent 42%),
    linear-gradient(155deg, #3a4128, #5e633c 52%, #343a25);
  box-shadow: inset 0 18px 28px rgba(12, 26, 19, 0.34);
  transition: opacity 150ms linear 260ms;
}

.envelope-flap {
  position: absolute;
  z-index: 4;
  left: 5.25%;
  top: 35.5%;
  width: 89.5%;
  height: 25.5%;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 50% 89%);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.envelope-flap img {
  position: absolute;
  left: -5.87%;
  top: -139.2%;
  width: 111.73%;
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.seal-reaction {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 61%;
  width: 21%;
  aspect-ratio: 1;
  border: 1px solid rgba(219, 181, 89, 0);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.seal-reaction::before,
.seal-reaction::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(220, 183, 91, 0.62);
  border-radius: inherit;
  opacity: 0;
}

.invitation-peek {
  position: absolute;
  z-index: 2;
  left: 13%;
  top: 39%;
  width: 74%;
  aspect-ratio: 1024 / 1538;
  overflow: hidden;
  opacity: 0;
  transform: translateY(26%) scale(0.96);
  filter: drop-shadow(0 18px 22px rgba(25, 36, 28, 0.28));
  will-change: transform, opacity;
  contain: layout style paint;
}

.invitation-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.envelope-trigger {
  position: absolute;
  z-index: 8;
  left: 4%;
  top: 34%;
  width: 92%;
  height: 43%;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline-offset: -5px;
  background: transparent;
}

.envelope-trigger:focus-visible {
  outline: 2px solid var(--gold-light);
  border-radius: 12px;
}

.opening-touch-hint {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  margin: 0;
  color: #596045;
  font-size: clamp(0.78rem, 3.2vw, 0.94rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: hintBreath 2.8s ease-in-out infinite;
}

.opening-touch-hint span {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.opening-touch-hint span:last-child {
  transform: scaleX(-1);
}

.opening-video-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  background: #102e29;
  contain: layout style paint;
  transition: opacity 600ms ease, visibility 600ms ease;
}

.opening-video-layer.is-visible {
  visibility: visible;
  opacity: 1;
}

.opening-video-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opening-stage.is-opening .opening-touch-hint {
  opacity: 0;
  transition: opacity 200ms ease;
}

.opening-stage.is-opening .seal-reaction {
  animation: sealPress 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.opening-stage.is-opening .seal-reaction::before {
  animation: sealRipple 850ms ease-out 100ms both;
}

.opening-stage.is-opening .seal-reaction::after {
  animation: sealRipple 1000ms ease-out 260ms both;
}

.opening-stage.is-opening .envelope-inside {
  opacity: 1;
}

.opening-stage.is-opening .envelope-flap {
  animation: openFlap 1250ms cubic-bezier(0.2, 0.78, 0.28, 1) 280ms forwards;
}

.opening-stage.is-opening .invitation-peek {
  animation: liftInvitation 1700ms cubic-bezier(0.18, 0.88, 0.22, 1) 720ms forwards;
}

.opening-stage.is-opening .opening-art {
  animation: softenEnvelope 1500ms ease 900ms forwards;
}

.opening-stage.is-leaving {
  visibility: hidden;
  opacity: 0;
}

@keyframes hintBreath {
  0%, 100% { opacity: 0.58; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-3px); }
}

@keyframes sealPress {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  42% { transform: translate(-50%, -50%) scale(0.91); filter: brightness(1.12); }
  100% { transform: translate(-50%, -50%) scale(1.04); filter: brightness(1.04); }
}

@keyframes sealRipple {
  0% { opacity: 0.8; transform: scale(0.82); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes openFlap {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  48% { filter: brightness(0.9); }
  100% { transform: rotateX(178deg); filter: brightness(0.7); }
}

@keyframes liftInvitation {
  0% { opacity: 0; transform: translateY(26%) scale(0.96); }
  18% { opacity: 1; }
  100% { opacity: 1; transform: translateY(-55%) scale(1.03); }
}

@keyframes softenEnvelope {
  0% { filter: brightness(1) saturate(1); transform: scale(1); }
  100% { filter: brightness(0.76) saturate(0.8); transform: scale(1.018); }
}

@media (max-height: 660px) {
  .opening-touch-hint {
    bottom: max(0.45rem, env(safe-area-inset-bottom));
  }
}