* {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
  background-size: 400% 400%; /* allows smooth animation */
  animation: gradientShift 30s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Soft gradient animation */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* FALLING ANIMATION SYSTEM */
.flowers { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* Daisy flower: yellow middle + lavender petals + glow */
.daisy {
  position: relative;
  width: 24px;
  height: 24px;
  background: #ffd400; /* yellow middle */
  border-radius: 50%;
  margin: 10px;
  box-shadow: 
    -15px 0 #cba6f7,
    15px 0 #cba6f7,
    0 -15px #cba6f7,
    0 15px #cba6f7,
    -10px -10px #cba6f7,
    10px -10px #cba6f7,
    -10px 10px #cba6f7,
    10px 10px #cba6f7,
    0 0 12px rgba(203,166,247,0.6); /* lavender glow */
}

/* Cherry blossom style: soft pink petals + glow */
.blossom {
  position: relative;
  width: 24px;
  height: 24px;
  background: darkred; /* pastel pink */
  border-radius: 50%;
  margin: 10px;
  box-shadow: 
    -15px 0 #ffb7c5,
    15px 0 #ffb7c5,
    0 -15px #ffb7c5,
    0 15px #ffb7c5,
    0 0 12px rgba(255,183,197,0.6); /* pink glow */
}

/* Sunflower style: muted gold petals + glow */
.sunflower {
  position: relative;
  width: 24px;
  height: 24px;
  background: #6b4226; /* soft brown center */
  border-radius: 50%;
  margin: 10px;
  box-shadow: 
    -15px 0 #f7d774,
    15px 0 #f7d774,
    0 -15px #f7d774,
    0 15px #f7d774,
    -10px -10px #f7d774,
    10px -10px #f7d774,
    -10px 10px #f7d774,
    10px 10px #f7d774,
    0 0 12px rgba(247,215,116,0.6); /* golden glow */
}

.daisy, .heart, .blossom, .sunflower {
  position: absolute;
  top: -50px;
  animation: fallDown var(--duration, 18s) linear infinite;
  opacity: 0;
  z-index: 1;
}

/* Falling with sway */
@keyframes fallDown {
  0%   { transform: translateY(-120vh) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translateY(60vh) translateX(var(--sway)) rotate(180deg); opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(120vh) translateX(calc(var(--sway) * -1)) rotate(360deg); opacity: 0; }
}

/* Gentle rotation */
@keyframes spinSlow {
  0%   { rotate: 0deg; }
  50%  { rotate: 180deg; }
  100% { rotate: 360deg; }
}

/* Randomizing 20 swaying elements */
.flowers span:nth-child(1)  { left: 5%;  --sway: 20px;  animation-duration: 12s, 20s; animation-delay: 0s, 0s; }
.flowers span:nth-child(2)  { left: 15%; --sway: -40px; animation-duration: 18s, 25s; animation-delay: 2s, 1s; font-size: 20px; }
.flowers span:nth-child(3)  { left: 25%; --sway: 30px;  animation-duration: 14s, 22s; animation-delay: 4s, 2s; }
.flowers span:nth-child(4)  { left: 35%; --sway: -25px; animation-duration: 20s, 28s; animation-delay: 1s, 3s; font-size: 22px; }
.flowers span:nth-child(5)  { left: 45%; --sway: 15px;  animation-duration: 16s, 24s; animation-delay: 5s, 0s; }
.flowers span:nth-child(6)  { left: 55%; --sway: -35px; animation-duration: 13s, 21s; animation-delay: 3s, 2s; }
.flowers span:nth-child(7)  { left: 65%; --sway: 40px;  animation-duration: 19s, 27s; animation-delay: 7s, 1s; }
.flowers span:nth-child(8)  { left: 75%; --sway: -20px; animation-duration: 15s, 23s; animation-delay: 2s, 3s; }
.flowers span:nth-child(9)  { left: 85%; --sway: 25px;  animation-duration: 17s, 26s; animation-delay: 6s, 0s; }
.flowers span:nth-child(10) { left: 95%; --sway: -30px; animation-duration: 21s, 30s; animation-delay: 0s, 2s; }
.flowers span:nth-child(11) { left: 10%; --sway: 35px;  animation-duration: 14s, 22s; animation-delay: 8s, 1s; }
.flowers span:nth-child(12) { left: 30%; --sway: -15px; animation-duration: 16s, 24s; animation-delay: 3s, 2s; }
.flowers span:nth-child(13) { left: 50%; --sway: 45px;  animation-duration: 12s, 20s; animation-delay: 9s, 0s; }
.flowers span:nth-child(14) { left: 70%; --sway: -25px; animation-duration: 18s, 26s; animation-delay: 4s, 3s; }
.flowers span:nth-child(15) { left: 90%; --sway: 20px;  animation-duration: 20s, 28s; animation-delay: 1s, 1s; }
.flowers span:nth-child(16) { left: 20%; --sway: -30px; animation-duration: 13s, 21s; animation-delay: 1s, 2s; }
.flowers span:nth-child(17) { left: 40%; --sway: 25px;  animation-duration: 19s, 27s; animation-delay: 6s, 0s; }
.flowers span:nth-child(18) { left: 60%; --sway: -40px; animation-duration: 16s, 24s; animation-delay: 4s, 1s; }
.flowers span:nth-child(19) { left: 80%; --sway: 30px;  animation-duration: 14s, 22s; animation-delay: 9s, 3s; }
.flowers span:nth-child(20) { left: 10%; --sway: -20px; animation-duration: 25s, 32s; animation-delay: 2s, 0s; }

.card {
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  width: 95%;
  max-width: 360px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(140, 197, 252, 0.25);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(224, 195, 252, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#mainTitle { 
  font-family: 'Dancing Script', cursive; 
  color: #b44ba0; 
  font-size: 2.5rem; 
  animation: pulseTitle 3s ease-in-out infinite;
  transform-origin: center;
}

button {
  font-family: 'Raleway', sans-serif;
  display: block;
  margin: 20px auto 0;
  border: 1px solid rgba(224, 195, 252, 0.6);
  padding: 15px 30px;
  border-radius: 50px;
  background: linear-gradient(135deg, #cba6f7, #8ec5fc);
  color: #2a2a3b;
  cursor: pointer;
  transition: all 0.4s ease;
}

button:hover {
  background: linear-gradient(135deg, #b48ef0, #7ab8f5);
}

.page {
  text-align: justify;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.pulse { animation: pulseBtn 2s infinite; }
@keyframes pulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 156, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255, 107, 156, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 156, 0); }
}

/* LETTER THEME */
.letter-box {
  max-height: 50vh;
  overflow-y: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(224, 195, 252, 0.4);
  border-radius: 15px;
  font-family: 'Lora', serif;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #2a2a3b;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(140, 197, 252, 0.2), 0 0 20px rgba(203, 166, 247, 0.4);
}

.handwritten-ink { 
  font-family: 'Lora', serif; 
  font-style: italic;
  color: #b44ba0; 
  font-weight: bold; 
}

.progress-container { 
  width: 100%; 
  height: 10px;
  background: #eee; 
  border-radius: 10px; 
  margin-bottom: 15px; 
  overflow: hidden; 
  position: relative;
}

.progress-bar { 
  height: 100%; 
  width: 0%; 
  background: linear-gradient(90deg, #cba6f7, #ffb7c5, #b44ba0);
  background-size: 200% 100%;
  transition: width 0.6s ease;
  animation: gradientShiftBar 3s ease infinite;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#progressText {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-family: 'Raleway', sans-serif;
  color: #2a2a3b;
  font-weight: 600;
  transition: all 0.3 ease;
}

.quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4a3b58;
  border-left: 3px solid #cba6f7;
  padding-left: 12px;
  margin: 15px 0;
}

/* Gradient animation */
@keyframes gradientShiftBar {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hidden { display: none !important; }
.page { display: none; animation: slideIn 0.6s ease forwards; }
.page.active { display: block; }

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

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

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

.opening {
  animation: fadeInLetter 0.6s ease forwards;
}

.closing {
  animation: fadeOutLetter 0.6s ease forwards;
}

.morphOpen {
  animation: morphBox 0.8s ease forwards;
}

.morphClose {
  animation: morphBoxClose 0.8s ease forwards;
}

@keyframes pulseTitle {
  0%   { transform: scale(1); opacity: 1; text-shadow: 0 0 0px rgba(180, 75, 160, 0.3); }
  25%  { transform: scale(1.03); opacity: 0.95; text-shadow: 0 0 6px rgba(180, 75, 160, 0.4); }
  50%  { transform: scale(1.08); opacity: 0.9; text-shadow: 0 0 12px rgba(180, 75, 160, 0.6); }
  75%  { transform: scale(1.03); opacity: 0.95; text-shadow: 0 0 6px rgba(180, 75, 160, 0.4); }
  100% { transform: scale(1); opacity: 1; text-shadow: 0 0 0px rgba(180, 75, 160, 0.3); }
}