/* =========================
   🌙 BASE
========================= */
body {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  transition: background 0.8s ease, color 0.5s ease;
  overflow-x: hidden;
}

/* =========================
   🌸 LIGHT THEME
========================= */
body.light {
  background: linear-gradient(135deg, #FAF3EE, #F6E7E1);
  color: #5A4036;
}

/* =========================
   🌙 DARK THEME
========================= */
body.dark {
  background: linear-gradient(135deg, #1A1412, #241B18);
  color: #FAF3EE;
}

/* =========================
   ✨ BACKGROUND EFFECTS
========================= */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* LIGHT MODE BG */
body.light .gradient {
  background:
    radial-gradient(circle at 20% 30%, #FDEAEF 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #E8D8F8 0%, transparent 40%);
}

/* DARK MODE BG */
body.dark .gradient {
  background:
    radial-gradient(circle at 20% 30%, #3A2A2A 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #2A2238 0%, transparent 40%);
}

/* GLOW */
.glow::before,
.glow::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
}

body.light .glow::before {
  background: #E8B4BC;
  top: 10%;
  left: 10%;
}

body.light .glow::after {
  background: #D8C4F0;
  bottom: 10%;
  right: 10%;
}

body.dark .glow::before {
  background: #8A5A6A;
  top: 10%;
  left: 10%;
}

body.dark .glow::after {
  background: #5A4A8A;
  bottom: 10%;
  right: 10%;
}

/* PARTICLES */
.sparkles::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(#ffffff55 1px, transparent 1px);
  background-size: 60px 60px;
  animation: sparkleMove 60s linear infinite;
}

/* =========================
   📜 LETTER
========================= */
#letterContainer {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.letter {
  max-width: 850px;
  padding: 50px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  animation: breathe 8s infinite ease-in-out;
}

/* LIGHT LETTER */
body.light .letter {
  background: rgba(255,255,255,0.9);
  color: #5A4036;
}

/* DARK LETTER */
body.dark .letter {
  background: rgba(30,25,23,0.85);
  color: #F5EDE8;
}

/* =========================
   ✍️ TEXT
========================= */
#letterText {
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  line-height: 2.2;
  white-space: pre-wrap;
}

/* =========================
   🖊️ CURSOR
========================= */
.pen-cursor {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  margin-left: 4px;
  animation: blink 1.2s infinite;
}

/* =========================
   ✨ HIGHLIGHT
========================= */
.highlight:hover {
  color: #D48FA3;
  text-shadow: 0 0 8px rgba(212,143,163,0.5);
}

/* =========================
   💋 END
========================= */
.kiss {
  text-align: center;
  margin-top: 60px;
  font-family: 'Great Vibes', cursive;
  font-size: 44px;
  color: #D48FA3;
  animation: kissReveal 2s ease forwards;
}

/* =========================
   🔘 BUTTONS
========================= */
.skip-btn,
.theme-btn {
  position: fixed;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: 0.3s;
}

.skip-btn {
  bottom: 20px;
  right: 20px;
}

.theme-btn {
  top: 20px;
  right: 20px;
  border-radius: 50%;
}

/* LIGHT BUTTON */
body.light .theme-btn {
  background: rgba(255,255,255,0.7);
  color: #5A4036;
}

/* DARK BUTTON */
body.dark .theme-btn {
  background: rgba(0,0,0,0.4);
  color: #fff;
}

/* =========================
   🎬 ANIMATIONS
========================= */
@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

@keyframes blink {
  50% { opacity: 0.2; }
}

@keyframes sparkleMove {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

@keyframes kissReveal {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================
   🧩 UTIL
========================= */
.hidden {
  display: none;
}