/* ======================================================
   Tais • 15 Anos — Convite interativo
   Paleta: verde-sálvia + dourado  |  Mobile-first
   ====================================================== */

:root{
  --green-deep:#4a6741;
  --green:#6b8e5a;
  --green-soft:#8faa7b;
  --green-pale:#e7efe1;
  --cream:#f6f4ec;
  --cream-2:#fcfbf6;
  --gold:#c3a24b;
  --gold-deep:#a9873a;
  --ink:#3b4a34;
  --ink-soft:#5d6a54;

  --f-script:'Parisienne', cursive;
  --f-serif:'Cormorant Garamond', Georgia, serif;
  --f-sans:'Jost', system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 40px -22px rgba(60,80,45,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--f-sans);
  color:var(--ink);
  background:
    url("../assets/img/bg.jpg") center top / cover no-repeat fixed,
    radial-gradient(130% 90% at 50% -10%, var(--cream-2), var(--cream) 55%, #eef1e6 100%);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  position:relative;
}

/* ---------- Ícones ---------- */
.ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.22em;fill:currentColor;flex:none}
.ic--gold{color:var(--gold)}

/* ---------- Moldura dourada discreta ---------- */
body::after{
  content:"";position:fixed;inset:10px;border:2px solid rgba(195,162,75,.55);
  border-radius:14px;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 0 4px rgba(195,162,75,.16);
}

/* ---------- Folhagem: vem da imagem de fundo (bg.jpg) ---------- */

/* ---------- Folhas flutuantes ---------- */
.leaves{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.leaf-f{position:absolute;top:-6%;color:var(--green-soft);opacity:0;
  animation:fall linear infinite}
.leaf-f svg{width:100%;height:100%;display:block}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(0deg);opacity:0}
  10%{opacity:.55}
  90%{opacity:.45}
  100%{transform:translateY(112vh) rotate(380deg);opacity:0}
}

/* ---------- Topbar / menu ---------- */
.topbar{position:fixed;top:0;right:0;z-index:30;padding:18px 18px env(safe-area-inset-right)}
.menu-btn{
  width:46px;height:46px;border:none;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  color:var(--green-deep);box-shadow:var(--shadow);
  display:grid;place-items:center;transition:transform .2s var(--ease)}
.menu-btn:active{transform:scale(.92)}
.menu-btn .ic{width:24px;height:24px}

.scrim{position:fixed;inset:0;background:rgba(40,54,34,.38);backdrop-filter:blur(2px);
  z-index:35;opacity:0;transition:opacity .3s}
.scrim.show{opacity:1}

.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(82vw,330px);z-index:40;
  background:linear-gradient(160deg,#fbfaf4,#eef2e6);
  box-shadow:-20px 0 50px -20px rgba(40,54,34,.5);
  transform:translateX(105%);transition:transform .38s var(--ease);
  padding:26px 22px;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer__close{align-self:flex-end;background:none;border:none;color:var(--green-deep);
  cursor:pointer;padding:6px}
.drawer__close .ic{width:26px;height:26px}
.drawer__brand{font-family:var(--f-script);font-size:2.4rem;color:var(--green-deep);
  line-height:1;margin:6px 0 24px}
.drawer__brand span{display:block;font-family:var(--f-sans);font-size:.8rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);margin-top:6px}
.drawer__list{list-style:none;display:flex;flex-direction:column;gap:4px}
.drawer__list button{
  width:100%;display:flex;align-items:center;gap:14px;padding:14px 12px;border:none;
  background:none;font-family:var(--f-serif);font-size:1.22rem;color:var(--ink);
  cursor:pointer;border-radius:12px;text-align:left;transition:background .2s,color .2s}
.drawer__list button:hover{background:rgba(107,142,90,.12)}
.drawer__list .ic{width:22px;height:22px;color:var(--gold-deep)}

/* ---------- Deck de telas ---------- */
.deck{position:fixed;inset:0;z-index:10}
.screen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:64px 24px 54px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.99);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s}
.screen.is-active{opacity:1;visibility:visible;transform:none}
.screen.is-prev{transform:translateY(-22px) scale(.99)}
.screen__scroll{width:100%;max-width:440px;margin:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}

/* ---------- Tipografia compartilhada ---------- */
.eyebrow,.cover-eyebrow{font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:400}
.section-script{font-family:var(--f-script);font-size:2rem;color:var(--green-soft);
  line-height:.9;margin-bottom:2px}
.section-title{font-family:var(--f-serif);font-weight:600;font-size:2.15rem;
  color:var(--green-deep);letter-spacing:.01em;line-height:1.1;margin-bottom:12px}
.section-lead{font-size:.98rem;line-height:1.6;color:var(--ink-soft);
  max-width:34ch;margin:0 auto 22px}
.script-xl{font-family:var(--f-script);font-size:clamp(4.2rem,22vw,6.4rem);
  color:var(--green-deep);line-height:.85;margin:2px 0}
.divider{margin:22px 0}
.divider .ic{width:30px;height:30px}

