/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display&display=swap');

body {
  background: linear-gradient(135deg, #fff0f5, #ffe4e1, #fff);
  font-family: 'Playfair Display', serif;
  color: #5b2c6f;
  text-align: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 🎶 Music Icon */
#music-toggle {
  position: fixed;
  top: 20px;
  right: 25px;
  font-size: 1.8rem;
  cursor: pointer;
  opacity: 0;
  animation: fadeInIcon 2.5s ease-in forwards;
  color: #e75480;
  text-shadow: 0 0 8px #fbb6ce;
  z-index: 5;
  transition: transform 0.3s;
}

#music-toggle:hover {
  transform: scale(1.2);
}

@keyframes fadeInIcon {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.invitation-container {
  margin-top: 8vh;
  animation: fadeIn 2s ease-in-out;
  position: relative;
  z-index: 2;
}

.title {
  font-family: 'Great Vibes', cursive;
  font-size: 3.5rem;
  color: #e75480;
  text-shadow: 0 0 12px #fbb6ce;
}

.names {
  font-family: 'Great Vibes', cursive;
  font-size: 2.8rem;
  color: #b82e6f;
  margin: 10px 0;
}

.details, .date, .venue {
  font-size: 1.2rem;
  color: #7b4368;
  margin: 8px;
}

.venue {
  font-style: italic;
  color: #a23b72;
  font-weight: 500;
}

.couple {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  cursor: pointer;
}

.couple img {
  width: 120px;
  transition: transform 0.5s ease-in-out;
}

.couple:hover .bride {
  transform: translateX(20px) rotate(-8deg);
}

.couple:hover .groom {
  transform: translateX(-20px) rotate(8deg);
}

.kiss {
  position: absolute;
  font-size: 2.5rem;
  top: -40px;
  animation: floatKiss 1.5s ease-out forwards;
}

@keyframes floatKiss {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  50% { opacity: 1; transform: translateY(-40px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}

.rsvp {
  background: #fbb6ce;
  color: #fff;
  border: none;
  font-size: 1.2rem;
  padding: 12px 28px;
  margin-top: 40px;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255,182,193,0.6);
  transition: transform 0.3s, background 0.3s;
}

.rsvp:hover {
  transform: scale(1.1);
  background: #e75480;
}

.ring {
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  animation: floatRing 2s ease-out forwards;
}

.ring::before {
  content: "💍";
}

@keyframes floatRing {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150px) scale(1.3); }
}

/* 🌸 Floating petals & hearts */
.floating-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.floating {
  position: absolute;
  top: -5%;
  opacity: 0.8;
  animation: floatDown linear forwards;
}

@keyframes floatDown {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

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