/* ==================================================================
   CONVITE — estilo base.
   As cores, fontes e imagens NÃO ficam aqui: chegam como variáveis
   CSS geradas pelo index.php a partir do painel. Este arquivo só
   define a estrutura; por isso trocar o tema nunca exige editar CSS.
   ================================================================== */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-gate{ overflow: hidden; }          /* trava o scroll enquanto a entrada está na tela */
body.has-gate.is-in{ overflow-x: hidden; overflow-y: auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
strong{ font-weight: 700; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============ GATE ============ */
.gate{
  position: fixed; inset:0; z-index: 100;
  background: radial-gradient(ellipse at 50% 20%, var(--c-primary) 0%, var(--c-primary-dark) 45%, var(--c-bg) 85%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 24px;
  transition: opacity .9s ease, visibility .9s ease;
}
.gate--image{
  background: linear-gradient(180deg, rgba(var(--c-bg-rgb),.35), rgba(var(--c-bg-rgb),.75)), var(--gate-image) center/cover no-repeat, var(--c-bg);
}
.gate.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.gate__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--c-glow-rgb),.35), transparent 40%),
    radial-gradient(circle at 88% 10%, rgba(var(--c-glow-rgb),.3), transparent 40%);
  filter: blur(10px);
  mix-blend-mode: screen;
}
.gate > *{ position: relative; }
.gate__crown{ width:46px; height:46px; object-fit:contain; opacity:.9; margin-bottom:18px; }
.gate__eyebrow{
  font-family: var(--font-serif); font-style: var(--serif-style); font-weight:500;
  letter-spacing: .12em; font-size: 13px; color: var(--c-accent); margin: 0 0 6px;
}
.gate__title{
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(64px, 20vw, 110px) * var(--gate-title-scale));
  line-height:.85; margin:0; color:var(--c-title);
  overflow-wrap: anywhere;
}
.gate__title--logo img{ width: min(80vw, calc(var(--logo-max) * 1.35)); margin: 6px auto 4px; }
.gate__sub{
  font-family: var(--font-display); letter-spacing:.14em;
  font-size: clamp(16px,4vw,20px); color: var(--c-text); opacity:.85; margin: 4px 0 0;
}
.gate__btn{
  margin-top: 40px;
  border:1px solid rgba(var(--c-text-rgb),.5); background: transparent;
  color: var(--c-title); padding: 14px 30px; border-radius: 999px;
  font-family: var(--font-serif); font-style: var(--serif-style); font-size:15px; letter-spacing:.03em;
  cursor:pointer; animation: pulse 2.2s ease-in-out infinite;
}
.gate__btn:hover{ background: rgba(255,255,255,.08); }
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(var(--c-glow-rgb),.35); }
  50%{ box-shadow: 0 0 0 10px rgba(var(--c-glow-rgb),0); }
}

/* ============ mute ============ */
.mute-btn{
  position: fixed; top: max(16px, env(safe-area-inset-top)); right:16px; z-index: 40;
  width:38px; height:38px; border-radius:50%;
  background: rgba(var(--c-bg-rgb),.55); border:1px solid rgba(var(--c-text-rgb),.25);
  color: var(--c-text); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mute-btn[hidden], .mute-btn svg[hidden]{ display:none; }

/* ============ PAGE / HERO ============ */
.page{ opacity:0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; }
.page.is-revealed{ opacity:1; transform:none; }

.hero{
  position:relative;
  min-height: 100vh; min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-color: var(--c-bg);
  background-image: var(--bg-image, radial-gradient(ellipse at 50% 25%, var(--c-primary) 0%, var(--c-primary-dark) 40%, var(--c-bg) 80%));
  background-size: cover;
  background-position: var(--bg-position, top center);
  top: var(--bg-top, 0px);
}
/* Véu de leitura no topo/base usa a COR DE FUNDO do tema, não preto fixo:
   em tema escuro dá no mesmo, mas em tema claro (creme, branco) preto
   deixaria a arte "suja". O "escurecer" do painel continua preto de propósito. */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(var(--c-bg-rgb),.35) 0%, transparent 18%, transparent 55%, rgba(var(--c-bg-rgb),.55) 100%),
    rgba(0,0,0, var(--bg-dim, 0));
}

