:root {
  --em-950: #08170f;
  --em-900: #0d231b;
  --em-800: #133026;
  --em-700: #1a3f31;
  --em-600: #245241;
  --gold: #c9a961;
  --gold-l: #ead6a4;
  --gold-xl: #f7ecd0;
  --gold-d: #9c7a35;
  --ivory: #f8f3ea;
  --paper: #fbf8f1;
  --ink: #23302a;
  --ink-soft: #5c665f;
  --wine: #8e2b3a;
  --script: 'Pinyon Script', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.locked, html.locked body { overflow: hidden; height: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--em-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
svg use { pointer-events: none; }
a { color: inherit; }

.script { font-family: var(--script); font-weight: 400; line-height: 1.1; }
.kicker {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .38em;
  text-transform: uppercase;
  margin: 0 0 .6em;
  color: var(--gold);
}
.kicker.dark { color: var(--gold-d); }
.kicker.light { color: var(--gold-l); }
.gold-text {
  background: linear-gradient(100deg, #b89348 0%, #f7e6b5 22%, #c9a961 40%, #fff3d2 52%, #b8924a 70%, #ecd59c 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* ============ FX / PROGRESS ============ */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 55; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-d), var(--gold-l)); }

/* ============ INTRO ============ */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 80% 55% at 50% 45%, rgba(201,169,97,.16), transparent 70%),
    radial-gradient(ellipse at 50% 120%, var(--em-700), transparent 60%),
    linear-gradient(180deg, var(--em-950), var(--em-900) 50%, var(--em-950));
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease), filter 1.1s;
  overflow: hidden;
}
.intro.gone { opacity: 0; transform: scale(1.18); filter: blur(6px); pointer-events: none; }
.intro-stars { position: absolute; inset: 0; pointer-events: none; }
.intro-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--gold-xl); box-shadow: 0 0 6px 1px rgba(247,236,208,.6);
  animation: twinkle var(--t, 3s) ease-in-out infinite var(--d, 0s); opacity: .1;
}
@keyframes twinkle { 50% { opacity: .9; transform: scale(1.4); } }
.intro-top, .intro-bottom { text-align: center; position: relative; z-index: 2; transition: opacity .7s, transform .9s var(--ease); }
.intro.opening .intro-top { opacity: 0; transform: translateY(-30px); }
.intro.opening .intro-bottom { opacity: 0; transform: translateY(30px); }
.intro .guest { font-size: clamp(40px, 11vw, 64px); color: var(--gold-l); margin: 0; text-shadow: 0 0 30px rgba(201,169,97,.35); }
.intro-top { animation: fadeDown 1.4s var(--ease) both .2s; }
.intro-bottom { animation: fadeUp 1.4s var(--ease) both .6s; }
.tap-hint { font-family: var(--sans); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-l); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
.tap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,169,97,.7); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 12px rgba(201,169,97,0); } 100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); } }
.intro-seats { margin: 0; color: rgba(247,236,208,.75); font-style: italic; font-size: 17px; }
.intro-seats b { font-family: var(--script); font-weight: 400; font-size: 1.8em; color: var(--gold-l); font-style: normal; padding: 0 .1em; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-24px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }

