html,body{background:var(--paper)}
body{overflow:hidden}
button,a,label{-webkit-tap-highlight-color:transparent}
button,a{outline:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.envelope,.page{width:min(100vw,56.25dvh);height:100dvh;min-height:100dvh;margin:0 auto;box-shadow:none;background:var(--paper)}
.invite{width:100vw;background:var(--paper)}
.layer,.page>img{object-fit:cover}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.invite{scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}
.invite.is-gliding{scroll-snap-type:none;scroll-behavior:auto;overflow-y:hidden}
.envelope-scene{position:absolute;inset:0;transition:opacity .72s ease,transform .9s cubic-bezier(.22,.75,.25,1)}
.opened-scene{opacity:0;transform:scale(.992)}
.seal-art{z-index:3;transform-origin:50% 49%;animation:sealPulse 1.55s ease-in-out infinite;transition:opacity .5s ease,transform .62s cubic-bezier(.22,.75,.25,1)}
.seal{z-index:5}
.envelope.is-open .closed-scene{opacity:0;transform:scale(1.008)}
.envelope.is-open .closed-scene .seal-art{animation:none;transform:scale(.9);opacity:0}
.envelope.is-open .opened-scene{opacity:1;transform:scale(1);transition-delay:.22s}
.reveal{opacity:0;transform:none;transition:opacity 1s ease}
.page.in-view .reveal{opacity:1}
.reveal-title,.reveal-heading{transform:scale(.975);transition:opacity 1s ease,transform 1.05s cubic-bezier(.2,.75,.25,1)}
.reveal-label,.reveal-date,.reveal-copy{transform:translateY(10px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.75,.25,1)}
.reveal-illustration{transform:scale(.96);transition:opacity 1.1s ease,transform 1.15s cubic-bezier(.2,.75,.25,1)}
.page.in-view .reveal-title,.page.in-view .reveal-heading,.page.in-view .reveal-label,.page.in-view .reveal-date,.page.in-view .reveal-copy,.page.in-view .reveal-illustration{transform:none}
.page.in-view .reveal-title{transition-delay:.05s}.page.in-view .reveal-label{transition-delay:.14s}.page.in-view .reveal-lines{transition-delay:.2s}.page.in-view .reveal-countdown{transition-delay:.22s}.page.in-view .reveal-date{transition-delay:.3s}
.page.in-view .reveal-heading{transition-delay:.08s}.page.in-view .reveal-illustration{transition-delay:.2s}.page.in-view .reveal-copy{transition-delay:.32s}.page.in-view .reveal-button{transition-delay:.45s}.page.in-view .reveal-rsvp{transition-delay:.16s}.page.in-view .reveal-message{transition-delay:.3s}
.page.in-view .reveal-illustration{animation:illustrationFloat 5.6s 1.4s ease-in-out infinite}
.page.in-view .reveal-button,.page.in-view .reveal-rsvp,.page.in-view .reveal-message{animation:clickablePulse 3s 1.35s ease-in-out infinite}
.countdown{left:8%;right:8%;top:54%;height:10%;grid-template-columns:repeat(4,1fr);padding:0;background:transparent;border-radius:0;box-shadow:none}
.countdown strong{font-size:clamp(23px,8vw,48px)}
.church,.venue,.message{left:50%;transform:translateX(-50%)}
.church{width:60%;top:71%;height:10%}
.venue{width:60%;top:73%;height:10%}
.message{width:64%;top:59%;height:10%}
.rsvp{left:50%;transform:translateX(-50%);top:8%;width:60%;height:32%;border-radius:50%}
.phone{top:72%;width:45%;height:12%}
.groom-phone{left:25%;transform:translateX(-50%)}.bride-phone{left:75%;transform:translateX(-50%)}
.final-content{position:absolute;z-index:2;left:50%;top:50%;width:min(100%,56.25dvh);height:min(100%,177.7778vw);transform:translate(-50%,-50%)}
.final-content .art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rsvp-disc{position:absolute;z-index:0;left:23.61%;top:10.16%;width:54.08%;aspect-ratio:1;border:clamp(3px,.75vw,8px) solid var(--wine);border-radius:50%;background:#fff0c8;box-shadow:0 clamp(3px,.7vw,8px) clamp(5px,1.2vw,13px) rgba(38,12,14,.3);pointer-events:none}
.contact-display{position:absolute;z-index:2;left:3.5%;right:3.5%;top:73%;display:grid;grid-template-columns:1fr 1fr;gap:4%;color:var(--wine);text-align:center}
.contact-display div{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;column-gap:7px;row-gap:5px}
.contact-display strong{grid-column:1/-1;font-size:clamp(12px,1.75dvh,17px);white-space:nowrap}
.contact-display span{justify-self:end;font-size:clamp(18px,2.7dvh,26px);line-height:1;transform:rotate(-20deg)}
.contact-display b{justify-self:start;font-size:clamp(17px,2.4dvh,24px);font-weight:400;white-space:nowrap}
.swipe-next{position:absolute;z-index:4;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 14px;border:0;background:transparent;box-shadow:none;color:#5b5250;cursor:pointer;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(14px,3.8vw,19px);font-weight:400;letter-spacing:0}
.swipe-next i{position:relative;display:block;width:24px;height:16px;animation:swipeArrow 1.35s ease-in-out infinite}
.swipe-next i::before,.swipe-next i::after{content:"";position:absolute;left:50%;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(-50%) rotate(45deg)}
.swipe-next i::before{top:-2px;opacity:.38}.swipe-next i::after{top:4px}
.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.contact-actions .primary{margin:12px 0 0;text-decoration:none;min-width:125px}
.whatsapp{background:#e9f8ec}.call{background:#fff8e7}
.location-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.location-actions .primary{margin:12px 0 0;text-decoration:none;min-width:140px}
.maps{background:#eef4ff}.waze{background:#eafcff}
.rsvp-card{width:min(94vw,620px);max-height:92dvh;padding:30px 24px 26px;overflow:auto;border:2px solid rgba(105,0,14,.65);border-radius:18px;background:#fbf3df;box-shadow:0 26px 75px #0009;text-align:left}
.rsvp-card h2{margin:8px 42px 8px 0;color:var(--wine);font-size:clamp(27px,7vw,40px)}
.rsvp-intro{margin:0 0 22px;color:#67494a;line-height:1.5}
.rsvp-card form{display:grid;gap:18px}
.form-field{display:grid;gap:7px;color:var(--wine);font-weight:700}
.form-field small{margin-top:-4px;color:#806768;font-size:12px;font-weight:400;line-height:1.4}
.form-field b,.form-group b{color:var(--gold)}
.form-field input,.form-field textarea{width:100%;padding:12px 13px;border:1px solid #cdb7aa;border-radius:10px;background:#fffdf8;color:var(--ink);font:16px/1.35 system-ui,sans-serif;outline:none;resize:vertical}
.form-field input:focus,.form-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,139,45,.18)}
.form-group{display:grid;gap:9px;margin:0;padding:0;border:0}
.form-group legend{margin-bottom:10px;color:var(--wine);font-weight:700;line-height:1.4}
.choice{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #ddcec2;border-radius:10px;background:#fffaf0;color:#553436;cursor:pointer}
.choice:has(input:checked){border-color:var(--wine);background:#fff2da;box-shadow:0 0 0 2px rgba(105,0,14,.08)}
.choice input{width:18px;height:18px;margin:0;accent-color:var(--wine)}
#rsvpDetails{display:grid;gap:18px;max-height:1000px;opacity:1;transition:max-height .45s ease,opacity .3s ease}
#rsvpDetails.is-hidden{max-height:0;opacity:0;overflow:hidden;pointer-events:none}
.rsvp-submit{width:100%;margin:2px 0 0;padding:13px 20px;border-color:var(--wine);background:var(--wine);color:#fffaf0;font-size:16px}
.form-error{display:none;margin:0;padding:10px 12px;border-radius:8px;background:#f9dede;color:#7a1320;font-size:13px}
.form-error.show{display:block}
.rsvp-card .privacy-note{margin:0;font-size:11px;color:#806768}
@media(max-width:480px){.rsvp-card{padding:26px 17px 22px;border-radius:14px}.rsvp-card h2{font-size:29px}.choice{padding:10px}.form-field input,.form-field textarea{font-size:16px}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.message-design{width:min(124vw,calc(94dvh * 1.4095),860px);max-width:none;aspect-ratio:1339.2/950.16;max-height:92dvh;padding:0;overflow:visible;border:0;background:transparent;box-shadow:none}
.modal.open .message-design{transform:translate(clamp(-145px,-19vw,-54px),-2dvh)}
#messageModal .backdrop{background:rgba(30,8,11,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.message-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.message-paper-art{z-index:0}.message-box-art{z-index:1}.message-label-art,.message-arrow-art{z-index:2}.photo-frame-art{display:none}.photo-label-art{z-index:7}
.message-label-art,.message-arrow-art{left:-7%!important;right:auto!important}
.message-design .close{display:none}
.message-design .photo-hotspot{position:absolute;z-index:6;left:11.45%;top:12.95%;width:20.5%;height:28.8%;display:block;border:5px solid rgba(105,0,14,.58);border-radius:50%;background:#f8efd7;box-shadow:5px 7px 8px rgba(61,23,24,.28);overflow:hidden}
.message-design .photo-preview{width:100%;height:100%;margin:0;border:0;border-radius:50%;background-color:#f8efd7;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:none;overflow:hidden}
.message-design .photo-preview b{display:none}
.message-design textarea{position:absolute;z-index:3;left:21%;top:27%;width:65%;height:54%;min-height:0;padding:3% 3% 3% 12%;border:0;background:transparent;resize:none;font-size:clamp(13px,2.7vw,18px);line-height:1.45}
.message-design textarea:focus{box-shadow:none;outline:2px dashed rgba(105,0,14,.28);outline-offset:-6px}
.message-design .counter{position:absolute;z-index:4;right:15%;top:78%;font-size:10px}
.message-design #sendMessage{position:absolute;z-index:5;left:37%;bottom:1.2%;min-width:0;margin:0;transform:translateX(-50%);padding:4px 11px;border-color:var(--wine);border-radius:8px;background:#fff6db;box-shadow:0 2px 7px rgba(61,23,24,.14);font-size:clamp(9px,2.1vw,12px);line-height:1.15}
@keyframes swipeArrow{0%,100%{transform:translateY(0);opacity:.72}50%{transform:translateY(4px);opacity:1}}
@keyframes sealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
@keyframes illustrationFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.008)}}
@keyframes clickablePulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(105,0,14,0))}50%{transform:scale(1.008);filter:drop-shadow(0 4px 5px rgba(105,0,14,.2))}}
.music-toggle{position:fixed;z-index:30;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:42px;height:42px;padding:0;border:1px solid rgba(105,0,14,.35);border-radius:50%;background:rgba(255,248,232,.9);color:var(--wine);box-shadow:0 5px 18px rgba(61,23,24,.2);font:700 22px/1 Georgia,serif;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:pointer;transition:transform .2s ease,background .2s ease}
.music-toggle[hidden]{display:none}.music-toggle:active{transform:scale(.92)}.music-toggle.playing{animation:musicPulse 2.4s ease-in-out infinite}
body.modal-open .music-toggle{display:none}
@keyframes musicPulse{0%,100%{box-shadow:0 5px 18px rgba(61,23,24,.2)}50%{box-shadow:0 5px 22px rgba(105,0,14,.38)}}
@media(prefers-reduced-motion:reduce){.swipe-next,.swipe-next i,.seal-art,.reveal-illustration,.reveal-button,.reveal-rsvp,.reveal-message{animation:none}.reveal{opacity:1;transform:none;transition:none}.envelope-scene{transition:none}}

.attendee-fields{display:grid;gap:16px;margin-top:16px}.attendee-card{margin:0;padding:16px;border:1px solid rgba(105,0,14,.22);border-radius:16px;background:rgba(255,255,255,.38)}.attendee-card>legend{padding:0 8px;color:var(--wine);font:700 1.25rem Georgia,serif}.attendee-card .form-field,.attendee-card .form-group{margin-top:12px}.compact-group .choice{min-height:46px}.person-detail{margin-top:12px;padding-top:12px;border-top:1px solid rgba(105,0,14,.16)}

.final-phrase{position:absolute;z-index:3;left:11%;right:11%;top:88%;margin:0;color:var(--wine);text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:clamp(16px,2.35dvh,23px);font-weight:600;font-style:italic;line-height:1.28;pointer-events:none}
.final-phrase .final-heart{display:block;width:clamp(38px,5.4dvh,54px);height:auto;margin:.22em auto 0;line-height:0}.final-heart svg{display:block;width:100%;height:auto;overflow:visible}.final-heart path{fill:var(--wine)}

.page[data-page="2"] .reveal-heading,.page[data-page="3"] .reveal-heading{top:-1.5%;bottom:auto}

/* RSVP: permite qualquer número de pessoas sem cortar ou sobrepor campos */
#rsvpDetails:not(.is-hidden){max-height:none;overflow:visible}
.attendee-fields,.attendee-card,.attendee-card .form-field,.attendee-card .form-group{min-width:0}
.attendee-card .choice{width:100%;box-sizing:border-box;align-items:flex-start}
.attendee-card .choice span{min-width:0;overflow-wrap:anywhere}
.attendee-card input,.attendee-card textarea,.attendee-card select{max-width:100%;box-sizing:border-box}
@media(max-width:480px){
  .attendee-fields{gap:18px;margin-top:14px}
  .attendee-card{padding:14px 12px;border-radius:14px}
  .attendee-card>legend{font-size:1.15rem}
}

.message-design #removePhoto{position:absolute;z-index:8;left:11.45%;top:43%;width:20.5%;padding:4px;border:0;border-radius:6px;background:#fff6db;color:var(--wine);font-size:clamp(8px,1.8vw,11px);cursor:pointer}
.message-design #removePhoto[hidden]{display:none}
.message-design #sendMessage:disabled{opacity:.65;cursor:wait}

/* Centra o desenho e o texto do botão da quinta (centro original: x=518/1080). */
.page[data-page="3"] > .reveal-button{left:2.037037%;right:auto}

/* Equilibra o espaço acima e abaixo do botão de mensagem e acompanha a zona de toque. */
.final-content > .reveal-message{top:-1.76%;bottom:auto}
.final-content > .hit.message{top:57.24%}

/* Centra o desenho e o texto do botão da igreja (centro original: x=567,5/1080). */
.page[data-page="2"] > .reveal-button{left:-2.546296%;right:auto}

/* No PC, centra o conjunto da mensagem sem o desvio usado no telemóvel. */
@media(min-width:1024px){
  .modal.open .message-design{transform:translate(0,-2dvh)}
  .message-design #sendMessage{
    left:19.7%;top:calc(87% + 12px);bottom:auto;transform:none;
    min-height:44px;padding:10px 18px;font-size:16px;line-height:1.25;border-radius:9px
  }
  .message-design .photo-label-art{left:4%;right:auto}
  .message-design .photo-arrow-art{left:-3%!important;right:auto!important;z-index:7}
}

/* No telemóvel, permite centrar a arte mais larga do que o ecrã sem alargar a coluna da grelha. */
@media(max-width:1023px){
  #messageModal{grid-template-columns:minmax(0,1fr)}
  .modal.open .message-design{min-width:0;justify-self:center;transform:translate(0,-2dvh)}
  .message-design #sendMessage{
    left:19.7%;top:calc(87% + 12px);bottom:auto;transform:none;
    min-height:44px;padding:9px 14px;font-size:clamp(14px,3.6vw,16px);line-height:1.25;border-radius:9px
  }
  .message-design .photo-label-art{left:7%;right:auto}
  .message-design .photo-arrow-art{left:0!important;right:auto!important;z-index:7}
}

/* O convite desloca-se apenas no contentor interno, sem rolagem adicional da página. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.invite{scroll-behavior:auto}

/* Centra o RSVP mesmo quando os 94vw ultrapassam a coluna disponível com padding. */
@media(max-width:1023px){
  #rsvpModal{grid-template-columns:minmax(0,1fr)}
  #rsvpModal .rsvp-card{min-width:0;justify-self:center}
}