.hero__top{
  position:relative; z-index:10;
  display:flex; justify-content:center; padding-top: max(16px, env(safe-area-inset-top)); }
.hero__date{ display:flex; align-items:center; gap:5px; }
.hero__crown{ width:36px; height:36px; object-fit:contain; }
.hero__date-text{ display:flex; flex-direction:column; align-items:center; line-height:1; gap:4px; }
.hero__day{ font-family: var(--font-display); font-size:40px; color:var(--c-title); }
.hero__month{ font-family: var(--font-display); font-size:15px; letter-spacing:.14em; color: var(--c-text); opacity:.8; }
.hero__time{
  font-family: var(--font-serif); font-style: var(--serif-style); font-size:12px;
  background: var(--c-strong); color:#fff; padding:3px 9px; border-radius:3px; margin-left:2px;
}

.hero__spacer{ flex: 1 1 auto; min-height: 46vh; }
.hero__date-inline{ display:none; }
/* Altura mínima = altura da arte inteira (largura × proporção). Assim a arte
   presa no topo e o texto preso embaixo nunca se sobrepõem em tela curta. */
.hero{ min-height: max(100svh, calc(100vw * var(--bg-ratio, 0))); }
@media (min-width: 760px){
  .hero{ min-height: max(100svh, calc(min(100vw, 520px) * var(--bg-ratio, 0))); }
}

.hero__content{
  position:relative; z-index:3; text-align:center; padding: 0 24px max(28px, env(safe-area-inset-bottom));
}
.hero__logo{ width: min(72vw, var(--logo-max)); margin: 0 auto 6px; }
.hero__logo-text{
  font-family: var(--font-display); color: var(--c-title); margin:0;
  font-size: clamp(56px, 17vw, 96px); line-height:.85; overflow-wrap:anywhere;
}
.hero__logo-sub{
  font-family: var(--font-display); color: var(--c-text); letter-spacing:.14em;
  font-size: clamp(15px, 4vw, 19px); margin: 4px 0 12px; opacity:.9;
}
.hero__kicker{
  font-family: var(--font-serif); font-style: var(--serif-style); font-weight:500;
  letter-spacing:.14em; font-size:14px; color: var(--c-accent); margin:0 0 10px;
}
.hero__headline{
  font-family: var(--font-serif); font-style: var(--serif-style); font-weight:600;
  font-size: clamp(20px, 5.2vw, 28px); color: var(--c-title); margin:0 0 16px; line-height:1.25;
}
.hero__address{
  font-style: normal; font-size:13px; color: var(--c-text); opacity:.85; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:6px; margin: 0 0 26px;
}
a.hero__address:hover{ opacity:1; text-decoration: underline; }
.hero__address svg{ flex-shrink:0; }
.hero__cta{
  display:inline-block; text-decoration:none; font-family: var(--font-display);
  letter-spacing:.06em; font-size:19px; color: var(--c-btn-text);
  background: linear-gradient(180deg, var(--c-btn-1), var(--c-btn-2));
  padding: 13px 40px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:120px; z-index:2;
  background: linear-gradient(180deg, transparent, var(--c-bg));
}

/* ============ RSVP ============ */
.rsvp{ position:relative; background: var(--c-bg); padding: 64px 20px 40px; }
.rsvp::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:70vw; max-width:480px; height:280px;
  background: radial-gradient(circle, rgba(var(--c-primary-rgb),.55), transparent 70%);
  filter: blur(20px); pointer-events:none;
}
.rsvp__inner{ position:relative; max-width: 420px; margin:0 auto; }