.monogram{
  width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-serif);font-style:italic;font-size:3rem;color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--green-soft),var(--green) 60%,var(--green-deep));
  box-shadow:var(--shadow),inset 0 0 0 3px rgba(255,255,255,.25);
  outline:1px solid var(--gold);outline-offset:6px;margin-bottom:22px}
.monogram--sm{width:72px;height:72px;font-size:2.3rem;margin-bottom:16px}

/* ---------- Botões ---------- */
.btn-next{
  margin-top:30px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--f-sans);font-size:.92rem;letter-spacing:.06em;
  padding:14px 26px;border-radius:999px;border:none;color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-deep));
  box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s}
.btn-next:active{transform:translateY(1px) scale(.98)}
.btn-next .ic{width:20px;height:20px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  font-family:var(--f-sans);font-size:.86rem;letter-spacing:.05em;
  padding:11px 22px;border-radius:999px;color:var(--green-deep);
  border:1px solid rgba(107,142,90,.5);background:rgba(255,255,255,.5)}
.btn-ghost:active{transform:scale(.98)}

/* ---------- Convite principal (main) ---------- */
.welcome-magic{font-family:var(--f-serif);font-style:italic;font-size:1.14rem;line-height:1.5;
  color:var(--ink-soft);max-width:30ch;margin:0 auto 4px}
.welcome-age{font-family:var(--f-serif);font-weight:600;font-size:1.6rem;color:var(--gold-deep);
  letter-spacing:.06em;margin-top:-4px}
