.invitation-opening{--ease-weight:cubic-bezier(.45,0,.18,1);position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;overflow:hidden;background:var(--cream);color:var(--espresso);isolation:isolate}
.invitation-opening::backdrop{background:var(--cream)}
.invitation-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;transition:opacity 1s var(--ease-weight)}
.invitation-top{position:absolute;z-index:5;top:max(24px,env(safe-area-inset-top));left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:16px;transition:opacity .45s var(--ease-weight)}
.invitation-top .eyebrow{font-size:.875rem;margin:0;letter-spacing:.1em}
.invitation-heading{position:absolute;z-index:3;top:16%;width:100%;text-align:center;padding:0 24px;transition:opacity .45s var(--ease-weight),transform .65s var(--ease-weight);pointer-events:none}
.invitation-heading h2{font-family:var(--serif);font-size:clamp(2.5rem,5vw,5.5rem);font-weight:300;line-height:1.05;margin:0 0 12px;color:var(--forest)}
.invitation-heading em{font-size:.8em}.invitation-heading p{font-size:1rem;margin:0;letter-spacing:.06em}
.invitation-controls{position:absolute;z-index:6;bottom:max(28px,env(safe-area-inset-bottom));left:20px;right:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.invitation-controls .button{min-height:48px;min-width:220px;justify-content:center;background:var(--forest);color:var(--cream);border-color:var(--forest)}
.invitation-controls .text-control{font-size:.875rem;min-height:44px;padding:10px 20px;color:var(--espresso);background:rgba(241,232,216,.9);border-radius:24px}
.invitation-controls [hidden]{display:none!important}
.invitation-opening.is-playing .invitation-heading{opacity:0;transform:translateY(-14px)}
.invitation-opening.is-playing .invitation-top{opacity:0;pointer-events:none}
/* The card ends in a full-frame green surface; tone matching joins it to the live scene. */
.invitation-card-tone{position:absolute;inset:0;z-index:1;background:var(--forest);opacity:0;pointer-events:none;transition:opacity .45s var(--ease-weight)}
.is-card-zoom .invitation-card-tone{opacity:1}
.invitation-white{position:absolute;inset:0;z-index:2;background:#FFFFFF;opacity:0;transition:opacity .6s var(--ease-weight),background-color .6s var(--ease-weight);pointer-events:none}
.invitation-opening.is-white .invitation-white{opacity:1}.invitation-opening.is-landscape .invitation-film{opacity:0}
.invitation-landscape{position:absolute;inset:0;z-index:3;background:var(--forest);opacity:0;transition:opacity 1s var(--ease-weight);overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--cream)}
.invitation-landscape img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(2px);transform:scale(1.14);opacity:0;transition:opacity 1.1s var(--ease-weight),transform 2.3s var(--ease-weight)}
.invitation-landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(47,93,58,.6),rgba(47,93,58,.86))}
.invitation-cameo{z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;width:180px;height:180px;border:1px solid #F1E8D880;border-radius:50%;outline:1px solid #F1E8D840;outline-offset:12px;font:300 5rem/1 var(--serif);opacity:0;transform:translateY(24px);transition:opacity .95s .12s var(--ease-weight),transform 1.1s .08s var(--ease-weight)}
.invitation-cameo em{font-size:2rem}.invitation-landscape p{z-index:1;letter-spacing:.25em;font-size:.875rem;margin-top:45px;opacity:0;transition:opacity .75s .35s var(--ease-weight)}
.is-landscape .invitation-landscape{opacity:1}.is-landscape .invitation-landscape img{opacity:.4;transform:scale(1.03)}.is-landscape .invitation-cameo{opacity:1;transform:none}.is-landscape .invitation-landscape p{opacity:1}
.is-wiping .invitation-white{z-index:4;opacity:1;animation:paper-rise 1.15s var(--ease-weight) both}
.is-wiping .invitation-landscape{transform:translateY(-7vh);transition:transform 1.15s var(--ease-weight)}
@keyframes paper-rise{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0 0 0)}}
html.invitation-active{overflow:hidden}.invitation-active .hero .name-first,.invitation-active .hero .name-second,.invitation-active .hero .name-join{animation:none!important}
/* The ribbon returns on the landing page with its original breathing and touch response. */
.hero{background:var(--cream)}.site-header{background:rgba(241,232,216,.96)}
.invitation-arrived .hero-stage{animation:page-ink 1s cubic-bezier(.45,0,.18,1) both}.invitation-arrived .hero-top{animation:page-ink .9s .08s cubic-bezier(.45,0,.18,1) both}.invitation-arrived .hero-bottom{animation:page-ink 1s .16s cubic-bezier(.45,0,.18,1) both}.invitation-arrived .site-header{animation:page-ink .85s .1s cubic-bezier(.45,0,.18,1) both}
@keyframes page-ink{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.invitation-heading{top:14%}.invitation-heading h2{font-size:3rem}.invitation-top{top:max(16px,env(safe-area-inset-top))}.invitation-top .eyebrow{max-width:180px;line-height:1.4}.invitation-landscape img{object-position:58% center}}
@media(max-height:540px){.invitation-heading{top:18%}.invitation-heading h2{font-size:2.5rem}.invitation-controls{bottom:12px;gap:4px}.invitation-cameo{width:110px;height:110px;font-size:3rem}.invitation-landscape p{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.invitation-heading,.invitation-film,.invitation-card-tone{transition:none}.invitation-arrived .hero-stage,.invitation-arrived .hero-top,.invitation-arrived .hero-bottom,.invitation-arrived .site-header{animation:none}}
.motion-off .invitation-arrived .hero-stage,.motion-off.invitation-arrived .hero-stage,.motion-off.invitation-arrived .hero-top,.motion-off.invitation-arrived .hero-bottom,.motion-off.invitation-arrived .site-header{animation:none}
@media print{.invitation-opening{display:none!important}html.invitation-active{overflow:visible}}
.invitation-opening.is-landing .invitation-white{background:var(--cream)}

.invitation-secondary{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.invitation-controls .invitation-sound{min-width:108px;color:var(--forest)}
.invitation-sound[aria-pressed=false]{color:var(--espresso)}

/* White printing follows the exposed paper, including its envelope occlusion. */
.invitation-card-print{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity 1s var(--ease-weight)}
.invitation-print-weekday{font:300 23px var(--sans);letter-spacing:3px}
.invitation-print-date{font:300 44px var(--serif)}
.invitation-print-initial{font:300 78px var(--serif)}
.is-landscape .invitation-card-print{opacity:0}