/* A white, softly rounded paper flap opens over the original invitation artwork. */
@font-face { font-family: 'Hoopa Envelope Bellefair'; src: url('/assets/fonts/Bellefair-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.inv-envelope[hidden] { display: none; }
/* Release the ribbon, open the lid, then draw the invitation out of the pocket. */
html.inv-envelope-pending { overflow: hidden; }
.inv-envelope-pending .inv-wrap { opacity: 0; transform: translateY(min(12vh, 96px)); }
.inv-envelope-pending:not(.inv-envelope-revealing) .inv-wrap *,
.inv-envelope-pending:not(.inv-envelope-revealing) .inv-wrap *::before,
.inv-envelope-pending:not(.inv-envelope-revealing) .inv-wrap *::after { animation-play-state: paused !important; }
.inv-envelope-pending.inv-envelope-revealing .inv-wrap { opacity: 1; transform: none; transition: transform 2200ms 4000ms cubic-bezier(.45,0,.55,1); }
.inv-envelope { --envelope-radius: 36px; position: fixed; inset: 0; z-index: 10000; isolation: isolate; overflow: hidden; border-radius: var(--envelope-radius); perspective: 1800px; color: #656b71; direction: rtl; text-align: center; font-family: 'Heebo', sans-serif; }
.inv-envelope-defs { position: absolute; }
.inv-envelope-body { position: absolute; inset: 0; z-index: 1; border-radius: inherit; transition: transform 2300ms 4000ms cubic-bezier(.45,0,.55,1); }
.inv-envelope-back { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.inv-envelope :where(.inv-envelope-side, .inv-envelope-bottom, .inv-envelope-flap) { position: absolute; inset: 0; border-radius: var(--envelope-radius); }
.inv-envelope-side { z-index: 1; }
.inv-envelope-side-left { filter: drop-shadow(1px 1px 1px #34455417) drop-shadow(4px 2px 6px #3445540e); }
.inv-envelope-side-right { filter: drop-shadow(-1px 1px 1px #34455417) drop-shadow(-4px 2px 6px #3445540e); }
.inv-envelope-bottom { z-index: 2; filter: drop-shadow(0 -1px 1px #34455419) drop-shadow(0 -4px 7px #34455410); }
.inv-envelope-flap { bottom: 38%; z-index: 3; transform-origin: center top; backface-visibility: hidden; filter: drop-shadow(0 3px 2px #3445542e) drop-shadow(0 18px 16px #34455430); transition: transform 4000ms 1600ms cubic-bezier(.45,0,.55,1); }
.inv-envelope-paper { display: block; width: 100%; height: 100%; overflow: visible; }
.inv-envelope-heading { position: absolute; top: 21%; left: 8%; right: 8%; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #796346; font-family: 'Hoopa Envelope Bellefair', 'Bellefair', serif; font-weight: 400; letter-spacing: 0; }
.inv-envelope-heading-intro { font-size: 20px; line-height: 1.5; }
.inv-envelope-heading-title { font-size: 64px; line-height: 1.15; text-shadow: 0 1px 0 #ffffff; }
.inv-envelope-heading::after { content: ''; display: block; width: 44px; height: 1px; margin-top: 12px; background: #c6b18c; }
/* The curved flap ends at SVG y=948: 62% of viewport height × .948. */
.inv-envelope-ribbon { position: absolute; z-index: 4; top: 58.776%; left: 0; right: 0; height: 0; pointer-events: none; }
.inv-envelope-ribbon-half { position: absolute; inset: 0; transform-origin: center center; filter: drop-shadow(0 3px 3px #5c503827); }
.inv-envelope-ribbon-band { position: absolute; top: -37px; width: calc(50% + 1px); height: 74px; overflow: visible; }
.inv-envelope-ribbon-left .inv-envelope-ribbon-band { left: 0; }
.inv-envelope-ribbon-right .inv-envelope-ribbon-band { right: 0; transform: scaleX(-1); }
.inv-envelope-bow { position: absolute; left: 50%; top: 0; width: 260px; height: auto; overflow: visible; transform: translate(-50%, -41.17647%); }
.inv-envelope-ribbon-button { position: absolute; z-index: 5; top: 58.776%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.inv-envelope-bow-knot { position: absolute; top: 0; left: 50%; width: 42px; height: 46px; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 2px #5c503834); }
.inv-envelope-skip { position: absolute; z-index: 5; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 10px 20px; border: 1px solid #d9dde34d; border-radius: 30px; background: #ffffffbf; color: #646970; font: 400 12px/1.5 'Heebo', sans-serif; cursor: pointer; }
.inv-envelope button:focus-visible { outline: 2px solid #657482; outline-offset: 6px; }
.inv-envelope.is-opening .inv-envelope-ribbon-button { pointer-events: none; }
/* Keep the crossings together as the right tail pulls through the knot.
   The freed ends follow at different speeds, with a little weight and drag. */
.inv-envelope.is-opening .inv-envelope-ribbon-left { animation: invEnvelopeRibbonLeft 3200ms linear both; }
.inv-envelope.is-opening .inv-envelope-ribbon-right { animation: invEnvelopeRibbonRight 3200ms linear both; }
@keyframes invEnvelopeRibbonLeft {
    0% { transform: translate3d(0,0,0) rotate(0); animation-timing-function: ease-in-out; }
    34% { transform: translate3d(-1px,2px,0) rotate(-.15deg); animation-timing-function: ease-in-out; }
    50% { transform: translate3d(-3px,4px,0) rotate(-.3deg); animation-timing-function: cubic-bezier(.45,0,.7,.5); }
    68% { transform: translate3d(-38px,17px,0) rotate(-1.1deg); animation-timing-function: cubic-bezier(.4,.15,.65,1); }
    100% { transform: translate3d(calc(0px - var(--envelope-ribbon-travel, 65vw) - 280px),94px,0) rotate(-5deg); }
}
@keyframes invEnvelopeRibbonRight {
    0% { transform: translate3d(0,0,0) rotate(0); animation-timing-function: ease-in-out; }
    34% { transform: translate3d(2px,1px,0) rotate(.1deg); animation-timing-function: ease-in-out; }
    50% { transform: translate3d(5px,3px,0) rotate(.2deg); animation-timing-function: cubic-bezier(.4,0,.65,.65); }
    68% { transform: translate3d(64px,12px,0) rotate(.7deg); animation-timing-function: cubic-bezier(.35,.2,.65,1); }
    100% { transform: translate3d(calc(var(--envelope-ribbon-travel, 65vw) + 280px),68px,0) rotate(3.5deg); }
}
.inv-envelope.is-opening .inv-envelope-flap { transform: rotateX(125deg); pointer-events: none; }
.inv-envelope.is-opening .inv-envelope-body { transform: translateY(104%); }
@media (max-width: 600px) {
    .inv-envelope { --envelope-radius: 28px; }
    .inv-envelope-heading { gap: 8px; }
    .inv-envelope-heading-intro { font-size: 18px; }
    .inv-envelope-heading-title { font-size: 50px; }
    .inv-envelope-bow { width: 220px; }
    .inv-envelope-ribbon-band { top: -31.5px; height: 63px; }
    .inv-envelope-bow-knot { width: 36px; height: 40px; }
}
@media (max-height: 650px) {
    .inv-envelope-heading { top: 17%; gap: 6px; }
    .inv-envelope-heading-intro { font-size: 16px; }
    .inv-envelope-heading-title { font-size: 42px; }
    .inv-envelope-heading::after { width: 36px; margin-top: 8px; }
    .inv-envelope-bow { width: 190px; }
    .inv-envelope-skip { bottom: 8px; }
}
/* The editor reuses the real envelope inside its phone, without covering the form. */
.hoopa-custom-phone-chrome > .inv-envelope { position: absolute; z-index: 6; --envelope-radius: 26px; --envelope-ribbon-travel: 190px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-heading { top: 17%; gap: 6px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-heading-intro { font-size: 16px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-heading-title { font-size: 42px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-heading::after { width: 36px; margin-top: 8px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-bow { width: 190px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-ribbon-band { top: -27px; height: 54px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-bow-knot { width: 32px; height: 36px; }
.hoopa-custom-phone-chrome > .inv-envelope .inv-envelope-skip { bottom: 12px; }
.hoopa-custom-phone-chrome.inv-envelope-pending > :not(.inv-envelope) { opacity: 0; transform: translateY(64px); }
.hoopa-custom-phone-chrome.inv-envelope-pending:not(.inv-envelope-revealing) > :not(.inv-envelope),
.hoopa-custom-phone-chrome.inv-envelope-pending:not(.inv-envelope-revealing) > :not(.inv-envelope)::before,
.hoopa-custom-phone-chrome.inv-envelope-pending:not(.inv-envelope-revealing) > :not(.inv-envelope)::after,
.hoopa-custom-phone-chrome.inv-envelope-pending:not(.inv-envelope-revealing) > :not(.inv-envelope) *,
.hoopa-custom-phone-chrome.inv-envelope-pending:not(.inv-envelope-revealing) > :not(.inv-envelope) *::before,
.hoopa-custom-phone-chrome.inv-envelope-pending:not(.inv-envelope-revealing) > :not(.inv-envelope) *::after { animation-play-state: paused !important; }
.hoopa-custom-phone-chrome.inv-envelope-revealing > :not(.inv-envelope) { opacity: 1; transform: none; transition: transform 2200ms 4000ms cubic-bezier(.45,0,.55,1); }
@media (prefers-reduced-motion: reduce) {
    .inv-envelope, .inv-envelope *, .inv-envelope-pending .inv-wrap { transition: none !important; animation: none !important; }
    .hoopa-custom-phone-chrome.inv-envelope-pending > :not(.inv-envelope) { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .inv-envelope-heading { color: CanvasText; }
    .inv-envelope-heading-title { text-shadow: none; }
    .inv-envelope-heading::after { background: CanvasText; }
    .inv-envelope-ribbon-button { border: 2px solid ButtonText; }
    .inv-envelope-skip { border: 2px solid ButtonText; }
}
@media print {
    .inv-envelope { display: none !important; }
    .inv-envelope-pending .inv-wrap { opacity: 1; transform: none; }
    .hoopa-custom-phone-chrome.inv-envelope-pending > :not(.inv-envelope) { opacity: 1; transform: none; }
    html.inv-envelope-pending { overflow: visible; }
}