@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff) format("woff");font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(fonts/instrument-serif-italic.woff) format("woff");font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(fonts/pinyon-script.woff) format("woff");font-display:swap}
@font-face{font-family:"La Belle Aurore";src:url(fonts/la-belle-aurore.woff) format("woff");font-display:swap}
@font-face{font-family:"EB Garamond";font-weight:400 800;src:url(fonts/eb-garamond.woff) format("woff");font-display:swap}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;src:url(fonts/eb-garamond-italic.woff) format("woff");font-display:swap}

:root{
  --deep:#660810; --dark:#270707; --stone:#f1ebeb; --grey:#d6c0b1;
  --wine:#3f1621; --ruby:#63001f; --gold:#c19a3e; --gold-l:#e8c777;
  --display:"Instrument Serif","Times New Roman",serif;
  --script:"Pinyon Script","Instrument Serif",cursive;
  --body:"EB Garamond",Georgia,serif;
  --ease:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--dark)}
body{margin:0;font:400 1.2rem/1.5 var(--body);color:var(--dark);background:var(--dark);overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,p{margin:0}
h2{font:400 clamp(3rem,13vw,5.4rem)/1 var(--display);letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- a carta aberta ---------- */
.stage{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#f3ede6 url(art/paper.webp) center/360px;isolation:isolate}
.name{position:absolute;z-index:1;left:0;right:0;top:calc(4svh + env(safe-area-inset-top));text-align:center;font-weight:400;color:var(--deep)}
.name-first{display:block;font:400 clamp(5.4rem,29vw,13rem)/.9 var(--script);padding:.14em .2em 0}
.name-rest{display:block;margin-top:.04em;font:400 clamp(1.7rem,7.6vw,2.7rem)/1 var(--display);color:var(--dark)}
.degree{display:block;margin-top:.5em;font:italic 400 clamp(1.1rem,4.6vw,1.45rem)/1.2 var(--body);color:var(--dark)}
.arch-back{position:absolute;z-index:1;left:50%;bottom:0;translate:-50% 0;width:min(84vw,41svh);height:min(116vw,57svh);background:var(--deep);border-radius:999px 999px 0 0}
.arch-back::before{content:"";position:absolute;inset:10px 10px 0;border:1.5px solid var(--gold-l);border-bottom:0;border-radius:inherit;opacity:.8}
.portrait{position:absolute;z-index:2;left:50%;bottom:0;width:min(100vw,50svh);max-width:none;transform:translateX(-50%)}
.shapes .sh{position:absolute;z-index:0;display:block}
.sh-a{width:34vmin;height:17vmin;left:-6vmin;bottom:32svh;background:var(--grey);border-radius:99vmin 99vmin 0 0;transform:rotate(90deg)}
.sh-b{width:14vmin;height:14vmin;right:5vmin;top:39svh;background:var(--gold);border-radius:50%}
.sh-c{width:30vmin;height:30vmin;right:-13vmin;bottom:-7vmin;border:5vmin solid var(--grey);border-radius:50%}
.next{position:absolute;z-index:3;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));translate:-50% 0;width:50px;height:50px;padding:13px;border-radius:50%;background:var(--stone);color:var(--deep);box-shadow:0 4px 14px rgba(39,7,7,.45)}

/* envelope */
.rig{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:16px;overflow:hidden;background:#1a0606 url(art/table.webp) center/cover;text-align:center}
.rig-title{position:relative;font:400 clamp(2.2rem,10.2vw,4.4rem)/1.05 var(--script);color:#f0dcae;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.rig-hint{position:relative;font:italic 400 1.3rem/1.2 var(--body);color:var(--stone);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.rig-title,.rig-hint{transition:opacity .4s}
.env{--w:min(92vw,640px,92svh);position:relative;width:var(--w);height:calc(var(--w)*.66);margin-top:calc(var(--w)*.1);perspective:1400px;cursor:pointer}
.env-back{position:absolute;inset:0;background:url(art/env-back.webp) center/100% 100%;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.6),0 14px 24px rgba(0,0,0,.5),0 34px 60px rgba(0,0,0,.45);transition:transform .8s var(--ease),opacity .6s}
.letter{position:absolute;z-index:2;left:3.5%;right:3.5%;top:4%;bottom:3%;background:#f3ede6 url(art/paper.webp) center/360px;border-radius:2px;box-shadow:0 1px 3px rgba(40,10,10,.45);display:flex;justify-content:center;overflow:hidden}
.letter-in{padding-top:7%;display:flex;flex-direction:column;align-items:center;color:var(--deep);text-shadow:0 1px 0 rgba(255,255,255,.75)}
.letter-name{font:400 calc(var(--w)*.15)/1 var(--script);padding:.1em .2em 0}
.letter-sub{font:400 calc(var(--w)*.05)/1.1 var(--display)}
.pocket{position:absolute;z-index:3;inset:0;background:url(art/env-pocket.webp) center/100% 100%;transition:transform .8s var(--ease),opacity .6s}
.flap-shadow{position:absolute;z-index:4;left:0;top:0;width:100%;pointer-events:none;transition:opacity .35s}
.flap{position:absolute;z-index:4;left:0;right:0;top:0;height:60%;transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.45,.05,.3,1)}
.flap-front,.flap-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:center/100% 100% no-repeat}
.flap-front{background-image:url(art/env-flap.webp)}
.flap-back{transform:rotateX(180deg);background-image:url(art/env-flap-back.webp)}
.seal{position:absolute;z-index:5;left:50%;top:60%;width:clamp(84px,25%,150px);aspect-ratio:1;translate:-50% -50%;background:none;border:0;padding:0;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 7px 8px rgba(0,0,0,.45));animation:seal-call 3.2s 1.2s ease-in-out infinite}
.seal:active{scale:.96}
@keyframes seal-call{0%,78%,100%{transform:none}86%{transform:scale(1.05)}93%{transform:scale(.99)}}
.half{position:absolute;inset:0;background:url(art/seal.webp) center/contain no-repeat;transition:transform 1.1s cubic-bezier(.5,0,.75,.4),opacity .9s .2s}
.half-l{clip-path:polygon(0 0,50.4% 0,44.4% 16%,55.4% 31%,46.4% 47%,57.4% 62%,47.4% 80%,52.4% 100%,0 100%)}
.half-r{clip-path:polygon(50% 0,100% 0,100% 100%,52% 100%,47% 80%,57% 62%,46% 47%,55% 31%,44% 16%)}

