/* ===========================================================================
   Convite de Noivado

   Escala tipográfica e de espaçamento fluidas: tudo deriva das variáveis
   --step-* e --s-*, para que o ritmo se mantenha coerente do telemóvel ao
   ecrã grande sem saltos abruptos.
   =========================================================================== */

:root {
  /* --- paleta: quente, clara, pouco contraste ----------------------------- */
  --cream: #f8f2ea;
  --cream-2: #fcf8f2;
  --paper: #fefcf9;
  --ink: #574a3e;
  --ink-soft: #9a8b79;
  --ink-mid: #7b6c5c;   /* números do calendário: legível sem pesar */
  --gold: #b18f5c;
  --gold-soft: #d3bb98;
  --line: rgba(177, 143, 92, 0.18);
  --line-strong: rgba(177, 143, 92, 0.32);

  /* --- papel do envelope --------------------------------------------------- */
  --env-1: #f4ece1;
  --env-2: #ebe0cf;
  --env-3: #e2d5c1;
  --env-4: #d8c8b0;
  --liner-1: #cdb99f;
  --liner-2: #bda385;

  /* --- famílias ------------------------------------------------------------ */
  /* O script fica reservado aos nomes: em corpo pequeno seria ilegível. */
  --font-script: 'Great Vibes', 'Cormorant Garamond', cursive;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* --- escala tipográfica fluida ------------------------------------------- */
  --step--2: clamp(9.5px, 0.22vw + 8.8px, 11px);   /* micro-etiquetas */
  --step--1: clamp(12px, 0.4vw + 10.8px, 14px);
  --step-0: clamp(14.5px, 0.5vw + 13px, 17px);
  --step-1: clamp(17px, 1.5vw + 12.5px, 23px);
  --step-2: clamp(21px, 3vw + 13px, 32px);
  --step-3: clamp(28px, 5vw + 13px, 48px);
  --step-4: clamp(38px, 10vw + 6px, 84px);

  /* --- escala de espaçamento ----------------------------------------------- */
  --s-1: clamp(6px, 1.2vw, 10px);
  --s-2: clamp(11px, 2.4vw, 18px);
  --s-3: clamp(18px, 4vw, 30px);
  --s-4: clamp(28px, 6vw, 46px);
  --s-5: clamp(42px, 9vw, 72px);
  --s-6: clamp(60px, 13vw, 112px);

  /* --- envelope ------------------------------------------------------------ */
  --env-w: min(80vw, 400px);
  --env-h: calc(var(--env-w) / 1.45);
  --flap-h: 54%;
  --env-tilt: 17deg;

  /* --- movimento ------------------------------------------------------------ */
  --t-flap: 1050ms;
  --t-card: 1150ms;
  --ease-paper: cubic-bezier(0.22, 0.9, 0.24, 1);

  /* --- grão de papel -------------------------------------------------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- coração que marca o dia no calendário (usado como máscara) ---------- */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.7C12 20.7 2.6 15.2 2.6 8.9 2.6 5.9 4.9 3.8 7.5 3.8 9.4 3.8 11.1 4.9 12 6.5 12.9 4.9 14.6 3.8 16.5 3.8 19.1 3.8 21.4 5.9 21.4 8.9 21.4 15.2 12 20.7 12 20.7Z' fill='%23000'/%3E%3C/svg%3E");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body.is-sealed {
  overflow: hidden;
  height: 100svh;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* Títulos e parágrafos equilibrados: evita a linha órfã de uma só palavra,
   que é o que mais estraga o ritmo em ecrãs estreitos. */
h1,
h2,
.names,
.card__names,
.venue__name {
  text-wrap: balance;
}

.prose,
.cd__note,
.venue__addr {
  text-wrap: pretty;
}

/* ===========================================================================
   CENA DO ENVELOPE
   =========================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  gap: var(--s-3);
  padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--s-3)
    calc(var(--s-4) + env(safe-area-inset-bottom));
  background: radial-gradient(125% 92% at 50% 16%, #fffefb 0%, var(--cream) 46%, #efe6d9 100%);
}

.scene__glow {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(128vw, 760px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(
    circle,
    rgba(255, 248, 236, 0.9) 0%,
    rgba(242, 229, 209, 0.42) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.scene__kicker,
.scene__hint {
  position: relative;
  z-index: 2;
  font-size: var(--step--2);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  text-indent: 0.4em; /* compensa o letter-spacing da última letra */
  transition: opacity 520ms ease;
}

.scene__hint {
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  animation: breathe 3.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-5px); }
}

.scene__stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 42%;
}

