:root {
  --rose: #ff4d8d;
  --deep: #c2185b;
  --pink: #ff9cc2;
  --blush: #ffd6e5;
  --gold: #ffd27a;
  --ink: #fff4f8;
  --muted: rgba(255, 228, 238, 0.72);
  --script: 'Great Vibes', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --hand: 'Caveat', cursive;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  background: radial-gradient(120% 85% at 50% 0%, #2c0a27 0%, #14030f 55%, #07010a 100%);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* ── background ─────────────────────────────────────────── */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute;
  width: 90vmax; height: 90vmax;
  border-radius: 50%;
  opacity: 0.5;
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { left: -40vmax; top: -30vmax; background: radial-gradient(circle, rgba(255, 60, 140, 0.32), transparent 62%); }
.aurora span:nth-child(2) { right: -45vmax; top: 10vh; background: radial-gradient(circle, rgba(140, 50, 255, 0.22), transparent 62%); animation-duration: 32s; animation-delay: -8s; }
.aurora span:nth-child(3) { left: -10vmax; bottom: -55vmax; background: radial-gradient(circle, rgba(255, 170, 90, 0.16), transparent 62%); animation-duration: 38s; animation-delay: -15s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8vmax, 6vmax) scale(1.15); }
}

#gl, #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl { z-index: 1; }
#fx { z-index: 5; pointer-events: none; }

#ui {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(6, 0, 8, 0.55) 100%);
}