.rsvp__eyebrow{
  font-family: var(--font-serif); font-style: var(--serif-style); font-weight:500;
  color: var(--c-accent); letter-spacing:.1em; font-size:13px; text-align:center; margin:0 0 6px;
}
.rsvp__title{
  font-family: var(--font-display); font-weight:400; text-align:center; color:var(--c-title);
  font-size: clamp(34px,9vw,44px); line-height:.95; margin:0 0 14px;
}
.rsvp__note{ text-align:center; font-size:14px; color: var(--c-text); opacity:.75; margin: 0 0 30px; line-height:1.5; }

.field{ display:block; margin-bottom:16px; }
.field span{
  display:block; font-family: var(--font-serif); font-style: var(--serif-style); font-size:13px;
  color: var(--c-accent); margin-bottom:6px;
}
.field input{
  width:100%; padding:14px 16px; border-radius:10px;
  border:1px solid rgba(var(--c-text-rgb),.2); background: rgba(var(--c-text-rgb),.04);
  color: var(--c-title); font-size:16px; font-family: var(--font-serif);
}
.field input::placeholder{ color: rgba(var(--c-text-rgb),.35); }
.field input:focus{ outline:2px solid var(--c-glow); outline-offset:2px; background: rgba(var(--c-text-rgb),.07); }

