@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Playfair+Display:wght@400;700&family=Quicksand:wght@300;400;600;700&display=swap");

body {
  font-family: "Quicksand", sans-serif;
  overflow-x: hidden;
  background: #000000;
}

#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 10;
}

.moon-glow {
  box-shadow: 0 0 40px rgba(255, 223, 186, 0.6),
    0 0 80px rgba(255, 223, 186, 0.3);
}

.card-glass {
  background: rgba(20, 20, 40, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
}

.card-hover {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.card-hover:hover {
  transform: translateY(-10px) rotateX(5deg) scale(1.02);
  box-shadow: 0 30px 80px rgba(255, 223, 186, 0.4);
  border-color: rgba(255, 223, 186, 0.5);
}

.text-gold {
  color: #ffd700;
}

.text-moon {
  color: #ffdfba;
}

.title-font {
  font-family: "Playfair Display", serif;
}

.script-font {
  font-family: "Dancing Script", cursive;
}

.star-twinkle {
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

.float {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

.name-input {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 223, 186, 0.3);
  color: white;
  transition: all 0.3s;
}

.name-input:focus {
  outline: none;
  border-color: #ffdfba;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(255, 223, 186, 0.3);
}

.name-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.btn-moon {
  background: linear-gradient(135deg, #ffd700, #ffdfba);
  color: #0a0a1a;
  transition: all 0.3s;
  transform-style: preserve-3d;
}

.btn-moon:hover {
  transform: translateZ(10px) scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 223, 186, 0.5);
}

.wish-card {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sparkle-text {
  text-shadow: 0 0 10px rgba(255, 223, 186, 0.8),
    0 0 20px rgba(255, 223, 186, 0.6), 0 0 30px rgba(255, 223, 186, 0.4);
  animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 223, 186, 0.8),
      0 0 20px rgba(255, 223, 186, 0.6);
  }

  50% {
    text-shadow: 0 0 20px rgba(255, 223, 186, 1),
      0 0 30px rgba(255, 223, 186, 0.8), 0 0 40px rgba(255, 223, 186, 0.6);
  }
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px white, 0 0 20px white;
  animation: shoot 3s linear infinite;
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-300px) translateY(300px);
    opacity: 0;
  }
}

.parallax-card {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.feature-icon {
  font-size: 3rem;
  display: inline-block;
  transition: all 0.3s;
}

.card-hover:hover .feature-icon {
  transform: scale(1.2) rotateY(180deg);
}