/* ==========================================================================
   ZA Consulting — زاوية أعمالي الاستشارية
   MOTION LAYER
   Loaded after style.css. Pure CSS + a small companion (motion.js).
   No external libraries. RTL-safe. Fully disabled under reduced-motion.
   ========================================================================== */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --curtain: linear-gradient(150deg, #02102e 0%, #041c4d 45%, #072e7a 100%);
}

/* --- 1. Preloader --------------------------------------------------------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: var(--curtain);
  transition: opacity .5s var(--ease-io), visibility .5s;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

#preloader .pl-mark { width: 116px; height: auto; opacity: 0; animation: pl-in .7s var(--ease-out-expo) .1s forwards; }
@keyframes pl-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

#preloader .pl-bar {
  width: min(240px, 54vw); height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
#preloader .pl-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal-300), var(--gold-500));
  transition: width .18s linear;
}
#preloader .pl-pct {
  font: 600 var(--fs-sm)/1 var(--font-base);
  color: rgba(255,255,255,.62); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* Body is locked while the preloader runs.
   Scoped with :has() so the page can never end up locked if the
   preloader was removed, skipped, or never rendered at all. */
body.is-loading:has(#preloader) { overflow: hidden; }

/* --- 2. Page-transition curtain ------------------------------------------ */
#curtain {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--curtain);
  transform: translateY(101%);
  pointer-events: none;
  will-change: transform;
}
#curtain.is-in {
  transform: translateY(0);
  transition: transform .52s var(--ease-io);
}
#curtain.is-out {
  transform: translateY(-101%);
  transition: transform .52s var(--ease-io);
}
#curtain .curtain-mark {
  position: absolute; inset-inline-start: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 92px; opacity: 0;
  transition: opacity .3s var(--ease-io) .12s;
}
html[dir="rtl"] #curtain .curtain-mark { transform: translate(50%, -50%); }
#curtain.is-in .curtain-mark { opacity: .9; }

/* --- 3. Scroll progress --------------------------------------------------- */
#scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1200;
  height: 3px; pointer-events: none;
  background: transparent;
}
#scroll-progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--teal-400), var(--gold-500));
  will-change: transform;
}
html[dir="ltr"] #scroll-progress i { transform-origin: left center; }
html[dir="rtl"] #scroll-progress i { transform-origin: right center; }

/* --- 4. Split-text reveal ------------------------------------------------- */
.split .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-block-end: .06em; margin-block-end: -.06em;
}
.split .w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .82s var(--ease-out-expo), opacity .82s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 52ms);
}
.split.is-in .w > i { transform: none; opacity: 1; }

/* --- 5. Hero rotating keyword -------------------------------------------- */
.rotator {
  display: inline-grid; vertical-align: bottom;
  overflow: hidden; height: 1.18em; line-height: 1.18;
}
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(100%);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
  white-space: nowrap;
}
.rotator > span.is-on { opacity: 1; transform: none; }
.rotator > span.is-out { opacity: 0; transform: translateY(-100%); }

.hero-rotate {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45em;
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg); font-weight: 600;
  color: rgba(255,255,255,.72);
}
.hero-rotate .rotator { color: var(--gold-400); font-weight: 700; }

/* --- 6. Hero parallax + scroll cue ---------------------------------------- */
.hero-arch__stage { transform: translateY(calc(-50% + var(--py, 0px))); }
.hero-arch__inner { transform: translateY(calc(var(--py, 0px) * -.32)); }
.hero-arch__glow  { transform: translateY(calc(var(--py, 0px) * .5)); }

.scroll-cue {
  position: absolute; z-index: 6;
  inset-block-end: 26px; inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.6); font-size: var(--fs-xs); letter-spacing: .1em;
}
html[dir="rtl"] .scroll-cue { transform: translateX(50%); }
.scroll-cue i {
  width: 1px; height: 42px; overflow: hidden;
  background: rgba(255,255,255,.2); position: relative; display: block;
}
.scroll-cue i::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 42%;
  background: var(--gold-400);
  animation: cue 2.1s var(--ease-io) infinite;
}
@keyframes cue { 0% { top: -45%; } 100% { top: 100%; } }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* --- 7. Magnetic buttons + shine ----------------------------------------- */
.magnetic {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .35s var(--ease-out-expo);
}
.magnetic.is-near { transition: transform .1s linear; }

.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: inset-inline-start .55s var(--ease-io);
}
.btn:hover::after { inset-inline-start: 115%; }
.btn > * { position: relative; z-index: 1; }

