/**
 * Itsawan Animation System
 * Extracted from itsawan.com Next.js template
 * Date: 2026-02-11
 * Version: 1.0.0
 *
 * This file contains the complete animation system from itsawan.com
 * including keyframes, utility classes, and performance optimizations.
 */

/* ========================================
   SCROLL ANIMATIONS
   For infinite scrolling logos, content strips
   ======================================== */

/**
 * Scroll left animation - moves content from right to left
 * Used for: Logo strips, partner lists, infinite scrolling content
 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/**
 * Scroll right animation - moves content from left to right
 * Used for: Reverse scrolling content
 */
@keyframes scroll-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

/**
 * RTL scroll animations - proper directionality for Arabic
 * Note: translateX values are inverted for RTL layout
 */
@keyframes scroll-left-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

@keyframes scroll-right-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/**
 * Horizontal scroll - simplified version
 * Used for: Basic horizontal scrolling strips
 */
@keyframes scroll-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-horizontal-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

/* ========================================
   BREATHING & PULSE ANIMATIONS
   For attention-grabbing elements
   ======================================== */

/**
 * Breathing loop animation - continuous fade in/out cycle
 * Used for: Scroll hints, attention indicators
 * Duration: 4s (adjust via animation-duration)
 */
@keyframes hintBreathingLoop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 4.8rem));
  }
  20% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 5rem));
  }
  50% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 5rem));
  }
  70% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 4.8rem));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 4.8rem));
  }
}

/**
 * RTL breathing loop - flipped translate for right positioning
 */
@keyframes hintBreathingLoopRTL {
  0% {
    opacity: 0;
    transform: translate(50%, calc(-50% - 4.8rem));
  }
  20% {
    opacity: 1;
    transform: translate(50%, calc(-50% - 5rem));
  }
  50% {
    opacity: 1;
    transform: translate(50%, calc(-50% - 5rem));
  }
  70% {
    opacity: 0;
    transform: translate(50%, calc(-50% - 4.8rem));
  }
  100% {
    opacity: 0;
    transform: translate(50%, calc(-50% - 4.8rem));
  }
}

/**
 * Button pulse animation - subtle scale effect
 * Used for: Call-to-action buttons, interactive elements
 * Note: Reduced from 1.05 to 1.03 for subtlety
 */
@keyframes buttonPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* ========================================
   INTERACTION ANIMATIONS
   For user interactions
   ======================================== */

/**
 * Ripple effect animation
 * Used for: Button click feedback
 * Note: Requires JavaScript to position and trigger
 */
@keyframes rippleEffect {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  100% {
    width: 300%; /* Expand beyond button */
    height: 300%;
    opacity: 0;
  }
}

/* ========================================
   TEXT ANIMATIONS
   For typewriter and text effects
   ======================================== */

/**
 * Typer fade in animation
 * Used for: Typewriter effect text appearance
 */
@keyframes typerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
   LOADING ANIMATIONS
   For spinners and loading indicators
   ======================================== */

/**
 * Spin animation - full 360° rotation
 * Used for: Loading spinners, logo animations
 * Default: 20s linear infinite
 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ========================================
   MODAL ANIMATIONS
   For modal and dialog transitions
   ======================================== */

/**
 * Modal fade in animation
 * Used for: Modal backdrop and overlay
 */
@keyframes modalFadeIn {
  to {
    opacity: 1;
  }
}

/**
 * Modal slide up animation
 * Used for: Modal content entrance
 * Duration: 0.6s cubic-bezier(0.16, 1, 0.3, 1)
 */
@keyframes modalSlideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   For elements that appear on scroll
   ======================================== */

/**
 * Fade in animation with slight upward movement
 * Used for: Scroll-triggered reveals, content sections
 * Note: Requires JavaScript IntersectionObserver
 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   UTILITY CLASSES
   Apply animations to elements
   ======================================== */

/* Scroll animations */
.animate-scroll-left {
  animation: scroll-left linear infinite;
  will-change: transform; /* GPU acceleration */
}

[dir='rtl'] .animate-scroll-left {
  animation-name: scroll-left-rtl;
}

.animate-scroll-right {
  animation: scroll-right linear infinite;
  will-change: transform;
}

[dir='rtl'] .animate-scroll-right {
  animation-name: scroll-right-rtl;
}

/* Direction control */
.direction-reverse {
  animation-direction: reverse;
}

[dir='rtl'] .direction-reverse {
  animation-direction: normal;
}

/* Breathing animation */
.animate-breathing {
  animation: hintBreathingLoop 4s ease-in-out infinite;
}

[dir='rtl'] .animate-breathing {
  animation-name: hintBreathingLoopRTL;
}

/* Pulse animation */
.animate-pulse {
  animation: buttonPulse 2s ease-in-out infinite;
}

/* Spin animation */
.animate-spin {
  animation: spin 20s linear infinite;
}

.animate-spin-fast {
  animation: spin 10s linear infinite;
}

.animate-spin-slow {
  animation: spin 30s linear infinite;
}

/* Fade in animation */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Modal animations */
.animate-modal-fade {
  animation: modalFadeIn 0.3s ease-out forwards;
}

.animate-modal-slide {
  animation: modalSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Typer animation */
.animate-typer {
  animation: typerFadeIn 0.3s ease-in forwards;
}

/* ========================================
   ANIMATION DURATION UTILITIES
   Control animation speed
   ======================================== */

.duration-fast {
  animation-duration: 0.3s;
}

.duration-normal {
  animation-duration: 0.6s;
}

.duration-slow {
  animation-duration: 1s;
}

.duration-slower {
  animation-duration: 2s;
}

/* ========================================
   ANIMATION DELAY UTILITIES
   Stagger animations
   ======================================== */

.delay-0 {
  animation-delay: 0s;
}

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

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

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

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

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

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   Improve animation performance
   ======================================== */

/**
 * GPU acceleration for animated elements
 * Use sparingly - only for elements that animate frequently
 */
.will-animate {
  will-change: transform, opacity;
}

/**
 * Disable animations on low-end devices or when reduced motion is preferred
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   SCROLL REVEAL CLASSES
   For JavaScript IntersectionObserver
   ======================================== */

/**
 * Hidden state - elements start invisible
 * JavaScript will add .revealed class when in viewport
 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Fade variants - different reveal styles
 */
.scroll-reveal-fade {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.scroll-reveal-fade.revealed {
  opacity: 1;
}

.scroll-reveal-slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-slide-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-slide-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-slide-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/**
 * Scale reveal - elements start small and scale up
 */
.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   INTERACTION FEEDBACK
   Visual feedback for user actions
   ======================================== */

/**
 * Active state - button press feedback
 */
.active-scale {
  transition: transform 0.1s ease-out;
}

.active-scale:active {
  transform: scale(0.96);
}

/**
 * Hover effects - desktop only
 */
@media (hover: hover) and (pointer: fine) {
  .hover-lift {
    transition: transform var(--itsawan-transition-base);
  }

  .hover-lift:hover {
    transform: translateY(-2px);
  }

  .hover-glow {
    transition: box-shadow var(--itsawan-transition-base);
  }

  .hover-glow:hover {
    box-shadow: var(--itsawan-shadow-lg);
  }
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover,
  .hover-glow:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ========================================
   END OF ITSAWAN ANIMATIONS
   ======================================== */