/* ===================================
   KEYFRAME ANIMATIONS & EFFECTS
   Smooth Transitions & Effects
   =================================== */

/* ===================================
   SLIDE & FADE ANIMATIONS
   =================================== */

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

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ===================================
   SCALE ANIMATIONS
   =================================== */

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleUp {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===================================
   RIPPLE EFFECTS
   =================================== */

@keyframes ripple-animate {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===================================
   ROTATING ANIMATIONS
   =================================== */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* ===================================
   BOUNCE ANIMATIONS
   =================================== */

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ===================================
   GLOW EFFECTS
   =================================== */

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.8);
  }
}

/* ===================================
   SHIMMER EFFECT
   =================================== */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* ===================================
   WAVE ANIMATION
   =================================== */

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(10px);
  }
}

/* ===================================
   FLOATING ANIMATION
   =================================== */

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

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

/* ===================================
   SWING ANIMATION
   =================================== */

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ===================================
   HEARTBEAT ANIMATION
   =================================== */

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

/* ===================================
   SMOOTH BACKGROUND GRADIENT ANIMATION
   =================================== */

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

/* ===================================
   NEON GLOW EFFECT
   =================================== */

@keyframes neonGlow {
  0%,
  100% {
    text-shadow:
      0 0 10px rgba(37, 99, 235, 0.7),
      0 0 20px rgba(37, 99, 235, 0.4);
  }
  50% {
    text-shadow:
      0 0 20px rgba(37, 99, 235, 1),
      0 0 30px rgba(37, 99, 235, 0.7),
      0 0 40px rgba(37, 99, 235, 0.4);
  }
}

/* ===================================
   DRAWING LINE ANIMATION
   =================================== */

@keyframes drawLine {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ===================================
   TYPEWRITER EFFECT
   =================================== */

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

@keyframes blink-caret {
  0%,
  49% {
    border-right-color: transparent;
  }
  50%,
  100% {
    border-right-color: var(--primary-color);
  }
}

/* ===================================
   BLUR IN/OUT
   =================================== */

@keyframes blurIn {
  from {
    filter: blur(10px);
    opacity: 0;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes blurOut {
  from {
    filter: blur(0);
    opacity: 1;
  }
  to {
    filter: blur(10px);
    opacity: 0;
  }
}

/* ===================================
   JELLO EFFECT
   =================================== */

@keyframes jello {
  0%,
  11.1%,
  100% {
    transform: skewX(0deg) skewY(0deg);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

/* ===================================
   ROTATE 3D ANIMATION
   =================================== */

@keyframes rotate3D {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg) rotateY(360deg);
  }
}

/* ===================================
   ZOOM IN/OUT
   =================================== */

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

/* ===================================
   FLIP ANIMATION
   =================================== */

@keyframes flipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

/* ===================================
   LIGHT ANIMATION
   =================================== */

@keyframes lightRays {
  0% {
    opacity: 0;
    transform: translateY(-50px) scaleY(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(50px) scaleY(1);
  }
}

/* ===================================
   SMOOTH COLOR TRANSITION
   =================================== */

@keyframes colorShift {
  0% {
    color: var(--primary-color);
  }
  50% {
    color: var(--accent-color);
  }
  100% {
    color: var(--primary-color);
  }
}

/* ===================================
   ACCORDION ANIMATION
   =================================== */

@keyframes expandHeight {
  from {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

@keyframes collapseHeight {
  from {
    max-height: 500px;
    opacity: 1;
  }
  to {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
  }
}

/* ===================================
   ATTENTION SEEKERS
   =================================== */

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

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-5px) rotate(-5deg);
  }
  30% {
    transform: translateX(5px) rotate(3deg);
  }
  45% {
    transform: translateX(-5px) rotate(-3deg);
  }
  60% {
    transform: translateX(3px) rotate(2deg);
  }
  75% {
    transform: translateX(-3px) rotate(-1deg);
  }
}

/* ===================================
   BACKGROUND ANIMATIONS
   =================================== */

@keyframes backgroundShift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes backgroundMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* ===================================
   SCROLL HINT ANIMATION
   =================================== */

@keyframes scrollHint {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

/* ===================================
   LOADING ANIMATIONS
   =================================== */

@keyframes loadingDots {
  0%,
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes skeletonLoading {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* ===================================
   SUCCESS/ERROR ANIMATIONS
   =================================== */

@keyframes checkmark {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

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