/* ============================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* ─── KEYFRAMES ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

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

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

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

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

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

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

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

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.reveal--left {
  transform: translateX(-30px);
}
.reveal--left.revealed { transform: none; }

.reveal--right {
  transform: translateX(30px);
}
.reveal--right.revealed { transform: none; }

.reveal--scale {
  transform: scale(0.92);
}
.reveal--scale.revealed { transform: none; }

/* Stagger delays for children */
.reveal-group .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 400ms; }

/* ─── HERO ENTRANCE ANIMATIONS ─── */
.hero-anim-1 {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
.hero-anim-2 {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}
.hero-anim-3 {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}
.hero-anim-4 {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}
.hero-anim-5 {
  animation: scaleIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

/* ─── LANGUAGE TRANSITION ─── */
.lang-transition * [data-translate] {
  animation: langFade 0.2s ease-out both;
}

/* ─── FLOATING PARTICLE BACKGROUNDS ─── */
.particles-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(18,196,174,0.5);
  animation: float linear infinite;
}

/* ─── SECTION DECORATORS ─── */
.section-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  overflow: hidden;
}

.section-wave svg { display: block; width: 100%; height: 100%; }

/* ─── GRADIENT TEXT SHIMMER ─── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--c-teal-light) 0%,
    var(--c-gold-light) 50%,
    var(--c-teal-light) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ─── HOVER RIPPLE ─── */
.btn--ripple {
  position: relative;
  overflow: hidden;
}

.btn--ripple .ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ─── SCROLL PROGRESS ─── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(to right, var(--c-teal-mid), var(--c-gold-light));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ─── RTL SUPPORT (Arabic) ─── */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .nav-menu { flex-direction: row-reverse; }
[dir="rtl"] .nav-brand { flex-direction: row-reverse; }
[dir="rtl"] .btn-group { flex-direction: row-reverse; }
[dir="rtl"] .hero-inner { direction: rtl; }
[dir="rtl"] .card__icon { margin-left: auto; margin-right: 0; }
[dir="rtl"] .cooperation-step { flex-direction: row-reverse; }
[dir="rtl"] .form-select {
  background-position: left var(--sp-3) center;
  padding-left: var(--sp-10);
  padding-right: var(--sp-4);
}
[dir="rtl"] .footer-main { direction: rtl; }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .back-to-top { right: auto; left: var(--sp-6); }

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}