/* ==========================================================================
   SATHTA SERVICE — Animations
   Purposeful, restrained motion. Everything here respects prefers-reduced-motion
   (handled globally in style.css).
   ========================================================================== */

/* Hero page-load entrance (staggered) --------------------------------------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hero .anim { opacity: 0; animation: riseIn .8s var(--ease-out) forwards; }
.hero .anim[data-a="1"] { animation-delay: .05s; }
.hero .anim[data-a="2"] { animation-delay: .18s; }
.hero .anim[data-a="3"] { animation-delay: .31s; }
.hero .anim[data-a="4"] { animation-delay: .44s; }
.hero .anim[data-a="5"] { animation-delay: .57s; }
.hero__visual { opacity: 0; animation: riseIn .9s var(--ease-out) .35s forwards; }

/* The route-line truck drives along the dashed track ------------------------ */
@keyframes drive {
  0%   { inset-inline-start: 0; }
  100% { inset-inline-start: calc(100% - 30px); }
}
.route-line__truck {
  color: var(--red);
  animation: drive 3.4s ease-in-out infinite alternate;
}
:root[dir="rtl"] .route-line__truck { transform: translateY(-50%) scaleX(-1); }
.route-line__truck svg { width: 30px; height: 30px; filter: drop-shadow(0 3px 5px rgba(220,31,38,.3)); }

/* Gentle float on hero chips ------------------------------------------------ */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hero__chip { animation: floatY 5s ease-in-out infinite; }
.hero__chip--tr { animation: floatY 5.6s ease-in-out .4s infinite; }
@media (max-width: 640px){
  .hero__chip { animation: floatY 5s ease-in-out infinite; }
}

/* Ambient background drift for hero -----------------------------------------*/
@keyframes driftBlob {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(3%, 4%) scale(1.06); }
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
  z-index: 0; pointer-events: none;
}
.hero::before {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(246,168,30,.22), transparent 70%);
  inset-block-start: -60px; inset-inline-start: -40px;
  animation: driftBlob 14s ease-in-out infinite;
}
.hero::after {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(220,31,38,.16), transparent 70%);
  inset-block-end: -80px; inset-inline-end: -30px;
  animation: driftBlob 16s ease-in-out infinite reverse;
}
.hero__inner, .hero__visual { position: relative; z-index: 1; }

/* Counter shimmer while animating ------------------------------------------- */
@keyframes countPop {
  0% { transform: scale(.94); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}
.stat__n.counting { animation: countPop .5s var(--ease-out); }

/* Icon idle wiggle on hover (subtle) — used by feature cards ----------------- */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-7deg); }
  60% { transform: rotate(5deg); }
}
.fcard:hover .fcard__ic { animation: wiggle .5s var(--ease); }
.svc-card:hover .svc-card__icon svg { animation: none; }

/* Marquee for trust logos / cities (optional strip) ------------------------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
:root[dir="rtl"] .marquee__track { animation-direction: reverse; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--s-10); width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.marquee__item svg { width: 16px; height: 16px; color: var(--gold); }

/* Shine sweep on primary buttons -------------------------------------------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -120%;
  width: 60%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: none;
}
.btn--primary:hover::after { animation: shine .8s var(--ease); }
@keyframes shine { to { inset-inline-start: 130%; } }

/* Link underline grow -------------------------------------------------------*/
.nav__link::before {
  content: ""; position: absolute; inset-inline: 16px; inset-block-end: 4px; height: 2px;
  background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease);
}
.nav__link:hover::before, .nav__link.active::before { transform: scaleX(1); }

/* Scroll-reveal handled by .reveal in style.css (JS adds .in) ----------------*/