/* --- 8. Custom cursor (fine pointers only) -------------------------------- */
#cursor {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 9990;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(11,61,156,.55);
  pointer-events: none; opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width .28s var(--ease-out-expo), height .28s var(--ease-out-expo),
              opacity .3s, background .28s, border-color .28s;
  mix-blend-mode: normal;
}
#cursor.is-on { opacity: 1; }
#cursor.is-link { width: 56px; height: 56px; background: rgba(11,61,156,.1); border-color: var(--gold-500); }
#cursor.is-dark { border-color: rgba(255,255,255,.6); }
#cursor.is-dark.is-link { background: rgba(255,255,255,.12); border-color: var(--gold-400); }
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }

/* --- 9. Sticky services scrollytelling ---------------------------------- */
.svc-scroll { position: relative; }
.svc-scroll__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.svc-scroll__panel {
  position: sticky; top: calc(var(--header-h) + 28px);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, #02102e 0%, var(--navy-800) 52%, var(--navy-700) 100%);
  color: #fff; padding: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden; isolation: isolate;
  min-height: 396px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.svc-scroll__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 78% 18%, rgba(79,126,224,.4), transparent 58%),
              radial-gradient(circle at 12% 92%, rgba(224,160,44,.2), transparent 55%);
}
.svc-panel__num {
  font-size: clamp(3.4rem, 8vw, 5.6rem); font-weight: 700; line-height: .9;
  color: rgba(255,255,255,.14); font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease-io);
}
.svc-panel__ico {
  width: 74px; height: 74px; border-radius: 18px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15);
  margin-block: var(--sp-5) var(--sp-4);
}
.svc-panel__ico svg { width: 34px; height: 34px; stroke: var(--gold-400); }
.svc-panel__title { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 8px; }
.svc-panel__desc { font-size: var(--fs-sm); color: rgba(255,255,255,.72); margin: 0; line-height: 1.75; }
.svc-panel__body { opacity: 0; transform: translateY(12px); animation: svc-fade .45s var(--ease-out-expo) forwards; }
@keyframes svc-fade { to { opacity: 1; transform: none; } }

.svc-panel__rail { display: flex; gap: 6px; margin-block-start: var(--sp-5); }
.svc-panel__rail i {
  height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.16);
  transition: background .35s var(--ease-io);
}
.svc-panel__rail i.on { background: var(--gold-500); }

.svc-scroll__list { display: flex; flex-direction: column; }
.svc-item {
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
  border-block-end: 1px solid var(--ink-200);
  opacity: .42; transition: opacity .4s var(--ease-io);
  cursor: pointer;
}
.svc-item:last-child { border-block-end: 0; }
.svc-item.is-active { opacity: 1; }
.svc-item__head { display: flex; align-items: baseline; gap: var(--sp-4); }
.svc-item__n {
  font-size: var(--fs-sm); font-weight: 700; color: var(--gold-600);
  font-variant-numeric: tabular-nums; flex: none;
}
.svc-item h3 {
  margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.4;
  transition: color .3s var(--ease-io);
}
.svc-item.is-active h3 { color: var(--teal-500); }
.svc-item__body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .5s var(--ease-io), opacity .4s var(--ease-io), margin .4s var(--ease-io);
}
.svc-item.is-active .svc-item__body { max-height: 260px; opacity: 1; margin-block-start: var(--sp-3); }
.svc-item__body p { margin: 0 0 var(--sp-3); color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.85; }

@media (max-width: 900px) {
  .svc-scroll__grid { grid-template-columns: 1fr; }
  .svc-scroll__panel { display: none; }
  .svc-item { opacity: 1; }
  .svc-item__body { max-height: none; opacity: 1; margin-block-start: var(--sp-3); }
  .coverage__rule { transform: none; transition: none; }
  .reveal.visible .coverage__rule i { animation: none; opacity: 0; }
}

/* --- 10. Layered methodology stack --------------------------------------- */
.stack {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 880px; margin-inline: auto;
}
.stack__row {
  position: relative;
  display: grid; grid-template-columns: 58px 1fr auto; align-items: center;
  gap: var(--sp-5);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.9rem);
  border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden; isolation: isolate;
  transform: translateY(18px); opacity: 0;
  transition: transform .7s var(--ease-out-expo), opacity .7s var(--ease-out-expo),
              border-color .45s var(--ease-io), box-shadow .45s var(--ease-io);
}
.stack__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--teal-50), transparent 62%);
  opacity: 0; transition: opacity .45s var(--ease-io);
}
.stack__row.seen { transform: none; opacity: 1; }
.stack__row.lit {
  border-color: var(--teal-300);
  box-shadow: 0 14px 34px -18px rgba(7,46,122,.5);
}
.stack__row.lit::before { opacity: 1; }
.stack__row .sn {
  width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums;
  background: var(--ink-100); color: var(--ink-400);
  transition: background .45s var(--ease-io), color .45s var(--ease-io);
}
.stack__row.lit .sn { background: var(--teal-500); color: #fff; }
.stack__row h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.stack__row p  { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.7; }
.stack__row .sbadge {
  font-size: var(--fs-xs); font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--ink-100); color: var(--ink-500); white-space: nowrap;
  transition: background .45s var(--ease-io), color .45s var(--ease-io);
}
.stack__row.lit .sbadge { background: var(--gold-100); color: var(--gold-600); }
.stack__spine {
  width: 2px; height: 22px; margin-inline: auto; border-radius: 2px;
  background: var(--ink-200); transition: background .45s var(--ease-io);
}
.stack__spine.lit { background: var(--teal-300); }
@media (max-width: 680px) {
  .stack__row { grid-template-columns: 46px 1fr; }
  .stack__row .sn { width: 46px; height: 46px; border-radius: 13px; font-size: var(--fs-sm); }
  .stack__row .sbadge { grid-column: 2; justify-self: start; }
}

