/* Approved invitation study — 24 September 2026. */
.zone-name{position:absolute;left:clamp(24px,6vw,90px);top:38px;z-index:4;color:#c6e0df;font:11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
#top .zone-name{top:100px}
.surface-invite{height:230px;width:260px;position:relative}
.frame-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.deep-invite{max-width:344px;aspect-ratio:1;cursor:pointer}
.deep-invite::before{inset:12%;opacity:.45}
.deep-invite .frame-art{position:absolute;left:8%;top:8%;width:84%;height:78%;z-index:2}
.behind-envelope{position:absolute;z-index:1;left:-7%;right:-7%;top:24%;color:#d7e9dd;text-align:center;font:11px/1.5 var(--sans);letter-spacing:.18em;transform:rotate(-7deg);transition:color .2s}
.deep-invite:is(:hover,:focus-visible) .behind-envelope{color:#fff0cf}
.invite-caption{bottom:-2%;font-size:13px}.surface-caption{bottom:0}
.secret-glow{position:absolute;top:66%;left:25%;width:50%;height:2px;pointer-events:none;border-radius:50%;background:#ffeac0;box-shadow:0 -5px 16px 5px #f7dda06b;animation:secret-breathe 2.8s ease-in-out infinite;opacity:.8}
.surface-invite.is-opening .secret-glow{opacity:0;animation:none}
@keyframes secret-breathe{50%{opacity:.35;transform:scaleX(.8);box-shadow:0 -2px 8px 2px #f7dda033}}
@media(max-width:820px){.deep-invite{max-width:272px}.surface-invite{width:230px;height:210px}.zone-name{top:25px}.invitation-layout{padding-bottom:70px!important}}
@media(prefers-reduced-motion:reduce){.secret-glow{animation:none}}

/* Surface placement is anchored to the sand in the cover-scaled backdrop. */
.deep-invite,.surface-invite{pointer-events:auto}
#top>.surface-invite{position:absolute;z-index:7;width:clamp(190px,18vw,260px);height:auto;aspect-ratio:1;margin:0;left:65%;top:auto;bottom:2%;isolation:isolate}
#top>.surface-invite::before{content:"";position:absolute;left:17%;right:17%;top:89%;height:5%;border-radius:50%;background:#123d4c35;filter:blur(3px);z-index:-1;pointer-events:none}
#top>.surface-invite .frame-art{width:100%;height:auto;aspect-ratio:1}
#top>.surface-invite .surface-caption{bottom:-9px;color:#164655;text-shadow:0 1px 3px #fff4d580}
@media(max-width:560px){#top>.surface-invite{width:185px}.surface-caption{font-size:12px}}