.invitation-copy { color: var(--red, #ba3b2b); }
.invitation-copy h2 { font-size: clamp(42px,4.9vw,70px); line-height: 1.04; letter-spacing: -.025em; font-weight: 560; margin: 0; text-wrap: balance; }
.invitation-copy .section-description { max-width: 610px; margin: 19px auto 0; font-size: 18px; line-height: 1.45; letter-spacing: -.025em; color: #762b25; text-wrap: balance; }
.invitation-copy .section-eyebrow { margin: 0 0 13px; }

.invitation-phone-layer { position: absolute; inset: 0; overflow: clip; container-type: size; isolation: isolate; color: #762b25; background: #f6f2ea; --invite-paper: #fffaf1; --invite-red: #ba3b2b; --invite-ink: #762b25; opacity: 0; pointer-events: none; font-family: inherit; }
.invitation-phone-layer.is-active { opacity: 1; pointer-events: auto; }
.invitation-receiver-waiting { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 70px; height: 70px; overflow: hidden; border-radius: 22%; transform: translate(-50%,-50%); opacity: var(--invite-waiting-opacity,0); box-shadow: 0 10px 20px #762b2513; }
.invitation-receiver-waiting img { display: block; width: 100%; height: 100%; }
.invitation-phone-layer button { font: inherit; cursor: pointer; }
.invitation-phone-layer button:focus-visible { outline: 2px solid #762b25; outline-offset: 3px; }
.invitation-scene { position: absolute; inset: 10px 13px 9px; z-index: 4; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.invitation-chosen { opacity: var(--invite-chosen-opacity,1); }
.invitation-sending { opacity: var(--invite-sending-opacity,0); align-items: center; gap: 17px; }
.invitation-arriving { opacity: var(--invite-arriving-opacity,0); }
.invitation-reading { opacity: var(--invite-reading-opacity,0); }
.invitation-recipient { opacity: var(--invite-recipient-opacity,0); }
.invitation-celebration { opacity: var(--invite-celebration-opacity,0); }
.invitation-phone-layer[data-step="chosen"] .invitation-chosen,
.invitation-phone-layer[data-step="sending"] .invitation-sending,
.invitation-phone-layer:is([data-step="arriving"],[data-step="opening"]) .invitation-arriving,
.invitation-phone-layer[data-step="reading"] .invitation-reading,
.invitation-phone-layer:is([data-step="open"],[data-step="pressing"]) .invitation-recipient,
.invitation-phone-layer[data-step="celebrating"] .invitation-celebration { pointer-events: auto; }
.invitation-small-label { font-size: 16px; letter-spacing: -.02em; font-weight: 600; margin: 0 0 10px; }
.invitation-primary { position: relative; z-index: 5; width: 100%; min-height: 42px; flex: none; margin-top: 13px; background: var(--invite-red); color: var(--invite-paper); border: 0; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; font-size: 12px !important; font-weight: 600 !important; }
.invitation-primary:hover { background: var(--invite-ink); }
.invitation-primary svg { width: 16px; height: 16px; fill: currentColor; }
.invitation-chosen-ticket { border: 1px solid #e9ddd0; border-radius: 15px; padding: 16px 16px 14px; background: #fbf8f2; margin: 0; }
.invitation-card-kind { display: block; font-size: 8px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #ba3b2b; }
.invitation-card-action { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding: 10px 13px; background: #ba3b2b; color: #fffaf1; border-radius: 5px; font-size: 12px; font-weight: 600; }
.invitation-ticket-art { height: 125px; height: clamp(109px,30cqh,170px); }
.invitation-ticket-art svg { display: block; width: 100%; height: 100%; }
.invitation-chosen-ticket h3 { font-size: 25px; letter-spacing: -.025em; line-height: 1.08; margin: 6px 0 12px; font-weight: 560; }
.invitation-chosen-ticket p { font-size: 11px; line-height: 1.45; margin: 0; }
.invitation-chosen-ticket i,.invitation-date-ticket i,.invitation-sleeve-couple i { font-style: normal; margin: 0 3px; }

.invitation-sleeve { position: relative; text-align: center; border: 1px solid #b66c5150; border-radius: 5px; background: #efd6c4; padding: 13px 14px 16px; box-shadow: 0 6px 15px #762b2510; }
.invitation-sleeve-art { height: 120px; height: clamp(96px,calc(100cqh - 260px),165px); margin: -2px -9px 0; }
.invitation-sleeve-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.invitation-sleeve-couple { display: block; margin-top: 3px; font-size: 7px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--invite-ink); }
.invitation-sleeve h3 { font-size: 29px; font-weight: 570; line-height: 1.02; letter-spacing: -.025em; color: var(--invite-red); text-wrap: balance; margin: 10px 0 9px; }
.invitation-sleeve > p { font-size: 11px; line-height: 1.45; letter-spacing: -.02em; margin: 0; color: var(--invite-ink); text-wrap: balance; }
.invitation-vinyl { transform-origin: 183px 85px; }
.invitation-record-jacket { transform-origin: 100px 85px; }
.transfer-sender-screen .invitation-sending { opacity: 1; }
.transfer-sender-screen .invitation-sending .invitation-chosen-ticket { width: 100%; opacity: var(--invite-source-envelope-opacity,1); transform: translateX(calc((1 - var(--invite-source-envelope-opacity,1)) * 70px)) rotate(calc((1 - var(--invite-source-envelope-opacity,1)) * 8deg)); }
.invitation-flight { position: absolute; z-index: 25; width: 165px; aspect-ratio: 340 / 238; pointer-events: none; opacity: 0; color: #762b25; --invite-paper: #fffaf1; --invite-red: #ba3b2b; --invite-ink: #762b25; }
.invitation-flight .invitation-envelope { width: 100%; height: 100%; opacity: 1; transform: none; }
.invitation-flight .invite-env-seal { opacity: 1; transform: none; }
.invitation-flight .invite-env-flap { z-index: 6; transform: none; }
.invitation-flight .invite-env-letter { transform: none; }
.invitation-flight .invite-env-label { font-size: 10px; }
.invitation-flight-card { position: absolute; inset: -12% 0; opacity: var(--invite-flight-card-opacity,1); transform: rotateY(calc(var(--invite-flight-card-fold,0) * 70deg)); }
.invitation-flight-card .invitation-chosen-ticket { display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: 10px; box-shadow: 0 8px 15px #762b251b; }
.invitation-flight-card .invitation-ticket-art { height: auto; min-height: 25px; flex: 1; }
.invitation-flight-card .invitation-card-kind { font-size: 6px; }
.invitation-flight-card .invitation-chosen-ticket h3 { font-size: 14px; margin: 5px 0 0; line-height: 1.08; }
.invitation-flight-envelope { position: absolute; inset: 0; opacity: var(--invite-flight-envelope-opacity,0); }

.invitation-notification { display: flex; align-items: center; gap: 8px; flex: none; background: #fffaf1; border: 1px solid #e3cebe; box-shadow: 0 4px 14px #762b2510; border-radius: 11px; padding: 12px 10px; margin-bottom: 28px; opacity: var(--invite-notification-opacity,1); }
.invitation-notification-icon { flex: none; width: 29px; height: 29px; overflow: hidden; border-radius: 22%; }
.invitation-notification-icon img { display: block; width: 100%; height: 100%; }
.invitation-notification strong { display: block; font-size: 11px; line-height: 1.25; font-weight: 650; }
.invitation-notification span:not(.invitation-notification-icon) { display: block; font-size: 9px; line-height: 1.35; margin-top: 3px; }
.invitation-ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--invite-ambient-opacity,0); background: radial-gradient(ellipse at 50% 48%,#f3e9df 0%,#f6f2ea 75%); }
.invitation-ambient > span { position: absolute; left: var(--heart-x); top: var(--heart-y); width: var(--heart-size); height: var(--heart-size); opacity: .15; color: #d95f6d; transform: rotate(-12deg); }
.invitation-ambient svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.invitation-envelope-open { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; border: 0; background: none; color: var(--invite-ink); padding: 0 0 10px; }
.invitation-phone-layer .invitation-envelope-open:focus-visible { outline: none; }
.invitation-envelope-open:focus-visible .invitation-open-hint { outline: 2px solid var(--invite-red); outline-offset: 7px; border-radius: 20px; }
.invitation-envelope { --env-width: 260px; position: relative; display: block; width: min(100%,var(--env-width)); aspect-ratio: 340 / 238; perspective: 1100px; opacity: var(--invite-envelope-opacity,1); transform: translateY(var(--invite-envelope-y,0px)); }
.invitation-envelope > * { position: absolute; display: block; }
.invitation-envelope svg { display: block; width: 100%; height: 100%; overflow: visible; }
.invite-env-back { inset: 0; z-index: 1; border-radius: 11px; background: #e9e1d4; border: 1px solid #cbbfae; box-shadow: 0 20px 30px -16px #502d1970; }
.invite-env-letter { left: 7%; right: 7%; top: 6%; height: 86%; z-index: 3; border-radius: 6px; background: #fffaf1; border: 1px solid #d9cbbb; box-shadow: 0 1px 4px #00000026; display: flex !important; flex-direction: column; align-items: center; padding: 14px 15px 0; transform: translateY(var(--invite-letter-lift,0%)); }
.invite-env-letter > svg { width: 21px; height: 21px; fill: var(--invite-red); flex: none; margin-bottom: 10px; }
.invite-env-letter-note { font-size: 12px; line-height: 1.35; text-wrap: balance; font-weight: 550; color: #762b25; }
.invite-env-front { inset: 0; z-index: 4; }
.invite-env-front path,.invite-env-flap path { stroke: #c7b9a7; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.invite-env-front .side { fill: #f2ecdf; }
.invite-env-front .bottom { fill: #fbf7ef; }
.invite-env-label { left: 7%; right: 7%; top: 76%; z-index: 5; color: #762b25; font-size: 13px; font-weight: 550; line-height: 1.15; letter-spacing: -.02em; }
.invite-env-flap { left: 0; right: 0; top: 0; height: 53%; z-index: var(--invite-flap-layer,6); transform-origin: 50% 0; transform: rotateX(var(--invite-flap-angle,0deg)); }
.invite-env-flap svg { filter: drop-shadow(0 3px 2px #00000021); }
.invite-env-flap path { fill: #f4eee2; }
.invitation-phone-layer[data-step="opening"] .invite-env-flap path { fill: #eee7db; }
.invite-env-seal { left: 50%; top: 51%; z-index: 7; width: 23%; height: 32.86%; margin: -11.5% 0 0 -11.5%; opacity: var(--invite-seal-opacity,1); transform: translateY(var(--invite-seal-y,0px)) scale(var(--invite-seal-scale,1)); }
.invite-env-seal svg { filter: drop-shadow(0 4px 5px #00000038); }
.invite-env-seal .wax { fill: #ba3b2b; stroke: #9b3025; stroke-width: .8; }
.invite-env-seal .ring { fill: none; stroke: #8f2c24; stroke-width: 3; opacity: .55; }
.invite-env-seal .mark { fill: #e49789; }
.invite-env-seal .shine { fill: #fff; opacity: .22; }
.invitation-open-hint { display: flex; align-items: center; gap: 8px; color: var(--invite-red); font-size: 11px; font-weight: 600; opacity: var(--invite-notification-opacity,1); }
.invitation-reveal-paper { position: absolute; inset: 0; z-index: 6; background: #fffaf1; pointer-events: none; opacity: var(--invite-paper-opacity,0); clip-path: var(--invite-paper-clip,inset(0)); }
.invitation-reading { z-index: 7; clip-path: var(--invite-content-clip,inset(0)); padding: 28px 9px; text-align: left; }
.invitation-reading-to { font-size: 16px; color: #917565; }
.invitation-reading-heart { display: block; width: 29px; height: 29px; margin: 20px 0 17px; color: #ba3b2b; }
.invitation-reading-heart svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.invitation-reading p { margin: 0; font-size: 29px; line-height: 1.18; letter-spacing: -.025em; font-weight: 550; color: #ba3b2b; text-wrap: balance; }
.invitation-reading-from { margin-top: 24px; font-size: 14px; text-align: right; color: #762b25; }
.invitation-recipient { z-index: 7; clip-path: var(--invite-content-clip,inset(0)); }
.invitation-recipient-sleeve { flex: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 8px 6px; }
.invitation-recipient-sleeve .invitation-sleeve-art { height: 131px; height: clamp(65px,calc(100cqh - 292px),180px); margin-bottom: 0; }
.invitation-recipient-sleeve h3 { font-size: 31px; line-height: 1.02; margin-top: 12px; }
.invitation-recipient-sleeve > p { font-size: 14px; line-height: 1.5; }
.invitation-sleeve-details { border-top: 1px solid #ba3b2b33; display: flex; flex-direction: column; gap: 4px; margin-top: 11px; padding-top: 9px; font-size: 10px; }
.invitation-sleeve-details strong { font-weight: 650; }
.invitation-sleeve-details span { font-size: 9px; }
.invitation-signature { font-size: 9px; display: block; text-align: right; margin-top: 8px; }
.invitation-yes { margin-top: 9px; }
.invitation-phone-layer[data-step="pressing"] .invitation-yes { transform: scale(.95); background: var(--invite-ink); }
.invitation-tap-ring { position: absolute; bottom: 10px; right: 15px; width: 27px; height: 27px; border: 2px solid #e7ab90; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 8; }
.invitation-phone-layer[data-step="pressing"] .invitation-tap-ring { animation: invitation-tap .38s ease-out both; }

.invitation-celebration { z-index: 7; }
.invitation-confetti-field { position: absolute; inset: -10px -13px -12px; pointer-events: none; overflow: clip; z-index: 0; opacity: .9; }
.invitation-confetti { position: absolute; top: -22px; left: var(--across); width: 11px; height: 11px; color: var(--piece-color); animation: invitation-fall var(--fall-time) var(--fall-delay) linear infinite; animation-play-state: paused; }
.invitation-confetti svg { width: 100%; height: 100%; fill: currentColor; }
.invitation-confetti.is-strip { width: 11px; height: 4px; background: var(--piece-color); }
.invitation-phone-layer.is-active[data-step="celebrating"] .invitation-confetti { animation-play-state: running; }
.invitation-celebration-words { position: relative; z-index: 2; text-align: center; margin: 0 -5px 15px; }
.invitation-celebration-words::before { content: ''; position: absolute; z-index: -1; inset: -14px -20px; background: radial-gradient(ellipse,#f6f2ea 40%,#f6f2eaee 58%,#f6f2ea00 75%); }
.invitation-celebration-words h3 { color: #1b1916; font-size: 36px; font-weight: 560; letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.invitation-celebration-words p { color: var(--invite-red); font-size: 19px; font-weight: 520; letter-spacing: -.02em; line-height: 1.1; margin: 7px 0 0; }
.invitation-date-ticket { position: relative; z-index: 2; flex: none; background: var(--invite-paper); border: 1px solid #e1cabc; box-shadow: 0 9px 18px #762b251b; padding: 12px 15px 14px; margin: 0 8px; border-radius: 4px; transform: rotate(-2deg); }
.invitation-ticket-eyebrow { display: block; border-bottom: 1px solid #ba3b2b22; padding-bottom: 8px; font-size: 7px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--invite-red); }
.invitation-date-ticket .invitation-ticket-art { height: 96px; height: clamp(68px,calc(100cqh - 310px),145px); }
.invitation-date-ticket h4 { font-size: 21px; font-weight: 560; letter-spacing: -.025em; line-height: 1.06; margin: 2px 0 10px; }
.invitation-date-ticket p { font-size: 9px; line-height: 1.35; margin: 0; padding-top: 9px; border-top: 1px dashed #ba3b2b44; }
.invitation-phone-layer[data-step="celebrating"] .invitation-date-ticket { animation: invitation-ticket-land .55s cubic-bezier(.2,.9,.3,1.1) both; }
.invitation-story-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@keyframes invitation-tap { from { opacity: .8; transform: scale(.3); } to { opacity: 0; transform: scale(1.5); } }
@keyframes invitation-ticket-land { from { transform: translateY(14px) rotate(-5deg) scale(.94); } to { transform: translateY(0) rotate(-2deg) scale(1); } }
@keyframes invitation-fall { from { transform: translate(0,-16px) rotate(0); } to { transform: translate(var(--sway),650px) rotate(280deg); } }

@media (max-width: 600px) {
  .invitation-copy h2 { font-size: clamp(33px,9vw,42px); line-height: 1.05; letter-spacing: -.025em; }
  .invitation-copy .section-description { margin-top: 16px; font-size: 16px; line-height: 1.4; max-width: 350px; text-wrap: wrap; }
  .invitation-copy .section-eyebrow { margin-bottom: 11px; font-size: 10px; }
  .invitation-scene { inset: 8px 11px; }
  .invitation-small-label { font-size: 15px; }
  .invitation-chosen-ticket { padding: 13px; }
  .invitation-chosen-ticket h3 { font-size: 22px; }
  .invitation-chosen-ticket p { font-size: 10px; }
  .invitation-sleeve { padding: 11px 12px 13px; }
  .invitation-sleeve h3 { font-size: 26px; margin-top: 9px; }
  .invitation-sleeve > p { font-size: 10px; }
  .invitation-envelope { --env-width: 260px; }
  .invite-env-label { font-size: 12px; }
  .invitation-recipient-sleeve { padding: 6px 5px; }
  .invitation-recipient-sleeve h3 { font-size: 29px; }
  .invitation-recipient-sleeve > p { font-size: 13px; }
  .invitation-reading { padding-inline: 9px; }
  .invitation-reading p { font-size: 27px; }
  .invite-env-letter-note { font-size: 11px; }
  .invitation-sleeve-details { margin-top: 10px; padding-top: 8px; }
  .invitation-celebration-words h3 { font-size: 33px; }
  .invitation-celebration-words p { font-size: 17px; }
  .invitation-date-ticket { padding: 11px 12px 13px; margin-inline: 5px; }
  .invitation-date-ticket h4 { font-size: 19px; }
}
@media (max-width: 350px) {
  .invitation-copy h2 { font-size: 31px; }
  .invitation-sleeve h3 { font-size: 24px; }
  .invitation-recipient-sleeve h3 { font-size: 27px; }
  .invitation-recipient-sleeve > p { font-size: 12px; }
  .invitation-reading p { font-size: 25px; }
  .invitation-reading-from { font-size: 12px; }
  .invitation-envelope { --env-width: 196px; }
  .invitation-notification { padding: 9px; margin-bottom: 24px; }
  .invitation-date-ticket h4 { font-size: 18px; }
  .invitation-primary { min-height: 39px; padding: 9px 11px; font-size: 11px !important; }
}
.invitation-reduced-motion *,.invitation-reduced-motion *::before,.invitation-reduced-motion *::after { animation: none !important; transition: none !important; }
.invitation-reduced-motion .invitation-confetti { top: var(--resting); }
.invitation-reduced-motion .invitation-recipient,.invitation-reduced-motion .invitation-reading,.invitation-reduced-motion .invitation-reveal-paper { clip-path: none; }
.invitation-reduced-motion .invite-env-seal,.invitation-reduced-motion .invite-env-flap,.invitation-reduced-motion .invite-env-letter,.invitation-reduced-motion .invitation-envelope { transform: none; }
.invitation-reduced-motion .invitation-reveal-paper { opacity: max(var(--invite-recipient-opacity,0),var(--invite-reading-opacity,0)); }
@media (prefers-reduced-motion: reduce) {
  .invitation-phone-layer *,.invitation-phone-layer *::before,.invitation-phone-layer *::after { animation: none !important; transition: none !important; }
  .invitation-confetti { top: var(--resting); }
  .invitation-recipient,.invitation-reading,.invitation-reveal-paper { clip-path: none; }
  .invite-env-seal,.invite-env-flap,.invite-env-letter,.invitation-envelope { transform: none; }
  .invitation-reveal-paper { opacity: max(var(--invite-recipient-opacity,0),var(--invite-reading-opacity,0)); }
}