/* Envelope */
.envelope {
  position: relative; z-index: 3;
  width: min(86vw, 400px); aspect-ratio: 1.42;
  perspective: 1400px;
  animation: floaty 5s ease-in-out infinite, envIn 1.6s var(--ease) both .3s;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
}
@keyframes floaty { 50% { transform: translateY(-8px) rotate(-.4deg); } }
@keyframes envIn { from { opacity: 0; transform: translateY(40px) scale(.9) rotateX(20deg); } }
.intro.opening .envelope { animation: none; transition: transform 1.4s var(--ease); transform: translateY(18vh); }
.env-back, .env-front, .env-flap, .letter { position: absolute; inset: 0; border-radius: 6px; }
.env-back {
  background:
    repeating-linear-gradient(45deg, rgba(201,169,97,.12) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #1f4a39, #102a20);
}
.env-front {
  z-index: 3;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  background: var(--noise), linear-gradient(175deg, #23503e 0%, #173a2d 55%, #11301f 100%);
  box-shadow: inset 0 0 0 1px rgba(234,214,164,.18);
}
.env-front::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 49.6%, rgba(234,214,164,.35) 50%, transparent 50.4%),
              linear-gradient(to top left, transparent 49.6%, rgba(234,214,164,.35) 50%, transparent 50.4%);
  background-size: 50% 100%; background-repeat: no-repeat; background-position: left bottom, right bottom;
  opacity: .55;
}
.env-flap {
  z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.6,.05,.3,1);
  height: 62%;
}
.flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.flap-out { background: var(--noise), linear-gradient(180deg, #2a5b47, #1a4233); }
.flap-out::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent 40%); }
.flap-in {
  transform: rotateX(180deg);
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.45), transparent 60%),
    repeating-linear-gradient(-45deg, #e5cf97 0 6px, #d4b46a 6px 12px);
}
.envelope.open .env-flap { transform: rotateX(180deg); }
.envelope.flap-back .env-flap { z-index: 1; }
.letter {
  z-index: 2; inset: 6% 5% 4%;
  background: var(--noise), linear-gradient(180deg, #fffdf7, #f4ecdc);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform 1.2s var(--ease);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.envelope.letter-out .letter { transform: translateY(-62%); z-index: 2; }
.envelope.letter-up .letter { z-index: 5; transform: translateY(-62%) scale(1.06); }
.letter-inner { padding: 10px 16px; }
.letter-branch { width: 120px; height: 34px; color: var(--em-600); opacity: .7; margin: 0 auto 2px; display: block; }
.letter-names { font-size: clamp(30px, 8.5vw, 42px); color: var(--em-800); margin: 0; }
.letter-names em { font-style: normal; color: var(--gold-d); }
.letter-date { font-family: var(--sans); font-size: 11px; letter-spacing: .32em; color: var(--ink-soft); margin: 4px 0 0; }

/* Seal */
.seal {
  position: absolute; z-index: 6;
  left: 50%; top: 62%; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border: 0; padding: 0; background: none; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease);
}
.seal:hover { transform: scale(1.06); }
.seal:active { transform: scale(.95); }
.seal:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 6px; }
.seal-glow { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(234,214,164,.55), transparent 65%); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.18); opacity: .4; } }
.seal-half { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.5,0,.75,0), opacity .9s; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.seal-half svg { width: 100%; height: 100%; display: block; }
.seal-half.left { clip-path: polygon(0 0, 52% 0, 46% 22%, 55% 40%, 45% 58%, 54% 76%, 48% 100%, 0 100%); }
.seal-half.right { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 54% 76%, 45% 58%, 55% 40%, 46% 22%); }
.seal.broken { pointer-events: none; }
.seal.broken .seal-glow { animation: none; opacity: 0; transition: opacity .3s; }
.seal.broken .left { transform: translate(-60px, 120px) rotate(-38deg); opacity: 0; }
.seal.broken .right { transform: translate(60px, 130px) rotate(42deg); opacity: 0; }
.seal.crack { animation: shake .35s linear; }
@keyframes shake { 25% { transform: rotate(-6deg) scale(1.05); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }

/* ============ HERO ============ */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center; color: var(--ivory); }
.hero-bg { position: absolute; inset: -6% 0 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.15); will-change: transform; }
.opened .hero-bg img { animation: kenburns 22s ease-out both; }
@keyframes kenburns { from { transform: scale(1.25); } to { transform: scale(1.08); } }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8,23,15,.55) 0%, rgba(8,23,15,.05) 28%, rgba(8,23,15,.45) 50%, rgba(13,35,27,.9) 72%, var(--em-900) 100%); }
.hero-content { position: relative; z-index: 2; padding: 0 16px max(110px, 14vh); }
.hero-names { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.hero-names .n1, .hero-names .n2 { font-size: clamp(72px, 21vw, 150px); padding: 0 .15em .08em; }
.hero-names .amp { font-size: clamp(36px, 9vw, 60px); color: var(--gold-l); margin: -.15em 0 -.05em; opacity: 0; }
.hero-names .n1, .hero-names .n2 { clip-path: inset(0 100% 0 0); filter: blur(4px); }
.opened .hero-names .n1 { animation: write 1.8s var(--ease) forwards .5s, shimmer 7s linear infinite; }
.opened .hero-names .n2 { animation: write 1.8s var(--ease) forwards 1.4s, shimmer 7s linear infinite; }
.opened .hero-names .amp { animation: fadeIn 1s ease forwards 1.1s; }
@keyframes write { to { clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes fadeIn { to { opacity: 1; } }
.hero-k, .hero-date { opacity: 0; }
.opened .hero-k { animation: fadeUpIn 1.2s var(--ease) forwards .2s; }
.opened .hero-date { animation: fadeUpIn 1.2s var(--ease) forwards 2.6s; }
@keyframes fadeUpIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-date { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--sans); letter-spacing: .4em; font-size: 13px; color: var(--gold-xl); margin-top: 18px; }
.hero-date .line { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-date .line:last-child { transform: scaleX(-1); }
.scroll-cue { position: absolute; z-index: 2; bottom: 28px; left: 50%; margin-left: -13px; width: 26px; height: 42px; border: 1.5px solid rgba(234,214,164,.6); border-radius: 14px; opacity: 0; }
.opened .scroll-cue { animation: fadeIn 1s forwards 3.2s; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--gold-l); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(12px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }

/* ============ SECTIONS ============ */
.sec { position: relative; padding: 110px 16px; overflow: hidden; }
.wrap { max-width: 600px; margin: 0 auto; position: relative; z-index: 2; }
.center { text-align: center; }
.paper { background: var(--noise), radial-gradient(ellipse at 50% 0, #fffdf8, var(--paper) 60%, #f3ecdf); color: var(--ink); }
.emerald { background: var(--noise), radial-gradient(ellipse 90% 60% at 50% 0, var(--em-700), transparent 70%), linear-gradient(180deg, var(--em-900), var(--em-800) 50%, var(--em-900)); color: var(--ivory); }
.emerald + .paper, .paper + .emerald { box-shadow: 0 -1px 0 rgba(201,169,97,.25); }
.title { font-size: clamp(54px, 14vw, 84px); margin: 0 0 18px; color: var(--em-700); padding: .05em .2em; }
.emerald .title { color: var(--gold-l); }
.lead { font-size: 21px; font-style: italic; color: var(--ink-soft); margin: 14px auto; max-width: 30em; }
.muted { color: var(--ink-soft); font-style: italic; margin: 10px auto; max-width: 32em; }
.light-p { color: rgba(248,243,234,.82); max-width: 32em; margin: 0 auto 26px; font-style: italic; }
.mt { margin-top: 34px; }
.corner { position: absolute; width: 230px; height: 70px; color: var(--em-600); opacity: .35; pointer-events: none; }
.corner.tl { top: 22px; left: -30px; transform: rotate(-12deg); }
.corner.tr { top: 22px; right: -30px; transform: scaleX(-1) rotate(-12deg); }
.corner.br { bottom: 22px; right: -30px; transform: rotate(168deg); }
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-d); margin: 4px 0 40px; }
.divider span { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.divider span:last-child { transform: scaleX(-1); }
.divider svg { width: 18px; height: 18px; fill: currentColor; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease), filter 1.2s; transition-delay: var(--d, 0s); }
[data-reveal="zoom"] { transform: scale(.85); }
[data-reveal="blur"] { transform: none; filter: blur(10px); }
[data-reveal="left"] { transform: translateX(-50px) rotate(-4deg); }
[data-reveal="right"] { transform: translateX(50px) rotate(4deg); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* Monogram */
.monogram { position: relative; width: 160px; height: 160px; margin: 0 auto 26px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.monogram svg { position: absolute; inset: 0; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.monogram span { font-family: var(--serif); font-weight: 300; font-size: 52px; color: var(--em-700); line-height: 1; }
.monogram .mono-bar { width: 1px; height: 54px; background: var(--gold); }
.parents { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0; }
.parents p:last-child { margin: 0; font-size: 18px; line-height: 1.5; }

/* Ticket */
.ticket {
  position: relative; display: flex; margin: 44px auto 12px; max-width: 440px; text-align: left;
  color: var(--ivory);
  filter: drop-shadow(0 18px 30px rgba(13,35,27,.35));
}
.ticket-l, .ticket-r { background: var(--noise), linear-gradient(135deg, var(--em-700), var(--em-900)); }
.ticket-l {
  flex: 1; padding: 22px 22px 20px; border-radius: 14px 0 0 14px;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(201,169,97,.4);
}
.ticket-r {
  width: 112px; border-left: 2px dashed rgba(201,169,97,.55); border-radius: 0 14px 14px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
}
.ticket-guest { font-size: 38px; margin: 2px 0 6px; color: var(--gold-l); }
.ticket-sub { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(248,243,234,.7); }
.ticket-num { font-family: var(--script); font-size: 74px; line-height: .9; color: var(--gold-l); }
.ticket-lbl { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.ticket::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 60%); background-size: 300% 100%; animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 40% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.ticket-cap { font-style: italic; color: var(--ink-soft); margin: 0; }

/* Quote */
.quote-sec { padding: 90px 16px; }
.quote-mark { display: block; font-size: 130px; line-height: .6; color: var(--gold); height: 56px; }
.quote { font-size: clamp(25px, 6.4vw, 34px); font-style: italic; font-weight: 300; line-height: 1.4; margin: 0 auto 22px; max-width: 18em; color: var(--gold-xl); }

/* ============ STORY ============ */
.story { position: relative; max-width: 940px; margin: 0 auto; padding: 10px 0 20px; }
.story::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--gold) 8%, var(--gold) 92%, transparent); opacity: .5; }
.chapter { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; margin-bottom: 70px; text-align: center; }
.chapter:last-child { margin-bottom: 0; }
.polaroid {
  background: #fff; padding: 12px 12px 54px; width: min(78vw, 330px); box-shadow: 0 20px 40px rgba(35,48,42,.22), 0 2px 6px rgba(35,48,42,.12);
  transform: rotate(var(--r, -3deg)); position: relative; cursor: zoom-in; border: 0;
  transition: transform .6s var(--ease);
}
.polaroid:hover { transform: rotate(0) scale(1.03); }
.polaroid img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--script); font-size: 30px; color: var(--em-700); }
.polaroid::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(234,214,164,.7); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.chapter-txt { max-width: 320px; background: var(--paper); position: relative; z-index: 1; padding: 6px 10px; }
.chapter-txt .num { font-family: var(--sans); font-size: 11px; letter-spacing: .35em; color: var(--gold-d); }
.chapter-txt p { margin: 6px 0 0; font-style: italic; color: var(--ink-soft); }
.chapter-dot { position: absolute; left: 50%; top: -24px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 5px var(--paper); }
@media (min-width: 760px) {
  .chapter { grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; text-align: left; }
  .chapter:nth-child(even) .polaroid { order: 2; }
  .chapter:nth-child(even) .chapter-txt { text-align: right; justify-self: end; }
  .chapter-txt { justify-self: start; }
  .chapter-dot { top: 50%; margin-top: -7px; }
}

/* ============ DATE / SCRATCH / COUNTDOWN ============ */
.scratch { position: relative; width: min(100%, 420px); height: 190px; margin: 22px auto 10px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(201,169,97,.5); box-shadow: 0 0 0 6px rgba(201,169,97,.08), 0 25px 50px rgba(0,0,0,.35); }
.scratch-under { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; background: var(--noise), radial-gradient(circle at 50% 50%, var(--em-600), var(--em-900)); }
.sd-day, .sd-month { font-family: var(--sans); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-l); padding: 10px 0; border-top: 1px solid rgba(201,169,97,.5); border-bottom: 1px solid rgba(201,169,97,.5); }
.sd-month { display: flex; flex-direction: column; line-height: 1.5; }
.sd-month b { font-weight: 400; }
.sd-month i { font-style: normal; color: rgba(248,243,234,.7); }
.sd-num { font-size: 120px; line-height: 1; color: var(--gold-xl); padding: 0 16px 0 10px; text-shadow: 0 0 30px rgba(234,214,164,.4); }
.scratch-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .9s; }
.scratch.done .scratch-cv { opacity: 0; pointer-events: none; }
.scratch-hint { font-size: 15px; font-style: italic; color: var(--gold-l); margin: 6px 0 40px; transition: opacity .5s; min-height: 1.6em; }
.countdown-k { margin-top: 10px; }
.countdown { display: flex; justify-content: center; gap: clamp(8px, 3vw, 18px); margin: 14px 0 36px; }
.cd { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cd > span { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.fc { --h: clamp(64px, 19vw, 92px); position: relative; width: clamp(62px, 19vw, 92px); height: var(--h); perspective: 400px; font-family: var(--serif); font-weight: 500; font-size: calc(var(--h) * .52); color: var(--gold-xl); }
.fc .half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #1f4a3a, #183c2f); }
.fc .half span { display: block; height: var(--h); line-height: var(--h); text-align: center; }
.fc .up { top: 0; border-radius: 10px 10px 0 0; box-shadow: inset 0 1px 0 rgba(234,214,164,.25); }
.fc .down { bottom: 0; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #15372a, #112d22); box-shadow: 0 10px 18px rgba(0,0,0,.35); }
.fc .down span { transform: translateY(-50%); }
.fc::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.5); z-index: 3; }
.fc .leaf { position: absolute; top: 0; left: 0; right: 0; height: 50%; transform-origin: 50% 100%; transform-style: preserve-3d; z-index: 2; }
.fc .leaf .half { top: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc .leaf .back { transform: rotateX(180deg); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #15372a, #112d22); }
.fc .leaf .back span { transform: translateY(-50%); }
.fc .leaf.go { animation: flip .62s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes flip { to { transform: rotateX(-180deg); } }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s; position: relative; overflow: hidden;
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn.gold { background: linear-gradient(135deg, #f1dfaa, #c9a961 55%, #ad8a42); color: var(--em-900); box-shadow: 0 10px 24px rgba(201,169,97,.25); }
.btn.gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: btnSheen 4s ease-in-out infinite; }
@keyframes btnSheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn.ghost { border-color: rgba(234,214,164,.55); color: var(--gold-l); background: rgba(255,255,255,.03); }
.btn.ghost:hover { background: rgba(234,214,164,.1); }
.btn.outline { border-color: var(--gold); color: var(--em-700); background: transparent; }
.btn.outline:hover { background: rgba(201,169,97,.12); }
.btn.emerald-b { background: linear-gradient(135deg, var(--em-600), var(--em-800)); color: var(--gold-xl); box-shadow: 0 10px 22px rgba(13,35,27,.25); }

/* ============ PLACES ============ */
.places { display: grid; gap: 26px; margin-top: 30px; }
@media (min-width: 760px) { #lugares .wrap { max-width: 900px; } .places { grid-template-columns: 1fr 1fr; } }
.place {
  position: relative; padding: 46px 24px 30px; border-radius: 200px 200px 18px 18px; background: rgba(255,255,255,.65);
  border: 1px solid rgba(201,169,97,.45); box-shadow: 0 20px 40px rgba(35,48,42,.08);
}
.place::before { content: ''; position: absolute; inset: 8px; border-radius: 192px 192px 12px 12px; border: 1px solid rgba(201,169,97,.25); pointer-events: none; }
.place .icon-ring { margin-bottom: 14px; }
.place h3 { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; margin: 0; color: var(--gold-d); }
.place .hora { font-family: var(--script); font-size: 54px; line-height: 1.1; color: var(--em-700); margin: 6px 0 4px; }
.place .lugar { font-size: 23px; font-weight: 600; margin: 0; }
.place .dir { font-style: italic; color: var(--ink-soft); margin: 2px 0 22px; }
.icon-ring { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--em-700); position: relative; }
.icon-ring::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(201,169,97,.5); animation: spin 30s linear infinite; }
.icon-ring.light { color: var(--gold-l); }
.icon-ring svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ============ TIMELINE ============ */
.timeline { position: relative; max-width: 560px; margin: 30px auto 0; padding: 10px 0; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(201,169,97,.18); }
.tl-line span { position: absolute; inset: 0; background: linear-gradient(var(--gold-l), var(--gold)); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); box-shadow: 0 0 10px var(--gold); }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin: 0 0 30px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--em-800); border: 1px solid var(--gold); color: var(--gold-l); justify-self: center; box-shadow: 0 0 0 6px var(--em-800); position: relative; z-index: 1; transition: background .5s, color .5s, box-shadow .5s; }
.tl-item.in .tl-icon { background: linear-gradient(135deg, #f1dfaa, #c9a961); color: var(--em-900); box-shadow: 0 0 0 6px var(--em-800), 0 0 26px rgba(234,214,164,.45); }
.tl-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tl-time { font-family: var(--script); font-size: clamp(26px, 7.5vw, 34px); white-space: nowrap; color: var(--gold-l); text-align: right; padding-right: 16px; line-height: 1.1; }
.tl-what { font-size: 19px; padding-left: 16px; text-align: left; line-height: 1.3; }
.tl-item:nth-child(odd) .tl-time { order: 3; text-align: left; padding: 0 0 0 16px; }
.tl-item:nth-child(odd) .tl-icon { order: 2; }
.tl-item:nth-child(odd) .tl-what { order: 1; text-align: right; padding: 0 16px 0 0; }

/* ============ DRESS ============ */
.dress-fig { width: 140px; height: 175px; margin: 0 auto 10px; display: block; }
.palette { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.palette span { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(201,169,97,.6), 0 8px 16px rgba(0,0,0,.15); transition: transform .4s var(--ease); }
.palette span:hover { transform: translateY(-6px) scale(1.1); }

/* ============ GIFTS ============ */
.gift-box { border: 1px solid rgba(201,169,97,.45); border-radius: 18px; padding: 28px 18px; background: rgba(255,255,255,.03); }
.gift-sobre { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; font-family: var(--sans); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--gold-l); }
.gift-sobre svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.accounts { margin-top: 24px; display: grid; gap: 14px; animation: fadeUp .7s var(--ease); }
.account { text-align: left; background: linear-gradient(135deg, rgba(234,214,164,.12), rgba(234,214,164,.03)); border: 1px solid rgba(234,214,164,.3); border-radius: 14px; padding: 16px 18px; }
.account p { margin: 0; }
.account .bank { font-family: var(--sans); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.account .num { font-family: var(--sans); font-size: 21px; letter-spacing: .08em; color: var(--gold-xl); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 2px; }
.account .num button { background: none; border: 1px solid rgba(234,214,164,.4); border-radius: 10px; padding: 7px; color: var(--gold-l); display: grid; }
.account .num svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.account .meta { font-size: 16px; color: rgba(248,243,234,.7); font-style: italic; }

/* ============ RSVP ============ */
.rsvp { text-align: left; margin-top: 30px; background: rgba(255,255,255,.7); border: 1px solid rgba(201,169,97,.4); border-radius: 22px; padding: 26px 20px; box-shadow: 0 24px 50px rgba(35,48,42,.08); display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > span { font-family: var(--sans); font-size: 11.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-d); }
.field i { text-transform: none; letter-spacing: 0; font-family: var(--serif); }
.field input, .field textarea { font: inherit; font-size: 19px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(35,48,42,.25); padding: 8px 2px; outline: none; transition: border-color .3s; resize: vertical; border-radius: 0; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field input.err { border-color: var(--wine); animation: shake .35s; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; text-align: center; padding: 12px 8px; border-radius: 12px; border: 1px solid rgba(201,169,97,.5); cursor: pointer; transition: all .3s; font-size: 17px; }
.choice input:checked + span { background: var(--em-700); color: var(--gold-xl); border-color: var(--em-700); box-shadow: 0 8px 18px rgba(13,35,27,.2); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; gap: 18px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); background: none; font-size: 22px; line-height: 1; color: var(--em-700); }
.stepper output { font-family: var(--script); font-size: 44px; min-width: 30px; text-align: center; color: var(--em-700); line-height: 1; }
.rsvp .btn-row { margin-top: 6px; }
.rsvp .btn { flex: 1 1 200px; justify-content: center; }
#cantWrap.off { opacity: .35; pointer-events: none; }

/* ============ NOTES ============ */
.notes { display: grid; gap: 18px; margin-top: 28px; }
.note { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; text-align: left; padding: 20px; border-radius: 16px; border: 1px solid rgba(201,169,97,.3); background: rgba(255,255,255,.03); }
.note .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold-l); }
.note .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.note h3 { margin: 0 0 4px; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.note p { margin: 0; color: rgba(248,243,234,.82); font-size: 18px; }
.hashtag { display: inline-block; margin-top: 6px; font-family: var(--sans); letter-spacing: .06em; color: var(--gold-xl); background: rgba(234,214,164,.12); padding: 3px 10px; border-radius: 6px; border: 0; cursor: pointer; font-size: 15px; }

/* ============ GALLERY ============ */
.gallery { max-width: 980px; margin: 26px auto 0; columns: 2 160px; column-gap: 12px; }
.gallery button { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; background: none; border-radius: 10px; overflow: hidden; break-inside: avoid; position: relative; cursor: zoom-in; box-shadow: 0 12px 26px rgba(35,48,42,.15); }
.gallery img { width: 100%; transition: transform 1.2s var(--ease), filter .6s; }
.gallery button:hover img { transform: scale(1.06); filter: brightness(1.05); }
@media (min-width: 760px) { .gallery { columns: 4; } }

/* ============ FINAL ============ */
.final { position: relative; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; text-align: center; overflow: hidden; color: var(--ivory); cursor: pointer; }
.final-bg { position: absolute; inset: 0; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.final-shade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--em-900) 0%, rgba(8,23,15,.15) 18%, rgba(8,23,15,.1) 38%, rgba(8,23,15,.8) 58%, var(--em-950) 82%); }
.final-content { position: relative; z-index: 2; padding: 80px 16px max(90px, 10vh); }
.final-names { font-size: clamp(58px, 15vw, 120px); margin: 8px 0; padding: 0 .2em; }
.final-thanks { font-size: clamp(40px, 10vw, 64px); color: var(--gold-xl); margin: 0 0 30px; }
.final-tap { font-family: var(--sans); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(234,214,164,.75); }
.foot { background: var(--em-950); color: rgba(234,214,164,.6); text-align: center; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); font-family: var(--sans); font-size: 12px; letter-spacing: .12em; }
.foot p { margin: 0; }
.foot a { color: var(--gold-l); text-decoration: none; border-bottom: 1px solid rgba(234,214,164,.4); }

