:root {
  --ink: #0b0507;
  --wine-deep: #1d060c;
  --wine: #3f0d1a;
  --gold-deep: #977235;
  --gold: #c9a35a;
  --gold-pale: #efd9a3;
  --cream: #f4e9d6;
  --cream-soft: rgba(244, 233, 214, .74);
  --gold-glow: rgba(201, 163, 90, .42);
  --gold-veil: rgba(201, 163, 90, .12);
  --sheen: rgba(255, 247, 226, .95);
  --scrim: rgba(11, 5, 7, .38);

  --env-bg: #26130e;
  --env-dark: #190b08;
  --env-flap: #311913;
  --seal-color: #724225;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  --fs-title: clamp(1.9rem, min(8.6vw, 5.2vh), 2.75rem);
  --fs-occasion: clamp(1.95rem, min(9.4vw, 5.8vh), 3.2rem);
  --fs-value: clamp(1.2rem, min(5.2vw, 3.2vh), 1.5rem);
  --fs-closing: clamp(1.65rem, min(7.4vw, 4.5vh), 2.4rem);
  --fs-label: .72rem;
  --fs-small: .85rem;
  --gap: clamp(.85rem, 2.5vh, 1.6rem);

  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-glide: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
  box-sizing: border-box;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

::selection { background: var(--gold-glow); color: var(--cream); }

/* Tela do Envelope com Lacre */
.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--env-dark);
  transition: opacity 1s var(--ease-soft), visibility 1s;
}

.envelope-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #351a14 0%, var(--env-dark) 80%);
  z-index: 0;
}

.envelope-wrapper {
  position: relative;
  width: min(90vw, 26rem);
  height: min(120vw, 36rem);
  background: var(--env-bg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s var(--ease-glide), opacity 0.8s ease;
}

.envelope-flap-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(175deg, #42231b 0%, var(--env-flap) 100%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top;
  transition: transform 0.8s var(--ease-glide);
  z-index: 3;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.envelope-flap-left {
  position: absolute;
  inset: 0;
  background: #200f0b;
  clip-path: polygon(0 0, 0 100%, 50% 50%);
  z-index: 2;
}

.envelope-flap-right {
  position: absolute;
  inset: 0;
  background: #2b140f;
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  z-index: 2;
}

.envelope-flap-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: #371c15;
  clip-path: polygon(0 100%, 50% 25%, 100% 100%);
  z-index: 2;
}

.wax-seal-btn {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.5rem;
  height: 5.5rem;
  background: radial-gradient(circle at 35% 35%, #b27643 0%, var(--seal-color) 60%, #462512 100%);
  border: 2px solid rgba(239, 217, 163, 0.4);
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2);
  transition: transform 0.3s var(--ease-soft), filter 0.3s;
}

.wax-seal-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.1);
}

.wax-seal-btn:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.seal-ring {
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(239, 217, 163, 0.5);
  border-radius: 50%;
  pointer-events: none;
}

.seal-text {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--gold-pale);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.smoke-effect {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smoke-effect span {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(201,163,90,0.25) 0%, rgba(244,233,214,0.08) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(12px);
  transform: scale(0.2);
}

.envelope-wrapper.is-opening {
  transform: scale(1.15);
  opacity: 0;
}

.envelope-wrapper.is-opening .envelope-flap-top {
  transform: rotateX(180deg);
}

.envelope-wrapper.is-opening .wax-seal-btn {
  transform: translate(-50%, -50%) scale(0) rotate(45deg);
  opacity: 0;
  transition: all 0.4s ease;
}

.smoke-effect.is-active { opacity: 1; }
.smoke-effect.is-active span:nth-child(1) { animation: smoke-rise-1 1.2s var(--ease-glide) forwards; }
.smoke-effect.is-active span:nth-child(2) { animation: smoke-rise-2 1.4s var(--ease-glide) 0.1s forwards; }
.smoke-effect.is-active span:nth-child(3) { animation: smoke-rise-3 1s var(--ease-glide) 0.2s forwards; }

@keyframes smoke-rise-1 {
  0% { transform: translate(0, 20px) scale(0.3); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translate(-30px, -120px) scale(2.5); opacity: 0; }
}

@keyframes smoke-rise-2 {
  0% { transform: translate(0, 20px) scale(0.3); opacity: 0; }
  50% { opacity: 0.7; }
  100% { transform: translate(35px, -140px) scale(2.8); opacity: 0; }
}

@keyframes smoke-rise-3 {
  0% { transform: translate(0, 10px) scale(0.4); opacity: 0; }
  50% { opacity: 0.9; }
  100% { transform: translate(0, -100px) scale(2.2); opacity: 0; }
}

/* Palco e Cartão */
.stage {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow: hidden;
}

.glow, .grain, .sparkles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.glow {
  background: radial-gradient(120% 75% at 50% 44%, var(--wine) 0%, var(--wine-deep) 48%, var(--ink) 100%);
}

.grain {
  opacity: .05;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .94 0 0 0 0 .86 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sparkles { width: 100%; height: 100%; }

.card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: min(100%, 30rem);
  max-height: 52rem;
  background: radial-gradient(85% 65% at 50% 50%, var(--scrim), transparent 78%);
}

.card:focus { outline: none; }

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 4px var(--gold-glow));
}

