:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mx: 0.5;
  --my: 0.5;
}

[dir="rtl"] {
  --font-sans: Cairo, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

* { font-family: var(--font-sans); }

/* ============================================ */
/* 🎨 GRADIENT & GLOW EFFECTS */
/* ============================================ */
.glass { backdrop-filter: blur(20px) saturate(180%); }
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7, #6366f1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

.gradient-border {
  position: relative;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
}

.card-glow {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-glow:hover {
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.2), 0 0 100px rgba(139, 92, 246, 0.1);
  transform: translateY(-4px);
}

.neon-glow {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3),
    0 0 40px rgba(139, 92, 246, 0.2),
    0 0 60px rgba(168, 85, 247, 0.1);
}

/* Subtle parallax helper (driven by runtime.js) */
.parallax {
  transform: translate3d(
      calc((var(--mx) - 0.5) * -18px),
      calc((var(--my) - 0.5) * -18px),
      0
    );
  transition: transform 180ms ease-out;
  will-change: transform;
}

/* ============================================ */
/* 🌊 ANIMATED BACKGROUND */
/* ============================================ */
.animated-bg {
  background: linear-gradient(-45deg, #0f172a, #1e1b4b, #1e293b, #312e81);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

.light-animated-bg {
  background: linear-gradient(-45deg, #f8fafc, #eef2ff, #f1f5f9, #e0e7ff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

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

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

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

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

/* ============================================ */
/* ✨ PARTICLE SYSTEM */
/* ============================================ */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 8s infinite;
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}

/* ============================================ */
/* 🎭 ANIMATIONS */
/* ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes pulse3D {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 30px 10px rgba(99, 102, 241, 0.1); }
}

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

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

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

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

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

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0) scale(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); }
}

@keyframes flipIn {
  from { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0); }
}

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

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

@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

@keyframes orbitalSpin {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.8)); }
}

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

/* ============================================ */
/* 🎬 ANIMATION CLASSES */
/* ============================================ */
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-pulse3d { animation: pulse3D 3s ease-in-out infinite; }
.animate-slide-left { animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-right { animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-up { animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-down { animation: slideInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-scale-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-rotate-in { animation: rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-bounce-in { animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
.animate-flip-in { animation: flipIn 0.6s ease-out forwards; }
.animate-morph { animation: morphBlob 8s ease-in-out infinite; }
.animate-orbital { animation: orbitalSpin 10s linear infinite; }
.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }

.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }
.stagger-5 { animation-delay: 0.5s; opacity: 0; }
.stagger-6 { animation-delay: 0.6s; opacity: 0; }

.shimmer-effect {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ============================================ */
/* 🎯 SPECIAL EFFECTS */
/* ============================================ */
.rotating-border {
  position: relative;
  overflow: hidden;
}
.rotating-border::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, #6366f1, transparent 30%);
  animation: borderRotate 4s linear infinite;
}
.rotating-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: inherit;
  border-radius: inherit;
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
}

.magnetic-hover {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-ring { transform: rotate(-90deg); }

/* ============================================ */
/* 📊 CHART ANIMATIONS */
/* ============================================ */
.bar-animate {
  transform-origin: bottom;
  animation: barGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDraw 2s ease-out forwards;
}

@keyframes lineDraw {
  to { stroke-dashoffset: 0; }
}

/* ============================================ */
/* 🖱️ CURSOR & INTERACTIONS */
/* ============================================ */
.cursor-glow {
  cursor: pointer;
  position: relative;
}

.cursor-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(99, 102, 241, 0.15), transparent 50%);
}

.cursor-glow:hover::after {
  opacity: 1;
}

/* Scrollbar */
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 3px; }

/* Selection */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: inherit;
}

/* Small RTL helpers (without a Tailwind RTL plugin) */
.dir-rtl .rtl-text { text-align: right; }
.dir-rtl .rtl-justify-end { justify-content: flex-end; }
.dir-rtl .rtl-flex-row-reverse { flex-direction: row-reverse; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .parallax { transition: none; }
}

/* ============================================ */
/* 📱 RESPONSIVE DESIGN */
/* ============================================ */

/* Mobile optimizations */
@media (max-width: 640px) {
  /* Reduce parallax intensity on mobile */
  .parallax {
    transform: translate3d(
      calc((var(--mx) - 0.5) * -8px),
      calc((var(--my) - 0.5) * -8px),
      0
    );
  }
  
  /* Reduce particle count on mobile */
  .particle:nth-child(n+16) {
    display: none;
  }
  
  /* Adjust card glow for mobile */
  .card-glow:hover {
    transform: translateY(-2px);
  }
  
  /* Smaller animations */
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
  }
  
  /* Touch-friendly spacing */
  .mobile-touch-spacing {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  .parallax {
    transform: translate3d(
      calc((var(--mx) - 0.5) * -12px),
      calc((var(--my) - 0.5) * -12px),
      0
    );
  }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
  /* Full parallax effect */
  .parallax {
    transform: translate3d(
      calc((var(--mx) - 0.5) * -18px),
      calc((var(--my) - 0.5) * -18px),
      0
    );
  }
  
  /* Enhanced hover effects */
  .hover-lift:hover {
    transform: translateY(-12px) scale(1.03);
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  .landscape-compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}