:root {
  --creme: #F5EBDD;
  --creme-deep: #EDE0CC;
  --rosa: #F4B6C2;
  --rosa-deep: #E89AAB;
  --azul: #A8D8EA;
  --azul-deep: #7FBFDA;
  --ouro: #C9A66B;
  --ouro-deep: #B08A4A;
  --salva: #B5C9AE;
  --ink: #5C4A3A;
  --kraft: #D9C4A4;
  --kraft-dark: #C9B08A;
  --paper: #FBF6EE;
  --w: 1080px;
  --h: 1920px;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2c241c;
  font-family: "Poppins", sans-serif;
  color: var(--ink);
}

#fit {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  width: var(--w);
  height: var(--h);
  position: relative;
  overflow: hidden;
  background: var(--creme);
  transform-origin: center center;
  isolation: isolate;
}

.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201,166,107,.12) 0 18%, transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(168,216,234,.14) 0 16%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(244,182,194,.1) 0 20%, transparent 50%);
  mix-blend-mode: multiply;
}

.watercolor {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.w1 { width: 520px; height: 420px; background: var(--rosa); top: 8%; left: -8%; }
.w2 { width: 480px; height: 400px; background: var(--azul); top: 6%; right: -10%; }
.w3 { width: 380px; height: 320px; background: var(--salva); bottom: 12%; left: 8%; }
.w4 { width: 340px; height: 280px; background: var(--ouro); bottom: 18%; right: 6%; opacity: 0; }

.sky { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute;
  width: 340px;
  height: 130px;
  opacity: 0;
  animation: cloudDrift 18s ease-in-out infinite;
}
.c1 { top: 7%; left: -6%; animation-delay: 0s; }
.c2 { top: 16%; right: -10%; width: 300px; animation-delay: 3s; animation-direction: reverse; }
.c3 { top: 28%; left: 18%; width: 260px; animation-delay: 6s; }

@keyframes cloudDrift {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(28px) translateY(-10px); }
}