.stop-pale { stop-color: var(--gold-pale); }
.stop-gold { stop-color: var(--gold); }
.stop-deep { stop-color: var(--gold-deep); }

.frame-line {
  fill: none;
  stroke: url(#ouro);
  stroke-width: 1.1;
}

.frame-line.is-inner { stroke-width: .6; opacity: .6; }
.orn > * { fill: var(--gold-pale); }

.glint path {
  fill: var(--sheen);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding-block: clamp(1.5rem, 4vh, 3rem);
  padding-inline: clamp(1.4rem, 7vw, 3rem);
  text-align: center;
}

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.35rem, 1.2vh, .75rem);
}

.title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.1;
  color: var(--cream);
  text-wrap: balance;
}

.title span { display: inline-block; }

.occasion {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-occasion);
  line-height: 1.04;
  letter-spacing: .06em;
  padding-inline-start: .06em;
  text-transform: uppercase;
  color: var(--gold);
  text-wrap: balance;
  filter: drop-shadow(0 0 14px var(--gold-veil));
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .occasion {
    background-image:
      linear-gradient(100deg, transparent 44%, var(--sheen) 50%, transparent 56%),
      linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 52%, var(--gold-deep) 100%);
    background-size: 300% 100%, 100% 1.04em;
    background-repeat: no-repeat, repeat-y;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .occasion.is-shining { animation: shine 2.6s var(--ease-glide) both; }
}

.divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(12rem, 64%);
}

.divider span { flex: 1; height: 1px; }
.divider span:first-child { background: linear-gradient(to left, var(--gold), transparent); transform-origin: right; }
.divider span:last-child { background: linear-gradient(to right, var(--gold), transparent); transform-origin: left; }

.divider i {
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--gold-pale);
  transform: rotate(45deg);
}

.details {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.detail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding-block: clamp(.5rem, 1.2vh, .8rem);
}

.detail:first-child { padding-top: 0; }
.detail:last-child { padding-bottom: 0; }

.detail + .detail::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold);
}

.detail dt {
  font: 400 var(--fs-label)/1.3 var(--sans);
  letter-spacing: .34em;
  padding-inline-start: .34em;
  text-transform: uppercase;
  color: var(--gold);
}

.detail dd {
  margin: 0;
  font: 500 var(--fs-value)/1.25 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--cream);
}

.address {
  display: block;
  margin-top: .2rem;
  font: 300 var(--fs-small)/1.4 var(--sans);
  letter-spacing: .02em;
  color: var(--cream-soft);
}

/* Botão de Localização (Google Maps) */
.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.35rem 0.8rem;
  font: 400 0.72rem var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-pale);
  background: var(--gold-veil);
  border: 1px solid var(--gold);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.map-btn svg { width: 0.9rem; height: 0.9rem; }
.map-btn:hover { background: var(--gold); color: var(--ink); }