/* ── screens ────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: calc(28px + var(--safe-t)) 22px calc(52px + var(--safe-b));
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1.2s ease; }

.stack { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; }

/* ── text ───────────────────────────────────────────────── */
.line {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.line:not(.in) { pointer-events: none; }
.line.in { opacity: 1; transform: translate3d(0, 0, 0); }

.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(46px, 13.5vw, 86px);
  line-height: 1.15;
  padding: 0 0.15em;
  background: linear-gradient(90deg, #ffd6e5, #ff7fb0, #ffd27a, #ff7fb0, #ffd6e5);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% center; } }

.serif {
  font-style: italic;
  font-size: clamp(19px, 5.3vw, 26px);
  line-height: 1.4;
  color: var(--blush);
  margin: 3px 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.tiny { font-size: 14px; letter-spacing: 0.08em; color: var(--muted); margin-top: 14px; }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 26px;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ff5a96, var(--deep));
  border: 1px solid rgba(255, 210, 230, 0.5);
  box-shadow: 0 10px 40px rgba(255, 60, 130, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 60%, 100% { transform: translateX(120%); } }
.btn.ghost { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; }
.btn.ghost::after { display: none; }
.btn.glow.in { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 10px 40px rgba(255, 60, 130, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 10px 60px rgba(255, 60, 130, 0.85), 0 0 0 6px rgba(255, 120, 170, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
.btn:active { transform: scale(0.97); }

#mute {
  position: fixed;
  z-index: 6;
  top: calc(12px + var(--safe-t));
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 210, 230, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}
#mute.show { opacity: 0.85; pointer-events: auto; }

#hint {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(16px + var(--safe-b));
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}
#hint.show { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }

/* ── loader ─────────────────────────────────────────────── */
#loader { justify-content: center; }
.loader-heart { width: 54px; fill: var(--rose); filter: drop-shadow(0 0 16px var(--rose)); animation: breathe 2.4s ease-in-out infinite; }
.loader-text { margin-top: 18px; font-style: italic; font-size: 17px; color: var(--muted); }

/* ── names ──────────────────────────────────────────────── */
#names { justify-content: space-between; }
#names .top { min-height: 40px; }
.caption {
  min-height: 130px;
  max-width: 460px;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.caption.in { opacity: 1; transform: translate3d(0, 0, 0); }
.caption .emoji { display: block; font-size: 36px; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(255, 120, 170, 0.6)); }
.caption .script { font-size: clamp(44px, 12vw, 76px); display: block; }

/* ── sorry ──────────────────────────────────────────────── */
#sorry .field { position: absolute; inset: calc(10px + var(--safe-t)) 0 30% 0; }
.word {
  position: absolute;
  white-space: nowrap;
  color: var(--blush);
  text-shadow: 0 0 18px rgba(255, 90, 150, 0.65);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), left 1.5s ease-in, top 1.5s ease-in;
}
.word.serifw { font-style: italic; }
.word.scriptw { font-family: var(--script); color: #ffb3cf; }
.word.in { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
.word.gather { left: 50% !important; top: 46% !important; opacity: 0; transform: translate(-50%, -50%) scale(0.3); }

/* ── letter ─────────────────────────────────────────────── */
#letter { justify-content: center; }
.env-wrap { display: flex; flex-direction: column; align-items: center; transition: opacity 0.6s ease, transform 0.8s ease; }
.env-wrap.away { opacity: 0; transform: translateY(40px) scale(0.9); pointer-events: none; }
.envelope {
  position: relative;
  display: block;
  width: min(80vw, 340px);
  aspect-ratio: 1.5;
  perspective: 900px;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.envelope > span { position: absolute; display: block; }
.env-back { inset: 0; border-radius: 10px; background: linear-gradient(160deg, #f4b7cb, #d9718f); }
.env-paper {
  left: 7%; right: 7%; top: 8%; bottom: 8%;
  z-index: 1;
  border-radius: 6px;
  background: #fff8f2;
  display: grid;
  place-items: start center;
  padding-top: 10%;
  font-family: var(--script);
  font-size: 28px;
  color: #c2185b;
  transition: transform 1.2s cubic-bezier(0.3, 0.8, 0.3, 1) 0.45s;
}
.env-front {
  inset: 0;
  z-index: 2;
  border-radius: 10px;
  background: linear-gradient(170deg, #fbd2df, #ee9fb9);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  left: 0; right: 0; top: 0;
  height: 62%;
  z-index: 3;
  background: linear-gradient(180deg, #f6c2d3, #e891ae);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.9s ease, z-index 0s linear 0.45s;
}
.seal {
  left: 50%; top: 58%;
  z-index: 4;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  font-size: 26px;
  color: #ffd6e5;
  background: radial-gradient(circle at 35% 30%, #ff6b98, #a50f3a 72%);
  box-shadow: 0 4px 14px rgba(120, 0, 30, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
  transition: opacity 0.4s ease;
}
.envelope.open { animation: none; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.open .env-paper { transform: translateY(-58%); }
.envelope.open .seal { opacity: 0; }
.env-hint { margin-top: 30px; animation: breathe 2.4s ease-in-out infinite; }

.letter-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 540px);
  max-height: calc(100% - 124px - var(--safe-t) - var(--safe-b));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 30px 24px 28px;
  border-radius: 16px;
  text-align: left;
  color: #4a1830;
  font-family: var(--hand);
  font-size: clamp(22px, 5.8vw, 26px);
  line-height: 34px;
  background:
    repeating-linear-gradient(transparent 0 33px, rgba(194, 24, 91, 0.12) 33px 34px),
    linear-gradient(180deg, #fffaf4, #fff1f4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.94);
  pointer-events: none;
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.letter-card.show { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.letter-body h2 { font-family: var(--script); font-weight: 400; font-size: 40px; line-height: 1.3; color: var(--deep); margin-bottom: 6px; }
.letter-body p { margin-bottom: 14px; min-height: 0; }
.letter-body p:empty { display: none; }
.letter-body .signoff { margin: 20px 0 0; }
.letter-body .signature { font-family: var(--script); font-size: 38px; color: var(--deep); margin: 0 0 6px; }
.letter-body .btn { display: block; margin: 20px auto 4px; font-size: 19px; }

/* ── promises ───────────────────────────────────────────── */
#promises { justify-content: space-between; }
#promises .head .script { font-size: clamp(44px, 12vw, 72px); }
#promises .head .serif { font-size: clamp(17px, 4.6vw, 22px); }
.hearts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 6px;
  width: min(92vw, 400px);
}
.pheart {
  width: clamp(70px, 22vw, 96px);
  aspect-ratio: 1;
  margin: auto;
  color: var(--c);
  filter: drop-shadow(0 0 14px var(--c));
  animation: bob 3s ease-in-out infinite;
  animation-delay: var(--d);
}
.pheart svg { width: 100%; height: 100%; display: block; }
.pheart.popped { animation: pop 0.45s ease-out forwards; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
@keyframes pop { 40% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.promise-card {
  width: min(92vw, 460px);
  min-height: 108px;
  padding: 18px 22px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-style: italic;
  font-size: clamp(20px, 5.6vw, 26px);
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 200, 225, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.promise-card.in { opacity: 1; transform: none; }
.promise-card.ghosted { opacity: 0.5; transform: none; color: var(--muted); }

/* ── question ───────────────────────────────────────────── */
.btn-row { display: flex; gap: 18px; align-items: center; justify-content: center; min-height: 90px; margin-top: 14px; }
.btn-row .btn { margin-top: 0; }
#yes { transform: scale(var(--s, 1)); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
#no { white-space: nowrap; }
#no.loose { position: fixed; z-index: 7; transition: left 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), top 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.4s, transform 0.4s; }
#no.gone { opacity: 0; transform: scale(0); pointer-events: none; }

/* ── final ──────────────────────────────────────────────── */
.hug {
  --p: 0;
  position: relative;
  width: 148px;
  height: 148px;
  margin-top: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  touch-action: none;
  background: conic-gradient(var(--rose) calc(var(--p) * 1turn), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 0 calc(20px + var(--p) * 50px) rgba(255, 70, 140, calc(0.3 + var(--p) * 0.5));
}
.hug::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3d0f2f, #1a0515); }
.hug > span { position: relative; padding: 0 18px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.hug .em { display: block; font-size: 34px; margin-bottom: 4px; transition: transform 0.2s; }
.hug.holding .em { transform: scale(1.25); }
.hug.done { pointer-events: none; }
.sig { font-family: var(--hand); font-size: 20px; color: var(--muted); margin-top: 18px; }
.replay { margin-top: 10px; font-size: 15px; letter-spacing: 0.1em; color: var(--muted); padding: 8px 14px; }

@media (max-height: 640px) {
  .script { font-size: clamp(40px, 11vw, 64px); }
  .serif { font-size: 18px; }
  .btn { margin-top: 18px; padding: 13px 28px; font-size: 19px; }
  .hug { width: 124px; height: 124px; }
  .promise-card { min-height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .btn::after, .envelope, .pheart { animation: none; }
}