/* abertura em sequência */
.opening .rig-title,.opening .rig-hint{opacity:0}
.opening .seal{pointer-events:none;animation:none}
.opening .flap-shadow{opacity:0}
.opening .half-l{transform:translate(-30vw,80svh) rotate(-120deg);opacity:0}
.opening .half-r{transform:translate(30vw,80svh) rotate(140deg);opacity:0}
.opening .flap{transform:rotateX(-178deg);transition-delay:.3s;animation:flap-under .01s .85s forwards}
@keyframes flap-under{to{z-index:1}}
.opening.leaving .pocket,.opening.leaving .env-back{transform:translateY(120svh);opacity:0}
.opening.leaving .flap{opacity:0;transition:transform 1.05s,opacity .3s}
.opening.leaving .letter-in{opacity:0;transition:opacity .25s}

/* entrada do retrato: ela aparece depois que a carta preenche a tela */
.js .stage:not(.shown) :is(.name-first,.name-rest,.degree,.portrait,.arch-back,.next){opacity:0}
.shown .arch-back{animation:arch 1s both cubic-bezier(.2,.85,.25,1)}
.shown .portrait{animation:rise 1.1s .12s both cubic-bezier(.16,.84,.3,1)}
.shown .name-first{animation:write 1.5s .3s both cubic-bezier(.45,.05,.3,1)}
.shown .name-rest{animation:fade .8s 1.2s both}
.shown .degree{animation:fade .8s 1.45s both}
.shown .next{animation:fade .8s 1.8s both}
@keyframes arch{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translate(-50%,14%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -5% 0 0)}}

.fx{position:fixed;inset:0;z-index:20;width:100%;height:100%;pointer-events:none}

