/* =====================================================================
   BETWEEN — Variant: "حركة وحيوية" (Motion & Vitality)
   Additive layer, loaded AFTER styles.css. Pairs with the inline script
   in index-motion.html (marquee builder + hero parallax).
   Honors prefers-reduced-motion. RTL-aware.
   ===================================================================== */

/* ---------- Hero: stacking so sheen/particles sit over the photo but under text ---------- */
/* dark base so the parallax/scale on the bg image never exposes the light page bg (no white seam) */
.hero, .hero__bg { background: var(--ink); }
.hero__bg img { will-change: transform; }
.hero__inner { z-index: 3; }

/* Sweeping light sheen across the hero */
.hero__sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.hero__sheen::before {
  content: ""; position: absolute; inset: -40% -60%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(241, 223, 1, 0.10) 47%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(241, 223, 1, 0.10) 53%,
    transparent 62%);
  transform: translateX(-30%);
  animation: heroSheen 9s var(--ease) infinite;
}
@keyframes heroSheen {
  0%   { transform: translateX(-35%); opacity: 0; }
  18%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0; }
}

/* Floating accent particles */
.hero__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__particles i {
  position: absolute; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(241,223,1,0.95), rgba(241,223,1,0.18) 70%, transparent);
  filter: blur(0.4px); opacity: 0; animation: floatUp 14s linear infinite;
}
.hero__particles i:nth-child(1) { left: 12%; bottom: -6%; width: 6px; height: 6px; animation-duration: 16s; animation-delay: 0s; }
.hero__particles i:nth-child(2) { left: 26%; bottom: -6%; width: 10px; height: 10px; animation-duration: 19s; animation-delay: 2.5s; }
.hero__particles i:nth-child(3) { left: 38%; bottom: -6%; width: 5px;  height: 5px;  animation-duration: 13s; animation-delay: 4s; }
.hero__particles i:nth-child(4) { left: 51%; bottom: -6%; width: 9px;  height: 9px;  animation-duration: 21s; animation-delay: 1.2s; }
.hero__particles i:nth-child(5) { left: 63%; bottom: -6%; width: 6px;  height: 6px;  animation-duration: 17s; animation-delay: 6s; }
.hero__particles i:nth-child(6) { left: 74%; bottom: -6%; width: 11px; height: 11px; animation-duration: 23s; animation-delay: 3.3s; }
.hero__particles i:nth-child(7) { left: 85%; bottom: -6%; width: 5px;  height: 5px;  animation-duration: 15s; animation-delay: 5.2s; }
.hero__particles i:nth-child(8) { left: 93%; bottom: -6%; width: 8px;  height: 8px;  animation-duration: 20s; animation-delay: 0.8s; }
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(-46vh) translateX(14px); opacity: 0.7; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-92vh) translateX(-10px); opacity: 0; }
}

/* ---------- Coverage map: pulsing radar pins — 1 in Riyadh, 3 in Jeddah ----------
   Positions are physical left/top (= geographic) over the baked map markers.
   Nudge these % values if a dot sits slightly off the warehouse spot. */
.coverage__map { isolation: isolate; }
.map-pin { position: absolute; width: 0; height: 0; z-index: 2; }
.map-pin--riyadh    { left: 58%; top: 53%; }      /* central — single warehouse */
.map-pin--jeddah.jp1 { left: 31%;  top: 60%; }    /* Jeddah cluster — 3 warehouses */
.map-pin--jeddah.jp2 { left: 28%;  top: 63.5%; }
.map-pin--jeddah.jp3 { left: 34%;  top: 62.5%; }

.map-pin__dot {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 2px rgba(9,11,25,0.45), 0 0 10px 2px rgba(241,223,1,0.9), 0 0 22px 6px rgba(241,223,1,0.45);
  animation: pinDot 2.2s var(--ease) infinite;
}
.map-pin__ring {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid var(--yellow); opacity: 0;
  animation: pinPulse 2.4s var(--ease) infinite;
}
.map-pin__ring:nth-child(2) { animation-delay: 1.2s; }

/* stagger every pin so the cluster shimmers instead of pulsing in unison */
.map-pin--jeddah.jp1 .map-pin__dot,
.map-pin--jeddah.jp1 .map-pin__ring { animation-delay: 0.3s; }
.map-pin--jeddah.jp1 .map-pin__ring:nth-child(2) { animation-delay: 1.5s; }
.map-pin--jeddah.jp2 .map-pin__dot,
.map-pin--jeddah.jp2 .map-pin__ring { animation-delay: 0.9s; }
.map-pin--jeddah.jp2 .map-pin__ring:nth-child(2) { animation-delay: 2.1s; }
.map-pin--jeddah.jp3 .map-pin__dot,
.map-pin--jeddah.jp3 .map-pin__ring { animation-delay: 1.5s; }
.map-pin--jeddah.jp3 .map-pin__ring:nth-child(2) { animation-delay: 2.7s; }

