/* 1 - Fade Blur In */
@keyframes fadeBlurIn {
  0% { opacity: 0; filter: blur(20px); transform: scale(0.98); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
.fade-blur-in {
  animation: fadeBlurIn 0.8s ease forwards;
}

/* 2 - Slide Up Fade */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.slide-up {
  animation: slideUpFade 0.7s ease forwards;
}

/* 3 - Zoom In Soft */
@keyframes zoomInSoft {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.zoom-in-soft {
  animation: zoomInSoft 0.6s ease-out forwards;
}

/* 4 - Fade Left */
@keyframes fadeLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
.fade-left {
  animation: fadeLeft 0.6s ease forwards;
}

/* 5 - Fade Right */
@keyframes fadeRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
.fade-right {
  animation: fadeRight 0.6s ease forwards;
}

/* 6 - Rotate Fade */
@keyframes rotateFade {
  0% { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
.rotate-fade {
  animation: rotateFade 0.7s ease forwards;
}

/* 7 - Blur Slide Down */
@keyframes blurSlideDown {
  0% { opacity: 0; filter: blur(10px); transform: translateY(-40px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.blur-slide-down {
  animation: blurSlideDown 0.8s ease forwards;
}

/* 8 - Elastic Pop */
@keyframes elasticPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.elastic-pop {
  animation: elasticPop 0.6s ease forwards;
}

/* 9 - Flip In */
@keyframes flipIn {
  0% { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
.flip-in {
  animation: flipIn 0.7s ease forwards;
  transform-style: preserve-3d;
}

/* 10 - Fade Scale Up */
@keyframes fadeScaleUp {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.fade-scale-up {
  animation: fadeScaleUp 0.6s ease forwards;
}

/* 11 - Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 12 - Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* 13 - Parallax Scroll */
.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* 14 - Hover Lift */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 15 - Glow Pulse */
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 20px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.glow-pulse {
  animation: glowPulse 2s infinite;
}

/* 16 - Cursor Grow */
.cursor-grow {
  cursor: pointer;
}
.cursor-grow:hover {
  transform: scale(1.1);
}

/* 17 - Fade In Delay */
.fade-delay {
  opacity: 0;
  animation: fadeInDelay 1s ease forwards;
  animation-delay: 0.5s;
}
@keyframes fadeInDelay {
  to { opacity: 1; }
}

/* 18 - Background Gradient Move */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.gradient-anim {
  background: linear-gradient(270deg, #ff7e5f, #feb47b);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
}

/* 19 - Text Reveal Mask */
@keyframes textReveal {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.text-reveal {
  animation: textReveal 0.8s ease forwards;
}

/* 20 - Bounce Fade */
@keyframes bounceFade {
  0% { opacity: 0; transform: translateY(50px); }
  60% { opacity: 1; transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.bounce-fade {
  animation: bounceFade 0.8s ease forwards;
}