/* Reference envelope V9. All coordinates share an 800 × 1118 design space. */
.ti-opening {
  --opening-top: max(14px, env(safe-area-inset-top));
  --opening-bottom: max(14px, env(safe-area-inset-bottom));
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: var(--opening-top) max(14px, env(safe-area-inset-right)) var(--opening-bottom) max(14px, env(safe-area-inset-left));
  overflow: auto; overscroll-behavior: contain; color: #343927;
  background: #c8c1b0 url('/assets/decor/opening-satin-v9.svg') center / cover;
  perspective: 1400px;
}
.ti-envelope {
  position: relative; isolation: isolate; container-type: inline-size;
  width: min(560px, 100%, calc((100svh - var(--opening-top) - var(--opening-bottom)) * .71556));
  aspect-ratio: 800 / 1118; flex: none;
  border-radius: 4.9% / 3.5%; background: #eee9dd;
  box-shadow: 0 25px 34px -17px #3c332a66, 0 8px 18px #51473635, inset 0 0 0 1px #fff9;
}
.ti-envelope__base, .ti-envelope__flap {
  position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;
}
.ti-envelope__base { z-index: 0; background-image: url('/assets/decor/opening-paper-base-v9.svg'); border-radius: inherit; }
.ti-envelope__flap { z-index: 1; background-image: url('/assets/decor/opening-paper-flap-v9.svg'); transform-origin: 50% 0; backface-visibility: hidden; }
.ti-envelope__letter { position: absolute; inset: 0; z-index: 2; color: #343927; text-align: center; pointer-events: none; }
.ti-envelope__event {
  position: absolute; top: 10.1%; left: 10%; width: 80%;
  font: 500 2.8cqw / 1.25 'Cormorant Garamond', 'Noto Serif', serif;
  letter-spacing: .57em; text-indent: .57em; text-transform: uppercase;
}
.ti-envelope .ti-envelope__names {
  position: absolute; top: 18.15%; left: 8%; width: 84%; height: 20.2%; margin: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: #303523; font-family: 'Cormorant Garamond', 'Noto Serif', serif;
  font-size: var(--name-size, 15.8cqw); font-weight: 500; line-height: .89;
  letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere;
}
.ti-envelope__names > span, .ti-envelope__names > span > span { display: block; max-width: 100%; }
.ti-envelope__names em { display: block; margin: .15em 0; color: #8e7952; font: italic 3.8cqw / .65 'Cormorant Garamond', serif; letter-spacing: 0; }
.ti-envelope .ti-envelope__message {
  position: absolute; top: 38.6%; left: 11.5%; width: 77%; max-height: 7.8%; margin: 0; padding: 0 0 .35em;
  font: italic 400 3.15cqw / 1.42 'Noto Serif', serif; color: #4b4e3a;
  letter-spacing: .12em; text-wrap: balance; overflow-wrap: anywhere;
  overflow: auto; scrollbar-width: thin; pointer-events: auto;
}
.ti-envelope__ornament { position: absolute; left: 35%; width: 30%; height: 2.2%; background: url('/assets/decor/opening-divider-v9.svg') center / 100% 100% no-repeat; }
.ti-envelope__ornament--top { top: 13.8%; }
.ti-envelope__ornament--bottom { top: 44.2%; left: 37.5%; width: 25%; }
.ti-envelope__seal {
  position: absolute; z-index: 4; top: 53.5%; left: 36.75%; width: 26.5%; aspect-ratio: 220 / 330;
  background: url('/assets/decor/opening-seal-v9.svg') center / contain no-repeat; pointer-events: none;
  transform-origin: 50% 30%;
}
.ti-envelope .ti-envelope__open {
  position: absolute; z-index: 5; left: 13.25%; bottom: 8.15%; width: 73.5%; min-height: 44px; height: 13.5cqw;
  display: flex; justify-content: center; align-items: center; gap: 3cqw;
  margin: 0; padding: 0 5%; border: 1px solid #9b7c4c; border-radius: 100px;
  color: #3c412e; background: linear-gradient(105deg, #eee9dc, #faf7ef 48%, #f2ecdf);
  box-shadow: inset 0 0 0 1px #fffcf2, inset 0 -2px 1px #b49a705c, 0 9px 12px -4px #6250374a, 0 1px 1px #5d452b;
  font: 500 5.1cqw / 1.15 'Cormorant Garamond', 'Noto Serif', serif;
  text-align: center; letter-spacing: -.025em; cursor: pointer; touch-action: manipulation;
  animation: ti-button-float 3.6s cubic-bezier(.45,.05,.35,.95) infinite;
}
.ti-envelope__open > span:last-child { min-width: 0; text-wrap: balance; }
.ti-envelope__play { display: block; flex: 0 0 3.5cqw; height: 4.4cqw; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ti-envelope__open:focus-visible { outline: 3px solid #687251; outline-offset: 5px; }
.ti-envelope__open:active { scale: .98; }
@media(hover:hover) { .ti-envelope__open:hover { animation-play-state: paused; filter: brightness(1.025); } }
@keyframes ti-button-float { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-3px); } 55% { transform: translateY(-1.5px); } 80% { transform: translateY(1px); } }
.ti-opening--active { pointer-events: none; animation: ti-scene-fade .46s .54s cubic-bezier(.22,.61,.36,1) both; }
.ti-opening--active .ti-envelope { animation: ti-card-exit .48s .48s cubic-bezier(.22,.61,.36,1) both; }
.ti-opening--active .ti-envelope__open { animation: ti-button-press .22s both; }
.ti-opening--active .ti-envelope__seal { animation: ti-seal-release .42s .07s both; }
.ti-opening--active .ti-envelope__flap { animation: ti-flap-open .65s .25s both; }
.ti-opening--active .ti-envelope__letter { animation: ti-letter-rise .6s .25s both; }
@keyframes ti-button-press { 40% { transform: scale(.975); } 100% { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes ti-seal-release { 40% { transform: scale(1.07) rotate(-4deg); } 100% { transform: translateY(32px) scale(.85) rotate(12deg); opacity: 0; } }
@keyframes ti-flap-open { to { transform: rotateX(-165deg); opacity: .18; } }
@keyframes ti-letter-rise { to { transform: translateY(-18px); opacity: 0; } }
@keyframes ti-card-exit { to { transform: translateY(-5px) scale(1.008); opacity: 0; filter: blur(1.2px); } }
@keyframes ti-scene-fade { from { opacity: 1; } to { opacity: 0; } }
/* The reference's dark-green CTA belongs only to template demos. */
.template-demo-page .ti-opening { --opening-bottom: calc(74px + env(safe-area-inset-bottom)); }
.template-demo-page:has(.ti-opening) .template-demo-toolbar {
  top: auto; bottom: max(8px, env(safe-area-inset-bottom)); width: min(580px, calc(100% - 20px));
  min-height: 58px; padding: 5px; border: 1px solid #fff9; border-radius: 20px; grid-template-columns: 1fr;
  background: #faf8f0f5; box-shadow: 0 6px 16px #51473520;
}
.template-demo-page:has(.ti-opening) .demo-template-name { display: none; }
.template-demo-page:has(.ti-opening) .demo-choose-button {
  width: 100%; min-height: 46px; min-width: 0; justify-content: center; border-radius: 999px;
  background: #152d23; color: #fff; font: 500 16px / 1.2 'Noto Sans', sans-serif;
}
@media(max-height: 500px) {
  .ti-envelope { width: min(350px, 100%); margin-block: 4px; }
  .ti-opening { place-items: start center; }
}
@media(prefers-reduced-motion: reduce) {
  .ti-envelope__open, .ti-opening--active .ti-envelope, .ti-opening--active .ti-envelope__open,
  .ti-opening--active .ti-envelope__seal, .ti-opening--active .ti-envelope__flap, .ti-opening--active .ti-envelope__letter { animation: none; }
  .ti-opening--active { animation: ti-scene-fade .16s linear both; }
}


/* V10 — soft gate handoff: reveal the invitation beneath the fading envelope.
   This prevents the brief blank-frame / "blink" between gate and invitation. */
.invite.is-gated.is-opening {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
.invite.is-gated.is-opening .invite-body {
  width: 100%;
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
  visibility: visible;
  pointer-events: none;
  opacity: 1;
  transform: none;
}
.invite .invite-body.shown {
  opacity: 1;
  transform: none;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .invite.is-gated.is-opening .invite-body { opacity: 1; }
}