* { margin: 0; padding: 0; box-sizing: border-box; border-color: hsl(340, 40%, 88%); }

:root {
  --bg: hsl(340, 80%, 96%);
  --fg: hsl(340, 40%, 20%);
  --card: hsl(340, 60%, 98%);
  --primary: hsl(340, 82%, 62%);
  --primary-fg: #fff;
  --muted-fg: hsl(340, 20%, 50%);
  --blush: hsl(340, 80%, 90%);
  --rose: hsl(350, 90%, 70%);
  --coral: hsl(12, 80%, 70%);
  --lavender: hsl(280, 60%, 80%);
  --peach: hsl(20, 90%, 85%);
  --gold: hsl(45, 90%, 65%);
  --pink: hsl(340, 82%, 62%);
  --font-display: 'Dancing Script', cursive;
  --font-body: 'Quicksand', sans-serif;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* Floating Hearts */
.floating-hearts {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.floating-heart {
  position: absolute;
  animation: floatUp linear infinite;
  opacity: 0;
}
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  70% { opacity: 0.6; }
  100% { transform: translateY(-110vh) rotate(15deg); opacity: 0; }
}

/* Header */
.header {
  text-align: center; padding: 1.5rem 0 1rem; position: relative; z-index: 10;
  animation: fadeInDown 1s ease-out;
}
.header-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  color: var(--primary);
  animation: gentlePulse 4s ease-in-out infinite;
}
.header-emojis { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.header-emoji { font-size: 1.125rem; animation: bounceY 1.5s ease-in-out infinite; }

@keyframes gentlePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes bounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }

/* Main Layout */
.main-content {
  display: flex; flex-direction: column;
  min-height: 80vh; padding: 0 1rem; gap: 2rem; position: relative; z-index: 10;
}
@media (min-width: 1024px) {
  .main-content { flex-direction: row; padding: 0 2rem; }
}

/* Photos Section */
.photos-section {
  width: 100%; position: relative; min-height: 600px;
}
@media (min-width: 1024px) { .photos-section { width: 50%; } }

.arrows-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 10;
}

/* Photo Cards */
.photo-card {
  position: absolute;
  animation: fadeInScale 0.8s ease-out both;
}
.photo-card:nth-child(2) { animation-delay: 0s; }
.photo-card:nth-child(3) { animation-delay: 0.3s; }
.photo-card:nth-child(4) { animation-delay: 0.6s; }
.photo-card:nth-child(5) { animation-delay: 0.9s; }

#photo0 { transform: rotate(-5deg); }
#photo1 { transform: rotate(4deg); }
#photo2 { transform: rotate(-3deg); }
#photo3 { transform: rotate(6deg); }

.photo-card:hover {
  transform: scale(1.08) rotate(0deg) !important;
  z-index: 50;
  transition: all 0.6s ease;
}
img {
    width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; }
}

.photo-emoji {
  position: absolute; top: -1rem; right: -0.75rem;
  font-size: 1.5rem; z-index: 10; user-select: none;
}
.bounce-emoji {
  animation: bounceRotate 2s ease-in-out infinite;
}
@keyframes bounceRotate {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(15deg) scale(1.2); }
  75% { transform: rotate(-15deg) scale(1); }
}

.photo-frame {
  background: var(--card);
  border-radius: 1rem; padding: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
  border: 2px solid var(--blush);
  transition: box-shadow 0.3s;
}
.photo-card:hover .photo-frame { box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15); }

.photo-placeholder {
  width: 15rem; height: 15rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  overflow: hidden; color: var(--primary-fg);
}
.gradient-1 { background: linear-gradient(135deg, var(--pink), var(--coral)); }
.gradient-2 { background: linear-gradient(135deg, var(--lavender), var(--rose)); }
.gradient-3 { background: linear-gradient(135deg, var(--peach), var(--gold)); }
.gradient-4 { background: linear-gradient(135deg, var(--rose), var(--lavender)); }

.photo-icon {
  font-size: 2.5rem; margin-bottom: 0.25rem;
  animation: gentlePulse 2s ease-in-out infinite;
}
.photo-label { font-size: 0.75rem; font-weight: 600; opacity: 0.9; }

.photo-info { margin-top: 0.5rem; text-align: center; }
.date-badge {
  display: inline-block; background: var(--blush); color: var(--fg);
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 700;
}
.photo-caption {
  font-size: 0.75rem; color: var(--muted-fg);
  margin-top: 0.25rem; font-style: italic;
}