/* ---------- mensagem ---------- */
.welcome{position:relative;background:var(--deep);color:var(--stone);padding:clamp(44px,10vw,100px) 6px clamp(72px,16vw,130px);text-align:center;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.circle{--d:min(calc(100vw - 12px),620px);position:relative;width:var(--d);height:var(--d);display:flex;align-items:center;justify-content:center}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.quote{position:relative;margin:0;width:72%;font:400 calc(var(--d)*.0665)/1.26 "La Belle Aurore","Pinyon Script",cursive;text-wrap:balance}
.quote footer{margin-top:.55em;font:italic 400 calc(var(--d)*.05)/1.2 var(--body);color:var(--gold-l)}
.dot-rule{position:relative;display:block;width:14px;height:14px;margin:30px 0 36px;border-radius:50%;background:var(--gold-l);box-shadow:-30px 0 0 -3px var(--grey),30px 0 0 -3px var(--grey)}
.message{position:relative;max-width:min(30ch,calc(100vw - 52px));font-size:clamp(1.35rem,5.4vw,1.65rem);line-height:1.38}

/* ---------- programação ---------- */
.programa{position:relative;background:var(--dark);color:var(--stone);text-align:center;padding:clamp(70px,14vw,120px) 22px;
  display:flex;flex-direction:column;align-items:center}
.programa h2{color:var(--grey)}
.big-date{margin-top:6px;font:400 clamp(3.4rem,17vw,7rem)/1 var(--display);color:var(--gold-l);font-variant-numeric:lining-nums}
.calendar{margin:44px 0 0;width:min(100%,380px)}
.calendar figcaption{font:400 1.7rem/1 var(--display);color:var(--grey);margin-bottom:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px;font-variant-numeric:lining-nums tabular-nums}
.cal-grid span{position:relative;height:42px;line-height:42px;font-size:1.15rem}
.cal-grid .dow{color:var(--grey);font-size:1rem;font-style:italic}
.cal-grid .hit{color:var(--gold-l);font-weight:600}
.ring{position:absolute;left:50%;top:50%;width:62px;height:62px;transform:translate(-50%,-50%);overflow:visible}
.ring path{fill:none;stroke:var(--gold-l);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s .2s ease-in-out}
.seen .ring path{stroke-dashoffset:0}
.count{display:flex;gap:clamp(18px,6vw,40px);margin:38px 0 8px;font-variant-numeric:lining-nums tabular-nums}
.count div{min-width:58px}
.count b{display:block;font:400 clamp(2.5rem,11vw,3.6rem)/1 var(--display)}
.count small{font-size:1rem;color:var(--grey);font-style:italic}
.timeline{list-style:none;margin:48px 0 34px;padding:0 0 0 26px;text-align:left;position:relative;width:min(100%,340px)}
.timeline::before{content:"";position:absolute;left:0;top:10px;bottom:16px;width:2px;background:var(--gold);transform-origin:top;transform:scaleY(var(--p,0))}
.timeline li{position:relative;padding:0 0 26px}
.timeline li::before{content:"";position:absolute;left:-31px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.tl-hour{display:block;font:400 2.5rem/1 var(--display);color:var(--gold-l)}
.tl-what{font-size:1.4rem}

.btn{display:inline-block;min-height:48px;padding:11px 28px;border:1.5px solid currentColor;border-radius:999px;font:500 1.15rem/1.3 var(--body);text-decoration:none;cursor:pointer;background:none;color:inherit;transition:background .2s,color .2s,transform .15s}
.btn:active{transform:scale(.97)}
.btn-ghost{color:var(--gold-l)}.btn-ghost:hover{background:var(--gold-l);color:var(--dark)}
.btn-light{background:var(--stone);color:var(--deep);border-color:var(--stone)}.btn-light:hover{background:#fff}
.btn-dark{background:var(--dark);color:var(--stone);border-color:var(--dark)}.btn-dark:hover{background:var(--deep);border-color:var(--deep)}

/* ---------- colação ---------- */
.colacao{position:relative;background:var(--stone);padding:clamp(80px,18vw,150px) 22px clamp(60px,12vw,110px);overflow:hidden}
.arch{position:relative;max-width:460px;margin:0 auto;background:var(--deep);color:var(--stone);text-align:center;
  padding:clamp(120px,32vw,160px) 34px 46px;border-radius:999px 999px 10px 10px;box-shadow:0 26px 50px -20px rgba(39,7,7,.65)}
.arch::before{content:"";position:absolute;inset:11px;border:1.5px solid rgba(232,199,119,.75);border-radius:inherit;pointer-events:none}
.arch h2{color:#f6e2b4}
.place{margin-top:18px;font:400 1.85rem/1.12 var(--display)}
.when{margin:8px 0 24px;font-style:italic;font-size:1.25rem}
.note{margin-top:26px;font-size:1.1rem;line-height:1.4}
.arch .btn{position:relative}
.arch::after{content:"";position:absolute;left:50%;top:44px;width:46px;height:46px;translate:-50% 0;border-radius:50%;background:var(--gold)}

/* ---------- coquetel ---------- */
.coquetel{background:var(--grey);padding:clamp(70px,14vw,120px) 22px;display:flex;flex-wrap:wrap;gap:30px 60px;justify-content:center;align-items:center;text-align:center}
.coupe{width:min(50vw,210px);overflow:visible;transform-origin:50% 90%;animation:sway 5s ease-in-out infinite;animation-play-state:paused}
.seen .coupe,.coupe.seen{animation-play-state:running}
.bubbles circle{animation:bub 2.6s linear infinite;animation-play-state:inherit}
.bubbles circle:nth-child(2){animation-delay:-.7s}.bubbles circle:nth-child(3){animation-delay:-1.3s}.bubbles circle:nth-child(4){animation-delay:-1.9s}.bubbles circle:nth-child(5){animation-delay:-2.3s}
@keyframes bub{from{transform:translateY(8px);opacity:0}15%{opacity:.95}to{transform:translateY(-52px);opacity:0}}
@keyframes sway{50%{transform:rotate(3deg)}}
.coq-text{max-width:420px}
.coq-text h2{color:var(--deep)}
.menu{margin-bottom:24px;font-size:1.3rem}
.coq-text .when{margin-bottom:12px}

/* ---------- detalhes ---------- */
.details{position:relative;background:var(--stone);padding:clamp(70px,14vw,120px) 26px;display:grid;gap:60px;justify-content:center;overflow:hidden;text-align:center}
@media(min-width:760px){.details{grid-template-columns:minmax(0,340px) minmax(0,400px);gap:70px}}
.details h2{font-size:clamp(2.6rem,11vw,3.6rem);color:var(--deep)}
.detail p{margin-top:10px;font-size:1.3rem;max-width:30ch;margin-inline:auto}
.ico{width:76px;margin:0 auto 12px}


/* ---------- RSVP ---------- */
.rsvp{background:url(art/tiles.svg) center/150px;padding:clamp(60px,12vw,110px) 16px;position:relative}
.ticket{position:relative;max-width:500px;margin:0 auto;background:var(--stone);padding:44px clamp(20px,6vw,42px) 36px;text-align:center;
  box-shadow:0 30px 60px rgba(0,0,0,.6);border-radius:6px;
  --n:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket h2{font-size:clamp(2.3rem,10.5vw,3.3rem);line-height:1.02;color:var(--deep)}
.deadline{font:400 clamp(2.4rem,11vw,3.2rem)/1.15 var(--script);color:var(--deep)}
form{margin-top:22px;text-align:left}
fieldset{border:0;margin:0;padding:0}
legend{padding:0;margin-bottom:8px;font-size:1.2rem}
.choice{display:block;margin-bottom:9px;cursor:pointer}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:block;padding:13px 18px;border:1.5px solid var(--deep);color:var(--deep);border-radius:8px;font:400 1.5rem/1.15 var(--display);transition:background .2s,color .2s,transform .2s}
.choice input:checked+span{background:var(--deep);color:var(--stone);transform:translateX(5px)}
.choice input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.field{display:block;margin-top:20px}
.field span{display:block;font-size:1.15rem;line-height:1.25;margin-bottom:4px}
.field input{width:100%;height:50px;padding:0 13px;font:400 1.25rem var(--body);color:var(--dark);background:#fff;border:1.5px solid #a58a80;border-radius:6px}
.field input:focus{outline:2px solid var(--deep);border-color:var(--deep)}
.trap{position:absolute;left:-9999px;height:1px;overflow:hidden}
.form-error{min-height:1.5em;margin-top:12px;color:var(--deep);font-weight:600;line-height:1.25}
.btn-send{display:block;width:100%;margin-top:4px;background:var(--deep);border-color:var(--deep);color:var(--stone);font-size:1.3rem}
.btn-send:hover{background:var(--dark);border-color:var(--dark)}
.btn-send[disabled]{opacity:.65;cursor:progress}
.privacy{margin-top:14px;font-size:1rem;line-height:1.3;text-align:center;color:#5c3a35}
.thanks{margin-top:24px;outline:none}
.thanks-script{font:400 clamp(3rem,14vw,4rem)/1.05 var(--script);color:var(--deep)}
.thanks p+p{margin:10px 0 22px}
.btn-ghost-dark{color:var(--deep)}.btn-ghost-dark:hover{background:var(--deep);color:var(--stone)}
.ticket.done h2,.ticket.done .deadline{display:none}
.ticket.done .thanks{margin-top:0}

.end{background:var(--dark);text-align:center;padding:60px 20px 56px;color:#f6e2b4;font:400 3.6rem/1 var(--script)}
.end img{width:96px;margin:0 auto 10px}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

@media(min-width:800px) and (min-aspect-ratio:1/1){
  .name{left:8vw;right:auto;width:42vw;top:30svh}
  .name-first{font-size:min(30svh,12vw)}
  .name-rest{font-size:min(6.4svh,3.3vw)}
  .degree{font-size:min(3.4svh,1.8vw)}
  .arch-back{left:68%;width:62svh;height:88svh}
  .portrait{left:68%;width:auto;height:92svh}
  .next{left:29vw}
  .sh-a{left:-4vmin;bottom:8svh}
  .sh-b{right:auto;left:49vw;top:12svh}
  .sh-c{right:-10vmin}
  .env{--w:min(62svh*1.5,640px)}
}