/* Botão de WhatsApp */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  font: 400 0.75rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: #25d366;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.whatsapp-btn svg { width: 1.1rem; height: 1.1rem; }
.whatsapp-btn:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.closing {
  margin: 0;
  font: italic 400 var(--fs-closing)/1.15 var(--serif);
  color: var(--cream);
  text-shadow: 0 0 18px var(--gold-glow);
  text-wrap: balance;
}

.replay {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  margin-top: clamp(.2rem, 1vh, .6rem);
  padding: .7rem 1rem;
  font: 400 var(--fs-label)/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-pale);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}

.replay::before, .replay::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.replay::before { left: -3px; }
.replay::after { right: -3px; }

.replay svg { flex: none; width: 1rem; height: 1rem; }

@media (hover: hover) {
  .replay:hover { background: var(--gold-veil); border-color: var(--gold-pale); color: var(--cream); }
}

.replay:focus-visible { outline: 1px solid var(--gold-pale); outline-offset: 5px; }

:root:not(.js) .card { outline: 1px solid var(--gold); outline-offset: -6px; }
:root:not(.js) .replay { display: none; }
:root:not(.js) .envelope-screen { display: none; }

.js .glow { opacity: 0; transition: opacity 4.5s var(--ease-soft); }
.js .stage.is-lit .glow { opacity: 1; }

.js .sparkles { opacity: 0; transition: opacity 2.4s var(--ease-soft); }
.js .sparkles.is-on { opacity: 1; }

.js .stage.is-resetting .glow,
.js .stage.is-resetting .sparkles { opacity: 0; transition-duration: .6s; }
.js .stage.is-resetting .card { opacity: 0; transition: opacity .6s var(--ease-soft); }

.js .frame-line {
  stroke-dasharray: var(--len, 6000px) var(--len, 6000px);
  stroke-dashoffset: var(--len, 6000px);
}

.js .frame.is-drawn .frame-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.6s var(--ease-glide);
}

.js .frame.is-drawn .frame-line.is-inner { transition-delay: .45s; }

.js .orn > * {
  opacity: 0;
  transform: scale(.2);
  transform-box: fill-box;
  transform-origin: center;
}

.js .frame.is-drawn .orn > * {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-soft) 2.2s, transform 1.1s var(--ease-out) 2.2s;
}

.js .frame.is-glint .glint path { animation: glint 1.8s var(--ease-soft) both; }
.js .frame.is-glint .glint[data-at="bottom"] path { animation-delay: .6s; }

.js .frame.is-gone { opacity: 0; transition: opacity 2.4s var(--ease-soft); }

.js .title {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(var(--shift, 0px)) scale(var(--lift, 1));
  transition: opacity 1.9s var(--ease-soft), filter 1.9s var(--ease-soft), transform 1.6s var(--ease-glide);
}

.js .title.is-on { opacity: 1; filter: blur(0); }
.js .title.is-risen { transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.4s var(--ease-soft), transform 1.6s var(--ease-out);
}

.js [data-reveal].is-on { opacity: 1; transform: none; }

.js .divider span { transform: scaleX(0); transition: transform 1.6s var(--ease-out) .15s; }
.js .divider.is-on span { transform: none; }

.js .replay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-out), visibility 0s linear 1.2s,
    background-color .3s, border-color .3s, color .3s;
}

.js .replay.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-out), visibility 0s,
    background-color .3s, border-color .3s, color .3s;
}

.calm .frame-line { stroke-dasharray: none; }
.calm .orn > * { transform: none; }
.calm .frame.is-drawn .orn > * { transition-delay: 0s; }
.js.calm .frame { opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.js.calm .frame.is-drawn { opacity: 1; }
.js.calm .frame.is-drawn.is-gone { opacity: 0; transition-duration: 2.4s; }
.calm .title { filter: none; transform: none; }
.calm [data-reveal],
.calm .divider span,
.calm .replay { transform: none; }

.no-motion *, .no-motion *::before, .no-motion *::after {
  transition: none !important;
  animation: none !important;
}

@keyframes shine {
  from { background-position: 100% 0, 0 0; }
  to { background-position: 0% 0, 0 0; }
}

@keyframes glint {
  0% { opacity: 0; transform: scale(0) rotate(-35deg); }
  40% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.15) rotate(45deg); }
}