.sparkle-effect {
  position: absolute; bottom: -0.5rem; left: -0.5rem;
  font-size: 1.125rem; user-select: none;
  animation: sparkle 1.5s ease-in-out infinite;
}
@keyframes sparkle {
  0%,100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}


.deco-emoji {
  font-size: 1.5rem; user-select: none;
  animation: bounceRotate 2s ease-in-out infinite;
}

/* Message Section */
.message-section {
  width: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem 0;
}
@media (min-width: 1024px) { .message-section { width: 50%; } }

.message-wrapper { position: relative; }

.side-deco {
  position: absolute; left: -3rem; top: 25%;
  display: flex; flex-direction: column; gap: 1rem;
  animation: fadeInLeft 0.5s ease-out 2.5s both;
}
.side-emoji {
  font-size: 1.5rem; user-select: none;
  animation: sideFloat 2s ease-in-out infinite;
}
@keyframes sideFloat {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(5px,-4px); }
}
@keyframes fadeInLeft { from { opacity:0; transform: translateX(-20px); } to { opacity:1; transform: translateX(0); } }

/* Birthday Card */
.birthday-card {
  position: relative;
  background: var(--card);
  border-radius: 1.5rem; padding: 2rem;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
  border: 2px solid var(--blush);
  max-width: 32rem;
  animation: fadeInRight 1s ease-out 1.5s both;
}
@keyframes fadeInRight { from { opacity:0; transform: translateX(100px) scale(0.8); } to { opacity:1; transform: translateX(0) scale(1); } }

.corner-emoji {
  position: absolute; font-size: 1.875rem; user-select: none;
  animation: bounceRotate 3s ease-in-out infinite;
}
.top-left { top: -1.25rem; left: -1.25rem; }
.top-right { top: -1.25rem; right: -1.25rem; animation-delay: 0.5s; }
.bottom-right { bottom: -1rem; right: -1rem; }
.bottom-left { bottom: -1rem; left: -1rem; animation-delay: 0.3s; }

.birthday-title {
  font-family: var(--font-display);
  font-size: 2.25rem; color: var(--primary);
  text-align: center; margin-bottom: 0.5rem;
  animation: gentlePulse 3s ease-in-out infinite;
}

.emoji-row {
  display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem;
}
.emoji-row-item {
  font-size: 1.125rem; user-select: none;
  animation: bounceY 1.2s ease-in-out infinite;
}

.message-box {
  background: var(--blush);
  border-radius: 1rem; padding: 1.5rem;
  border: 1px solid hsla(350, 90%, 70%, 0.3);
  animation: fadeInUp 0.8s ease-out 2s both;
}
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.message-text {
  font-family: var(--font-body);
  text-align: center; line-height: 1.75; font-size: 1rem;
  margin-top: 1rem;
}
.message-text:first-child { margin-top: 0; }
.msg-emoji { font-size: 1.25rem; }

.message-love {
  font-family: var(--font-display);
  font-size: 1.5rem; color: var(--primary);
  text-align: center; margin-top: 1.5rem;
}
.pulse-text { animation: gentlePulse 2s ease-in-out infinite; }

.flower-row {
  display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem;
}
.flower-emoji {
  font-size: 1.25rem; user-select: none;
  animation: spin linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.made-with-love {
  display: flex; justify-content: center; margin-top: 1.5rem;
  animation: fadeIn 0.5s ease-out 3s both;
}
.made-with-love span {
  font-family: var(--font-display);
  font-size: 1.125rem; color: var(--primary);
  animation: fadePulse 2s ease-in-out infinite;
}
@keyframes fadePulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Sparkle Bar */
.sparkle-bar {
  display: flex; justify-content: center; gap: 1rem;
  padding-bottom: 1.5rem; position: relative; z-index: 10; margin-top: 2rem;
  animation: fadeIn 0.5s ease-out 3.5s both;
}
.sparkle-heart {
  color: var(--pink); font-size: 0.875rem; user-select: none;
  animation: sparkle 1.5s ease-in-out infinite;
}

/* Arrow animations */
.arrow-path {
  stroke-dasharray: 10 8;
  stroke-linecap: round;
  animation: drawLine 1.5s ease-in-out forwards;
}
@keyframes drawLine {
  from { stroke-dashoffset: 1000; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 0.7; }
}
.arrow-head {
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards;
}
.arrow-heart {
  opacity: 0;
  animation: popIn 0.5s ease-out forwards;
}
@keyframes popIn { from { opacity:0; transform: scale(0); } to { opacity:1; transform: scale(1); } }