/* --- corpo do envelope ---------------------------------------------------- */

.envelope {
  position: relative;
  width: var(--env-w);
  height: var(--env-h);
  transform-style: preserve-3d;
  transform: rotateX(var(--env-tilt)) rotateZ(-1deg);
  transition: transform 1100ms var(--ease-paper);
  cursor: pointer;
}

.envelope.is-open {
  transform: rotateX(calc(var(--env-tilt) * 0.45)) rotateZ(0deg);
}

/* o envelope recua enquanto o cartão avança: a atenção transfere-se sozinha */
.envelope.is-out {
  transform: rotateX(calc(var(--env-tilt) * 0.45)) rotateZ(0deg) translateZ(-30px);
}

.envelope__shadow {
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: 90%;
  height: 24%;
  translate: -50% 0;
  transform: translateZ(-8px);
  background: radial-gradient(ellipse at center, rgba(104, 80, 54, 0.3), transparent 70%);
  filter: blur(18px);
  transition: opacity 900ms ease, width 900ms ease;
}

.envelope.is-open .envelope__shadow {
  width: 102%;
  opacity: 0.7;
}

.envelope__back {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  border-radius: 4px;
  background: linear-gradient(168deg, var(--env-1), var(--env-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 28px rgba(104, 80, 54, 0.12);
}

/* sombra interna na boca: dá profundidade ao interior */
.envelope__back::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(80, 60, 40, 0.34), rgba(80, 60, 40, 0) 78%);
}

.envelope__back::after,
.fold::after,
.flap__face::after,
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.075;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
  clip-path: inherit;
}

/* --- bolsa: quatro dobras que preenchem o rectângulo ---------------------- */

.envelope__pocket {
  position: absolute;
  inset: 0;
  transform: translateZ(18px);
  pointer-events: none;
}

.fold {
  position: absolute;
  inset: 0;
  display: block;
}

/* a luz vem de cima-à-esquerda: esquerda mais escura, direita mais clara */
.fold--left {
  clip-path: polygon(0 0, 50.4% 50%, 0 100%);
  background: linear-gradient(104deg, var(--env-2) 0%, var(--env-4) 100%);
  filter: drop-shadow(1px 0 0 rgba(255, 253, 249, 0.5));
}

.fold--right {
  clip-path: polygon(100% 0, 49.6% 50%, 100% 100%);
  background: linear-gradient(256deg, var(--env-1) 0%, var(--env-3) 100%);
  filter: drop-shadow(-1px 0 0 rgba(255, 253, 249, 0.5));
}

/* a de baixo dobra por cima das laterais, logo é a mais clara */
.fold--bottom {
  clip-path: polygon(0 100%, 50% 29%, 100% 100%);
  background: linear-gradient(183deg, var(--env-1) 0%, var(--env-2) 58%, var(--env-3) 100%);
  filter: drop-shadow(0 -1px 0 rgba(255, 254, 250, 0.7))
    drop-shadow(0 -5px 9px rgba(104, 80, 54, 0.13));
}

/* --- aba superior: duas faces --------------------------------------------- */

.envelope__flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--flap-h);
  transform-origin: 50% 0;
  transform: translateZ(19px) rotateX(0deg);
  transform-style: preserve-3d;
  transition: transform var(--t-flap) var(--ease-paper);
  pointer-events: none;
}

/* A aba não roda de uma vez: descola devagar, ganha balanço, passa um pouco
   além do fim e assenta. É esse terceiro tempo que faz parecer papel e não
   uma peça rígida a rodar sobre um eixo. */
.envelope.is-open .envelope__flap {
  animation: flapOpen 1320ms cubic-bezier(0.34, 0.86, 0.26, 1) forwards;
}

@keyframes flapOpen {
  0%   { transform: translateZ(19px) rotateX(0deg); }
  10%  { transform: translateZ(19px) rotateX(-9deg); }
  62%  { transform: translateZ(19px) rotateX(-184deg); }
  82%  { transform: translateZ(19px) rotateX(-169deg); }
  100% { transform: translateZ(19px) rotateX(-176deg); }
}

.flap__face {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
}

.flap__face--outer {
  background: linear-gradient(177deg, var(--env-1) 0%, var(--env-2) 72%, var(--env-3) 100%);
  filter: drop-shadow(0 3px 7px rgba(104, 80, 54, 0.2));
}

