:root {
  --bg-1: #1a0a15;
  --bg-2: #2a1020;
  --bg-3: #3d1226;
  --ink: #fff5ec;
  --muted: #e8c9b8;
  --dim: #b89a8a;
  --coral: #ff8a6b;
  --peach: #ffc48a;
  --gold: #ffd88a;
  --rose: #ff6b8a;
  --plum: #7a3d6b;
  --grad-warm: linear-gradient(135deg, #ff6b8a 0%, #ff8a6b 40%, #ffb26b 75%, #ffd88a 100%);
  --grad-soft: linear-gradient(180deg, #2a1020 0%, #1a0a15 100%);
  --shadow-warm: 0 30px 90px -20px rgba(255, 138, 107, 0.35);
  --stroke: rgba(255, 220, 200, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255, 107, 138, 0.25), transparent 60%),
    radial-gradient(1000px 700px at 90% 90%, rgba(255, 178, 107, 0.22), transparent 60%),
    radial-gradient(800px 600px at 50% 50%, rgba(122, 61, 107, 0.35), transparent 65%),
    var(--bg-1);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }

.icon { font-style: normal; display: inline-flex; align-items: center; vertical-align: -0.15em; }
.icon::before { font-size: 1em; }

.serif { font-family: 'Fraunces', 'Instrument Serif', Georgia, serif; font-weight: 300; letter-spacing: -0.02em; }
.italic { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.script { font-family: 'Caveat', cursive; font-weight: 500; }

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px;
  background: var(--grad-warm); color: #2a0510;
  text-decoration: none; font-weight: 600; font-size: 0.98rem;
  border: 0; cursor: pointer;
  box-shadow: var(--shadow-warm);
  transition: transform .4s cubic-bezier(.2,.9,.3,1.4), box-shadow .35s ease, filter .3s ease;
}
.btn:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.08); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--stroke); color: var(--ink);
  background: rgba(255,255,255,0.04); backdrop-filter: blur(8px);
  text-decoration: none; font-weight: 500; cursor: pointer;
  font-size: 0.95rem;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,220,200,0.28); transform: translateY(-2px); }
.btn-ghost[disabled] { opacity: 0.35; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

.app { position: relative; min-height: 100dvh; overflow: hidden; }
.stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 60px);
  z-index: 2;
  animation: stageIn .8s ease both;
}
.stage[hidden] { display: none; }
@keyframes stageIn { from { opacity: 0; } to { opacity: 1; } }

.eyebrow {
  color: var(--peach); font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; font-size: 11px; margin: 0 0 24px; opacity: 0.9;
  display: inline-flex; align-items: center; gap: 8px;
}

.intro-inner { text-align: center; max-width: 720px; width: 100%; }
.intro-title {
  font-size: clamp(1.6rem, 4.4vw, 2.8rem);
  line-height: 1.2; margin: 0 0 56px; font-weight: 300;
  background: linear-gradient(180deg, #fff5ec 0%, #ffd8b8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes ltrIn { to { opacity: 1; transform: translateY(0); } }

.type-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: var(--peach);
  border-radius: 1px;
  animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.envelope-wrap {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 22px;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  opacity: 0; transform: scale(0.7); animation: envIn 1.2s cubic-bezier(.16,1,.3,1) 1s forwards;
}
@keyframes envIn { to { opacity: 1; transform: scale(1); } }
.halo {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,107,0.55), transparent 65%);
  filter: blur(30px); top: 50%; left: 50%;
  transform: translate(-50%, -55%) scale(1);
  animation: haloPulse 5.5s ease-in-out infinite;
  z-index: 0; pointer-events: none;
  transition: transform 1.2s cubic-bezier(.2,.9,.3,1.2), opacity .8s ease;
}
.halo.opening { transform: translate(-50%, -55%) scale(2.2); opacity: 0; }
@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -55%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -55%) scale(1.12); opacity: 1; }
}
.env {
  position: relative; width: min(360px, 72vw); z-index: 1;
  animation: envFloat 6.5s cubic-bezier(.45,0,.55,1) infinite;
  transition: transform 1.3s cubic-bezier(.4,.05,.2,1), opacity .8s ease;
  filter: drop-shadow(0 30px 50px rgba(255,107,138,0.35));
  will-change: transform;
}
.env img { width: 100%; height: auto; }
.env.opening {
  transform: translateY(-30px) scale(1.15) rotate(-3deg);
  opacity: 0;
  animation: none;
}
@keyframes envFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(1.2deg);
  }
}


