.opening-scene {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 28px 20px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #24101d 0%, #0b080d 52%, #050407 100%);
  transition: opacity .75s ease, visibility .75s ease;
}
.opening-scene::before, .opening-scene::after {
  position: absolute;
  width: min(75vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,98,168,.13);
  border-radius: 50%;
  box-shadow: 0 0 75px rgba(255,62,147,.09), inset 0 0 75px rgba(255,62,147,.05);
  content: '';
  pointer-events: none;
}
.opening-scene::after { width: min(94vw, 540px); opacity: .55; }
.opening-scene.is-fading { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-scene__eyebrow, .opening-scene__hint, .opening-scene__skip { position: relative; z-index: 1; }
.opening-scene__eyebrow { margin: 0; color: #ffafd1; font: 600 9px/1.4 var(--font-body); letter-spacing: .34em; text-align: center; }
.envelope { position: relative; z-index: 1; width: min(78vw,330px); aspect-ratio: 1.48; padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 1000px; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; }
.envelope:focus-visible { outline: 2px solid #ffafd1; outline-offset: 10px; border-radius: 8px; }
.envelope__back, .envelope__front, .envelope__flap, .envelope__letter { position: absolute; inset: 0; }
.envelope__back { border: 1px solid rgba(255,190,220,.48); border-radius: 8px; background: linear-gradient(145deg,#40162f,#210d1d 70%,#160a14); box-shadow: 0 20px 30px rgba(0,0,0,.52),0 0 22px rgba(255,62,147,.18); }
.envelope__back::after { position: absolute; inset: 9px; border: 1px solid rgba(255,175,209,.19); border-radius: 4px; content: ''; }
.envelope__letter { z-index: 1; inset: 7% 9% 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(255,175,209,.65); border-radius: 4px; background: linear-gradient(160deg,#fff9fc,#f8dce9); color: #321326; transform: translateY(0); transition: transform .85s cubic-bezier(.2,.7,.2,1) .7s; }
.envelope__letter-mark { color: #ad175b; font: 34px/1 var(--font-script); }
.envelope__letter-name { color: #41132f; font: 36px/1 var(--font-script); }
.envelope__letter-age { color: #a5225d; font: 500 9px/1.2 var(--font-display); letter-spacing: .16em; }
.envelope__front { z-index: 2; overflow: hidden; border: 1px solid rgba(255,190,220,.45); border-radius: 8px; background: linear-gradient(145deg,#591d40,#310f27 56%,#220b1c); clip-path: polygon(0 0,50% 55%,100% 0,100% 100%,0 100%); }
.envelope__front::before, .envelope__front::after { position: absolute; bottom: 0; width: 72%; height: 100%; border-top: 1px solid rgba(255,175,209,.27); background: linear-gradient(145deg,#461532,#2a0e22); content: ''; }
.envelope__front::before { left: 0; clip-path: polygon(0 0,100% 100%,0 100%); }
.envelope__front::after { right: 0; clip-path: polygon(100% 0,100% 100%,0 100%); }
.envelope__flap { z-index: 3; transform-origin: top center; backface-visibility: visible; clip-path: polygon(0 0,100% 0,50% 58%); background: linear-gradient(155deg,#76264f,#45122f 78%); transition: transform .7s cubic-bezier(.22,.61,.36,1), z-index 0s .7s; }
.envelope__seal { position: absolute; z-index: 4; top: 53%; left: 50%; display: grid; width: 54px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,231,243,.76); border-radius: 50%; background: radial-gradient(circle at 35% 30%,#ffafd1,#e43f8d 58%,#8f144c); box-shadow: 0 4px 18px rgba(0,0,0,.35),0 0 22px rgba(255,79,156,.45),inset 0 1px 3px rgba(255,255,255,.6); color: #fff9fc; font-size: 21px; transform: translate(-50%,-50%); transition: opacity .35s ease,transform .45s ease; }
.envelope:hover .envelope__seal { box-shadow: 0 4px 18px rgba(0,0,0,.35),0 0 30px rgba(255,79,156,.72),inset 0 1px 3px rgba(255,255,255,.6); }
.envelope.is-opening .envelope__flap { z-index: 0; transform: rotateX(180deg); }
.envelope.is-opening .envelope__seal { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
.envelope.is-opening .envelope__letter { transform: translateY(-62%); }
.envelope.is-open .envelope__letter { z-index: 3; }
.opening-scene__hint { margin: 0; color: #f3d8e5; font: 500 10px/1.5 var(--font-body); letter-spacing: .2em; text-align: center; text-transform: uppercase; animation: envelope-hint 2s ease-in-out infinite; }
@keyframes envelope-hint { 50% { opacity: .5; } }
.opening-scene__skip { padding: 5px 8px; border: 0; background: transparent; color: rgba(255,220,237,.65); font: 500 9px var(--font-body); letter-spacing: .15em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.opening-scene__skip:hover, .opening-scene__skip:focus-visible { color: #ffafd1; }
body.is-locked { overflow: hidden; }
@media (max-width: 380px) { .opening-scene { gap: 22px; } .envelope__seal { width: 46px; } .envelope__letter-name { font-size: 31px; } }
@media (prefers-reduced-motion: reduce) { .opening-scene, .envelope__flap, .envelope__seal, .envelope__letter { transition-duration: .01ms; transition-delay: 0ms; } .opening-scene__hint { animation: none; } }