/* forro interior: só visível depois de abrir */
.flap__face--liner {
  transform: rotateX(180deg);
  background: linear-gradient(183deg, var(--liner-2) 0%, var(--liner-1) 55%, #dccbb2 100%);
  filter: drop-shadow(0 -3px 7px rgba(90, 66, 42, 0.26));
}

.flap__face--liner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 47%, rgba(255, 255, 255, 0.26) 50%, transparent 53%);
}

/* --- lacre de cera --------------------------------------------------------- */

.seal {
  position: absolute;
  left: 50%;
  top: calc(var(--flap-h) - 11%);
  width: clamp(58px, 16vw, 80px);
  aspect-ratio: 1;
  translate: -50% 0;
  transform: translateZ(22px);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: filter 420ms ease;
  filter: drop-shadow(0 4px 8px rgba(80, 36, 30, 0.38));
  animation: sealPulse 3.6s ease-in-out infinite;
}

@keyframes sealPulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

.seal:hover,
.seal:focus-visible {
  filter: drop-shadow(0 7px 13px rgba(80, 36, 30, 0.48)) brightness(1.05);
  outline: none;
}

/* área de toque confortável no telemóvel sem aumentar o lacre visualmente */
.seal::before {
  content: '';
  position: absolute;
  inset: -12px;
}

.seal__half {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 720ms cubic-bezier(0.3, 0.7, 0.3, 1), opacity 720ms ease;
}

.seal__half svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.seal__half--left  { clip-path: polygon(0 0, 51% 0, 49% 100%, 0 100%); }
.seal__half--right { clip-path: polygon(51% 0, 100% 0, 100% 100%, 49% 100%); }

.envelope.is-cracking .seal { animation: none; }

.envelope.is-cracking .seal__half--left {
  transform: translate3d(-58%, 46%, 12px) rotate(-38deg);
  opacity: 0;
}

.envelope.is-cracking .seal__half--right {
  transform: translate3d(58%, 52%, 12px) rotate(41deg);
  opacity: 0;
}

.seal__crack {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 84%;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, rgba(255, 238, 218, 0.95), transparent);
  opacity: 0;
}

.envelope.is-cracking .seal__crack {
  animation: crackFlash 420ms ease-out;
}

@keyframes crackFlash {
  0%   { opacity: 0; scale: 1 0.2; }
  35%  { opacity: 1; scale: 1 1; }
  100% { opacity: 0; scale: 2.6 1; }
}

/* --- o cartão -------------------------------------------------------------- */

.card {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: calc(100% - 26px);
  height: calc(100% - 16px);
  translate: -50% 0;
  transform: translateZ(3px) translateY(0) rotateX(0deg) scale(1);
  transform-origin: 50% 100%;
  border-radius: 3px;
  background: linear-gradient(170deg, var(--paper) 0%, #f7f1e8 100%);
  box-shadow: 0 2px 5px rgba(104, 80, 54, 0.18);
  transition: box-shadow var(--t-card) ease;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* O cartão hesita, solta-se e sobe a endireitar-se para o leitor: acaba com
   uma inclinação que anula a do envelope, ficando de frente. */
.envelope.is-out .card {
  animation: cardOut 1450ms cubic-bezier(0.3, 0.82, 0.24, 1) forwards;
  box-shadow: 0 22px 40px rgba(94, 70, 46, 0.26);
}

@keyframes cardOut {
  0% {
    transform: translateZ(3px) translateY(0) rotateX(0deg) scale(1);
  }
  16% {
    transform: translateZ(8px) translateY(-4%) rotateX(1.5deg) scale(1.004);
  }
  100% {
    transform: translateZ(70px) translateY(-76%) rotateX(-8deg) scale(1.05);
  }
}

/* Reflexo que percorre o papel no momento em que apanha a luz ao sair. */
.card__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 34%,
    rgba(255, 255, 255, 0.62) 49%,
    transparent 64%
  );
  transform: translateX(-130%);
}

.envelope.is-out .card__sheen {
  animation: sheen 1500ms ease-out 320ms;
}

@keyframes sheen {
  to { transform: translateX(130%); }
}

.card__edge {
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  pointer-events: none;
}

.card__edge::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line);
}

.card__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 10px 22px;
  opacity: 0;
  transition: opacity 700ms ease 280ms;
}

.envelope.is-out .card__body {
  opacity: 1;
}

.card__eyebrow {
  font-size: var(--step--2);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
  line-height: 1.4;
}

.card__names {
  font-family: var(--font-script);
  font-size: clamp(26px, 8.5vw, 40px);
  font-weight: 400;
  line-height: 1.24;
  color: var(--ink);
}

.card__names em {
  display: block;
  font-family: var(--font-script);
  font-size: 0.62em;
  color: var(--gold);
  font-style: normal;
  line-height: 1;
  margin: -2px 0;
}

