/* The card starts inside the envelope, clears the top edge, then moves forward. */
.opening .envelope{isolation:isolate;overflow:visible}.opening .envelope-back{z-index:0}.opening .letter{z-index:1;transition:none;will-change:transform,filter}.opening .envelope-front{z-index:3;pointer-events:none}.opening .flap{z-index:4}.opening .seal{transition:opacity .35s ease,transform .45s ease}.opening.animating .seal{opacity:0;transform:scale(.72);pointer-events:none}.opening.animating .flap{z-index:0}.opening.animating .letter{animation:pullLetterForward 1.18s .14s cubic-bezier(.22,.72,.18,1) both}
@keyframes pullLetterForward{0%{z-index:1;transform:translateY(0) scale(.96);filter:brightness(.94)}52%{z-index:1;transform:translateY(-154px) scale(.985);filter:brightness(.98)}53%{z-index:6;transform:translateY(-154px) scale(.985);filter:brightness(1)}100%{z-index:6;transform:translateY(-104px) scale(1.035);filter:brightness(1);box-shadow:0 32px 70px rgba(0,0,0,.3)}}
@media(max-width:520px){@keyframes pullLetterForward{0%{z-index:1;transform:translateY(0) scale(.96)}52%{z-index:1;transform:translateY(-138px) scale(.985)}53%{z-index:6;transform:translateY(-138px) scale(.985)}100%{z-index:6;transform:translateY(-92px) scale(1.025);box-shadow:0 28px 60px rgba(0,0,0,.28)}}}
@media(prefers-reduced-motion:reduce){.opening.animating .letter{animation-duration:.01ms;transform:translateY(-92px);z-index:6}.opening.animating .seal{transition-duration:.01ms}}

/* Keep the envelope scene opaque while it exits, preventing a ghosted overlap with page one. */
.opening{opacity:1!important;transform:translate3d(0,0,0);backface-visibility:hidden;will-change:transform;transition:transform .72s cubic-bezier(.76,0,.24,1),visibility 0s .72s!important}
.opening.animating{pointer-events:none}
.opening.opened{opacity:1!important;transform:translate3d(0,-101%,0);visibility:hidden}

/* Open the flap first. When the card begins moving it is already above the pocket. */
.opening.animating .letter{z-index:6;animation:liftLetterAbove 1.08s .48s cubic-bezier(.2,.76,.18,1) both}
@keyframes liftLetterAbove{
  0%{z-index:6;transform:translateY(18px) scale(.96);clip-path:inset(0 0 86% 0);filter:brightness(.96)}
  58%{z-index:6;transform:translateY(-154px) scale(.99);clip-path:inset(0 0 0 0);filter:brightness(1)}
  100%{z-index:6;transform:translateY(-104px) scale(1.035);clip-path:inset(0 0 0 0);filter:brightness(1);box-shadow:0 32px 70px rgba(0,0,0,.3)}
}
@media(max-width:520px){
  @keyframes liftLetterAbove{
    0%{z-index:6;transform:translateY(16px) scale(.96);clip-path:inset(0 0 86% 0)}
    58%{z-index:6;transform:translateY(-138px) scale(.99);clip-path:inset(0 0 0 0)}
    100%{z-index:6;transform:translateY(-92px) scale(1.025);clip-path:inset(0 0 0 0);box-shadow:0 28px 60px rgba(0,0,0,.28)}
  }
}