* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Cairo', 'Segoe UI', sans-serif; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #eef2f9; }
::-webkit-scrollbar-thumb { background: #8ba8d0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3e5d94; }

[x-cloak] { display: none !important; }

video::cue { background: rgba(0,0,0,.7); color: #fff; }

/* ===== زخارف وحركات رافدين ===== */
@keyframes hero-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-animated {
  background-size: 220% 220%;
  animation: hero-gradient 16s ease infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float 9s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 22s linear infinite; }

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%);
  background-size: 200% 100%;
  animation: shimmer 3.2s ease-in-out infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

.text-gradient-gold {
  background: linear-gradient(120deg, #f0dc93, #d9b44a 45%, #f5e6ae);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-tilt { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.card-tilt:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 18px 40px -14px rgba(12,20,34,.25); }