/* ============================================
   MACEOTOMASYON - Animation Keyframes
   ============================================ */

/* ========== FADE ANIMATIONS ========== */

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

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

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

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

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

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

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

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

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

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

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ========== SLIDE ANIMATIONS ========== */

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ========== BOUNCE & ELASTIC ========== */

@keyframes bounce {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

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

/* ========== ROTATION ========== */

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

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

/* ========== SHIMMER & SKELETON ========== */

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

@keyframes skeleton {
  0% {
    background-color: var(--neutral-200);
  }
  50% {
    background-color: var(--neutral-300);
  }
  100% {
    background-color: var(--neutral-200);
  }
}

/* ========== FLOAT & LEVITATE ========== */

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

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(1deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

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

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 82, 204, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 82, 204, 0.6);
  }
}

@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(0, 188, 212, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(0, 188, 212, 0.8));
  }
}

/* ========== TEXT REVEAL ========== */

@keyframes revealText {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

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

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

/* ========== RIPPLE EFFECT ========== */

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ========== SCROLL INDICATOR ========== */

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

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* ========== COUNTER ========== */

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

/* ========== LINE DRAW ========== */

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

/* ========== ANIMATION UTILITY CLASSES ========== */

.animate-fadeIn { animation: fadeIn var(--duration-normal) var(--ease-out) forwards; }
.animate-fadeInUp { animation: fadeInUp var(--duration-normal) var(--ease-out) forwards; }
.animate-fadeInDown { animation: fadeInDown var(--duration-normal) var(--ease-out) forwards; }
.animate-fadeInLeft { animation: fadeInLeft var(--duration-normal) var(--ease-out) forwards; }
.animate-fadeInRight { animation: fadeInRight var(--duration-normal) var(--ease-out) forwards; }

.animate-scaleIn { animation: scaleIn var(--duration-normal) var(--ease-out) forwards; }
.animate-bounceIn { animation: bounceIn var(--duration-slow) var(--ease-elastic) forwards; }

.animate-spin { animation: spin 1s linear infinite; }
.animate-spinSlow { animation: spinSlow 3s linear infinite; }
.animate-pulse { animation: pulse 2s var(--ease-in-out) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-float { animation: float 3s var(--ease-in-out) infinite; }
.animate-floatSlow { animation: floatSlow 6s var(--ease-in-out) infinite; }
.animate-glow { animation: glow 2s var(--ease-in-out) infinite; }

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Animation Durations */
.duration-fast { animation-duration: var(--duration-fast); }
.duration-normal { animation-duration: var(--duration-normal); }
.duration-slow { animation-duration: var(--duration-slow); }
.duration-slower { animation-duration: var(--duration-slower); }

/* Scroll-triggered animations (used with JS) */
.scroll-animate {
  opacity: 0;
}

.scroll-animate.is-visible {
  animation: fadeInUp var(--duration-normal) var(--ease-out) forwards;
}

.scroll-animate--left.is-visible {
  animation: fadeInLeft var(--duration-normal) var(--ease-out) forwards;
}

.scroll-animate--right.is-visible {
  animation: fadeInRight var(--duration-normal) var(--ease-out) forwards;
}

.scroll-animate--scale.is-visible {
  animation: scaleIn var(--duration-normal) var(--ease-out) forwards;
}