.card__rule {
  width: 46px;
  height: 1px;
  margin: var(--s-2) auto;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.card__line {
  font-size: var(--step--2);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ink-soft);
}

/* --- poeira dourada -------------------------------------------------------- */

.dust {
  position: absolute;
  inset: -40% -20%;
  transform: translateZ(30px);
  pointer-events: none;
}

.dust i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #f5e2ba, rgba(206, 173, 120, 0));
  opacity: 0;
}

@keyframes motes {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.3); }
  18%  { opacity: 0.92; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1.1); }
}

/* Saída da cena: sobe e afasta-se devagar, em vez de encolher de repente. */
.scene {
  transition: opacity 1100ms ease, transform 1400ms var(--ease-paper);
}

.scene.is-leaving {
  opacity: 0;
  transform: scale(1.045) translateY(-22px);
  pointer-events: none;
}

.scene.is-leaving .scene__kicker,
.scene.is-leaving .scene__hint {
  opacity: 0;
}

/* ===========================================================================
   VÉU DE LUZ
   Cobre a passagem entre o envelope e o convite com um clarão quente, para
   que não haja um corte visível entre as duas cenas.
   =========================================================================== */

.veil {
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, #fffdf9 0%, var(--cream-2) 55%, var(--cream) 100%);
  transition: opacity 900ms ease;
}

.veil.is-on {
  opacity: 1;
}

/* ===========================================================================
   PÁGINA DO CONVITE
   =========================================================================== */

.page {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1300ms ease, transform 1500ms var(--ease-paper);
}

body:not(.is-sealed) .page {
  opacity: 1;
  transform: none;
}

.section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--s-6) var(--s-3);
  overflow: hidden;
}

/* Ecrãs baixos (telemóvel na horizontal, janelas curtas): prender cada secção
   a um ecrã inteiro esmaga o conteúdo — deixa-o respirar e fluir. */
@media (max-height: 640px) {
  .section {
    min-height: auto;
    padding-block: var(--s-5);
  }
}

/* Gradiente contínuo entre secções: lê-se como uma peça só, não como caixas. */
.section--hero {
  background: radial-gradient(130% 80% at 50% 0%, var(--cream-2), var(--cream) 64%);
}

.section--date,
.section--closing {
  background: linear-gradient(180deg, var(--cream-2), var(--cream));
}

.section--venue {
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
}

.wrap {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

/* --- revelação ao scroll, com escalonamento dos filhos -------------------- */

.reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 820ms ease, transform 820ms var(--ease-paper);
}

.reveal.is-in > * {
  opacity: 1;
  transform: none;
}

.reveal.is-in > :nth-child(1) { transition-delay: 0ms; }
.reveal.is-in > :nth-child(2) { transition-delay: 90ms; }
.reveal.is-in > :nth-child(3) { transition-delay: 180ms; }
.reveal.is-in > :nth-child(4) { transition-delay: 270ms; }
.reveal.is-in > :nth-child(5) { transition-delay: 360ms; }
.reveal.is-in > :nth-child(6) { transition-delay: 450ms; }

/* --- tipografia comum ------------------------------------------------------ */

.eyebrow,
.kicker {
  font-size: var(--step--2);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
  line-height: 1.5;
}

.kicker::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  margin: var(--s-2) auto 0;
  background: var(--gold-soft);
}

/* Os nomes — e só eles — em caligrafia. O script precisa de mais corpo para
   ler ao mesmo tamanho aparente que um serif, e de entrelinha larga porque
   tem ascendentes e descendentes muito longas. */
.names {
  font-family: var(--font-script);
  font-size: clamp(46px, 13vw + 4px, 106px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.01em;
  padding-bottom: 0.1em; /* espaço para as descendentes não serem cortadas */
}

.amp {
  display: block;
  font-family: var(--font-script);
  font-size: 0.56em;
  color: var(--gold);
  margin: calc(var(--s-1) * -0.4) 0;
  line-height: 1;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-4) auto;
  color: var(--gold-soft);
}

