/* ==========================================================================
   TSARTSARIS BLOG PREMIUM - Animations
   Scroll-triggered and micro-interaction animations
   All wrapped in prefers-reduced-motion for accessibility
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* ---- Keyframes ---- */

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

  @keyframes glow-pulse {
    0%, 100% {
      box-shadow: 0 0 5px rgba(255, 122, 0, 0.15);
    }
    50% {
      box-shadow: 0 0 20px rgba(255, 122, 0, 0.3), 0 0 40px rgba(255, 122, 0, 0.1);
    }
  }

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

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

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

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

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

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

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

  /* ---- Animation Classes ---- */

  .fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
  }

  .fade-in {
    animation: fadeIn 0.6s ease forwards;
  }

  .slide-in-left {
    animation: slideInLeft 0.6s ease forwards;
  }

  .slide-in-right {
    animation: slideInRight 0.6s ease forwards;
  }

  .scale-in {
    animation: scaleIn 0.5s ease forwards;
  }

  /* ---- Stagger Delays ---- */

  .delay-1 {
    animation-delay: 0.1s;
  }

  .delay-2 {
    animation-delay: 0.2s;
  }

  .delay-3 {
    animation-delay: 0.3s;
  }

  .delay-4 {
    animation-delay: 0.4s;
  }

  .delay-5 {
    animation-delay: 0.5s;
  }

  /* ---- Scroll-Triggered Animations ---- */

  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }

  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Variant: fade only */
  .animate-on-scroll.fade-only {
    transform: none;
  }

  .animate-on-scroll.fade-only.is-visible {
    transform: none;
  }

  /* Variant: slide from left */
  .animate-on-scroll.from-left {
    transform: translateX(-20px);
  }

  .animate-on-scroll.from-left.is-visible {
    transform: translateX(0);
  }

  /* Variant: slide from right */
  .animate-on-scroll.from-right {
    transform: translateX(20px);
  }

  .animate-on-scroll.from-right.is-visible {
    transform: translateX(0);
  }

  /* Variant: scale up */
  .animate-on-scroll.scale-up {
    transform: scale(0.95);
  }

  .animate-on-scroll.scale-up.is-visible {
    transform: scale(1);
  }

  /* ---- Glow Effect ---- */

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

  /* ---- Gradient Shift ---- */

  .gradient-animate {
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
  }

  /* ---- Loading Shimmer ---- */

  .shimmer {
    background: linear-gradient(
      90deg,
      var(--color-bg-secondary) 25%,
      var(--color-bg-tertiary) 50%,
      var(--color-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
}