.intro-locked { overflow: hidden; }
.envelope-intro[hidden] { display: none; }
.envelope-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 19px;
  padding: 30px 20px;
  overflow: hidden;
  background: radial-gradient(ellipse at 48% 42%, #fff9f5 0%, var(--blush) 48%, var(--blue) 100%);
  perspective: 1400px;
}
.envelope-intro::before {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px solid #6f80973f;
  pointer-events: none;
}
.envelope-stage {
  position: relative;
  width: min(82vw, 740px);
  aspect-ratio: 1.5;
  margin-top: 22px;
  filter: drop-shadow(0 24px 27px #4844533b);
}
.envelope-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(2.9% .8% 3.3% round 3px);
}
.wax {
  position: absolute;
  z-index: 2;
  left: 49.45%;
  top: 59.25%;
  transform: translate(-50%, -50%);
  width: max(48px, 16%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: transparent;
  transition: box-shadow .3s;
}
.wax:hover { box-shadow: 0 0 19px #fff5ee85; }
.wax:focus-visible { outline: 2px solid #713b53; outline-offset: 4px; }
.envelope-hint { color: var(--ink); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; z-index: 1; }
.intro-swatches { z-index: 2; }
.flower-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bloom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.burst-petal { position: absolute; left: 50%; top: var(--burst-origin, 50%); animation: scatter 2.32s cubic-bezier(.12,.65,.28,1) var(--delay) both; }
.burst-petal { width: var(--size); aspect-ratio: .7; border-radius: 85% 12% 75% 30%; background: var(--petal); box-shadow: inset -2px -3px 5px #9c586027; }
.opening { animation: intro-away .65s ease 3.59s both; }
.envelope-pocket, .envelope-lid, .letter-pull { visibility: hidden; }
.opening .envelope-pocket, .opening .envelope-lid, .opening .letter-pull { visibility: visible; }
.opening .envelope-stage {
  background: #c2d1dc url('media/paper-grain.jpg') center/410px;
  background-blend-mode: multiply;
  box-shadow: inset 0 12px 23px #40526947;
}
.opening .envelope-stage > .envelope-photo { visibility: hidden; }
.envelope-pocket, .envelope-lid, .lid-back { position: absolute; inset: 0; }
.envelope-pocket, .lid-back {
  background: url('media/paper-grain.jpg') center/410px, linear-gradient(140deg,#e0edf4,#aebfcf);
  background-blend-mode: multiply;
}
.envelope-pocket {
  z-index: 2;
  clip-path: polygon(0 10%,50% 60%,100% 10%,100% 100%,0 100%);
  box-shadow: inset 0 -2px 4px #51677f36;
}
.envelope-lid { z-index: 3; transform-origin: 50% 2.9%; transform-style: preserve-3d; }
.lid-face, .lid-back { backface-visibility: hidden; }
.lid-face { clip-path: polygon(.8% 2.9%,99.2% 2.9%,99.2% 13%,57% 55%,57% 68%,49% 71%,42% 66%,42% 55%,.8% 13%); }
.lid-back { transform: rotateY(180deg); clip-path: polygon(.8% 2.9%,99.2% 2.9%,99.2% 13%,50% 61%,.8% 13%); }
.letter-pull {
  position: absolute; z-index: 1; left: 50%; top: 25%;
  width: min(61%, 320px); padding: 12px 6px;
  display: grid; justify-items: center; gap: 3px;
  background: #f9eef0 url('media/paper-grain.jpg') center/410px;
  background-blend-mode: multiply;
  border: 1px solid #a7a0a4; outline: 1px solid #ae9ba46b; outline-offset: -5px;
  box-shadow: 0 8px 25px #51405337;
  text-align: center; transform: translateX(-50%);
}
.letter-pull strong { font: 600 clamp(22px,5vw,45px)/1.12 var(--serif); }
.letter-pull span,.letter-pull time { font-size: clamp(7px,1.5vw,11px); letter-spacing: .14em; text-transform: uppercase; }
.letter-pull img { width: clamp(40px,10vw,98px); aspect-ratio: 1; object-fit: cover; object-position: 40% 50%; border-radius: 50%; filter: grayscale(.7); }
.opening .envelope-lid { animation: lift-lid .68s cubic-bezier(.25,.7,.3,1) both; }
.opening .letter-pull { animation: pull-letter 1.05s cubic-bezier(.24,.7,.23,1) .65s both; }
.opening .envelope-stage { animation: sink-envelope 1.35s ease 1.45s both; }
.opening .wax { opacity: 0; }
@keyframes lift-lid { to { transform: perspective(950px) rotateX(171deg); } }
@keyframes pull-letter { from { top: 61%; opacity: 0; } 12% { opacity: 1; } to { top: 25%; transform: translate(-50%,-83%); } }
.opening .envelope-hint, .opening .intro-swatches { opacity: 0; transition: opacity .22s; }
@keyframes sink-envelope { 26% { transform: scale(1.03) rotateX(-8deg); } to { transform: scale(.8) translateY(80px) rotateX(22deg) rotateZ(-4deg); opacity: 0; } }
@keyframes intro-away { to { opacity: 0; visibility: hidden; } }
@keyframes scatter {
  0% { transform: translate(-50%, -50%) scale(.14); opacity: 0; }
  17% { opacity: 1; }
  68% { opacity: .94; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--spin)) scale(var(--scale)); opacity: 0; }
}
@media (max-width: 690px) {
  .envelope-stage { width: min(88vw, 510px); }
  .envelope-intro { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening, .opening .envelope-stage { animation: none; }
}