.ornament span {
  width: clamp(36px, 13vw, 84px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.ornament span:last-child {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.ornament svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.hero__date {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.hero__place {
  margin-top: var(--s-1);
  font-size: var(--step--2);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scroll-cue {
  position: absolute;
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  width: 1px;
  height: 46px;
  background: rgba(177, 143, 92, 0.22);
  overflow: hidden;
}

.scroll-cue span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  animation: cue 2.6s ease-in-out infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

.prose {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
  max-width: 32ch;
  margin: 0 auto;
}

.prose--quote {
  font-style: italic;
  color: var(--ink-soft);
}

.signature {
  margin-top: var(--s-4);
  font-size: var(--step--2);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- cartão da data + calendário ------------------------------------------ */

.datecard {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--s-4) clamp(14px, 3.4vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 12px 34px rgba(104, 80, 54, 0.06);
}

.datecard__top {
  padding-bottom: var(--s-1);
}

.datecard__month,
.datecard__weekday {
  font-size: var(--step--2);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

.datecard__day {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  margin: var(--s-1) 0;
  color: var(--gold);
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* linhas com mais folga que colunas: é o que dá ar sem alargar o cartão */
  gap: 7px 2px;
  margin: var(--s-3) 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* cabeçalho dos dias da semana */
.calendar b {
  position: relative;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 10px;
  margin-bottom: 3px;
}

/* um único filete por baixo de toda a linha de cabeçalho */
.calendar b::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.calendar i {
  font-style: normal;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 400;
  color: var(--ink-mid);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Sábado e Domingo mais leves — dá ritmo à grelha e ajuda a localizar o dia.
   Os sete <b> do cabeçalho ocupam as posições 1-7, por isso a mesma contagem
   serve para o cabeçalho e para os dias. */
.calendar > :nth-child(7n + 6),
.calendar > :nth-child(7n) {
  color: var(--gold);
}

.calendar > i:nth-child(7n + 6),
.calendar > i:nth-child(7n) {
  color: var(--ink-soft);
}

/* O dia do noivado fica dentro de um coração em vez do círculo.
   O coração é uma máscara, não uma imagem: herda a cor de --gold e mantém-se
   nítido em qualquer densidade de ecrã. */
.calendar i.is-day {
  position: relative;
  color: var(--paper);
  font-weight: 500;
  background: none;
  box-shadow: none;
  /* a massa visual do coração está acima do centro geométrico — o número
     sobe um pouco para ficar no centro óptico, e não a "escorregar" */
  padding-bottom: 11%;
}

.calendar i.is-day::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: var(--gold);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  filter: drop-shadow(0 3px 7px rgba(177, 143, 92, 0.34));
  animation: heartbeat 4.6s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.datecard__time {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  letter-spacing: 0.06em;
}

/* --- countdown: sem caixas, só finos separadores ------------------------- */

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 440px;
  margin: 0 auto;
}

.cd {
  position: relative;
  padding: var(--s-2) 2px;
}

/* separadores verticais em vez de quatro caixas — muito mais leve */
.cd + .cd::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--line);
}

.cd b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.cd small {
  display: block;
  margin-top: var(--s-1);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cd__note {
  margin-top: var(--s-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

/* --- local + mapa ---------------------------------------------------------- */

.venue__name {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.25;
}

.venue__addr {
  margin-top: var(--s-1);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-soft);
}

.map {
  margin: var(--s-4) 0 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(104, 80, 54, 0.07);
}

.map iframe {
  display: block;
  width: 100%;
  height: clamp(200px, 38svh, 320px);
  border: 0;
  filter: sepia(0.24) saturate(0.88) contrast(0.96);
}

/* --- botões ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  margin-top: var(--s-4);
  padding: 15px 32px;
  min-height: 46px; /* alvo de toque confortável */
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-size: var(--step--2);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 380ms ease, color 380ms ease, transform 380ms ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  color: var(--paper);
  transform: translateY(-2px);
}

.btn--solid {
  background: var(--gold);
  color: var(--paper);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: #9c7b4c;
  border-color: #9c7b4c;
}

.foot {
  margin-top: var(--s-5);
  font-family: var(--font-script);
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--gold);
}

/* ===========================================================================
   AJUSTES POR ECRÃ
   =========================================================================== */

/* Telemóveis estreitos: menos inclinação no envelope (uma perspectiva forte
   num ecrã pequeno lê-se como distorção), e mais ar à volta. */
@media (max-width: 420px) {
  :root {
    --env-w: min(78vw, 320px);
    --env-tilt: 13deg;
  }

  .calendar b {
    font-size: 8px;
    letter-spacing: 0;
  }

  .btn {
    padding: 15px 26px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
}

/* Ecrãs largos: mais respiração lateral no texto corrido. */
@media (min-width: 900px) {
  .prose {
    max-width: 34ch;
  }
}

/* ===========================================================================
   MOVIMENTO REDUZIDO
   =========================================================================== */

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

  .reveal > * {
    opacity: 1;
    transform: none;
  }
}