/* ============================================================
   ShraddhaVerse — Design Tokens
   Palette: Aurora Rose
   --sv-ink      #2B1620  (deep plum-black, text on light)
   --sv-rose     #E85D8A  (primary rose)
   --sv-rose-2   #FF9AC1  (soft pink accent)
   --sv-gold     #E8B96A  (soft gold accent)
   --sv-violet   #8B5FBF  (aurora purple)
   --sv-cream    #FFF6F2  (background base)
   Display face: 'Fraunces' (romantic serif with personality)
   Body face:    'Manrope' (clean, warm sans)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --sv-ink: #2B1620;
  --sv-rose: #E85D8A;
  --sv-rose-2: #FF9AC1;
  --sv-gold: #E8B96A;
  --sv-violet: #8B5FBF;
  --sv-cream: #FFF6F2;
  --sv-glass: rgba(255, 255, 255, 0.55);
  --sv-glass-border: rgba(255, 255, 255, 0.65);
}

* { box-sizing: border-box; }

body {
  font-family: 'Manrope', sans-serif;
  color: var(--sv-ink);
  background: var(--sv-cream);
  overflow-x: hidden;
}

.font-display {
  font-family: 'Fraunces', serif;
}

/* ---------------- Aurora animated background ---------------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(232,93,138,0.35), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 20%, rgba(139,95,191,0.30), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(232,185,106,0.28), transparent 60%),
    var(--sv-cream);
  background-size: 200% 200%;
  animation: auroraShift 22s ease-in-out infinite;
}
@keyframes auroraShift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50% { background-position: 20% 30%, 80% 40%, 60% 60%; }
}

.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -1;
  animation: blobFloat 18s ease-in-out infinite;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.08); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ---------------- Glassmorphism ---------------- */
.glass {
  background: var(--sv-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--sv-glass-border);
  box-shadow: 0 8px 32px rgba(139, 95, 191, 0.12);
}

.glass-card {
  background: var(--sv-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--sv-glass-border);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px rgba(139, 95, 191, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(232, 93, 138, 0.22);
}

/* ---------------- Buttons ---------------- */
.btn-romance {
  background: linear-gradient(135deg, var(--sv-rose), var(--sv-violet));
  color: white;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(232, 93, 138, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-romance:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 38px rgba(232, 93, 138, 0.5);
  filter: brightness(1.05);
}
.btn-romance:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(232,93,138,0.35);
  color: var(--sv-ink);
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  font-weight: 600;
  transition: all 0.25s ease;
}
.btn-ghost:hover {
  background: rgba(232,93,138,0.12);
  border-color: var(--sv-rose);
}

/* ---------------- Glow text / heart pulse ---------------- */
.glow-text {
  text-shadow: 0 0 20px rgba(232, 93, 138, 0.45), 0 0 40px rgba(139, 95, 191, 0.25);
}

.heart-pulse {
  display: inline-block;
  animation: heartPulse 1.4s ease-in-out infinite;
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

/* ---------------- Floating hearts / sparkles (JS injects these) ---------------- */
.floating-heart {
  position: fixed;
  bottom: -40px;
  pointer-events: none;
  z-index: 5;
  animation: floatUp linear forwards;
  opacity: 0.85;
}
@keyframes floatUp {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 40px)) rotate(25deg); opacity: 0; }
}

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 5;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--sv-gold));
  animation: sparkleFade 1.6s ease-out forwards;
}
@keyframes sparkleFade {
  0% { transform: scale(0); opacity: 1; }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* ---------------- Page transition ---------------- */
.page-enter {
  animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- Nav ---------------- */
.nav-link {
  position: relative;
  color: var(--sv-ink);
  font-weight: 600;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.nav-link:hover, .nav-link.active { opacity: 1; }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--sv-rose), var(--sv-gold));
  border-radius: 2px;
}

/* ---------------- Stat card number ---------------- */
.stat-number {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  background: linear-gradient(135deg, var(--sv-rose), var(--sv-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------- Chat bubbles ---------------- */
.bubble-user {
  background: linear-gradient(135deg, var(--sv-rose), var(--sv-rose-2));
  color: white;
  border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
}
.bubble-ai {
  background: var(--sv-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--sv-glass-border);
  border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
}
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sv-rose);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ---------------- Paper letter card ---------------- */
.paper-card {
  background: linear-gradient(180deg, #fffdf9, #fff6ef);
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(139,95,191,0.18), inset 0 0 0 1px rgba(232,185,106,0.35);
  font-family: 'Fraunces', serif;
  white-space: pre-line;
}

/* ---------------- Jar ---------------- */
.jar-glow {
  filter: drop-shadow(0 0 25px rgba(232,185,106,0.55));
}

/* ---------------- Timeline ---------------- */
.timeline-line {
  background: linear-gradient(180deg, var(--sv-rose), var(--sv-violet), var(--sv-gold));
}
.timeline-dot {
  box-shadow: 0 0 0 6px rgba(232,93,138,0.15), 0 0 20px rgba(232,93,138,0.5);
}

/* ---------------- Masonry ---------------- */
.masonry {
  columns: 1;
  column-gap: 1.25rem;
}
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry > * {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

/* ---------------- Scrollbar ---------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sv-rose-2); border-radius: 4px; }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------- Focus visibility ---------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sv-rose);
  outline-offset: 2px;
}