/* ترصيد – Animations & Micro-interactions */

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

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

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

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

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes patternMove {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

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

@keyframes progressFill {
  from { width: 0; }
}

.animate-fade-up {
  animation: fadeUp 0.6s ease forwards;
}

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

.stagger-1 { animation-delay: 0.05s; opacity: 0; }
.stagger-2 { animation-delay: 0.1s; opacity: 0; }
.stagger-3 { animation-delay: 0.15s; opacity: 0; }
.stagger-4 { animation-delay: 0.2s; opacity: 0; }
.stagger-5 { animation-delay: 0.25s; opacity: 0; }
.stagger-6 { animation-delay: 0.3s; opacity: 0; }
.stagger-7 { animation-delay: 0.35s; opacity: 0; }
.stagger-8 { animation-delay: 0.4s; opacity: 0; }

.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}

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

.mascot-float {
  animation: float 4s ease-in-out infinite;
}

.section-enter {
  animation: fadeUp 0.45s ease forwards;
}

.section-hidden {
  display: none !important;
}

.section-active {
  display: block;
  animation: fadeUp 0.45s ease forwards;
}

/* Progress bar animation */
.progress-bar-fill {
  animation: progressFill 1.2s ease forwards;
}

/* Counter ready state */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* Auth background pattern */
.auth-pattern {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(6, 78, 59, 0.1) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 28px,
      rgba(6, 78, 59, 0.03) 28px,
      rgba(6, 78, 59, 0.03) 29px
    );
  animation: patternMove 20s linear infinite;
  background-size: 100% 100%, 100% 100%, 60px 60px;
}

/* Locked service shimmer */
.service-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Notification dropdown */
.dropdown-enter {
  animation: fadeUp 0.2s ease forwards;
}

/* Sidebar overlay */
.sidebar-overlay {
  animation: fadeIn 0.25s ease forwards;
}

/* Chart bar grow */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.chart-bar {
  transform-origin: bottom;
  animation: barGrow 0.8s ease forwards;
}