/* =========================================================================
   ANMAT LTD — ANIMATIONS
   Orchestrated, not scattered: one load sequence on the hero, one
   consistent scroll-reveal for content, and purposeful hover states.
   All paired with .js-reveal classes toggled by IntersectionObserver
   in js/main.js. Respect prefers-reduced-motion globally (see base.css).
   ========================================================================= */

/* ---- Generic scroll reveal ---- */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-stagger > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.reveal-stagger.is-visible > *{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:90ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:180ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:270ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:360ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:450ms; }

/* ---- Hero load sequence ----
   1) skyline silhouette draws in (stroke)
   2) gold arc sweeps in
   3) eyebrow + headline + copy + CTA rise in sequence
   Timings are staggered via animation-delay below.
*/

@keyframes drawStroke{
  to{ stroke-dashoffset:0; }
}

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

@keyframes archSweep{
  from{ opacity:0; transform:rotate(-6deg) scale(0.96); }
  to{ opacity:1; transform:rotate(0deg) scale(1); }
}

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

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

.hero-skyline path{
  stroke-dasharray:2200;
  stroke-dashoffset:2200;
  animation:drawStroke 2.2s var(--ease-out) 0.15s forwards;
}

.hero-arc{
  opacity:0;
  animation:archSweep 1.4s var(--ease-out) 0.4s forwards;
}

.hero-eyebrow{ opacity:0; animation:riseIn var(--dur-slow) var(--ease-out) 0.55s forwards; }
.hero-title{ opacity:0; animation:riseIn var(--dur-slow) var(--ease-out) 0.7s forwards; }
.hero-lead{ opacity:0; animation:riseIn var(--dur-slow) var(--ease-out) 0.88s forwards; }
.hero-cta{ opacity:0; animation:riseIn var(--dur-slow) var(--ease-out) 1.05s forwards; }
.hero-badges{ opacity:0; animation:riseIn var(--dur-slow) var(--ease-out) 1.2s forwards; }

.hero-figure{
  animation:floatY 7s var(--ease-in-out) infinite;
}

/* ---- Shimmer sweep (used on hover for gold surfaces / logo sheen) ---- */

.shimmer-on-hover{
  background:var(--grad-gold-sheen);
  background-size:220% 100%;
}
.shimmer-on-hover:hover{
  animation:shimmer 1.6s linear infinite;
}

/* ---- Marquee (client / partner / country strip) ---- */

.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;
  gap:var(--sp-9);
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }

@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---- Count-up number state (JS toggles the digit text; this just
   gives the number a soft settle-in for polish) ---- */

.stat .num{
  transition:opacity var(--dur-fast) var(--ease-out);
}
.stat.is-counting .num{ opacity:0.85; }

/* ---- Parallax layers (hero background beams) ---- */

.parallax-layer{
  will-change:transform;
  transition:transform 60ms linear;
}

/* ---- Loader (optional, for pages that gate first paint) ---- */

.page-loader{
  position:fixed; inset:0; z-index:999;
  background:var(--navy-950);
  display:flex; align-items:center; justify-content:center;
  transition:opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.page-loader svg{ width:64px; height:64px; }
.page-loader path{
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:drawStroke 1.1s var(--ease-in-out) infinite alternate;
}

@media (prefers-reduced-motion: reduce){
  .hero-skyline path,.hero-arc,.hero-eyebrow,.hero-title,.hero-lead,.hero-cta,.hero-badges,.hero-figure{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .marquee-track{ animation:none; }
}