:root {
  --navy: #314b81;
  --ink: #1d2a4a;
  --paper: #f3f2ee;
  --paper-edge: #e6e4de;
  --white: #fff;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --text: #16181d;      /* títulos (quase preto) */
  --text-2: #5d6270;    /* texto corrido */
  --heading: #24375e;
  --muted: #6b6b6b;
  --radius: 22px;
  --gutter: 16px;
  --vh: 1vh;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #111;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ---------- Marcas (SVGs do casal usados como máscara, herdam a cor) ---------- */
.mark {
  display: block;
  background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
}
.mark--mono  { --src: url("monograma.svg"); aspect-ratio: 841.9 / 595.3; }
.mark--names { --src: url("thaisa-e-thomas.svg"); aspect-ratio: 1445.9 / 270.2; }

.eyebrow {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  font-variant-numeric: lining-nums;
}
/* rótulo das seções de baixo: sem serifa, discreto */
.eyebrow--dark {
  font: 500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--navy);
}

/* ---------- Papel texturizado ---------- */
.paper {
  background-color: var(--paper);
  background-image: url("assets/papel.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

/* ---------- Navegação: barra de ícones (a aba ativa mostra o nome) ---------- */
.nav {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: var(--gutter); right: var(--gutter);
  z-index: 50;
  height: 50px; padding: 4px 5px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 999px;
  background: rgba(238, 239, 242, .86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 6px 22px rgba(20, 26, 44, .1);
}
.nav__item {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 0;
  height: 40px; padding: 0 7px;
  border-radius: 999px;
  color: #b0b3bb;
  -webkit-tap-highlight-color: transparent;
  transition: background .35s ease, color .35s ease, padding .35s ease, gap .35s ease, box-shadow .35s ease;
}
/* respiro extra só para o ícone solto da ponta (quando a pílula ativa está na ponta, ela encosta na borda) */
.nav__item { transition: background .35s ease, color .35s ease, padding .35s ease, gap .35s ease, box-shadow .35s ease, margin .35s ease; }
.nav__item:first-child:not(.is-active) { margin-left: 7px; }
.nav__item:last-child:not(.is-active)  { margin-right: 7px; }
.nav__item.is-active {
  background: #fafafa; color: var(--navy);
  padding: 0 12px 0 11px; gap: 7px;
  box-shadow: 0 1px 3px rgba(20, 26, 44, .06);
}
.nav__ico {
  display: block; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.nav__ico--mono { --icon: url("monograma.svg"); width: 21px; height: 15px; }
.nav__ico--traje { width: 15px; }
.nav__label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font: 500 11px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.01em;
  transition: max-width .4s ease, opacity .3s ease;
}
.nav__item.is-active .nav__label { max-width: 80px; opacity: 1; }

/* ícones em SVG: ao virar a aba ativa, o traço é "desenhado" (os de forma cheia são revelados da esquerda) */
.nav__svg { display: block; flex: none; width: 18px; height: 18px; overflow: visible; }
.nav__svg--mono  { width: 21px; height: 15px; }
.nav__svg--traje { width: 15px; height: 11px; }
.nav__svg .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.nav__item.is-active .nav__svg .d {
  animation: nav-draw .45s cubic-bezier(.45,0,.2,1) both;
  animation-delay: calc(var(--k, 0) * .045s);   /* um traço depois do outro */
}
.nav__item.is-active .nav__svg--fill { animation: nav-wipe .7s cubic-bezier(.45,0,.2,1) both; }
@keyframes nav-draw { from { stroke-dashoffset: 1; } }
@keyframes nav-wipe { from { clip-path: inset(-20% 100% -20% -20%); } to { clip-path: inset(-20% -20% -20% -20%); } }   /* folga: o traço engrossado passa um pouco da caixa */
@media (prefers-reduced-motion: reduce) {
  .nav__item.is-active .nav__svg .d, .nav__item.is-active .nav__svg--fill { animation: none; }
}

/* aviso "em breve" das seções que ainda não existem */
.toast {
  position: fixed; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 60px); z-index: 50;
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(36, 55, 94, .92); color: #fff;
  font: 500 13px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  transition: opacity .3s, transform .3s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Abertura ---------- */
.opening { position: relative; height: calc(var(--vh) * 200); background: var(--paper); }
.stage {
  position: sticky; top: 0;
  /* altura MAIOR da tela (barra do navegador recolhida): nunca sobra faixa vazia
     embaixo quando o Safari esconde a barra ao rolar */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

.hero {
  /* só a área VISÍVEL da tela (com as barras do Safari aparecendo): foto e texto não ficam escondidos atrás delas */
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--vh) * 100);
}
.hero__photo {
  /* a foto vai até a altura TOTAL da tela (cobre a faixa que aparece quando o Safari esconde as barras),
     mas o enquadramento é calculado pela área visível (--vh): o casal não muda de lugar */
  position: absolute; left: 0; right: 0; top: 0;
  height: 100vh; height: 100lvh;
  --img-h: max(var(--vh) * 128, 100vw * 1.64);   /* foto 2:3 com zoom no casal */
  background-color: rgb(54, 46, 21);   /* tom da grama no pé da foto: emenda a faixa extra sem aparecer */
  background-image: url("assets/hero.jpg");
  background-repeat: no-repeat;
  background-size: auto var(--img-h);
  background-position: 48% calc((var(--vh) * 100 - var(--img-h)) * .7);
  /* filter: grayscale(1) contrast(1.05);  ← descomente para voltar ao preto e branco */
  will-change: transform;
}
.hero__shade {
  position: absolute; inset: 0;
  /* degradê de uma cor só: escuro no topo (atrás do texto) que some antes do casal */
  background: linear-gradient(180deg, rgba(14,14,16,.42) 0%, rgba(14,14,16,.28) 25%, rgba(14,14,16,.08) 45%, rgba(14,14,16,0) 58%);
}
.hero__text {
  position: absolute; left: 0; right: 0; top: 25%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; color: var(--white);
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .28));
  will-change: opacity;   /* camada própria: o texto não é redesenhado a cada quadro */
}
.names { margin: 0; line-height: 0; }
.names img { display: block; width: 100%; height: auto; }
.hero__text .names { width: min(84vw, 520px); margin: 2px 0 6px; }

