/* ============================================
   DAWA.AI - Animations & Effects
   Premium Motion Design System
   ============================================ */

/* ========== Keyframe Animations ========== */

/* Fade Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@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);
  }
}

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.5), 0 0 60px rgba(14, 165, 233, 0.3);
  }
}

/* Glow Animation */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: var(--glow-primary);
  }
  50% {
    box-shadow: var(--glow-primary-strong);
  }
}

/* Gradient Flow */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Skeleton Loading */
@keyframes skeletonLoading {
  0% { background-position: 200px 0; }
  100% { background-position: -200px 0; }
}

/* Rotate Animation */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* Line Draw Animation */
@keyframes lineDraw {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

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

/* Preloader Progress */
@keyframes preloaderProgress {
  0% { width: 0; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* Preloader Fade */
@keyframes preloaderFade {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Particle Float */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(20px);
    opacity: 0;
  }
}

/* ========== Animation Classes ========== */

/* Fade Classes */
.fade-in { animation: fadeIn var(--duration-normal) ease forwards; }
.fade-in-up { animation: fadeInUp var(--duration-slow) ease forwards; }
.fade-in-down { animation: fadeInDown var(--duration-slow) ease forwards; }
.fade-in-left { animation: fadeInLeft var(--duration-slow) ease forwards; }
.fade-in-right { animation: fadeInRight var(--duration-slow) ease forwards; }

/* Scale Classes */
.scale-in { animation: scaleIn var(--duration-normal) ease forwards; }
.scale-out { animation: scaleOut var(--duration-normal) ease forwards; }

/* Float Classes */
.float { animation: float 3s ease-in-out infinite; }
.float-slow { animation: floatSlow 6s ease-in-out infinite; }

/* Pulse Classes */
.pulse { animation: pulse 2s ease-in-out infinite; }
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }

/* Glow Classes */
.glow-pulse { animation: glowPulse 2s ease-in-out infinite; }

/* Rotate Classes */
.rotate { animation: rotate 10s linear infinite; }
.rotate-slow { animation: rotateSlow 20s linear infinite; }

/* Gradient Animation */
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientFlow 5s ease infinite;
}

/* ========== Hover Effects ========== */

/* Lift Effect */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* Scale Effect */
.hover-scale {
  transition: transform var(--transition-normal);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Glow Effect */
.hover-glow {
  transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
  box-shadow: var(--glow-primary-strong);
}

/* Bright Effect */
.hover-bright {
  transition: filter var(--transition-normal);
}

.hover-bright:hover {
  filter: brightness(1.1);
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.ripple:active::before {
  width: 200%;
  height: 200%;
}

/* ========== Intersection Observer Hooks ========== */

[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-left"] { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="zoom"] { transform: scale(0.85); }

[data-animate-delay="100"] { transition-delay: 100ms; }
[data-animate-delay="200"] { transition-delay: 200ms; }
[data-animate-delay="300"] { transition-delay: 300ms; }
[data-animate-delay="400"] { transition-delay: 400ms; }
[data-animate-delay="500"] { transition-delay: 500ms; }

/* ========== Scroll Reveal Animations ========== */

/* Scroll reveal base state */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Stagger animation items */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
}

.stagger-item.revealed {
  animation: cardEntrance 0.8s ease forwards;
}

@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  60% {
    transform: translateY(-8px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger delay classes */
.stagger-delay-1 { animation-delay: 0.1s !important; }
.stagger-delay-2 { animation-delay: 0.2s !important; }
.stagger-delay-3 { animation-delay: 0.3s !important; }
.stagger-delay-4 { animation-delay: 0.4s !important; }
.stagger-delay-5 { animation-delay: 0.5s !important; }
.stagger-delay-6 { animation-delay: 0.6s !important; }

/* ========== Glass Effect ========== */

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border-strong);
}

/* ========== Skeleton Loading ========== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass-bg) 0%,
    var(--glass-bg-light) 50%,
    var(--glass-bg) 100%
  );
  background-size: 200px 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
}

.skeleton-text { height: 1em; border-radius: var(--radius-sm); }
.skeleton-heading { height: 1.5em; border-radius: var(--radius-sm); }
.skeleton-circle { border-radius: 50%; }
.skeleton-rounded { border-radius: var(--radius-md); }

/* ========== Transform Utilities ========== */

.transform-gpu { transform: translateZ(0); will-change: transform; }

.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-0 { transform: rotate(0deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

.translate-y-0 { transform: translateY(0); }
.translate-y-2 { transform: translateY(0.5rem); }
.translate-y-4 { transform: translateY(1rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-4 { transform: translateY(-1rem); }

/* ========== Hero Stats FX Animations ========== */

/* Ring Rotation Animation */
@keyframes ringRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ringRotateReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* Particle Orbit Animation */
@keyframes particleOrbit {
  0% { transform: rotate(0deg) translateX(40px) rotate(0deg); opacity: 1; }
  50% { opacity: 0.6; }
  100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); opacity: 1; }
}

/* Glow Pulse Animation */
@keyframes glowPulseFX {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.5), 0 0 100px rgba(0, 212, 255, 0.2);
  }
}

/* Number Shimmer Animation */
@keyframes numberShimmer {
  0% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.3);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
}

/* Icon Bounce Animation */
@keyframes iconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.1); }
}

/* Pulse Ring Animation */
@keyframes pulseRingFX {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* Connector Flow Animation */
@keyframes connectorFlow {
  0% {
    background-position: 0% 0%;
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    background-position: 100% 0%;
    opacity: 0.3;
  }
}

/* Entrance Animation */
@keyframes statFXEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Data Flow Animation */
@keyframes dataFlow {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Hologram Flicker */
@keyframes hologramFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
  52% { opacity: 1; }
  54% { opacity: 0.98; }
}

/* ========== Perspective 3D ========== */

.perspective { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }

/* ========== Transition Utilities ========== */

.transition-all { transition: all var(--transition-normal); }
.transition-colors { transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal); }
.transition-opacity { transition: opacity var(--transition-normal); }
.transition-transform { transition: transform var(--transition-normal); }
.transition-shadow { transition: box-shadow var(--transition-normal); }