/* Keep touch scrolling vertical, including during the envelope animation. */
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
@supports(overflow:clip){html,body{overflow-x:clip}}
.scene{min-width:0;max-width:100%;touch-action:pan-y pinch-zoom}
.paper{overflow-x:hidden;touch-action:pan-y pinch-zoom}
@media(max-width:600px){.surprise{margin-left:-17px;margin-right:-17px}.timeline{grid-template-columns:repeat(3,minmax(0,1fr))}.event{min-width:0;overflow-wrap:anywhere}}

/* Motion only: the original invitation content and layout remain untouched. */
.scene{perspective:1400px}
.env{transform-style:preserve-3d;perspective:1100px}
.back{box-shadow:0 30px 65px #000b,inset 0 0 0 1px #fff4}
.flap{background:linear-gradient(150deg,#f3e2c8 0%,#e5cfaf 55%,#bb956d 100%);backface-visibility:visible;transition:none;filter:drop-shadow(0 12px 8px #56372166)}
.label{transition:none}
.seal{background:radial-gradient(circle at 30% 25%,#b66259,#7b3332 60%,#4d1d23);box-shadow:0 7px 0 #4c2222,0 17px 26px #49261e88,inset 0 3px 7px #ffd8ad66;touch-action:manipulation;transform-style:preserve-3d}
.paper{transition:none;overscroll-behavior:contain}
.env.animating{pointer-events:none}
.env.animating .paper{pointer-events:none}
.env.open .flap{transform:rotateX(180deg);z-index:0}
.env.open .label{visibility:hidden}
.env.open .paper{z-index:3}
.env:not(.open) .paper{visibility:hidden}
.env.animating .paper{visibility:visible}
.seal:focus-visible{outline:3px solid #fff;outline-offset:8px}
@media(prefers-reduced-motion:reduce){.env,.paper,.flap,.seal,.label{animation:none!important;transition:none!important}}
.env.closing .label{visibility:visible;opacity:1}.env.closing .flap{z-index:5}.icon svg{width:29px;height:29px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Wax seal finish; dimensions and opening/closing motion are unchanged. */
.seal{
 position:relative;
 isolation:isolate;
 border:0;
 border-radius:46% 54% 49% 51% / 52% 46% 54% 48%;
 background:
  radial-gradient(ellipse at 28% 18%,#e8a08b66 0,transparent 32%),
  radial-gradient(ellipse at 75% 83%,#320b17aa 0,transparent 46%),
  conic-gradient(from 25deg,#8e363e,#a74b50 13%,#722632 29%,#a64b4e 44%,#62212d 61%,#ad5556 78%,#8e363e);
 color:#501e29;
 font-family:Georgia,'Times New Roman',serif;
 font-weight:700;
 font-size:13px;
 line-height:1.35;
 letter-spacing:1.3px;
 text-shadow:0 1px 0 #d17a73,0 -1px 1px #300711;
 box-shadow:
  0 2px 0 #b5665c,
  1px 5px 0 #5d202a,
  0 10px 13px #48221666,
  0 19px 25px #48221633,
  inset 2px 3px 3px #edaa8877,
  inset -3px -4px 4px #3a101a99;
}
.seal::before{
 content:'';
 position:absolute;
 inset:10px;
 z-index:-1;
 pointer-events:none;
 border-radius:50%;
 border:2px solid #722b35;
 background:
  radial-gradient(ellipse at 65% 78%,#b75b5660,transparent 55%),
  radial-gradient(ellipse at 35% 25%,#6e2631,#923e46 68%,#a75051);
 box-shadow:
  0 1px 1px #edab8477,
  0 -1px 1px #43101c99,
  inset 1px 3px 5px #35091699,
  inset -1px -2px 2px #dc8e7477;
}
.seal::after{
 content:'';
 position:absolute;
 inset:5px 6px 6px 5px;
 pointer-events:none;
 border-radius:47% 53% 49% 51% / 52% 46% 54% 48%;
 border:1px solid #d7836a44;
 box-shadow:inset 0 1px 1px #f3b99244;
}