/* main.css = Shared variables & components */
:root {
  --pink:    #f9a8c9;
  --rose:    #e8547a;
  --deep:    #c2185b;
  --peach:   #ffd6e0;
  --cream:   #fff5f8;
  --soft:    #fce4ec;
  --text:    #4a1532;
  --gold:    #f7c873;
  --purple:  #a29bfe;
  --lavender:#e8e4ff;
  --brown:   #6d4c41;
  --green:   #66bb6a;
  --blue:    #74b9ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* Cards */
.card {
  background: white;
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 8px 40px rgba(232,84,122,0.1);
  border: 1px solid rgba(249,168,201,0.25);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--pink), var(--rose), var(--deep), var(--rose), var(--pink));
  background-size: 300% 100%;
  animation: shimmer 4s linear infinite;
}

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

/* buttons */
.btn-primary {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 50px;
  border: none;
  font-family: 'Dancing Script', cursive;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 20px rgba(232,84,122,0.3);
  color: white;
  margin-top: 14px;
  background: linear-gradient(135deg, var(--rose), var(--deep));
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(194,24,91,0.5);
}

.btn-secondary {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 50px;
  border: 2px solid var(--pink);
  background: white;
  color: var(--rose);
  font-family: 'Dancing Script', cursive;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--rose), var(--deep));
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

.btn-secondary:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* poem line */
.poem-line {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.poem-line.visible {
  opacity: 1;
  transform: translateX(0);
}

/* sparkle effect */
.sparkle {
  position: absolute;
  font-size: 1.2rem;
  animation: sparkleAnim linear forwards;
  pointer-events: none;
}
@keyframes sparkleAnim {
  0%   { opacity:0; transform: scale(0) rotate(0deg) }
  50%  { opacity:1; transform: scale(1) rotate(180deg) }
  100% { opacity:0; transform: scale(0) rotate(360deg) }
}

/* confetti */
.confetti-piece {
  position: fixed;
  width: 9px; height: 9px;
  border-radius: 2px;
  top: -10px;
  animation: confettiFall linear forwards;
  pointer-events: none;
  z-index: 9999;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1 }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0 }
}

/* petals */
.petal {
  position: fixed;
  pointer-events: none;
  font-size: 1.4rem;
  z-index: 9998;
  animation: petalFall linear forwards;
}
@keyframes petalFall {
  0%   { top: -5%; opacity: 1; transform: rotate(0deg) translateX(0) }
  100% { top: 105%; opacity: 0; transform: rotate(360deg) translateX(var(--sway)) }
}

/* music bar */
.music-bar {
  position: fixed;
  bottom: 20px; right: 16px;
  background: linear-gradient(135deg, var(--rose), var(--deep));
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(194,24,91,0.5);
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 500;
  cursor: pointer;
  transition: all 0.3s;
}
.music-bar:hover { transform: scale(1.05); }
.music-bar.visible { display: flex; }

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

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

@keyframes pulse {
  0%,100% { transform: scale(1) }
  50%      { transform: scale(1.08) }
}

@keyframes bounce {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-18px) }
}

@keyframes wiggle {
  0%,100% { transform: rotate(-6deg) }
  50%      { transform: rotate(6deg) }
}

@keyframes floatUp {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0.8 }
  100% { transform: translateY(-30px) rotate(360deg); opacity: 0 }
}

@keyframes heartBeat {
  0%,100% { transform: scale(0.85) }
  50%      { transform: scale(1.25) }
}

@keyframes glow {
  0%,100% { text-shadow: 2px 2px 10px rgba(194,24,91,0.3) }
  50%      { text-shadow: 2px 2px 28px rgba(194,24,91,0.75) }
}