.floaters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.floater {
  position: absolute;
  opacity: 0;
  animation: floatUp 9s ease-in-out infinite;
}
.floater.star {
  width: 14px; height: 14px;
  background: var(--ouro);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.floater.heart {
  width: 16px; height: 14px;
}
.floater.heart::before,
.floater.heart::after {
  content: "";
  position: absolute;
  width: 10px; height: 16px;
  background: currentColor;
  border-radius: 10px 10px 0 0;
  top: 0;
}
.floater.heart::before { left: 8px; transform: rotate(-45deg); transform-origin: 0 100%; }
.floater.heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.floater.pink { color: var(--rosa); }
.floater.blue { color: var(--azul); }

@keyframes floatUp {
  0% { transform: translateY(40px) rotate(0deg); opacity: 0; }
  12% { opacity: .7; }
  88% { opacity: .55; }
  100% { transform: translateY(-160px) rotate(18deg); opacity: 0; }
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scene-envelope { perspective: 1200px; }
.scene-card { perspective: 1600px; z-index: 14; }
.scene-monogram { z-index: 12; }
.mono-frame {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.82);
}
.mono-ring {
  position: absolute;
  inset: 0;
  animation: spinSlow 24s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.mono-inner {
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFDF8, var(--paper) 60%, #EFE3D2);
  box-shadow:
    0 8px 28px rgba(92,74,58,.12),
    inset 0 0 0 1px rgba(201,166,107,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mono-script {
  font-family: "Great Vibes", cursive;
  font-size: 72px;
  color: var(--ouro-deep);
  letter-spacing: 2px;
}

.env-shadow {
  position: absolute;
  width: 460px;
  height: 36px;
  background: radial-gradient(ellipse, rgba(92,74,58,.22), transparent 70%);
  bottom: 38%;
  left: 50%;
  transform: translateX(-50%) scaleX(.6);
  opacity: 0;
  filter: blur(6px);
}

.envelope {
  position: relative;
  width: 520px;
  height: 340px;
  transform-style: preserve-3d;
  perspective: 1100px;
  opacity: 0;
  transform: translateY(40px) scale(.92);
  filter: drop-shadow(0 18px 28px rgba(92,74,58,.16));
}

.env-back {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(176,138,74,.05) 19px),
    linear-gradient(180deg, #E8D4B5, var(--kraft));
  border-radius: 8px 8px 10px 10px;
  box-shadow: inset 0 0 0 1px rgba(176,138,74,.18);
}

.env-pocket {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px; top: 78px;
  background: linear-gradient(180deg, #F3E6D0, #E6D2B4);
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}
.inner-card {
  position: absolute;
  left: 28px; right: 28px;
  height: 240px;
  bottom: -180px;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 -4px 12px rgba(92,74,58,.08);
}

.flap {
  position: absolute;
  background: linear-gradient(180deg, #EEDCC0, #DCC4A0);
  z-index: 3;
}
.flap-left {
  left: 0; top: 0; bottom: 0; width: 50%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(90deg, #E4CFAE, #D6B98E);
  z-index: 4;
  transform-origin: left center;
}
.flap-right {
  right: 0; top: 0; bottom: 0; width: 50%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: linear-gradient(270deg, #E4CFAE, #D6B98E);
  z-index: 4;
  transform-origin: right center;
}
.flap-bottom {
  left: 0; right: 0; bottom: 0; height: 52%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: linear-gradient(180deg, #E8D4B5, #D4BA94);
  z-index: 5;
}

.flap-top {
  left: 0; right: 0; top: 0; height: 56%;
  z-index: 8;
  transform-style: preserve-3d;
  transform-origin: top center;
  perspective: 900px;
}
.flap-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
}
.flap-front {
  background: linear-gradient(180deg, #F0E0C6, #DCC4A0);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 42%;
}
.flap-back-face {
  background: linear-gradient(180deg, #E6D2B4, #F4E8D4);
  transform: rotateX(180deg);
}

.wax {
  position: relative;
  width: 92px;
  height: 92px;
  z-index: 9;
  transform: translateY(-8px);
}
.wax-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.wax-l { left: 0; }
.wax-r { right: 0; }
.wax-half::before {
  content: "";
  position: absolute;
  top: 0;
  width: 92px;
  height: 92px;
  border-radius: 46% 54% 48% 52% / 50% 46% 54% 50%;
  background:
    radial-gradient(circle at 38% 32%, #E8C98A, var(--ouro) 42%, var(--ouro-deep) 78%);
  box-shadow: inset 0 -6px 10px rgba(92,74,58,.18), 0 4px 10px rgba(176,138,74,.28);
}
.wax-l::before { left: 0; }
.wax-r::before { right: 0; }

.footprint {
  position: absolute;
  inset: 16px 18px 10px;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}

.seal-spark {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,190,.95), rgba(201,166,107,.4) 38%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: screen;
}

.invite-card {
  position: relative;
  width: 760px;
  height: 1080px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  opacity: 0;
  transform: scale(.55) translateY(180px);
}
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    linear-gradient(#FBF6EE, #FBF6EE) padding-box,
    linear-gradient(160deg, var(--rosa), var(--ouro), var(--azul)) border-box;
  border: 10px solid transparent;
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(92,74,58,.18),
    inset 0 0 0 1px rgba(201,166,107,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 64px;
  text-align: center;
}
.card-face::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(201,166,107,.35);
  border-radius: 8px;
  pointer-events: none;
}
.card-back { transform: rotateY(180deg); }

.card-ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 28px;
}
.card-ornament .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.dot.pink { background: var(--rosa); }
.dot.blue { background: var(--azul); }
.card-ornament .line {
  width: 72px; height: 1px; background: var(--ouro); opacity: .7;
}
.tiny-heart {
  width: 12px; height: 10px; position: relative;
}
.tiny-heart::before, .tiny-heart::after {
  content: "";
  position: absolute;
  width: 7px; height: 11px;
  background: var(--ouro);
  border-radius: 8px 8px 0 0;
  top: 0;
}
.tiny-heart::before { left: 6px; transform: rotate(-45deg); transform-origin: 0 100%; }
.tiny-heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }

.script-main {
  font-family: "Great Vibes", cursive;
  font-size: 68px;
  line-height: 1.25;
  color: var(--ink);
  max-width: 620px;
  min-height: 2.6em;
}
.script-main .char {
  display: inline;
  opacity: 0;
}

.kicker {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ouro-deep);
  margin-bottom: 18px;
}
.title-script {
  font-family: "Parisienne", cursive;
  font-size: 64px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
}
.gold-rule {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  margin: 8px 0 28px;
}
.names {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: .04em;
  color: var(--ink);
}
.amp {
  font-family: "Great Vibes", cursive;
  font-size: 36px;
  color: var(--ouro);
  margin: 2px 0 6px;
}
.emblem {
  width: 128px;
  height: 128px;
  margin: 28px 0 14px;
  opacity: .95;
}
.place {
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .04em;
  color: #6b5848;
  max-width: 520px;
  line-height: 1.4;
}
.date {
  margin-top: 22px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro-deep);
}

.balloons {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
}
.balloon {
  position: absolute;
  bottom: -220px;
  left: var(--x);
  opacity: 0;
}
.balloon span {
  display: block;
  width: 64px;
  height: 82px;
  border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
  position: relative;
  box-shadow: inset -10px -8px 16px rgba(255,255,255,.35), 0 8px 14px rgba(92,74,58,.12);
}
.balloon span::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 12px; height: 10px;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: inherit;
  filter: brightness(.92);
}
.balloon i {
  display: block;
  width: 1px;
  height: 90px;
  margin: 6px auto 0;
  background: linear-gradient(#cbb79a, transparent);
}
.b-pink span { background: linear-gradient(140deg, #FAD4DC, var(--rosa-deep)); }
.b-blue span { background: linear-gradient(140deg, #D4EEF6, var(--azul-deep)); }

.finale-text {
  font-family: "Great Vibes", cursive;
  font-size: 62px;
  text-align: center;
  max-width: 780px;
  line-height: 1.3;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  text-shadow: 0 2px 0 rgba(255,255,255,.4);
  padding: 0 48px;
}

.close-mono {
  font-family: "Great Vibes", cursive;
  font-size: 96px;
  color: var(--ouro-deep);
  opacity: 0;
  transform: scale(.9);
}
.soon {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  letter-spacing: .42em;
  text-transform: uppercase;
  font-size: 20px;
  color: #7a6654;
  margin-top: 12px;
  opacity: 0;
}

.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 18;
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  box-shadow: inset 0 0 120px 24px rgba(92,74,58,.08);
}

.progress {
  position: absolute;
  left: 80px; right: 80px; bottom: 48px;
  height: 3px;
  background: rgba(201,166,107,.22);
  z-index: 30;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
}
.progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rosa), var(--ouro), var(--azul));
}

.cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, #FFF8EF, var(--creme) 55%, #E8D9C4);
}
.cover-inner {
  text-align: center;
  padding: 40px 32px;
  max-width: 520px;
}
.cover-kicker {
  font-weight: 300;
  letter-spacing: .36em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ouro-deep);
  margin-bottom: 12px;
}
.cover-title {
  font-family: "Parisienne", cursive;
  font-size: 48px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
}
.cover-sub {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #6b5848;
  margin-bottom: 36px;
}
.play-btn {
  appearance: none;
  border: 1px solid var(--ouro);
  background: linear-gradient(180deg, #FBF6EE, #F0E4D2);
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 16px 36px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(92,74,58,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(92,74,58,.16); }
.cover-hint {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9a8674;
}

.replay, .mute {
  position: fixed;
  z-index: 80;
  appearance: none;
  border: 1px solid rgba(201,166,107,.6);
  background: rgba(251,246,238,.92);
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.replay { bottom: 28px; left: 50%; transform: translateX(-50%); }
.mute {
  top: 20px; right: 20px;
  min-width: 56px;
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hidden { display: none !important; }
.mute.off { opacity: .45; }

.playing .cloud { opacity: 1; }
.playing .w1 { animation: washIn 2.2s ease forwards; }
.playing .w2 { animation: washIn 2.4s ease .2s forwards; }
.playing .w3 { animation: washIn 3s ease .6s forwards; }
.playing .w4 { animation: washIn 3.2s ease 1s forwards; }
.playing .progress { opacity: 1; transition: opacity .6s ease; }

@keyframes washIn {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: .28; transform: scale(1); }
}

.stage.t-open .mono-frame {
  animation: monoIn 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes monoIn {
  0% { opacity: 0; transform: scale(.82); }
  70% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

.stage.t-env .mono-frame {
  animation: monoOut .7s ease forwards;
}
@keyframes monoOut {
  to { opacity: 0; transform: scale(.9) translateY(-20px); }
}
.stage.t-env .envelope {
  animation: envIn 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
.stage.t-env .env-shadow {
  animation: shadowIn 1.4s ease forwards;
}
@keyframes envIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shadowIn {
  to { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

.stage.t-env .envelope {
  animation: envIn 1.4s cubic-bezier(.2,.8,.2,1) forwards, envFloat 2.4s ease-in-out 1.4s infinite;
}
@keyframes envFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1); }
}

.stage.t-break .wax-l {
  animation: waxL .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.stage.t-break .wax-r {
  animation: waxR .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.stage.t-break .footprint {
  animation: fadeOut .4s ease forwards;
}
.stage.t-break .seal-spark {
  animation: spark .8s ease-out forwards;
}
@keyframes waxL {
  to { transform: translate(-28px, 18px) rotate(-22deg); opacity: 0; }
}
@keyframes waxR {
  to { transform: translate(28px, 22px) rotate(26deg); opacity: 0; }
}
@keyframes spark {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes fadeOut { to { opacity: 0; } }

.stage.t-openflap .flap-top {
  animation: flapOpen 1.8s cubic-bezier(.45,.05,.2,1) forwards;
}
.stage.t-openflap .flap-left {
  animation: sideL 1.5s ease .25s forwards;
}
.stage.t-openflap .flap-right {
  animation: sideR 1.5s ease .25s forwards;
}
@keyframes flapOpen {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(188deg); }
}
@keyframes sideL {
  to { transform: rotateY(-28deg) translateX(-8px); opacity: .85; }
}
@keyframes sideR {
  to { transform: rotateY(28deg) translateX(8px); opacity: .85; }
}

.stage.t-card .inner-card {
  animation: peekOut .9s ease forwards;
}
@keyframes peekOut {
  to { bottom: 20px; }
}
.stage.t-card .invite-card {
  animation: cardRise 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
.stage.t-card .envelope,
.stage.t-card .env-shadow {
  animation: envFade .9s ease forwards;
}
@keyframes cardRise {
  0% { opacity: 0; transform: scale(.55) translateY(180px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes envFade {
  to { opacity: 0; transform: translateY(30px) scale(.94); }
}

.stage.t-flip .invite-card {
  animation: cardFlip 1.2s cubic-bezier(.45,.05,.25,1) forwards;
  opacity: 1;
}
@keyframes cardFlip {
  from { transform: rotateY(0) scale(1); }
  to { transform: rotateY(180deg) scale(1); }
}

.stage.t-finale .invite-card {
  animation: cardAway .8s ease forwards;
}
@keyframes cardAway {
  to { opacity: 0; transform: rotateY(180deg) scale(.92) translateY(-40px); }
}
.stage.t-finale .finale-text {
  animation: fadeUp 1s ease forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.stage.t-close .finale-text {
  animation: fadeOutUp .6s ease forwards;
}
@keyframes fadeOutUp {
  to { opacity: 0; transform: translateY(-16px); }
}
.stage.t-close .close-mono {
  animation: monoIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.stage.t-close .soon {
  animation: fadeUp .8s ease .35s forwards;
}

.stage.t-balloons .balloon {
  animation: balloonUp 4.5s ease-in forwards;
  animation-delay: var(--d);
}
@keyframes balloonUp {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  8% { opacity: 1; }
  100% { opacity: .85; transform: translateY(-1600px) scale(1); }
}

@media (max-aspect-ratio: 9/16) {
  .cover-title { font-size: 40px; }
}