/* One proportional artwork plane keeps the seal and four folds registered. */
.envelope-entry{position:fixed;inset:0;z-index:100;display:block;overflow:hidden;background:#eee5d5;transition:opacity .4s ease;isolation:isolate}
.envelope-entry:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#fffaf0,#eee5d5 78%);transition:opacity .6s ease}
.envelope-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,calc(100vh * .6666667));width:min(470px,calc(100dvh * .6666667));aspect-ratio:2 / 3;perspective:1800px;isolation:isolate;container-type:inline-size}
.envelope-paper{position:absolute;inset:0;background:#ece1ce;transition:opacity .55s ease .28s}
.envelope-flap,.envelope-seal{position:absolute;inset:0;background:url('assets/envelope-bismillah.webp') center/100% 100% no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity}
.envelope-flap{-webkit-mask-image:radial-gradient(ellipse 14.5% 10.8% at 50% 49.4%,transparent 98%,#000 100%);mask-image:radial-gradient(ellipse 14.5% 10.8% at 50% 49.4%,transparent 98%,#000 100%);transition:transform 1.35s cubic-bezier(.22,.04,.18,1),opacity .7s ease .7s}
.envelope-flap-top{clip-path:polygon(0 0,100% 0,100% 10%,50% 50%,0 10%);transform-origin:50% 0;z-index:4}
.envelope-flap-bottom{clip-path:polygon(0 90%,50% 50%,100% 90%,100% 100%,0 100%);transform-origin:50% 100%;z-index:3}
.envelope-flap-left{clip-path:polygon(0 10%,50% 50%,0 90%);transform-origin:0 50%;z-index:2}
.envelope-flap-right{clip-path:polygon(100% 10%,100% 90%,50% 50%);transform-origin:100% 50%;z-index:2}
.envelope-seal{clip-path:ellipse(14.5% 10.8% at 50% 49.4%);z-index:6;transition:transform .62s cubic-bezier(.22,.04,.18,1),opacity .45s ease .12s}
.envelope-seal-halo{position:absolute;left:37.5%;top:40.4%;width:25%;height:18%;z-index:5;border-radius:50%;box-shadow:0 0 12px 3px #e7b86a55,0 0 28px 7px #fff0c04d;animation:envelope-halo 6.5s ease-in-out infinite;pointer-events:none;transition:opacity .3s ease}
.envelope-foil{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;mix-blend-mode:screen;transition:opacity .3s ease}
.envelope-touch{position:absolute;inset:0;width:100%;height:100%;z-index:8;border:0;background:transparent;padding:0;border-radius:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.envelope-touch:focus-visible{outline:2px solid #a18045;outline-offset:calc(-8px - env(safe-area-inset-top))}
.envelope-entry.is-opening .envelope-seal{transform:translateY(-1.25%) scale(1.035) rotate(-1.5deg);opacity:0}
.envelope-entry.is-opening .envelope-touch{pointer-events:none}
.envelope-entry.is-opening .envelope-seal-halo,.envelope-entry.is-opening .envelope-foil{opacity:0;animation:none}
.envelope-entry.is-opening .envelope-paper{opacity:0}
.envelope-entry.is-opening:before{opacity:0}
.envelope-entry.is-opening{background:transparent}
.envelope-entry.is-opening .envelope-flap-top{transform:rotateX(108deg);transition-delay:.24s;opacity:0}
.envelope-entry.is-opening .envelope-flap-bottom{transform:rotateX(-103deg);transition-delay:.4s;opacity:0}
.envelope-entry.is-opening .envelope-flap-left{transform:rotateY(-103deg);transition-delay:.4s;opacity:0}
.envelope-entry.is-opening .envelope-flap-right{transform:rotateY(103deg);transition-delay:.44s;opacity:0}
.envelope-entry.is-finished{opacity:0;pointer-events:none}
body.envelope-pending{overflow:hidden}
@keyframes envelope-halo{0%,100%{opacity:.16}50%{opacity:.38}}
/* Cover the phone without stretching the embossing or detaching the seal. */
@media(max-width:600px){.envelope-stage{width:max(100vw,calc(100vh * .6666667));width:max(100vw,calc(100dvh * .6666667))}}
@media(prefers-reduced-motion:reduce){.envelope-seal-halo{animation:none;opacity:.22}.envelope-flap,.envelope-seal,.envelope-paper{transition:none}.envelope-entry.is-opening .envelope-flap{transform:none;opacity:0}.envelope-entry{transition:opacity .15s}.envelope-foil{display:none}}