/* --- 11. Coverage: animated heading + static globe ----------------------- */
/* The globe is inline SVG generated by _partials/make_globe.py — no WebGL,
   no library, nothing that can fail on a given graphics driver. It never
   moves; the heading above it carries all the motion in this section. */
:root {
  --globe-sea-hi: #123b8f;
  --globe-sea:    #0b2a6b;
  --globe-sea-lo: #04143c;
  --globe-land:   #8fb2f2;
  --globe-grid:   #5d84d6;
  --globe-arc:    #e0a02c;
  --globe-pin:    #f2c471;
  --globe-edge:   #7fa0e8;
  --globe-halo:   #4f7ee0;
}

.coverage { padding-block: clamp(3rem, 7vw, 5.5rem); overflow: hidden; }

.coverage__head { text-align: center; margin-block-end: clamp(1.5rem, 4vw, 3rem); }
.coverage__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, var(--fs-3xl));
  line-height: 1.4;
}

/* A rule that draws itself outwards, with a light travelling along it. */
.coverage__rule {
  display: block; position: relative;
  width: min(300px, 62vw); height: 2px;
  margin: var(--sp-5) auto 0;
  background: linear-gradient(90deg, transparent, var(--ink-200) 22%, var(--ink-200) 78%, transparent);
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out-expo) .45s;
}
.reveal.visible .coverage__rule { transform: scaleX(1); }
.coverage__rule i {
  position: absolute; top: 50%; inset-inline-start: 0;
  width: 46px; height: 2px; margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0;
}
.reveal.visible .coverage__rule i {
  opacity: 1;
  animation: rule-travel 4.5s var(--ease-io) 1.4s infinite;
}
@keyframes rule-travel {
  0%   { transform: translateX(-46px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(min(300px, 62vw)); opacity: 0; }
}
html[dir="rtl"] .reveal.visible .coverage__rule i { animation-name: rule-travel-rtl; }
@keyframes rule-travel-rtl {
  0%   { transform: translateX(46px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(calc(-1 * min(300px, 62vw))); opacity: 0; }
}

/* The globe itself — plain, still, and always drawable. */
.globe-stage {
  width: 100%;
  max-width: min(540px, 84vw);
  margin-inline: auto;
}
.globe-svg { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .globe-stage { max-width: min(400px, 88vw); }
}

/* --- 12. Card tilt -------------------------------------------------------- */
.tilt { transform-style: preserve-3d; }
.tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px);
  transition: transform .12s linear;
}

/* --- 13. Counter figures -------------------------------------------------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* --- 14. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
  #curtain { display: none !important; }
  #cursor { display: none !important; }
  .scroll-cue i::after { animation: none; }
  .split .w > i { transform: none !important; opacity: 1 !important; transition: none !important; }
  .rotator { height: auto; }
  .rotator > span { opacity: 1; transform: none; }
  .rotator > span:not(:first-child) { display: none; }
  .hero-arch__stage { transform: translateY(-50%) !important; }
  .hero-arch__inner, .hero-arch__glow { transform: none !important; }
  .stack__row { transform: none !important; opacity: 1 !important; }
  .magnetic { transform: none !important; }
  .btn::after { display: none; }
  .svc-item { opacity: 1; }
  .svc-item__body { max-height: none; opacity: 1; margin-block-start: var(--sp-3); }
  .coverage__rule { transform: none; transition: none; }
  .reveal.visible .coverage__rule i { animation: none; opacity: 0; }
}

/* --- 15. Print ------------------------------------------------------------ */
@media print {
  #preloader, #curtain, #cursor, #scroll-progress, .scroll-cue { display: none !important; }
  .split .w > i { transform: none; opacity: 1; }
}