/* ---------- Cartão ---------- */
.card {
  position: absolute; inset: 0;
  transform-origin: 50% 0;
  transform: translateY(var(--card-y, 89%)) scale(var(--card-s, .95));
  border-radius: var(--card-r, var(--radius));
  perspective: 1500px;
  will-change: transform;
}
.card__inside {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
}

/* papel de dentro, visto pela janela e pela fenda enquanto o convite está fechado */
.card__inside > .slit {
  position: absolute; top: var(--nh); bottom: 0;   /* só abaixo do recorte, onde a fenda existe */ left: 50%; width: 4px; margin-left: -2px;
  pointer-events: none;
  background: rgba(50, 40, 30, .22);
  opacity: calc(1 - var(--open, 0) / 4);   /* só existe com o convite fechado: some no 1º grau de abertura */
}
.card__inside > .inner-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(50, 40, 30, .10), rgba(50, 40, 30, .04) 50%, rgba(50, 40, 30, .10));
  opacity: calc(1 - var(--open, 0) / 110);
}
.card__inside > .notch-shade {
  position: absolute; left: 50%; top: 0;
  width: calc(var(--nw) * 2); height: var(--nh); transform: translateX(-50%);
  overflow: visible; pointer-events: none;
  opacity: calc(1 - var(--open, 0) / 4);   /* só existe com o convite fechado: some no 1º grau de abertura */
}
.card__inside > .emboss {
  position: absolute; left: 50%; top: calc(var(--nh) * .24);
  width: calc(var(--nw) * .56); transform: translateX(-50%);
  pointer-events: none;
}
/* a imagem tem uma margem transparente em volta (para a sombra): 229px de largura para 200px de monograma */
.card__inside > .emboss img { display: block; width: 114.5%; height: auto; margin: -7.13% 0 0 -7.13%; }
.flap {
  position: absolute; top: 0; bottom: 0; width: calc(50% - 1px);   /* 2px de fenda no meio */
  transform-style: preserve-3d;
  will-change: transform;
}
.flap--left  { left: 0;  transform-origin: 0 50%;    transform: rotateY(calc((var(--open, 0) + var(--nudge, 0)) * -1deg)); }
.flap--right { right: 0; transform-origin: 100% 50%; transform: rotateY(calc((var(--open, 0) + var(--nudge, 0)) *  1deg)); }

.flap__face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden;
}
.flap--left  .flap__face { border-radius: var(--card-r, var(--radius)) 0 0 var(--card-r, var(--radius)); }
.flap--right .flap__face { border-radius: 0 var(--card-r, var(--radius)) var(--card-r, var(--radius)) 0; }

/* recorte do convite: uma "tigela" redonda cortada no topo, no centro (metade em cada aba).
   tamanho do recorte inteiro: --nw x 2 de largura por --nh de profundidade */
.card { --nw: 21vw; --nh: 15vw; }
.flap--left .flap__face {
  -webkit-mask: url("assets/recorte-esq.svg") right top / var(--nw) var(--nh) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: url("assets/recorte-esq.svg") right top / var(--nw) var(--nh) no-repeat exclude, linear-gradient(#000 0 0);
}
.flap--right .flap__face {
  -webkit-mask: url("assets/recorte-dir.svg") left top / var(--nw) var(--nh) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: url("assets/recorte-dir.svg") left top / var(--nw) var(--nh) no-repeat exclude, linear-gradient(#000 0 0);
}
.flap__back { transform: rotateY(180deg); background-color: var(--paper-edge); }
/* a textura das abas continua a do cartão inteiro (sem mudar de escala no vinco) */
.flap__front { background-image: none; }
.flap__front::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 200%;
  background: var(--paper) url("assets/papel.jpg") center / cover;
  background-blend-mode: multiply;
}
.flap--left  .flap__front::before { left: 0; }
.flap--right .flap__front::before { left: -100%; }
/* sombra que escurece a aba conforme gira */
.flap__front::after, .flap__back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #000; opacity: var(--flap-shade, 0);
}
/* fenda central seca: as folhas se encontram com uma sombra curta e nítida, sem "curvatura" */
.flap__front > .crease, .crease-light { opacity: calc(1 - var(--open, 0) / 35); }
.flap__front > .crease {
  position: absolute; top: 0; bottom: 0; width: 4px; pointer-events: none; z-index: 1;
  mix-blend-mode: multiply;
}
.flap--left .crease  { right: 0; background: none; }
.flap--right .crease { left: 0;  background: linear-gradient(90deg, rgba(40, 32, 24, .20) 0, rgba(40, 32, 24, .07) 1.5px, transparent 3px); }
/* fio de luz na borda da folha esquerda */
.crease-light {
  position: absolute; right: 0; top: 0; bottom: 0; width: 1px; z-index: 1; pointer-events: none;
  background: rgba(255, 255, 255, .6);
}

