/* ========================================================================
   MAD & CRAZY ANIMATIONS - Moderately Crazy Edition 🔥
   ======================================================================== */

/* Particle Background Animation */
.particles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float-particle 15s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

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

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

/* Animated Gradient Background */
.gradient-animate {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 300% 300%;
  animation: gradient-shift 8s ease infinite;
}

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

/* Text Typing Animation */
.typing-text {
  overflow: hidden;
  border-right: 3px solid rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
  display: inline-block;
}

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

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: rgba(255, 255, 255, 0.75); }
}

/* Glitch Effect */
.glitch {
  position: relative;
  animation: glitch-skew 1s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(29px, 9999px, 94px, 0); }
  20% { clip: rect(71px, 9999px, 23px, 0); }
  40% { clip: rect(86px, 9999px, 44px, 0); }
  60% { clip: rect(12px, 9999px, 77px, 0); }
  80% { clip: rect(55px, 9999px, 33px, 0); }
  100% { clip: rect(66px, 9999px, 11px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(65px, 9999px, 119px, 0); }
  20% { clip: rect(40px, 9999px, 66px, 0); }
  40% { clip: rect(79px, 9999px, 50px, 0); }
  60% { clip: rect(17px, 9999px, 99px, 0); }
  80% { clip: rect(88px, 9999px, 3px, 0); }
  100% { clip: rect(43px, 9999px, 82px, 0); }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  10% { transform: skew(1deg); }
  20% { transform: skew(0deg); }
  30% { transform: skew(-1deg); }
  40% { transform: skew(0deg); }
  50% { transform: skew(1deg); }
  60% { transform: skew(0deg); }
  70% { transform: skew(-1deg); }
  80% { transform: skew(0deg); }
  90% { transform: skew(1deg); }
  100% { transform: skew(0deg); }
}

/* 3D Card Flip Effect */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Bounce In Animation */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bounce-in {
  animation: bounceIn 1s ease-out;
}

/* Slide In From Sides */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

/* Rotate In Animation */
@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-200deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.rotate-in {
  animation: rotateIn 1s ease-out;
}

/* Scale Pulse Animation */
@keyframes scalePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.scale-pulse {
  animation: scalePulse 2s ease-in-out infinite;
}

/* Floating Animation */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

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

.shake:hover {
  animation: shake 0.5s;
}

/* Neon Glow Effect */
.neon-glow {
  text-shadow:
    0 0 5px rgba(102, 126, 234, 0.8),
    0 0 10px rgba(102, 126, 234, 0.8),
    0 0 20px rgba(102, 126, 234, 0.8),
    0 0 40px rgba(102, 126, 234, 0.5);
  animation: neon-flicker 1.5s infinite alternate;
}

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 5px rgba(102, 126, 234, 0.8),
      0 0 10px rgba(102, 126, 234, 0.8),
      0 0 20px rgba(102, 126, 234, 0.8),
      0 0 40px rgba(102, 126, 234, 0.5);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

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

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

@keyframes ripple-animation {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Zoom In on Scroll */
.zoom-in-scroll {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.zoom-in-scroll.active {
  transform: scale(1);
  opacity: 1;
}

/* Parallax Effect */
.parallax-slow {
  transition: transform 0.1s ease-out;
}

/* Rainbow Border Animation */
@keyframes rainbow-border {
  0% { border-color: #667eea; }
  25% { border-color: #764ba2; }
  50% { border-color: #f093fb; }
  75% { border-color: #4facfe; }
  100% { border-color: #667eea; }
}

.rainbow-border {
  animation: rainbow-border 3s linear infinite;
}

/* Cursor Trail Effect */
.cursor-trail {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.8), transparent);
  pointer-events: none;
  z-index: 9999;
  animation: trail-fade 0.8s ease-out forwards;
}

@keyframes trail-fade {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Stagger Animation for Lists */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-in 0.5s ease-out forwards;
}

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

@keyframes stagger-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow on Hover */
.glow-on-hover {
  transition: all 0.3s ease;
}

.glow-on-hover:hover {
  box-shadow:
    0 0 20px rgba(102, 126, 234, 0.6),
    0 0 40px rgba(102, 126, 234, 0.4),
    0 0 60px rgba(102, 126, 234, 0.2);
  transform: translateY(-5px) scale(1.02);
}