/* Envelope opening shared by the web invites. Add .opening to .envelope to play it:
   0 seal shakes · .2 seal breaks in two · .55 flap swings open · 1.15 card rises · 2.25 envelope gives way to the page.
   Colours come from --env-* custom properties; the defaults are the sindoor envelope. */
.envelope { position: fixed; inset: 0; z-index: 30; overflow: hidden; }
.envelope .toran { position: absolute; inset: 0 0 auto; z-index: 3; }
.env-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.env {
  --W: min(84vw, 340px);
  position: relative;
  width: var(--W);
  height: calc(var(--W) * .66);
  perspective: 900px;
  filter: drop-shadow(var(--env-shadow, 0 16px 22px rgba(30, 0, 3, .5)));
}
.env > * { position: absolute; inset: 0; }
.env-back { z-index: 1; border-radius: 6px; background: var(--env-back, #5E0F15 var(--jaali) 0 0 / 18px 18px); }
.env-card {
  z-index: 2;
  inset: 6% 7% auto;
  height: 90%;
  border-radius: 4px;
  border: 1px solid var(--env-card-line, #B8892F);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .2);
}
.env-front {
  z-index: 3;
  border-radius: 6px;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background: var(--env-front, linear-gradient(180deg, #9A2227 0%, #84191E 60%, #6E1318 100%));
}
.env-front svg, .env-flap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.env-flap { z-index: 4; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 56%); background: var(--env-flap, linear-gradient(180deg, #B02B31 0%, #8E1B1F 100%)); }
.env-seal { position: absolute; z-index: 5; left: 50%; top: 56%; width: 66px; height: 66px; margin: -33px 0 0 -33px; }
.env-seal .half {
  position: absolute;
  inset: 0;
  border-radius: 47% 53% 49% 51% / 52% 47% 53% 48%;
  background: var(--env-seal, radial-gradient(circle at 38% 32%, #D0383F 0%, #A01822 45%, #66090F 100%));
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .14), inset 0 0 0 7px rgba(255, 170, 150, .12), 0 3px 4px rgba(0, 0, 0, .35);
}
.env-seal .half.l { clip-path: polygon(0 0, 52% 0, 45% 28%, 55% 52%, 46% 76%, 53% 100%, 0 100%); }
.env-seal .half.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 46% 76%, 55% 52%, 45% 28%); }
.env-seal .ganesha { position: absolute; left: 50%; top: 50%; width: 34px; height: 37px; margin: -19px 0 0 -17px; color: var(--env-seal-ink, #F2C79A); --gw: 3.4; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }

.envelope.opening { pointer-events: none; animation: envOut .65s ease-in 2.25s forwards; }
.envelope.opening .env-fade { animation: envFade .4s ease forwards; }
.envelope.opening .env-seal { animation: envShake .22s ease-in-out; }
.envelope.opening .env-seal .l { animation: envBreakL .7s cubic-bezier(.5, 0, .9, .6) .2s forwards; }
.envelope.opening .env-seal .r { animation: envBreakR .7s cubic-bezier(.5, 0, .9, .6) .2s forwards; }
.envelope.opening .env-flap { animation: envFlap .75s cubic-bezier(.55, 0, .3, 1) .55s forwards; }
.envelope.opening .env-card { animation: envCard .95s cubic-bezier(.3, .7, .3, 1) 1.15s forwards; }
@keyframes envOut { to { opacity: 0; transform: scale(1.08); } }
@keyframes envFade { to { opacity: 0; transform: translateY(8px); } }
@keyframes envShake { 30% { transform: rotate(-7deg) scale(1.06); } 65% { transform: rotate(6deg) scale(1.08); } 100% { transform: none; } }
@keyframes envBreakL { to { transform: translate(-36px, 70px) rotate(-40deg); opacity: 0; } }
@keyframes envBreakR { to { transform: translate(36px, 70px) rotate(40deg); opacity: 0; } }
@keyframes envFlap { 0% { transform: rotateX(0); z-index: 4; } 49% { z-index: 4; } 50% { z-index: 1; } 100% { transform: rotateX(180deg); z-index: 1; } }
@keyframes envCard { to { transform: translateY(-72%); } }

@media (prefers-reduced-motion: reduce) {
  .envelope.opening, .envelope.opening * { animation-duration: .01s !important; animation-delay: 0s !important; }
  .envelope.opening { animation: envOut .4s ease forwards !important; }
}