.envelope-wrap:hover .env { transform: translateY(-6px) scale(1.03); }
.tap-hint {
  font-family: 'Caveat', cursive; font-size: 1.4rem; color: var(--peach);
  letter-spacing: 0.02em; z-index: 1; transition: opacity .4s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.tap-hint.hide { opacity: 0; }

.letter-stage { padding: 40px 20px; }
.letter {
  position: relative; max-width: 640px; width: 100%;
  background: linear-gradient(180deg, #fff5e6 0%, #ffe8cf 100%);
  color: #3d1e14;
  border-radius: 6px;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 60px);
  box-shadow:
    0 40px 100px -30px rgba(255,107,138,0.4),
    0 20px 40px -20px rgba(0,0,0,0.4),
    inset 0 0 60px rgba(255,138,107,0.08);
  transform: rotate(-0.6deg);
  animation: letterIn 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes letterIn { from { opacity: 0; transform: translateY(40px) rotate(-0.6deg); } to { opacity: 1; transform: translateY(0) rotate(-0.6deg); } }
.letter::before, .letter::after {
  content: ''; position: absolute; inset: 8px;
  border: 1px dashed rgba(122,61,107,0.25); border-radius: 4px; pointer-events: none;
}
.letter-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.date { color: #8a4a3a; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; }
.seal { color: #d1476a; font-size: 1.4rem; display: inline-flex; }
.letter-body { position: relative; z-index: 1; }
.letter-body .line {
  margin: 0 0 14px; font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.6;
  color: #4a2618;
  min-height: 1.6em;
}
.letter-body .line.hand {
  font-family: 'Caveat', cursive; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #b13a5a;
  margin-bottom: 20px;
}
.letter-body .line .type-cursor { background: #b13a5a; }
.signoff {
  margin-top: 26px; font-size: clamp(1.6rem, 3.2vw, 2.1rem); color: #b13a5a; text-align: right;
  font-family: 'Caveat', cursive; font-weight: 500;
  min-height: 1.4em;
}
.letter-cta { text-align: center; margin-top: 34px; position: relative; z-index: 1; opacity: 0; transition: opacity .8s ease; }
.letter-cta.show { opacity: 1; }
@keyframes fadeIn { to { opacity: 1; } }

.memories { flex-direction: column; gap: 28px; padding: 60px 24px; }
.mem-header { text-align: center; }
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,220,200,0.25); transition: all .4s ease; }
.dot.on { background: var(--grad-warm); width: 24px; border-radius: 999px; }

.mem-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 56px);
  align-items: center; max-width: 980px; width: 100%;
  animation: memIn .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes memIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.polaroid {
  background: #fff5ec; padding: 14px 14px 20px; border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 10px 30px -10px rgba(255,107,138,0.35);
  transform: rotate(-2.5deg); transition: transform .5s cubic-bezier(.2,.9,.3,1.2);
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); }
.photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; background: #2a1020; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.caption { color: #8a4a3a; text-align: center; margin: 12px 0 0; font-size: 1.3rem; font-family: 'Caveat', cursive; font-weight: 500; }
.mem-copy h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); margin: 0 0 16px; font-weight: 300; letter-spacing: -0.025em; font-family: 'Fraunces', serif; }
.mem-copy p { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 44ch; }

.mem-nav { display: flex; gap: 14px; margin-top: 8px; align-items: center; }

.finale { flex-direction: column; text-align: center; padding: 40px 24px; }
.finale-glow {
  position: absolute; top: 50%; left: 50%; width: 900px; height: 900px;
  max-width: 140vw; max-height: 140vw;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(255,138,107,0.5), rgba(255,107,138,0.25) 40%, transparent 65%);
  filter: blur(30px); opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.2,.7,.2,1);
}
.finale-glow.on { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
.finale-inner { position: relative; z-index: 2; max-width: 820px; }

.finale-title {
  font-size: clamp(2.4rem, 8vw, 5.4rem); line-height: 1; margin: 0 0 32px;
  letter-spacing: -0.03em; font-weight: 300; perspective: 800px;
}
.finale-title .word { display: inline-block; }
.finale-title .word.accent {
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
}
.finale-title .type-cursor { background: var(--peach); }
.finale-lead {
  color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  max-width: 60ch; margin: 0 auto 8px; line-height: 1.7;
  opacity: 0; animation: fadeIn 1s ease 1.6s forwards;
}
.finale-lead em {
  font-style: normal; background: var(--grad-warm); -webkit-background-clip: text;
  background-clip: text; color: transparent; font-weight: 600;
}
.signoff-2 { font-size: clamp(2rem, 4.4vw, 2.8rem); color: var(--peach); margin: 26px 0 8px; opacity: 0; animation: fadeIn 1s ease 2.1s forwards; display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.finale-cta { margin-top: 20px; opacity: 0; animation: fadeIn 1s ease 2.3s forwards; }

.footer {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: var(--dim); font-size: 0.82rem; letter-spacing: 0.08em;
  z-index: 3; white-space: nowrap;
  opacity: 0; animation: fadeIn 1s ease 2.6s forwards;
}
.footer a {
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text;
  color: transparent; text-decoration: none; font-weight: 600; border-bottom: 1px dashed rgba(255,138,107,0.4);
  margin-left: 4px;
}
.footer a:hover { border-color: rgba(255,138,107,0.9); }

@media (max-width: 720px) {
  .mem-card { grid-template-columns: 1fr; text-align: center; }
  .mem-copy p { margin-left: auto; margin-right: auto; }
  .polaroid { max-width: 320px; margin: 0 auto; }
  .mem-nav { flex-direction: column; width: 100%; }
  .mem-nav .btn, .mem-nav .btn-ghost { width: 100%; justify-content: center; }
  .letter { transform: none; }
}