.welcome-when{margin:16px 0 12px;font-family:var(--f-serif)}
.welcome-when p{font-size:1.08rem;color:var(--green-deep);line-height:1.45}
.welcome-when p:last-child{font-size:.95rem;color:var(--ink-soft)}
.welcome-invite{font-size:.96rem;line-height:1.55;color:var(--ink-soft);max-width:32ch;margin:0 auto}
.navcards{display:flex;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.navcard{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;
  background:none;border:none;font-family:var(--f-serif);font-weight:500;font-size:.94rem;
  line-height:1.15;color:var(--green-deep);width:94px;transition:transform .2s var(--ease)}
.navcard:active{transform:scale(.95)}
.navcard__ic{width:74px;height:74px;display:grid;place-items:center;
  filter:drop-shadow(0 8px 14px rgba(60,80,45,.28))}
.navcard__ic img{width:100%;height:100%;object-fit:contain}

/* ======================================================
   CAPA (carta que abre)
   ====================================================== */
.screen--cover{background:transparent}
.screen--cover,.screen--welcome{padding-bottom:178px}
.cover-stage{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:440px;margin:auto}
.cover-monogram{width:min(60%,226px);filter:drop-shadow(0 10px 18px rgba(80,90,40,.22));
  animation:fadeUp .8s .1s var(--ease) both}

.envelope{--w:min(72vw,286px);position:relative;width:var(--w);height:calc(var(--w)*.68);
  border:none;background:none;padding:0;cursor:pointer;animation:fadeUp .9s .25s var(--ease) both;
  filter:drop-shadow(0 22px 30px rgba(60,80,45,.3))}
/* parede traseira do envelope */
.envelope::before{content:"";position:absolute;inset:0;border-radius:12px;z-index:1;
  background:linear-gradient(155deg,#eee4cf,#e1d3b4)}
/* carta interna */
.env-letter{position:absolute;left:10%;right:10%;top:9%;height:68%;z-index:2;border-radius:6px;
  background:linear-gradient(175deg,#fffefb,#f4f0e4);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.3),inset 0 0 0 1px rgba(195,162,75,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:transform .85s var(--ease),box-shadow .85s;transform:translateY(0)}
.env-letter__script{font-family:var(--f-script);font-size:2.7rem;color:var(--green-deep);line-height:.8}
.env-letter__sub{font-family:var(--f-sans);letter-spacing:.34em;text-transform:uppercase;font-size:.58rem;color:var(--gold-deep)}
/* frente (cobre a carta) + costura do bolso */
.env-pocket{position:absolute;inset:0;z-index:3;border-radius:12px;
  background:linear-gradient(158deg,#f4ecd9,#e7dabd);
  box-shadow:inset 0 0 0 1px rgba(170,135,58,.28)}
.env-pocket::after{content:"";position:absolute;inset:0;
  clip-path:polygon(0 100%,50% 47%,100% 100%);
  background:linear-gradient(175deg,rgba(120,95,45,.13),rgba(120,95,45,.03))}
/* aba superior (abre ao clicar) */
.env-flap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;transform-origin:top center;
  clip-path:polygon(0 0,100% 0,50% 55%);
  background:linear-gradient(162deg,#f6eeda,#e9dcc0);
  filter:drop-shadow(0 7px 5px rgba(120,95,45,.22));
  transition:transform .75s var(--ease),z-index 0s .38s;backface-visibility:hidden}
.env-seal{position:absolute;top:50%;left:50%;width:36%;transform:translate(-50%,-50%);z-index:6;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transition:opacity .4s,transform .55s}

.envelope.is-open .env-flap{transform:rotateX(180deg);z-index:1}
.envelope.is-open .env-seal{opacity:0;transform:translate(-50%,-170%) scale(.5)}
.envelope.is-open .env-letter{z-index:4;transform:translateY(-52%) scale(1.06);box-shadow:0 22px 34px -14px rgba(0,0,0,.42)}

.cover-hint{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink-soft);
  letter-spacing:.03em;margin-top:2px;animation:fadeUp .9s .5s var(--ease) both}
.envelope.is-open ~ .cover-hint{opacity:0;transition:opacity .3s}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(195,162,75,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(195,162,75,.55)}70%{box-shadow:0 0 0 12px rgba(195,162,75,0)}100%{box-shadow:0 0 0 0 rgba(195,162,75,0)}}

/* Menina persistente (capa + convite) */
.stage-girl{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(10px);
  width:min(56%,206px);z-index:4;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(60,80,45,.22));
  opacity:0;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stage-girl.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ======================================================
   DATA & LOCAL
   ====================================================== */
.date-card{
  width:100%;padding:22px;border-radius:18px;background:rgba(255,255,255,.65);
  border:1px solid rgba(195,162,75,.35);box-shadow:var(--shadow);margin:6px 0 18px}
.date-weekday{font-family:var(--f-sans);letter-spacing:.3em;text-transform:uppercase;
  font-size:.72rem;color:var(--gold-deep)}
.date-main{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0}
.date-day{font-family:var(--f-serif);font-weight:600;font-size:3.6rem;color:var(--green-deep);line-height:1}
.date-sep{width:1px;height:52px;background:linear-gradient(var(--gold),transparent)}
.date-rest{text-align:left}
.date-month{display:block;font-family:var(--f-serif);font-size:1.5rem;color:var(--ink)}
.date-year{display:block;font-family:var(--f-sans);letter-spacing:.3em;font-size:.82rem;color:var(--ink-soft)}
.date-time{display:inline-flex;align-items:center;gap:7px;font-size:.95rem;color:var(--green-deep)}
.date-time .ic{width:18px;height:18px;color:var(--gold-deep)}

.countdown{display:flex;justify-content:center;gap:10px;margin-bottom:22px}
.cd-item{flex:1;max-width:72px;padding:12px 4px;border-radius:14px;
  background:linear-gradient(160deg,var(--green),var(--green-deep));color:#fff;box-shadow:var(--shadow)}
.cd-item b{display:block;font-family:var(--f-serif);font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.cd-item span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

.place{margin-top:6px}
.place__pin{width:34px;height:34px}
.place__name{font-family:var(--f-serif);font-size:1.4rem;color:var(--green-deep);margin-top:4px}
.place__addr{font-size:.9rem;color:var(--ink-soft);margin:4px auto 14px;max-width:30ch}

/* ======================================================
   SUGESTÃO DE PRESENTE
   ====================================================== */
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:6px}
.gift-item{
  background:rgba(255,255,255,.62);border:1px solid rgba(195,162,75,.3);border-radius:16px;
  padding:16px 8px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}
.gift-item__ic{width:78px;height:66px;display:grid;place-items:center}
.gift-item__ic img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(60,80,45,.2))}
.gift-item__title{font-family:var(--f-serif);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.1}
.gift-item__detail{font-size:.72rem;color:var(--ink-soft);line-height:1.25}
@media (max-width:340px){.gift-grid{grid-template-columns:repeat(2,1fr)}}

/* ======================================================
   MANUAL DO CONVIDADO
   ====================================================== */
.manual-list{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:4px;text-align:left}
.manual-item{display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.6);border:1px solid rgba(195,162,75,.28);
  border-radius:16px;padding:15px 16px;box-shadow:var(--shadow)}
.manual-item__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--green-soft),var(--green));color:#fff}
.manual-item__ic .ic{width:22px;height:22px}
.manual-item h3{font-family:var(--f-serif);font-weight:600;font-size:1.12rem;color:var(--green-deep);margin-bottom:2px}
.manual-item p{font-size:.86rem;line-height:1.5;color:var(--ink-soft)}

/* ======================================================
   RSVP
   ====================================================== */
.rsvp-deadline{font-size:.82rem;color:var(--gold-deep);letter-spacing:.04em;margin-bottom:20px}
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer;
  font-family:var(--f-sans);font-size:1rem;letter-spacing:.03em;color:#fff;
  padding:16px 30px;border-radius:999px;background:linear-gradient(135deg,#59b06a,#2f8f52);
  box-shadow:0 18px 34px -16px rgba(47,143,82,.8);transition:transform .2s var(--ease)}
.btn-whatsapp:active{transform:translateY(1px) scale(.98)}
.btn-whatsapp .ic{width:24px;height:24px}

/* ---------- Dots de progresso ---------- */
.dots{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;
  display:flex;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px)}
.dots button{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(107,142,90,.35);transition:all .3s var(--ease)}
.dots button.on{background:var(--gold);width:22px;border-radius:999px}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.screen.is-active [data-reveal].in{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Confete ---------- */
.confetti{position:fixed;top:-12px;width:9px;height:14px;z-index:60;border-radius:2px;
  pointer-events:none;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(108vh) rotate(540deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.12s!important}
  .leaf-f{display:none}
}