/* ============ MUSIC ============ */
.music {
  position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 58px; height: 58px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(234,214,164,.6); background: rgba(13,35,27,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.35); opacity: 0; transform: scale(.6); pointer-events: none; transition: all .6s var(--ease);
}
.opened .music { opacity: 1; transform: none; pointer-events: auto; }
.vinyl { width: 42px; height: 42px; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 1.5px, #222 1.5px 3px); display: grid; place-items: center; animation: spin 3.5s linear infinite; }
.vinyl span { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle, var(--em-900) 2px, var(--gold) 2.5px); }
.music[aria-pressed="false"] .vinyl { animation-play-state: paused; opacity: .55; }
.eq { position: absolute; top: -8px; right: -4px; display: flex; gap: 2px; align-items: flex-end; height: 14px; padding: 3px 4px; background: var(--gold); border-radius: 6px; }
.eq i { width: 2px; background: var(--em-900); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; } .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 8px; } }
.music[aria-pressed="false"] .eq i { animation: none; height: 2px; }

/* ============ LIGHTBOX / TOAST ============ */
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(5,14,10,.94); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .4s both; opacity: 0; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 86vh; max-width: 100%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: lbIn .6s var(--ease); touch-action: pan-y; }
@keyframes lbIn { from { transform: scale(.92); opacity: 0; } }
.lightbox button { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(234,214,164,.35); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-l); }
.lightbox button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.lb-x { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; margin-top: -23px; }
.lb-prev svg { transform: scaleX(-1); }
.lb-next { right: 12px; top: 50%; margin-top: -23px; }
.toast { position: fixed; left: 50%; bottom: 90px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--em-900); color: var(--gold-xl); border: 1px solid var(--gold); padding: 10px 18px; border-radius: 999px; font-family: var(--sans); font-size: 13px; letter-spacing: .05em; transition: all .4s var(--ease); white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-names .n1, .hero-names .n2 { clip-path: none; filter: none; }
  .hero-k, .hero-date, .hero-names .amp { opacity: 1; }
}