/* cada aba carrega uma folha do portão, encostada no vinco central */
.gate {
  position: absolute; top: 50%;
  width: min(80%, calc(var(--vh) * 22));
  height: auto;
  transform: translateY(-50%);
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.flap--left  .gate { right: 0; }
.flap--right .gate { left: 0; }

/* ---------- Texto do convite ---------- */
.invite {
  width: 100%;
  max-width: 420px;
  padding: calc(var(--vh) * 10) 32px calc(var(--vh) * 4);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--vh) * 2.2);
  text-align: center;
  color: var(--navy);
}
.invite__church {
  width: min(48vw, calc(var(--vh) * 20));
  height: auto;
  margin-bottom: calc(var(--vh) * 0.6);
}
.invite__small { font-size: 18px; line-height: 1.35; font-style: italic; }
.invite__names { width: min(80vw, 360px); margin: 4px 0; }
.invite__date {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  width: 100%;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  font-variant-numeric: lining-nums;
}
.invite__date span { white-space: nowrap; padding: 8px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.invite__date strong { font-size: 28px; white-space: nowrap; font-weight: 500; letter-spacing: .06em; }
.invite__date i { font-style: normal; opacity: .5; }
.invite__place { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; margin-top: calc(var(--vh) * 3.5); }
.invite__place em { font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 17px; }

.reveal {
  opacity: var(--r, 0);
  transform: translateY(calc((1 - var(--r, 0)) * 14px));
}

/* ---------- Aviso flutuante para rolar ---------- */
/* bolinha de vidro com a seta */
.scroll-cue {
  position: fixed; left: 50%; z-index: 45;
  bottom: calc(var(--vh) * 11 + 12px);   /* logo acima da borda do cartão: não cobre o recorte nem o monograma */
  width: 52px; height: 52px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  /* vidro: fundo translúcido e sempre desfocando o que passa por trás */
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 30px rgba(0, 0, 0, .12);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 14px) scale(.9);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), background .4s, color .4s;
  -webkit-tap-highlight-color: transparent;
}
.scroll-cue.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.scroll-cue:active { transform: translate(-50%, 0) scale(.94); }
.scroll-cue.is-light { background: rgba(49, 75, 129, .1); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(49, 75, 129, .3), 0 10px 30px rgba(49, 75, 129, .1); }
/* convite aberto: centrada no pedaço da próxima dobra que fica à mostra embaixo do cartão */
.scroll-cue.is-peek {
  bottom: calc(var(--peek, 0px) / 2 - 26px);
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;   /* só a setinha, sem botão */
  color: rgba(49, 75, 129, .55);
}
.scroll-cue__chevron { display: none; width: 28px; height: 28px; animation: bob 1.8s ease-in-out infinite; }
.scroll-cue.is-peek .scroll-cue__arrow { display: none; }
.scroll-cue.is-peek .scroll-cue__chevron { display: block; }

.scroll-cue__arrow {
  width: 20px; height: 20px;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob  { 50% { transform: translateY(3px); } }

/* portões "ensaiam" abrir quando a pessoa para com eles fechados */
@property --nudge { syntax: "<number>"; inherits: true; initial-value: 0; }
.card.is-nudging { animation: nudge 2.6s ease-in-out infinite; }
.card:not(.is-open), .hero { cursor: pointer; }
/* o cartão cresce até um pouco menos que a tela (--lift acompanha o crescimento) e fica por cima
   da próxima dobra, que aparece num trechinho embaixo. O texto fica centrado entre o menu e a base. */
@media (prefers-reduced-motion: no-preference) {
  html { overflow-anchor: none; }
  .opening { background: var(--white); }   /* mesmo branco da dobra de baixo: sem faixa bege em volta do convite */   /* sem "correção" automática de rolagem: ela fazia a página subir sozinha */
  .stage { z-index: 1; }
  .card {
    bottom: calc(var(--peek, 0px) * var(--lift, 0));
    --rb: calc(var(--card-r, 0px) + 26px * var(--lift, 0));   /* cantos de baixo: sempre arredondados */
    border-bottom-left-radius: var(--rb);
    border-bottom-right-radius: var(--rb);
  }
  /* os portões têm os mesmos cantos de baixo do cartão (senão o arredondado só aparece quando eles abrem) */
  .flap--left  .flap__face { border-bottom-left-radius: var(--rb); }
  .flap--right .flap__face { border-bottom-right-radius: var(--rb); }
  .card__inside {
    padding-top: 20px;
    isolation: isolate;   /* o sombreado do miolo fica embaixo dos portões (antes escurecia só o pedaço dentro do cartão) */
    /* a sombra só serve enquanto o cartão sobe por cima da foto; no tamanho final ela vazava como uma faixa cinza */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, calc(.25 * (1 - var(--lift, 0))));
  }   /* compensa a folga maior em cima do texto do convite */
  .story { z-index: 0; margin-top: calc(var(--peek, 0px) * -1); }
}
@keyframes nudge {
  0%, 60%, 100% { --nudge: 0; }
  22% { --nudge: 16; }
  38% { --nudge: 3; }
}

