:root {
  --background: 330 100% 98%;
  --foreground: 318 28% 18%;
  --primary: 326 67% 64%;
  --secondary: 270 58% 87%;
  --muted: 327 32% 92%;
  --destructive: 0 72% 58%;
  --border: 317 24% 84%;
  --card: 0 0% 100%;

  --shadow-sm: 0 10px 30px rgba(141, 93, 136, 0.09);
  --shadow-md: 0 16px 40px rgba(141, 93, 136, 0.14);
  --shadow-lg: 0 24px 70px rgba(108, 63, 125, 0.18);

  --transition-fast: 180ms ease;
  --transition-smooth: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
}

.dark {
  --background: 270 24% 10%;
  --foreground: 320 38% 94%;
  --primary: 326 74% 72%;
  --secondary: 264 28% 24%;
  --muted: 266 20% 17%;
  --destructive: 0 78% 65%;
  --border: 270 16% 24%;
  --card: 270 19% 14%;

  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at 15% 20%, hsla(var(--primary), 0.16), transparent 24%),
    radial-gradient(circle at 85% 15%, hsla(var(--secondary), 0.28), transparent 30%),
    radial-gradient(circle at 50% 85%, hsla(var(--primary), 0.1), transparent 28%),
    hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

.font-serif {
  font-family: 'Cormorant Garamond', serif;
}

.hero-glow {
  background:
    radial-gradient(circle at 50% 30%, hsla(var(--primary), 0.25), transparent 30%),
    radial-gradient(circle at 20% 70%, hsla(var(--secondary), 0.35), transparent 26%),
    radial-gradient(circle at 80% 60%, hsla(var(--primary), 0.15), transparent 26%);
  filter: blur(12px);
}

.glass-panel {
  background: linear-gradient(180deg, hsla(var(--card), 0.78), hsla(var(--card), 0.62));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.chip-button {
  border: 1px solid hsl(var(--border));
  background: hsla(var(--card), 0.76);
  color: hsl(var(--foreground));
  padding: 0.7rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.chip-button:hover {
  transform: translateY(-2px);
  background: hsla(var(--primary), 0.12);
}

.progress-fill {
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--primary)));
  box-shadow: 0 0 18px hsla(var(--primary), 0.45);
}

.typing-cursor {
  display: inline-block;
  margin-left: 2px;
  color: hsl(var(--primary));
  animation: blink 1s step-end infinite;
}

.quote-fade {
  animation: quoteFade 500ms ease;
}

.memory-card,
.closing-panel,
.quote-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.memory-card:hover,
.closing-panel:hover,
.quote-card:hover {
  transform: translateY(-4px);
}

.closing-panel {
  background:
    radial-gradient(circle at top right, hsla(var(--primary), 0.12), transparent 35%),
    linear-gradient(180deg, hsla(var(--card), 0.9), hsla(var(--card), 0.72));
}

.reveal-hidden {
  opacity: 0;
  transform: translateY(28px);
}

.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up {
  animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.float-particle {
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0 16px hsla(var(--primary), 0.4);
  opacity: 0.65;
}

.vault-panel {
  transform-origin: center;
}

.vault-locked {
  animation: vaultEnter 320ms ease;
}

.vault-opened {
  animation: unlockPulse 700ms ease;
}

.unlock-reveal {
  animation: fadeUp 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vault-overlay {
  background:
    radial-gradient(circle at top, hsla(var(--primary), 0.12), transparent 35%),
    linear-gradient(180deg, hsla(var(--background), 0.8), hsla(var(--card), 0.85));
}

.skeleton {
  background: linear-gradient(90deg, hsla(var(--muted), 0.7), hsla(var(--card), 0.95), hsla(var(--muted), 0.7));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.surprise-pop {
  animation: surpriseIn 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.letter-bg-container {
  background-image: url('https://storage.googleapis.com/genmb-static/user-uploads/67a6279f-6799-4674-884b-090623696884/2025-02-12T10:04:19.506Z-input_file_4.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes quoteFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(-110vh) scale(1.15);
    opacity: 0;
  }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes vaultEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes unlockPulse {
  0% {
    box-shadow: 0 0 0 0 hsla(var(--primary), 0.32);
    transform: scale(0.985);
  }
  60% {
    box-shadow: 0 0 0 24px hsla(var(--primary), 0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes surpriseIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 640px) {
  .glass-panel {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}