/* New Refined Color Palette for Happy Birthday Website */

:root {
  /* Primary Colors - Modern, vibrant yet elegant palette */
  --primary-pink: #ff70a6; /* Vibrant pink - for emphasis and key elements */
  --primary-purple: #9772fb; /* Soft purple - for accents and secondary elements */
  --primary-blue: #70d6ff; /* Bright sky blue - for backgrounds and highlights */
  --primary-yellow: #ffd670; /* Warm yellow - for accents and decoration */
  --primary-mint: #a5f8cd; /* Fresh mint - for subtle highlights */

  /* Background and Text Colors */
  --bg-light: #ffffff; /* Pure white - for clean backgrounds */
  --bg-off-white: #f9f9fb; /* Slightly off-white - for subtle contrast */
  --text-dark: #333333; /* Dark gray - primary text color */
  --text-medium: #666666; /* Medium gray - secondary text */
  --text-light: #ffffff; /* White - for text on dark backgrounds */

  /* Background Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary-pink) 0%,
    var(--primary-purple) 100%
  );

  --gradient-secondary: linear-gradient(
    135deg,
    var(--primary-blue) 0%,
    var(--primary-mint) 100%
  );

  --gradient-festive: linear-gradient(
    45deg,
    var(--primary-pink),
    var(--primary-purple),
    var(--primary-blue),
    var(--primary-yellow),
    var(--primary-mint)
  );

  /* Animation Gradient */
  --gradient-animated: linear-gradient(
    45deg,
    var(--primary-pink),
    var(--primary-purple),
    var(--primary-blue),
    var(--primary-yellow),
    var(--primary-mint)
  );

  /* Shadow Effects */
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Global color updates */
/* body {
  background-color: var(--bg-off-white);
}

.screen {
  background-color: var(--bg-light);
  box-shadow: var(--shadow-lg);
} */

/* Main menu styling */
/* #main-menu {
  background: var(--bg-off-white);
} */

.menu-title {
  background: var(--gradient-festive);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  text-shadow: var(--shadow-sm);
}

.gift-menu {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.gift-item {
  border: none;
  background: var(--bg-light);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  transform-origin: center bottom;
  border-radius: 20px;
  overflow: hidden;
  width: 300px;
  padding: 30px 20px;
}

.gift-item:nth-child(1) {
  border-top: 5px solid var(--primary-pink);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.gift-item:nth-child(2) {
  border-top: 5px solid var(--primary-blue);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.gift-item:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: var(--shadow-xl);
}

.gift-icon {
  font-size: 3rem;
  animation: pulse 2s infinite alternate;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.9);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-sm);
}

.gift-item:nth-child(1) .gift-icon {
  color: var(--primary-pink);
}

.gift-item:nth-child(2) .gift-icon {
  color: var(--primary-blue);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Birthday message styling */
.birthday-card-front {
  background: var(--gradient-primary);
  color: var(--text-light);
}

.birthday-card-inside {
  background: var(--bg-light);
  color: var(--text-dark);
  box-shadow: inset var(--shadow-md);
}

/* Wishes & Hopes styling */
.wish-content {
  border-radius: 15px;
  overflow: hidden;
  padding: 25px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wish-slide:nth-child(1) .wish-content {
  background: var(--primary-mint);
  color: var(--text-dark);
}

.wish-slide:nth-child(2) .wish-content {
  background: var(--primary-blue);
  color: var(--text-dark);
}

.wish-slide:nth-child(3) .wish-content {
  background: var(--primary-pink);
  color: var(--text-dark);
}

.wish-slide:nth-child(4) .wish-content {
  background: var(--primary-purple);
  color: var(--text-light);
}

.wish-slide:nth-child(5) .wish-content {
  background: var(--primary-yellow);
  color: var(--text-dark);
}

.wish-slide:nth-child(6) .wish-content {
  background: var(--primary-mint);
  color: var(--text-dark);
}

.wish-finale-content {
  background: var(--gradient-primary);
  padding: 30px;
  border-radius: 15px;
  color: var(--text-light);
}

/* Button styling */
.btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: var(--text-light);
  box-shadow: 0 4px 10px rgba(255, 112, 166, 0.4);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--gradient-secondary);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(151, 114, 251, 0.4);
}

.btn-secondary {
  background: var(--primary-blue);
  border: none;
  color: var(--text-dark);
  box-shadow: 0 4px 10px rgba(112, 214, 255, 0.4);
}

.btn-secondary:hover {
  background: var(--primary-yellow);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 214, 112, 0.4);
}

/* Back button styling */
.back-button {
  background: var(--primary-blue);
  color: var(--text-dark);
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
}

.back-button:hover {
  background: var(--primary-mint);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.back-button i {
  margin-right: 8px;
}

/* Balloon decorations */
.balloon {
  background: var(--primary-blue);
}

.balloon:nth-child(2) {
  background: var(--primary-pink);
}

.balloon:nth-child(3) {
  background: var(--primary-mint);
}

.balloon:nth-child(4) {
  background: var(--primary-yellow);
}

/* Animation for the entire content to feel more lively */
.animate-float {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-bounce {
  animation: bounce 2s ease infinite;
}

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

.animate-wiggle {
  animation: wiggle 2.5s linear infinite;
}

@keyframes wiggle {
  0%,
  7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-5deg);
  }
  20% {
    transform: rotateZ(4deg);
  }
  25% {
    transform: rotateZ(-3deg);
  }
  30% {
    transform: rotateZ(2deg);
  }
  35% {
    transform: rotateZ(-1deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

/* For heart icon */
.heart-beat {
  animation: heartBeat 1.5s ease-in-out infinite;
  color: var(--primary-pink);
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}