/* Honeypot: fora da tela (display:none alguns robôs detectam e pulam) */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.rsvp__submit{
  width:100%; margin-top:6px; border:none; cursor:pointer;
  font-family: var(--font-display); letter-spacing:.05em; font-size:19px; color: var(--c-btn-text);
  background: linear-gradient(180deg, var(--c-btn-1), var(--c-btn-2));
  padding:15px; border-radius:10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.rsvp__submit:disabled{ opacity:.6; cursor:default; }
.rsvp__submit .btn-loading{ display:none; }
.rsvp__submit.is-loading .btn-label{ display:none; }
.rsvp__submit.is-loading .btn-loading{ display:inline; }

.field-error{ color:#ff9b8a; font-size:13px; text-align:center; margin-top:12px; }

.rsvp__success{ text-align:center; padding: 20px 0 10px; }
.rsvp__success[hidden], .rsvp__form-wrap[hidden]{ display:none; }
.rsvp__success-crown{ width:40px; height:40px; object-fit:contain; margin: 0 auto 16px; opacity:.9; }
.rsvp__success h2{
  font-family: var(--font-display); font-weight:400; color:var(--c-title); font-size: clamp(30px,8vw,38px); margin:0 0 12px;
}
.rsvp__success p{ font-size:15px; line-height:1.6; margin:0 0 6px; color: var(--c-text); }
.rsvp__success-addr{ opacity:.75; font-size:13px !important; }
.rsvp__calendar{
  display:inline-block; margin-top: 20px; text-decoration:none; font-family: var(--font-serif); font-style: var(--serif-style);
  font-size:14px; color: var(--c-accent); border:1px solid rgba(var(--c-accent-rgb),.5);
  padding:11px 26px; border-radius:999px;
}

/* ============ FOOTER ============ */
.site-footer{ text-align:center; padding: 30px 20px max(30px, env(safe-area-inset-bottom)); background: var(--c-bg); }
.site-footer__crown{ width:24px; height:24px; object-fit:contain; margin:0 auto 10px; opacity:.6; }
.site-footer p{
  font-family: var(--font-serif); font-style: var(--serif-style); font-size:12px;
  color: var(--c-text); opacity:.5; margin:0; letter-spacing:.04em;
}

/* ============ DRESS CODE ============ */
.dress-pill{
  display:flex; width: fit-content; align-items:center; gap:8px; margin: -12px auto 24px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--c-text-rgb),.25); background: rgba(var(--c-bg-rgb),.45);
  font-size: 13px; letter-spacing: .04em; color: var(--c-text);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.rsvp__success .dress-pill--center{ margin: 14px auto 0; } /* vence o "margin" de .rsvp__success p */
/* Bolinha na cor do texto: em "dress code preto" num tema escuro, preto sumiria. */
.dress-pill__dot{ width:9px; height:9px; border-radius:50%; background: currentColor; flex-shrink:0; }

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

/* ============ COMPUTADOR ============ */
/* Sem arte de computador: a arte vertical ficaria esticada e cortada — centraliza num "celular". */
@media (min-width: 760px){
  .hero{ max-width: 520px; margin: 0 auto; }
  .no-bg .hero, .has-desktop-bg .hero{ max-width:none; }
}

/* Com arte de computador (ex.: 1920×1080): tela cheia e o texto vai pro lado
   livre da arte. Só em tela larga E horizontal (≥ 3:2): num 4:3 (iPad deitado,
   monitor 1280×1024) o "cover" cortaria as laterais e o texto cairia em cima
   da arte — nesses casos vale a coluna central com a arte de celular. */
@media (min-width: 900px) and (min-aspect-ratio: 3/2){
  .has-desktop-bg .hero__bg{
    background-image: var(--bg-image-desktop);
    background-position: center center;
  }
  .has-desktop-bg .hero{ min-height: 100vh; min-height: 100svh; }
  .has-desktop-bg .hero__fade{ height: 80px; }
  .desk-direita .hero__content,
  .desk-esquerda .hero__content{
    position:absolute; top:50%; transform: translateY(-50%);
    width: min(38vw, 580px); padding: 0;
  }
  .desk-direita .hero__content{ right: 7vw; }
  .desk-esquerda .hero__content{ left: 7vw; }
  .desk-direita .hero__top, .desk-esquerda .hero__top{ display:none; }
  .desk-direita .hero__date-inline, .desk-esquerda .hero__date-inline{ display:flex; justify-content:center; margin-bottom: 26px; }
  .desk-direita .hero__spacer, .desk-esquerda .hero__spacer{ display:none; }
  .desk-direita .hero__logo, .desk-esquerda .hero__logo{ width: min(100%, calc(var(--logo-max) * 1.4)); margin-bottom: 14px; }
  .has-desktop-bg .hero__headline{ font-size: clamp(32px, 3vw, 54px); }
  .has-desktop-bg .hero__kicker{ font-size: clamp(14px, 1.1vw, 19px); }
  .has-desktop-bg .hero__address{ font-size: clamp(14px, 1vw, 17px); }
  .has-desktop-bg .dress-pill{ font-size: clamp(13px, .95vw, 16px); padding: 7px 16px; }
  .has-desktop-bg .hero__cta{ font-size: clamp(19px, 1.4vw, 24px); padding: 15px 52px; }
  .has-desktop-bg .hero__day{ font-size: 52px; }
  .has-desktop-bg .hero__month{ font-size: 17px; }
  .has-desktop-bg .hero__time{ font-size: 14px; }
  .has-desktop-bg .hero__crown{ width: 44px; height: 44px; }
}
/* Fora do modo computador, a arte de celular vale para qualquer tela (inclusive 4:3). */
@media (min-width: 760px) and (max-aspect-ratio: 1499/1000){
  .has-desktop-bg .hero{ max-width: 520px; }
}

/* ============ SETINHA (quando não há botão no topo) ============ */
.hero__scroll{
  display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  color: var(--c-accent); text-decoration:none; border-radius:50%;
  border: 1px solid rgba(var(--c-accent-rgb),.45);
  animation: nudge 2s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* ============ LOCAL ABAIXO DO FORMULÁRIO ============ */
.rsvp__place{
  margin-top: 30px; padding: 20px 18px; border-radius: 14px; text-align:center;
  border: 1px solid rgba(var(--c-text-rgb),.15); background: rgba(var(--c-text-rgb),.03);
  display:flex; flex-direction:column; align-items:center; gap: 3px;
  font-size: 14px; line-height: 1.45; color: var(--c-text);
}
.rsvp__place strong{ font-family: var(--font-display); font-weight:400; font-size: 22px; color: var(--c-title); margin-bottom: 2px; }
.rsvp__place-pin{ color: var(--c-accent); margin-bottom: 4px; }
.rsvp__place-pin svg{ width:20px; height:20px; display:block; }
.rsvp__place-when{ opacity:.7; font-size: 13px; }
.rsvp__place-map{
  margin-top: 12px; font-size: 13px; color: var(--c-accent); text-decoration:none;
  border: 1px solid rgba(var(--c-accent-rgb),.5); padding: 8px 18px; border-radius: 999px;
}

/* ============ ANIMAÇÃO: ROSA SE ABRINDO ============ */
/* Sequência: toque → textos da entrada somem → rosa desabrocha do miolo pra
   fora → brilhos piscam → rosa "voa" na direção da tela e revela o convite.
   --k (do painel) multiplica todos os tempos: 0.75 rápida, 1.35 lenta. */
.bloom{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
}
.bloom__rose{ width: min(78vw, 420px); height:auto; overflow:visible; }
.petal{
  transform-box: view-box; transform-origin: 0 0;
  transform: rotate(var(--r)) scale(0);
  /* borda clara = luz batendo na beirada da pétala */
  stroke: rgba(255,255,255,.35); stroke-width: .7; stroke-linejoin: round;
}
/* Sombra entre as camadas: é o que dá profundidade (sem ela fica chapado) */
.ring{ filter: drop-shadow(0 0 3px rgba(0,0,0,.28)) drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.bloom__heart{ transform-box: view-box; transform-origin: 0 0; transform: scale(0); }
.spark{
  position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px;
  fill: var(--rose-1); opacity:0;
  transform: translate(var(--x), var(--y)) scale(0);
}

.gate > :not(.bloom):not(.gate__glow){ transition: opacity calc(.45s * var(--k)) ease, transform calc(.45s * var(--k)) ease; }
.gate.is-opening > :not(.bloom):not(.gate__glow){ opacity:0; transform: scale(.96); pointer-events:none; }
.gate.is-opening .bloom{ opacity:1; }
.gate.is-opening .petal{ animation: petalOpen calc(1.25s * var(--k)) cubic-bezier(.22,.9,.25,1) calc((.25s + var(--d) * 1s) * var(--k)) both; }
.gate.is-opening .bloom__heart{ animation: heartIn calc(.6s * var(--k)) ease-out calc(.2s * var(--k)) both; }
.gate.is-opening .bloom__spin{ transform-box: view-box; transform-origin: 0 0; animation: roseSpin calc(2.4s * var(--k)) cubic-bezier(.2,.8,.2,1) both; }
.gate.is-opening .spark{ animation: twinkle calc(1.1s * var(--k)) ease-out calc((1.25s + var(--d) * 1s) * var(--k)) both; }

/* Saída: a rosa cresce e some enquanto o fundo da entrada esmaece */
.gate.is-hidden .bloom{ transition: transform calc(.9s * var(--k)) cubic-bezier(.5,0,.75,0), opacity calc(.9s * var(--k)) ease; transform: scale(3.2); opacity:0; }

/* Pétala nasce estreita e "fechada" (em pé) e se abre pros lados: imita o desabrochar */
@keyframes petalOpen{
  0%  { transform: rotate(calc(var(--r) - 50deg)) scale(calc(var(--s) * .12), calc(var(--s) * .35)); }
  55% { transform: rotate(calc(var(--r) + 4deg)) scale(calc(var(--s) * var(--sx) * .82), calc(var(--s) * 1.06)); }
  100%{ transform: rotate(var(--r)) scale(calc(var(--s) * var(--sx)), var(--s)); }
}
@keyframes heartIn{ from{ transform: scale(0); } to{ transform: scale(1); } }
@keyframes roseSpin{ from{ transform: rotate(-70deg); } to{ transform: rotate(0deg); } }
@keyframes twinkle{
  0%  { opacity:0; transform: translate(var(--x), var(--y)) scale(0) rotate(0); }
  45% { opacity:1; transform: translate(var(--x), var(--y)) scale(var(--s)) rotate(45deg); }
  100%{ opacity:0; transform: translate(var(--x), var(--y)) scale(0) rotate(90deg); }
}