/* =========================================================
   Convite — Bruna & Guilherme
   Todas as medidas "px" dentro das peças (stage) estão na escala
   da imagem de referência (1708 px de largura) e são convertidas
   pela unidade --u = largura da coluna / 1708.
   ========================================================= */

:root{
  --navy:#182447;
  --navy-deep:#13203f;
  --gold:#b08d57;
  --gold-soft:#c9a96e;
  --cream:#f5e5cf;
  --paper:#f3e2cb;
  --bg:#ecd9c6;
  --ink:#2a2420;
  --u:calc(min(100vw,720px)/1708);
}
@supports (width:1cqw){
  .band{--u:calc(100cqw/1708)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:'Lora',Georgia,serif;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

.invitation{
  width:100%;
  max-width:720px;
  margin:0 auto;
  container-type:inline-size;
  overflow-x:clip;
}
.band{position:relative;width:100%}
.band--cover{background:linear-gradient(#efdfcf,#ecd9c7)}
.band--envelope,.band--message{background:linear-gradient(#ecd9c7,#eaD6bd);z-index:2}
.band--ceremony{background:linear-gradient(#edd8bc,#ebd6b8)}
.band--ceremony-b{background:#ebd6b8}
.band--schedule{background:#f2e0cc}
.band--rsvp,.band--closing{background:#edd6bd}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- stage: peça com arte + textos posicionados ---------- */
.stage{
  position:relative;
  width:100%;
  height:calc(var(--h)*var(--u));
}
.stage__art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}

.t{
  position:absolute;
  left:calc(var(--x)*var(--u));
  top:calc(var(--y)*var(--u));
  width:calc(var(--w)*var(--u));
  margin:0;
  font-size:max(calc(var(--s)*var(--u)),9px);
  line-height:max(calc(var(--lh)*var(--u)),1.15em);
  color:var(--navy);
  font-style:normal;
}
.t--c{text-align:center}
.t strong{font-weight:700}

.script{font-family:'Great Vibes','Pinyon Script',cursive;font-weight:400;letter-spacing:.005em}
.body-lora{font-family:'Lora',Georgia,serif;font-weight:500}
.body-eb{font-family:'EB Garamond','Cormorant Garamond',Georgia,serif;font-weight:500}
.body-play{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-variant-numeric:lining-nums}

/* ---------- envelope de abertura (overlay isolado em tela cheia) ---------- */
html:has(body.is-intro-locked),
body.is-intro-locked{
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
  touch-action:none;
  background:#0a172e;
}
.envelope-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a172e;
  opacity:1;
  transition:opacity 1.1s ease,transform 1.1s ease,visibility 0s linear 1.1s;
}
.envelope-overlay.is-leaving{
  opacity:0;
  transform:scale(1.04);
  visibility:hidden;
  pointer-events:none;
}
.envelope-intro{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  outline:none;
  background:#0a172e;
}
.envelope-intro.is-playing{cursor:default}
.envelope-video{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  aspect-ratio:1024 / 1896;
  object-fit:contain;
  background:#0a172e;
  pointer-events:none;
}

/* ---------- floating music toggle ---------- */
.music-toggle{
  position:fixed;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(24,36,71,.88);
  border:1px solid rgba(201,169,110,.6);
  color:#f5e5cf;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:100;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  transition:transform .2s ease,background-color .2s ease;
  padding:0;
}
.music-toggle:hover{
  transform:scale(1.08);
  background:rgba(24,36,71,1);
}
.music-toggle .music-icon--off{
  display:none;
}
.music-toggle.is-muted .music-icon--on{
  display:none;
}
.music-toggle.is-muted .music-icon--off{
  display:block;
  color:#c9a96e;
}

/* ---------- capa ---------- */
.reveal{animation:fadeIn 1.1s ease-out both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.cover-video,
.message-video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9 / 16;
  object-fit:cover;
  background:var(--bg);
}

/* ---------- envelope ---------- */
.env-outer{
  position:relative;
  width:100%;
  height:calc(1340*var(--u));
  transition:height 1.35s cubic-bezier(.45,.05,.25,1) .1s;
}
.env-outer.is-open{height:calc(2300*var(--u))}
.env-inner{
  position:absolute;left:0;bottom:0;width:100%;
  height:calc(2300*var(--u));
  isolation:isolate;
  pointer-events:none;
}
.env{
  position:absolute;
  left:calc(50*var(--u));top:calc(960*var(--u));
  width:calc(1610*var(--u));height:calc(1296*var(--u));
  padding:0;margin:0;border:0;background:none;
  cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  border-radius:calc(14*var(--u));
}
.env:focus-visible{outline:2px solid var(--gold);outline-offset:calc(14*var(--u))}
.env.is-open{cursor:default}

.env__back,.env__flap-out,.env__pocket i{
  background-color:#16264b;
  background-image:url("../assets/img/env-texture.jpg");
  background-size:calc(640*var(--u)) calc(800*var(--u));
}
.env__back{position:absolute;inset:0;z-index:1;border-radius:calc(14*var(--u));filter:brightness(.82)}

.env__flap{
  position:absolute;left:0;top:0;width:100%;height:64.04%;
  z-index:6;
  transform-origin:50% 0;
  transform:perspective(calc(2600*var(--u))) rotateX(0deg);
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.55,.05,.3,1),z-index 0s .46s;
  pointer-events:none;
}
.env.is-open .env__flap{transform:perspective(calc(2600*var(--u))) rotateX(180deg);z-index:2}
.env__flap-out,.env__flap-in{
  position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.env__flap-out{filter:brightness(1.05)}
.env__flap-in{background:#16264b;transform:rotateY(180deg)}
.env__flap-in::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(#e6cfae,#efdcc0);
  clip-path:polygon(4.5% 0,95.5% 0,50% 90%);
}

.env__pocket{position:absolute;inset:0;z-index:4;pointer-events:none;filter:drop-shadow(0 calc(-3*var(--u)) calc(9*var(--u)) rgba(4,8,26,.5))}
.env__pocket i{display:block;position:absolute;inset:0}
.env__pocket--l i{clip-path:polygon(0 0,50% 42.4%,7.45% 100%,0 100%);filter:brightness(.9)}
.env__pocket--r i{clip-path:polygon(100% 0,50% 42.4%,92.55% 100%,100% 100%);filter:brightness(.95)}
.env__pocket--b{filter:drop-shadow(0 calc(-4*var(--u)) calc(8*var(--u)) rgba(2,6,22,.55))}
.env__pocket--b i{clip-path:polygon(7.45% 100%,50% 42.4%,92.55% 100%);filter:brightness(1.12)}

.env__seal{
  position:absolute;
  left:calc(640*var(--u));top:calc(665*var(--u));
  width:calc(330*var(--u));height:calc(330*var(--u));
  z-index:7;pointer-events:none;
  filter:drop-shadow(0 calc(10*var(--u)) calc(14*var(--u)) rgba(0,0,0,.45));
  animation:sealBreath 3.2s ease-in-out infinite;
}
.env.is-open .env__seal{animation:none}
@keyframes sealBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* carta */
.letter{
  --ty:730;
  position:absolute;
  left:calc(200*var(--u));top:calc(290*var(--u));
  width:calc(1300*var(--u));height:calc(1220*var(--u));
  z-index:3;
  background:linear-gradient(180deg,#f6e7d2 0%,#f1dfc5 100%);
  border-radius:calc(54*var(--u)) calc(54*var(--u)) 0 0;
  box-shadow:0 calc(6*var(--u)) calc(26*var(--u)) rgba(50,35,10,.18);
  transform:translateY(calc(var(--ty)*var(--u)));
  transition:transform 1.15s cubic-bezier(.3,.7,.2,1) .62s;
  color:var(--navy);
  pointer-events:none;
}
.env-outer.is-open .letter{--ty:0}
.letter__corner{position:absolute;top:calc(35*var(--u));width:calc(240*var(--u));height:auto;pointer-events:none}
.letter__corner--l{left:calc(41*var(--u))}
.letter__corner--r{right:calc(41*var(--u));left:auto;transform:scaleX(-1)}
.letter__title{
  position:absolute;left:0;top:calc(176*var(--u));width:100%;margin:0;text-align:center;
  font-family:'Great Vibes',cursive;font-weight:400;
  font-size:max(calc(122*var(--u)),13px);line-height:calc(106*var(--u));
}
.letter__div{position:absolute;left:calc(476*var(--u));top:calc(var(--y)*var(--u));width:calc(356*var(--u));height:auto}
.letter__p{
  position:absolute;left:0;top:calc(var(--y)*var(--u));width:100%;margin:0;text-align:center;
  font-family:'Lora',serif;font-weight:500;letter-spacing:.035em;
  font-size:max(calc(43*var(--u)),9px);line-height:max(calc(58*var(--u)),1.3em);
}

/* ---------- contagem regressiva ---------- */
.countdown{position:absolute;inset:0}
.cd-unit{
  position:absolute;
  left:calc((var(--c) - 180)*var(--u));width:calc(360*var(--u));top:calc(636*var(--u));
  text-align:center;color:var(--navy);
}
.cd-num{
  display:block;
  font-family:'Playfair Display',serif;font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  font-size:max(calc(122*var(--u)),20px);line-height:calc(120*var(--u));
}
.cd-label{
  display:block;margin-top:calc(26*var(--u));
  font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.17em;padding-left:.17em;
  font-size:max(calc(42*var(--u)),9px);line-height:calc(40*var(--u));
}
.cd-sep{
  position:absolute;left:calc((var(--c) - 30)*var(--u));width:calc(60*var(--u));top:calc(636*var(--u));
  text-align:center;color:#7d4b20;
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:max(calc(100*var(--u)),16px);line-height:calc(110*var(--u));
}

/* ---------- cerimônia ---------- */
.cer-title{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:.045em;padding-left:.045em}
.cer-place{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:.03em;white-space:nowrap}
.cer-address{font-family:'EB Garamond','Lora',serif;font-weight:500}

/* ---------- botões sobre a arte (contorno vem da arte original) ---------- */
.map-btn,.pill-btn,.gift-btn{
  position:absolute;
  left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));
  width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;border:0;background:transparent;text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,opacity .15s ease;
}
.map-btn,.pill-btn{border-radius:999px;min-height:44px}
.map-btn:hover,.pill-btn:hover{background-color:rgba(24,36,71,.07)}
.map-btn:active,.pill-btn:active,.gift-btn:active{opacity:.72}
.map-btn:focus-visible,.pill-btn:focus-visible,.gift-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.map-btn{padding-left:calc(92*var(--u))}
.map-btn__label{
  font-family:'Playfair Display','Lora',serif;font-weight:500;color:var(--navy);
  font-size:max(calc(60*var(--u)),10px);line-height:1;white-space:nowrap;
}

.pill-btn__label{
  font-family:'Cormorant Garamond',serif;font-weight:700;color:var(--navy);text-align:center;
  letter-spacing:.06em;
}
.pill-btn--pizza{padding-left:calc(106*var(--u))}
.pill-btn--pizza .pill-btn__label{font-size:max(calc(31*var(--u)),8px);line-height:1.22}
.pill-btn--rsvp .pill-btn__label{font-size:max(calc(50*var(--u)),10px);line-height:1;letter-spacing:.09em;font-weight:600}

.gift-btn{display:block;border-radius:calc(34*var(--u));color:#f1e4cb}
.gift-btn:hover{background-color:rgba(255,255,255,.07)}
.gift-btn__title,.gift-btn__sub{position:absolute;left:calc(454*var(--u));white-space:nowrap}
.gift-btn__title{
  top:calc(57*var(--u));
  font-family:'Cormorant Garamond','Playfair Display',serif;font-weight:500;letter-spacing:.055em;
  font-size:max(calc(60*var(--u)),9px);line-height:calc(70*var(--u));
}
.gift-btn__sub{
  top:calc(144*var(--u));
  font-family:'EB Garamond','Cormorant Garamond',serif;font-weight:400;
  font-size:max(calc(46*var(--u)),8px);line-height:calc(60*var(--u));
}

/* ---------- programação ---------- */
.schedule{list-style:none;margin:0;padding:0}
.schedule li{display:contents}
.sch-time,.sch-desc{position:absolute;left:calc(860*var(--u));top:calc(var(--y)*var(--u));margin:0;color:var(--navy);white-space:nowrap}
.sch-time{
  font-family:'Lora',serif;font-weight:700;font-variant-numeric:lining-nums;
  font-size:max(calc(60*var(--u)),10px);line-height:calc(60*var(--u));
}
.sch-desc{
  font-family:'Lora',serif;font-weight:500;
  font-size:max(calc(53*var(--u)),9px);line-height:max(calc(68*var(--u)),1.25em);
}

/* ---------- rodapé ---------- */
.footer-names{position:absolute;left:0;width:100%;top:calc(var(--y)*var(--u));bottom:0}

/* ---------- aviso (feedback funcional) ---------- */
.toast{
  position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,20px);
  max-width:min(90vw,420px);padding:12px 18px;border-radius:10px;
  background:var(--navy);color:#f1e4cb;border:1px solid var(--gold);
  font:500 15px/1.4 'Lora',serif;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:50;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- diálogo de confirmação ---------- */
.rsvp{
  width:min(92vw,440px);max-height:90vh;overflow:auto;
  border:1px solid var(--gold);border-radius:14px;padding:0;
  background:#f6e7d2;color:var(--navy);
  box-shadow:0 20px 60px rgba(10,16,40,.35);
}
.rsvp::backdrop{background:rgba(19,32,63,.5)}
.rsvp__form{position:relative;padding:28px 24px 24px;display:flex;flex-direction:column;gap:14px;font-family:'Lora',serif}
.rsvp__title{margin:0;font:400 38px/1.1 'Great Vibes',cursive;text-align:center}
.rsvp__event{margin:-6px 0 0;text-align:center;font:600 13px/1.3 'Cormorant Garamond',serif;letter-spacing:.2em;text-transform:uppercase}
.rsvp__close{
  position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;background:none;
  font-size:30px;line-height:1;cursor:pointer;color:var(--navy);
}
.rsvp__field{display:flex;flex-direction:column;gap:6px;font-size:14px;border:0;padding:0;margin:0}
.rsvp__field>span,.rsvp__field legend{font-weight:600;padding:0}
.rsvp__field input[type=text],.rsvp__field select{
  font:inherit;font-size:16px;padding:12px 12px;min-height:46px;color:var(--navy);
  background:#fbf3e6;border:1px solid #b9a07a;border-radius:8px;
}
.rsvp__field input:focus-visible,.rsvp__field select:focus-visible,.rsvp__submit:focus-visible,.rsvp__close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rsvp__choice{gap:10px}
.rsvp__choice label{display:flex;gap:10px;align-items:center;min-height:36px;font-size:15px}
.rsvp__choice input{width:20px;height:20px;accent-color:var(--navy)}
.rsvp__guest{margin:-6px 0 0;min-height:1em;font-size:14px}
.rsvp__pending{padding:10px 12px;border:1px dashed var(--gold);border-radius:8px;font-size:13px;line-height:1.4;background:#f1dfc5}
.rsvp__msg{margin:0;min-height:1.2em;font-size:14px;text-align:center}
.rsvp__msg.is-error{color:#8b2a2a}
.rsvp__msg.is-ok{color:#1d5a3a;font-weight:600}
.rsvp__submit{
  min-height:48px;border-radius:10px;border:1px solid var(--gold);cursor:pointer;
  background:var(--navy);color:#f1e4cb;font:600 16px 'Lora',serif;letter-spacing:.06em;
  transition:opacity .2s;
}
.rsvp__submit:hover{opacity:.92}
.rsvp__submit:active{opacity:.75}
.rsvp__submit[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- desktop: suaviza as bordas da coluna ---------- */
@media (min-width:760px){
  .stage__art{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.env__seal{animation:none}
  .env-outer,.env__flap,.letter,.toast,.map-btn,.pill-btn,.gift-btn{transition-duration:.01ms;transition-delay:0s}
}