/* 
 * Wedding Invitation Animations
 * Combines elegant effects from both templates
 */

/* Sparkling stars effect */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle var(--duration, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: var(--opacity, 0.8);
    transform: scale(1);
  }
}

/* Gold particles effect */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, #d4af37 10%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: float var(--duration, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes float {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  25% {
    opacity: var(--opacity, 0.6);
  }
  75% {
    opacity: var(--opacity, 0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(var(--drift, 20px));
  }
}

/* Fade-in animation for sections */
.fade-in {
  /* Instead of starting hidden, we now start visible already */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease, transform 1s ease;
  animation: fadeInUp 1s ease-out forwards;
}

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

/* Pulse glow effect for names */
.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%,
  100% {
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
  }
  50% {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5),
      0 0 30px rgba(212, 175, 55, 0.3);
  }
}

/* Heartbeat animation */
.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Shining border animation */
.shine-border {
  position: relative;
  overflow: hidden;
}

.shine-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20%,
  100% {
    left: 100%;
  }
}

/* Envelope opening animation */
.envelope-animation {
  animation: openEnvelope 1.5s ease-out forwards;
  transform-origin: top center;
}

@keyframes openEnvelope {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/* Typewriter effect */
.typewriter {
  overflow: hidden;
  border-right: 0.1em solid #d4af37;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.1em;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #d4af37;
  }
}

/* Elegant Floating Elements */
.float-animation {
  animation: floating 5s ease-in-out infinite;
}

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

/* Subtle Photo Glow Effect */
.photo-glow {
  transition: all 0.5s ease;
}

.photo-glow:hover {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.2);
  transform: scale(1.03);
}

/* Elegant Shimmer Text Effect */
.shimmer-text {
  background: linear-gradient(
    90deg,
    #d4af37 0%,
    #fff8e7 20%,
    #d4af37 40%,
    #d4af37 100%
  );
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}