@keyframes pinPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  80%  { transform: scale(4.6); opacity: 0; }
  100% { transform: scale(4.6); opacity: 0; }
}
@keyframes pinDot {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 2px rgba(9,11,25,0.45), 0 0 8px 2px rgba(241,223,1,0.8), 0 0 18px 5px rgba(241,223,1,0.4); }
  50%      { transform: scale(1.28); box-shadow: 0 0 0 2px rgba(9,11,25,0.45), 0 0 14px 3px rgba(241,223,1,1), 0 0 30px 9px rgba(241,223,1,0.6); }
}

/* ---------- Partners: seamless infinite logo marquee (built by inline script) ---------- */
.logos--marquee { display: block !important; gap: 0; }
.logo-marquee {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-marquee__track {
  display: flex; width: max-content; align-items: center; gap: 0; direction: ltr;
  animation: marqueeScroll var(--marquee-dur, 28s) linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__track .logos__item {
  flex: 0 0 auto; width: clamp(132px, 17vw, 184px); aspect-ratio: 16 / 9; margin: 0 6px;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Elevated micro-interactions ---------- */
/* springy lift + icon nudge on the card families */
.service-card, .segment-card, .step, .activity, .coverage__row {
  transition: transform 0.34s var(--ease-spring), box-shadow 0.34s var(--ease), border-color 0.34s var(--ease);
}
.service-card:hover { transform: translateY(-7px) scale(1.012); }
.service-card:hover .service-card__icon { transform: translateY(-3px) rotate(-3deg); }
.service-card__icon { transition: transform 0.34s var(--ease-spring); }
.step:hover { transform: translateY(-8px); }
.activity:hover { transform: translateY(-5px) scale(1.015); }
.activity:hover .activity__icon { transform: scale(1.08) rotate(-4deg); }
.activity__icon { transition: transform 0.34s var(--ease-spring); }

/* tasteful shine sweep on primary buttons + floating CTA */
.btn-primary, .floating-cta { position: relative; overflow: hidden; }
.btn-primary::after, .floating-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after, .floating-cta:hover::after { animation: btnShine 0.85s var(--ease) 1; }
@keyframes btnShine { to { inset-inline-start: 130%; } }

/* count-up stat gets a subtle pop when revealed */
.stat.is-in b { animation: statPop 0.6s var(--ease-spring) both; }
@keyframes statPop { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* segment card image: a touch more life on hover (base already scales) */
.segment-card:hover .segment-card__media img { transform: scale(1.07); }

/* ---------- Reduced motion: freeze everything kinetic ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__sheen::before,
  .hero__particles i,
  .map-pin__ring,
  .map-pin__dot,
  .logo-marquee__track,
  .stat.is-in b { animation: none !important; }
  .hero__particles i { opacity: 0; }
  .map-pin__ring { opacity: 0; }
  .btn-primary::after, .floating-cta::after { display: none; }
}


/* ---- user revisions ---- */
.hero__particles { display: none !important; }          /* remove the dashed-dots line near the hero bottom */
.about__media .badge { display: none !important; }       /* remove the yellow "شركة سعودية SA" badge */
html { background: var(--ink); }                          /* no white strip below the footer / on overscroll */

/* certification chips (ISO 9001 / ISO 22000 / SFDA) removed per request */
.iso-chips { display: none !important; }

/* floating "تواصل معنا" button ~30% smaller (still floating, on every page) */
.floating-cta { padding: 10px 17px; font-size: 0.74rem; gap: 8px; }
.floating-cta svg { width: 14px; height: 14px; }

/* hero: strip ~95% of the empty vertical space (no forced 92vh; just content + breathing room) */
.hero { min-height: auto; padding-block: 124px 50px; }

/* tighten section spacing ~60% (less empty vertical space site-wide) */
:root { --section-y: clamp(26px, 3.8vw, 54px); }
.section--tight { padding-block: clamp(20px, 2.4vw, 34px); }

/* give the plain benefit cards a photo background like the feature ("الاعتمادات") card */
[data-page="b2b"] .benefit:not(.benefit--feature):not(.benefit--accent),
[data-page="b2c"] .benefit:not(.benefit--feature):not(.benefit--accent) {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
[data-page="b2b"] .benefit:not(.benefit--feature):not(.benefit--accent) {
  background-image: linear-gradient(160deg, rgba(9,11,25,0.74), rgba(9,11,25,0.93)), url("../img/hero-b2b.jpg");
}
[data-page="b2c"] .benefit:not(.benefit--feature):not(.benefit--accent) {
  background-image: linear-gradient(160deg, rgba(9,11,25,0.74), rgba(9,11,25,0.93)), url("../img/hero-b2c.jpg");
}
.benefit:not(.benefit--feature):not(.benefit--accent):hover { background-blend-mode: normal; }