/* Convite ML XV · base: fontes, variáveis, cena, telas, tipografia */

@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../assets/fonts/sora-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../assets/fonts/sora-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../assets/fonts/cormorant-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }

:root {
  --vinho-900: #3a0017;
  --vinho: #600025;
  --framboesa: #932a49;
  --rosa-500: #b56b7f;
  --rosa-300: #d7a6b3;
  --rosa-100: #ebcdd5;
  --creme: #f6f1f0;
  --ouro: #c8a86b;
  --ouro-claro: #e8d5a8;
  --sombra: 0 10px 34px rgba(20, 0, 8, .45);
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
}

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

html, body { height: 100%; }

body {
  background: var(--vinho-900);
  color: var(--creme);
  font-family: "Sora", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

img { user-select: none; -webkit-user-drag: none; }

/* ---------- App shell ---------- */
.js .app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

/* ---------- Cenografia ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.scene-bg, .scene-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scene-bg img { transform: scale(1.06); }

.scene-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 75% at 50% 46%, rgba(58, 0, 23, .55) 0%, rgba(58, 0, 23, .82) 62%, rgba(30, 0, 12, .95) 100%);
}

.scene-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,0,12,.55) 0%, transparent 18%, transparent 78%, rgba(30,0,12,.65) 100%);
  pointer-events: none;
}

.petal-wrap { position: absolute; width: min(62vw, 340px); aspect-ratio: 1; will-change: transform; }
.petal-par { width: 100%; height: 100%; will-change: transform; }
.petal { width: 100%; height: 100%; display: block; will-change: transform; }

.petal-wrap[data-petal="tl"] { top: -6%; left: -14%; }
.petal-wrap[data-petal="tr"] { top: -8%; right: -14%; }
.petal-wrap[data-petal="bl"] { bottom: -8%; left: -15%; }
.petal-wrap[data-petal="br"] { bottom: -6%; right: -13%; }

.sparks { position: absolute; inset: 0; pointer-events: none; }
.spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ouro-claro);
  box-shadow: 0 0 8px 1px rgba(232, 213, 168, .8);
  opacity: 0;
}

/* ---------- Telas ---------- */
.screens { position: relative; z-index: 2; }

.screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--sa-top)) 28px calc(48px + var(--sa-bottom));
}

.js .screen {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100dvh;
  visibility: hidden;
}
.js .screen.is-active { visibility: visible; }

.content {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

/* ---------- Tipografia ---------- */
.hero-nome {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(44px, 13vw, 72px);
  line-height: 1.04;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--creme);
  text-shadow: 0 2px 24px rgba(30, 0, 12, .6);
}

.hero-xv {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(30px, 9vw, 44px);
  letter-spacing: .3em;
  margin-left: .3em;
  color: var(--ouro);
}

.hero-ml { width: clamp(84px, 24vw, 120px); height: auto; filter: drop-shadow(0 2px 14px rgba(30,0,12,.5)); }

.hero-data {
  font-family: "Cinzel", serif;
  font-size: clamp(15px, 4.2vw, 18px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-claro);
}

.sec-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(26px, 7.4vw, 36px);
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ouro-claro);
  text-shadow: 0 2px 18px rgba(30, 0, 12, .55);
}

.msg {
  font-size: clamp(15px, 4.1vw, 17px);
  line-height: 1.75;
  color: var(--rosa-100);
  text-wrap: pretty;
}

.sig-block { margin-top: 6px; }
.sig-label {
  font-family: "Cormorant", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--rosa-300);
  margin-bottom: 2px;
}
.sig {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(27px, 7.6vw, 38px);
  line-height: 1.25;
  letter-spacing: .12em;
  margin-left: .12em;
  text-transform: uppercase;
  color: var(--ouro);
  padding: .08em .1em;
  text-shadow: 0 2px 18px rgba(200, 168, 107, .25);
}

.count-kicker {
  font-family: "Cinzel", serif;
  font-size: clamp(18px, 5vw, 22px);
  letter-spacing: .34em;
  margin-left: .34em;
  text-transform: uppercase;
  color: var(--creme);
}

.count-caption {
  font-family: "Cormorant", serif;
  font-style: italic;
  font-size: clamp(18px, 5vw, 21px);
  color: var(--rosa-300);
}

.rsvp-text { font-size: clamp(15px, 4.1vw, 17px); line-height: 1.7; color: var(--rosa-100); max-width: 30ch; }
.rsvp-prazo {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(18px, 5.2vw, 22px);
  letter-spacing: .1em;
  color: var(--ouro-claro);
}
.rsvp-contato { font-size: 13.5px; letter-spacing: .04em; color: var(--rosa-300); }

.fim-frase {
  font-family: "Cormorant", serif;
  font-style: italic;
  font-size: clamp(24px, 6.6vw, 30px);
  line-height: 1.45;
  color: var(--creme);
  max-width: 22ch;
}
.fim-heart { width: 30px; stroke: var(--ouro); fill: none; stroke-width: 1.6; }
.fim-ml { width: 76px; height: auto; opacity: .95; }
.fim-nome {
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: .3em;
  margin-left: .3em;
  text-transform: uppercase;
  color: var(--ouro);
}

/* ---------- Ornamento (linha + estrela) ---------- */
.ornament { width: min(220px, 56vw); }
.orn-svg { width: 100%; display: block; overflow: visible; }
.orn-svg line { stroke: var(--ouro); stroke-width: .8; opacity: .85; }
.orn-star { fill: var(--ouro-claro); }

/* ---------- Splash / Lacre ---------- */
.screen-splash { z-index: 5; }
.lacre {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(130% 90% at 50% 30%, #7a0730 0%, var(--vinho) 46%, var(--vinho-900) 100%);
}
.js .lacre { will-change: opacity, transform; }
.lacre-inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 0 32px; text-align: center;
}
.lacre-ml { width: clamp(150px, 42vw, 220px); height: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.35)); }
.lacre-hint {
  font-family: "Cormorant", serif;
  font-style: italic;
  font-size: clamp(19px, 5.4vw, 23px);
  color: var(--rosa-100);
}
.lacre-chevron { width: 26px; opacity: .9; }
.lacre-chevron svg { width: 100%; display: block; stroke: var(--ouro); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Sem JS: página vira scroll normal legível */
.no-js .lacre { position: relative; inset: auto; background: none; }
.no-js .lacre-hint, .no-js .lacre-chevron, .no-js .nav-hint, .no-js .progress { display: none; }