/* ---------- Nossa história ---------- */
.story {
  position: relative;
  background: var(--white);
  padding: 76px 24px 92px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.story > * { width: 100%; max-width: 380px; }
.story__title {
  font: 500 clamp(27px, 7.8vw, 34px)/1.15 var(--sans); letter-spacing: -.03em;
  color: var(--text);
}
.story__line { display: block; white-space: nowrap; }   /* quebra fixa: uma linha por trecho */
.story__script {
  display: inline-block;
  height: 1.3em; width: auto;
  vertical-align: -.32em;
  margin-left: .04em;
  filter: brightness(0);   /* o lettering azul vira quase preto, como os títulos */
  opacity: .92;
}
.story__body {
  margin-top: 26px;
  display: flex; flex-direction: column; gap: 16px;
  font: 400 16px/1.6 var(--sans); color: var(--text-2);
  text-wrap: pretty;   /* evita palavra sozinha na última linha */
}
.story__sign { font-weight: 500; color: var(--text); margin-top: 6px; }

/* "história" se escreve como assinatura: revelada da esquerda p/ direita com ponta suave */
.story__script {
  -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
          mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}
/* sequência da dobra (mesma entrada do convite): sobe e aparece, um bloco depois do outro.
   "história" se assina logo após o título, antes dos parágrafos */
.seq {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.story.is-in .seq { opacity: 1; transform: none; }
.story.is-in .story__script { animation: sign 1.15s cubic-bezier(.3,.15,.25,1) .3s forwards; }
@keyframes sign {
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ---------- O casal ---------- */
.couple {
  background: #f6f6f8;
  padding: 56px 24px 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  overflow: hidden;
}
.couple__eyebrow { margin-bottom: 26px; }

/* pilha de polaroids */
.polaroids {
  position: relative;
  width: min(60vw, 250px);
  aspect-ratio: 0.82;           /* proporção da polaroid (moldura incluída) */
  margin: 8px 0 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.polaroid {
  position: absolute; inset: 0;
  margin: 0;
  padding: 4.5% 4.5% 0;
  background: #fdfdfb;
  box-shadow: 0 1px 2px rgba(30, 40, 70, .12), 0 12px 28px rgba(30, 40, 70, .14);
  display: flex; flex-direction: column;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease;
  z-index: var(--z, 1);
}
.polaroid img {
  display: block; width: 100%; aspect-ratio: 1 / 1.02;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
.polaroid figcaption {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font: 500 13px var(--sans); color: #6b6f7b; font-variant-numeric: tabular-nums;
}
/* entrada: corte seco, ritmado. Cada foto simplesmente aparece em cima da anterior (a cada .4s),
   sem deslizar nem esmaecer. Acontece ao chegar na dobra e a cada troca de ano */
.polaroid.drop {
  animation: drop-cut .001s steps(1, end) backwards;
  animation-delay: calc(var(--i, 0) * .4s + .1s);
}
@keyframes drop-cut { from { visibility: hidden; } to { visibility: visible; } }
/* troca de ano: a pilha antiga some afundando de leve e as fotos do novo ano assentam suavemente */
.polaroid.is-out {
  opacity: 0;
  transform: translate(var(--x, 0px), calc(var(--y, 0px) + 10px)) rotate(var(--rot, 0deg)) scale(.97);
  transition: opacity .45s ease, transform .5s ease;
  z-index: 0;
}
.polaroid.soft {
  animation: soft-in .75s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay: calc(var(--i, 0) * .12s + .12s);
}
@keyframes soft-in {
  from {
    opacity: 0;
    transform: translate(var(--x, 0px), calc(var(--y, 0px) - 14px)) rotate(calc(var(--rot, 0deg) * 1.8)) scale(1.04);
  }
}
/* troca: a de cima sai rápido para um lado (alternando), girando, e volta para o fundo da pilha */
.polaroid.is-leaving {
  transform: translate(calc(var(--x, 0px) + 115% * var(--dir, 1)), calc(var(--y, 0px) - 24px)) rotate(calc(16deg * var(--dir, 1)));
  transition-duration: .5s; transition-timing-function: cubic-bezier(.5,0,.75,0); transition-delay: 0s;
}
.polaroids__hint {
  font: 400 13px var(--sans); color: #9a9fb0;
  margin-bottom: 8px;
}
.couple__text { margin: 48px auto 0; padding: 0 0 8px; width: calc(100% - 48px); max-width: 380px; text-align: center; font: 400 16px/1.6 var(--sans); color: var(--text-2); display: grid; gap: 16px; }
.couple__title {
  font: 500 clamp(27px, 7.8vw, 34px)/1.15 var(--sans); letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 4px;
}
.couple__eyebrow, .polaroids__hint {
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.couple.is-in .couple__eyebrow { opacity: 1; transform: none; }
.couple.is-in .polaroids__hint { opacity: 1; transform: none; transition-delay: 1.2s; }

/* ---------- Linha do tempo ---------- */
.timeline {
  --tl-step: 84px;          /* distância entre um ano e outro na régua */
  --tl-y: 70px;             /* altura da linha dentro da régua (folga em cima para os anos empurrados pela curva) */
  background: #f6f6f8;      /* mesmo fundo da dobra "O casal": continua nela */
  padding: 22px 0 88px;
  margin-top: -1px;         /* cola na dobra de cima (sem fresta de 1px) */
  text-align: center;
  overflow: hidden;
}

/* carrossel de ícones: o do centro em destaque, anterior e próximo menores nas laterais.
   A posição de cada um é calculada pelo scroll da régua (andam juntos) */
.tl-stage {
  position: relative; height: 84px; margin-bottom: 0;
  touch-action: pan-y;              /* arrastar para os lados aqui também move a linha do tempo */
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.tl-stage:active { cursor: grabbing; }
.tl-icon { position: absolute; inset: 0; }
.tl-icon img, .tl-ico {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  transform: translateX(var(--tx, 0px)) scale(var(--sc, 1));
  pointer-events: none;
  opacity: var(--op, 0);
  will-change: transform, opacity;
}

.tl-icon img { filter: grayscale(var(--g, 0)) brightness(calc(1 + var(--g, 0) * 1.25)); }  /* reserva, se o SVG não carregar */
.tl-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* base: cinza bem claro */
.tl-ico__base * { stroke: #d6d9e2 !important; }
/* tinta azul: o traço é "desenhado" quando o ícone para no centro */
.tl-ico__ink * { stroke: var(--navy) !important; }
.tl-ico__ink :is(path, rect, circle, ellipse, line, polyline, polygon) {
  stroke-dasharray: calc(var(--len, 300) * 1px);
  stroke-dashoffset: calc(var(--len, 300) * 1px);
}
.tl-ico:not(.is-drawn) .tl-ico__ink { opacity: 0; transition: opacity .35s ease; }
.tl-ico:not(.is-drawn) .tl-ico__ink :is(path, rect, circle, ellipse, line, polyline, polygon) { transition: stroke-dashoffset 0s .35s; }
.tl-ico.is-drawn .tl-ico__ink :is(path, rect, circle, ellipse, line, polyline, polygon) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s cubic-bezier(.3,0,.2,1) calc(var(--d, 0) * 1s);   /* completo em ~1s */
}
@media (prefers-reduced-motion: reduce) {
  .tl-ico.is-drawn .tl-ico__ink :is(path, rect, circle, ellipse, line, polyline, polygon) { transition: none; }
}

/* régua */
.tl-ruler { position: relative; height: 108px; margin-top: -8px; }
.tl-track {
  position: absolute; inset: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.tl-track::-webkit-scrollbar { display: none; }
.tl-marks {
  display: flex; height: 100%; width: max-content;
  /* folga no começo e no fim para o 1º e o último ano chegarem ao centro.
     São "espaçadores" e não padding: o Safari do iPhone ignora o padding do fim e travava em 2025 */
}
.tl-marks::before, .tl-marks::after {
  content: ""; flex: 0 0 calc(50vw - var(--tl-step) / 2);
}
.tl-mark {
  flex: 0 0 var(--tl-step); height: 100%;
  position: relative;
  scroll-snap-align: center;
  border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
  background: none; -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
/* tracinhos da régua: cada um é empurrado para cima pela curva quando passa perto do botão */
.tl-tick {
  position: absolute; top: calc(var(--tl-y) - 12px);
  width: 1px; height: 6px; margin-left: -.5px;
  background: rgba(150, 156, 175, .45);
  transform: translateY(calc(var(--push, 0) * -1px));
  pointer-events: none;
}
.tl-tick--year { top: calc(var(--tl-y) - 17px); height: 11px; background: rgba(150, 156, 175, .8); }
.tl-label {
  position: absolute; left: 50%; top: calc(var(--tl-y) - 46px);
  transform: translate(-50%, calc(var(--push, 0) * -1px)) scale(var(--s, 1));
  transform-origin: 50% 100%;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  /* ano em destaque num cinza mais firme; os demais em cinza claro (mistura conforme a distância do centro) */
  color: color-mix(in srgb, #7c8194 calc(var(--k, 0) * 100%), #c3c6cf);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* linha fina em cinza claro (só o ícone do ano escolhido fica azul) */
.tl-line { position: absolute; top: var(--tl-y); height: 1px; pointer-events: none; }
.tl-line--past   { left: 0; right: calc(50% + 56px); background: linear-gradient(90deg, transparent, #d3d6df 40%); }
.tl-line--future { right: 0; left: calc(50% + 56px); background: linear-gradient(90deg, #d3d6df 60%, transparent); }
.tl-bump {
  /* a linha funciona como um elástico empurrado pelo botão: contorna a borda dele com transições suaves */
  position: absolute; left: 50%; top: calc(var(--tl-y) - 30px);
  width: 112px; height: 40px; margin-left: -56px; overflow: visible; pointer-events: none;
}
.tl-bump path { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tl-glow {
  position: absolute; left: 50%; top: calc(var(--tl-y) - 58px);
  width: 150px; height: 84px; margin-left: -75px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 126, 145, .1), rgba(120, 126, 145, 0));
}
/* botão: disco externo suave + anel interno, como na referência */
.tl-knob {
  position: absolute; left: 50%; top: calc(var(--tl-y) - 14px);
  width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: linear-gradient(180deg, #ffffff, #f4f5f9);
  box-shadow: 0 8px 20px rgba(30, 40, 70, .14), 0 1px 2px rgba(30, 40, 70, .1);
  color: #9a9fb0;
}
.tl-knob::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: linear-gradient(180deg, #f3f5f9, #ffffff);
  box-shadow: inset 0 1px 2px rgba(30, 40, 70, .14);
}
.tl-knob svg { position: relative; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* o botão do meio também é clicável: um lado volta, o outro avança (e dá para arrastar a partir dele) */
.tl-knob {
  border: 0; padding: 0; pointer-events: auto; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  transform: translateX(var(--kx, 0px)) scale(var(--ks, 1));
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);   /* volta ao centro com uma molinha */
}
.tl-knob path { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.tl-knob.is-press { --ks: .9; }
/* segurando e arrastando: o botão acompanha o dedo de leve (elástico) e afunda um pouco */
.tl-knob.is-drag { --ks: .94; transition: transform .08s linear; }
.tl-knob.is-press-l .tl-knob__l { transform: translateX(-2.5px); }
.tl-knob.is-press-r .tl-knob__r { transform: translateX(2.5px); }
.tl-hint { margin-top: 0; font: 400 13px var(--sans); color: #9a9fb0; }

/* ---------- Chamada da lista de presentes ---------- */
.gifts-cta {
  background: var(--white);
  padding: 80px 24px 88px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.gifts-cta > * { width: 100%; max-width: 380px; }
.gifts-cta__title { font: 500 clamp(27px, 7.8vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--text); }
.gifts-cta__text { font: 400 16px/1.6 var(--sans); color: var(--text-2); text-wrap: pretty; }
.gifts-cta__btn {
  margin-top: 10px; text-align: center;
  font: 600 15px var(--sans); letter-spacing: -.01em; color: #fff; background: var(--navy); border-radius: 14px; padding: 16px 20px;
}
/* pilha solta de 5 presentes (posições pensadas numa tela de 375 e escaladas) */
.gifts-cta__pile { position: relative; display: block; height: 172px; margin: 6px 0 10px; --u: min(1px, 100vw / 375); -webkit-tap-highlight-color: transparent; }   /* toque leva direto à lista de presentes */
.pile__card {
  position: absolute; left: 50%; top: 22px; width: 94px; height: 112px; margin-left: -47px;
  border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 35, .1), -4px 10px 24px rgba(20, 24, 35, .16);
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) rotate(var(--r)) scale(var(--s));
  animation: pile-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s);
}
.pile__card img { width: 100%; height: 100%; object-fit: cover; }
.pile__card i {
  display: block; width: 46%; aspect-ratio: 1;
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
}
@keyframes pile-float { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .pile__card { animation: none; } }

/* ---------- Elementos comuns (formulários e botões) ---------- */
.btn {
  display: block; width: 100%; border: 0; cursor: pointer;
  font: 600 15px var(--sans); text-align: center;
  color: #fff; background: var(--navy); border-radius: 14px; padding: 16px 20px;
}
.btn[disabled] { opacity: .6; }
.field { display: flex; flex-direction: column; gap: 7px; font: 500 13px var(--sans); color: #6e7385; text-align: left; }
.field em { font-style: normal; font-weight: 400; color: #9a9fb0; }
.field input, .field textarea {
  font: 400 16px var(--sans); color: var(--text);
  border: 1px solid #e3e5eb; border-radius: 12px; padding: 13px 14px; background: #fff;
  outline: none; resize: none;
}
.field input:focus, .field textarea:focus { border-color: var(--navy); background: #fff; }
.pill {
  display: inline-block; padding: 14px 20px; border-radius: 14px; text-align: center;
  font: 600 15px var(--sans); color: var(--text); background: #fff; box-shadow: inset 0 0 0 1px #e3e5eb;
}
.section-title { font: 500 clamp(27px, 7.8vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--text); }
.section-text { font: 400 16px/1.6 var(--sans); color: var(--text-2); text-wrap: pretty; }
.section-text strong { font-weight: 600; color: var(--text); }

/* ---------- Presença: painel de vidro sobre a foto ---------- */
.dress {
  padding: 80px 24px 88px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.dress > * { width: 100%; max-width: 380px; }
.dress__card { text-align: left; }

.rsvp {
  position: relative; padding: 64px 16px;   /* mesmo espaço em cima e embaixo: painel centralizado na foto */
  background: #4b5a3a url("assets/bg-presenca.jpg") center top / cover no-repeat;
  color: #fff;
}
.rsvp::before {   /* escurece de leve para o texto do painel ficar legível */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0), rgba(20, 18, 14, .22));
}
/* painel de vidro: claro, fosco, como um cartão translúcido sobre a foto */
.rsvp__panel {
  position: relative; max-width: 400px; margin: 0 auto;
  padding: 28px 22px 22px; border-radius: 22px; text-align: center;
  background: linear-gradient(170deg, rgba(60, 54, 44, .42), rgba(34, 30, 25, .55));
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px rgba(0, 0, 0, .22);
}
/* rótulo pequeno, espaçado, discreto */
.tag { font: 500 10.5px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.rsvp__title { margin-top: 0; font: 500 clamp(30px, 8.6vw, 36px)/1.1 var(--serif); color: #fff; }
.rsvp__until { margin-top: 6px; font: italic 400 19px var(--serif); color: rgba(255, 255, 255, .85); }
.rsvp__head { padding-bottom: 6px; }
.rsvp__text { margin: 20px auto 0; max-width: 300px; font: 400 19px/1.4 var(--serif); color: rgba(255, 255, 255, .88); text-wrap: balance; }
.rsvp__wa { display: flex !important; align-items: center; justify-content: center; gap: 10px; margin-top: 22px !important; text-decoration: none; }
.rsvp__wa svg { width: 20px; height: 20px; color: #25a244; }
.rsvp__cal { margin-top: 16px; display: flex; justify-content: center; gap: 18px; }
.rsvp__cal-link, .rsvp__cal-google { font: 400 12px var(--sans); color: rgba(255, 255, 255, .75); text-decoration: underline; text-underline-offset: 3px; }

.rsvp__form { display: flex; flex-direction: column; gap: 16px; padding: 22px 0 4px; text-align: left; }
.rsvp__form[hidden] { display: none; }
/* rótulo à esquerda, em letra normal, e caixa visível: fica claro o que preencher */
.field__label { font: 500 13px/1.3 var(--sans); color: rgba(255, 255, 255, .9); }
.field__label b { color: #f3a7c3; font-weight: 500; }
.field__label i { font-style: normal; color: rgba(255, 255, 255, .55); font-weight: 400; }
.rsvp .field { gap: 7px; }
.rsvp .field input, .rsvp .field textarea {
  width: 100%; font: 400 16px var(--sans); color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; padding: 12px 13px;
}
.rsvp .field input::placeholder, .rsvp .field textarea::placeholder { color: rgba(255, 255, 255, .45); }
.rsvp .field input:focus, .rsvp .field textarea:focus { outline: none; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .14); }

/* "Você vai?" com Sim / Não na mesma linha */
.rsvp__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: block; min-width: 64px; padding: 9px 14px; border-radius: 999px; text-align: center;
  font: 500 14px var(--sans); color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  transition: background .25s, color .25s, box-shadow .25s;
}
.choice input:checked + span { background: #fff; color: #2e2a24; box-shadow: none; }

/* acompanhantes: adultos e crianças */
.rsvp__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rsvp__group[hidden] { display: none; }
.rsvp__count { display: flex; align-items: center; justify-content: space-between; font: 500 13px var(--sans); color: rgba(255, 255, 255, .9); }
.rsvp__kids[hidden], .rsvp__kids-link[hidden] { display: none; }
.rsvp__kids-link {
  align-self: flex-start; margin-top: -2px; border: 0; padding: 0; background: none; cursor: pointer;
  font: 400 12px var(--sans); color: rgba(255, 255, 255, .5); text-decoration: underline; text-underline-offset: 3px;
}
.rsvp__names { display: flex; flex-direction: column; gap: 12px; }
.rsvp__names:empty { display: none; }
.stepper__ctrl { display: flex; align-items: center; gap: 12px; }
.stepper__ctrl button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  font: 400 18px/1 var(--sans); color: #fff; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.stepper__ctrl button[disabled] { opacity: .3; }
.stepper__ctrl output { min-width: 18px; text-align: center; font: 500 17px var(--sans); font-variant-numeric: tabular-nums; }
.rsvp__extra { animation: extra-in .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes extra-in { from { opacity: 0; transform: translateY(-6px); } }
.rsvp__btn {
  margin-top: 6px; border: 0; cursor: pointer; border-radius: 999px; padding: 15px 20px;
  font: 600 15px var(--sans); letter-spacing: -.01em; color: #2e2a24; background: #fff;
}
.rsvp__btn[disabled] { opacity: .6; }
.rsvp__status { min-height: 1.2em; margin-top: -6px; text-align: center; font: 400 13px var(--sans); color: rgba(255, 255, 255, .8); }
.rsvp__done { padding: 6px 0 14px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: extra-in .5s cubic-bezier(.2, .7, .2, 1); }
.rsvp__done[hidden], .rsvp__head[hidden], .rsvp__cal[hidden] { display: none; }
.rsvp__check {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.rsvp__check svg { width: 24px; height: 24px; }
.rsvp__done-text { margin-top: 10px; font: 400 19px/1.45 var(--serif); color: rgba(255, 255, 255, .88); }
.rsvp__cal-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.rsvp__cal-btn svg { width: 18px; height: 18px; }
.rsvp__cal-google { font: 400 12px var(--sans); color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 3px; }

/* data e horário entre filetes, como na faixa de data do convite */
.rsvp__when {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18);
  font: 500 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
.rsvp__when span { white-space: nowrap; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .4); border-bottom: 1px solid rgba(255, 255, 255, .4); }
.rsvp__when strong { font: 400 24px var(--serif); letter-spacing: .04em; color: #fff; white-space: nowrap; font-variant-numeric: lining-nums; }

/* ---------- Trajes ---------- */
.dress { background: var(--white); }
.dress__icon {
  display: block; width: 44px; height: 30px; margin: 6px 0 2px;
  background: var(--navy);
  -webkit-mask: url("assets/nav/traje.svg") center / contain no-repeat;
          mask: url("assets/nav/traje.svg") center / contain no-repeat;
}
.dress__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dress__card { background: #f6f6f8; border-radius: 16px; padding: 16px 14px; }
.dress__card h3 { font: 600 15px var(--sans); color: var(--text); margin-bottom: 6px; }
.dress__card p { font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.dress__note { margin-top: 6px; font: 400 14px/1.5 var(--sans); color: var(--text-2); }

/* ---------- Local: cartão com o mapa e o trajeto, botões de rota embaixo ---------- */
.place {
  background: #f3f4f6; padding: 72px 16px 84px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.place > * { width: 100%; max-width: 420px; }
.place__card {
  background: #fff; border-radius: 30px; padding: 12px 12px 22px; text-align: left;
  box-shadow: 0 1px 2px rgba(20, 24, 35, .04), 0 18px 40px rgba(20, 24, 35, .08);
}
.place__panel {
  position: relative; display: block; overflow: hidden; border-radius: 22px;
  aspect-ratio: 1060 / 1500; background: #fff; -webkit-tap-highlight-color: transparent;
}
.place__map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.place__expand {
  position: absolute; z-index: 2; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #2d5bb0; background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 3px rgba(20, 24, 35, .1);
}
.place__expand svg { width: 16px; height: 16px; }
.place__title { margin: 18px 8px 0; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; color: #16181d; }
.place__text { margin: 6px 8px 0; font: 400 15px/1.5 var(--sans); color: #7c8194; }

/* botões de rota: blocos com ícone, como atalhos do celular */
.place__go { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 12px; border-radius: 18px; background: #fff; color: #16181d;
  font: 600 15px var(--sans); letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(20, 24, 35, .04), 0 8px 20px rgba(20, 24, 35, .06);
  transition: transform .15s ease;
}
.go:active { transform: scale(.97); }
.go svg { flex: none; width: 20px; height: 20px; color: #2d5bb0; }
.go--main { background: #2d5bb0; color: #fff; box-shadow: 0 10px 24px rgba(45, 91, 176, .3); }
.go--main svg { color: #fff; }

/* ---------- Rodapé ---------- */
.footer {
  background: var(--white); padding: 44px 24px calc(48px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 400 13px var(--sans); color: #9a9fb0;
}
.footer__mono { width: 34px; color: var(--navy); }

/* surge suave ao entrar na tela */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.fade-up.is-in { opacity: 1; transform: none; }
.fade-up:nth-child(2) { transition-delay: .12s; }
.fade-up:nth-child(3) { transition-delay: .24s; }

/* ---------- Movimento reduzido: convite já aberto ---------- */
@media (prefers-reduced-motion: reduce) {
  .opening { height: auto; }
  .stage { position: relative; height: auto; overflow: visible; }
  .hero { position: relative; height: calc(var(--vh) * 100); }
  .card { position: relative; transform: none; border-radius: 0; }
  .card__inside { position: relative; }
  .flap { display: none; }
  .scroll-cue__arrow, .card.is-nudging { animation: none; }
  .reveal, .fade-up, .seq, .couple__eyebrow, .polaroids__hint { opacity: 1; transform: none; transition: none; }
  .polaroid.drop, .polaroid.soft { animation: none !important; }
  .story__script { -webkit-mask-image: none; mask-image: none; }
}

/* títulos centralizados: linhas com tamanhos parecidos, sem palavra sozinha */
:is(.story__title, .couple__title, .gifts-cta__title, .section-title) { text-wrap: balance; }
.rsvp__until strong { font-weight: 600; color: #fff; }