/* Advanced Animations for Charitify */

/* Particle Background Animation */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: particle-float 15s infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; }
.particle:nth-child(9) { left: 90%; animation-delay: 1s; }
.particle:nth-child(10) { left: 15%; animation-delay: 3s; }

@keyframes particle-float {
  0%, 100% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Floating Hearts Animation */
.floating-hearts {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.heart {
  position: absolute;
  font-size: 20px;
  color: rgba(249, 115, 22, 0.3);
  animation: heart-rise 10s ease-in-out infinite;
}

.heart:nth-child(1) { left: 5%; animation-delay: 0s; font-size: 24px; }
.heart:nth-child(2) { left: 15%; animation-delay: 1s; font-size: 18px; }
.heart:nth-child(3) { left: 25%; animation-delay: 2s; font-size: 28px; }
.heart:nth-child(4) { left: 35%; animation-delay: 3s; font-size: 16px; }
.heart:nth-child(5) { left: 45%; animation-delay: 4s; font-size: 22px; }
.heart:nth-child(6) { left: 55%; animation-delay: 5s; font-size: 20px; }
.heart:nth-child(7) { left: 65%; animation-delay: 6s; font-size: 26px; }
.heart:nth-child(8) { left: 75%; animation-delay: 7s; font-size: 14px; }
.heart:nth-child(9) { left: 85%; animation-delay: 8s; font-size: 30px; }
.heart:nth-child(10) { left: 95%; animation-delay: 9s; font-size: 18px; }

@keyframes heart-rise {
  0% {
    transform: translateY(100vh) scale(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(80vh) scale(1) rotate(20deg);
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-10vh) scale(0.5) rotate(-20deg);
    opacity: 0;
  }
}

/* Morphing Blob Animation */
.morph-blob {
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
  }
  75% {
    border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
  }
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.ripple:active::after {
  width: 300%;
  height: 300%;
}

/* Glow Pulse */
.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.8), 0 0 60px rgba(249, 115, 22, 0.4);
  }
}

/* Shake Animation */
.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Bounce In */
.bounce-in {
  animation: bounce-in 0.6s ease-out;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Slide In From Bottom */
.slide-in-bottom {
  animation: slide-in-bottom 0.6s ease-out;
}

@keyframes slide-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In From Left */
.slide-in-left {
  animation: slide-in-left 0.6s ease-out;
}

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In From Right */
.slide-in-right {
  animation: slide-in-right 0.6s ease-out;
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Rotate In */
.rotate-in {
  animation: rotate-in 0.6s ease-out;
}

@keyframes rotate-in {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Flip In */
.flip-in-x {
  animation: flip-in-x 0.6s ease-out;
}

@keyframes flip-in-x {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}

.flip-in-y {
  animation: flip-in-y 0.6s ease-out;
}

@keyframes flip-in-y {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

/* Text Reveal Animation */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  animation: text-reveal 0.8s ease-out forwards;
  transform: translateY(100%);
}

@keyframes text-reveal {
  to {
    transform: translateY(0);
  }
}

/* Stagger Children Animation */
.stagger-children > * {
  opacity: 0;
  animation: stagger-fade-in 0.5s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

@keyframes stagger-fade-in {
  to {
    opacity: 1;
  }
}

/* Underline Animation */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #f97316, #d946ef);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.animated-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Image Zoom Effect */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.7s ease-out;
}

.img-zoom:hover img {
  transform: scale(1.1);
}

/* Card Tilt Effect (CSS Only) */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}

.card-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
}

/* Neon Glow Text */
.neon-text {
  animation: neon-glow 1.5s ease-in-out infinite alternate;
}

@keyframes neon-glow {
  from {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #f97316,
      0 0 30px #f97316,
      0 0 40px #f97316;
  }
  to {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #d946ef,
      0 0 30px #d946ef,
      0 0 40px #d946ef;
  }
}

/* Progress Bar Animation */
.progress-animate {
  animation: progress-fill 1.5s ease-out forwards;
}

@keyframes progress-fill {
  from {
    width: 0;
  }
}

/* Counter Animation */
.counter-animate {
  animation: counter-pop 0.5s ease-out;
}

@keyframes counter-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Parallax Layer */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Magnetic Button Effect */
.magnetic-btn {
  transition: transform 0.3s ease-out;
}

/* Gradient Animation */
.animated-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Loading Dots */
.loading-dots span {
  animation: loading-dot 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Typewriter Effect */
.typewriter {
  overflow: hidden;
  border-right: 3px solid #f97316;
  white-space: nowrap;
  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: #f97316; }
}

/* Marquee Animation */
.marquee {
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Wave Animation */
.wave {
  animation: wave 2.5s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-15deg); }
}