/* ============================================================
   SANABEL — animations.css
   Keyframes + reduced-motion fallbacks + initial GSAP states
   ============================================================ */

/* Preloader bar baseline (animated via GSAP) */
.preloader__bar{transform:scaleX(0);transform-origin:left}

/* Scroll indicator bob */
@keyframes scroll-bob{
  0%,100%{transform:scaleY(1);opacity:1}
  50%{transform:scaleY(0.6) translateY(8px);opacity:.4}
}
.hero__scroll-line{animation:scroll-bob 2s ease-in-out infinite}

/* Glow pulse on contact */
@keyframes glow-pulse{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
.contact.section--glow::after{animation:glow-pulse 4s ease-in-out infinite}

/* DrawSVG-style stroke setup (animated by GSAP via stroke-dashoffset) */
.draw-line{
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.draw-icon .draw-line{stroke-dasharray:200;stroke-dashoffset:200}

/* Marquee fallback (GSAP overrides; this is CSS baseline) */
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-scroll-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Service title glow already in main; reduced-motion strips it */

/* ============================================================
   REDUCED MOTION — instant, legible fallback states
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .preloader{display:none !important}
  .hero__title-line,.hero__eyebrow,.hero__subline,.hero__cta{opacity:1 !important;transform:none !important}
  .draw-line{stroke-dashoffset:0 !important}
  .value__rule,.draw-rule{transform:scaleX(1) !important}
  .story__media{clip-path:inset(0) !important}
  .section__title,.card,.service-card{opacity:1 !important;transform:none !important}
  /* Services becomes vertical, no pin */
  .services__track{height:auto !important}
  .services__inner{flex-direction:column;height:auto;transform:none !important;gap:2rem}
  .service-card{flex-basis:auto;width:100%;height:auto;min-height:60vh}
  .service-card__content > *{opacity:1 !important;transform:none !important}
  .service-card__media{left:0 !important;width:100% !important;transform:none !important}
  .services__hud,.services__progress{display:none !important}
  .marquee__inner{animation:none !important}
}

/* Reduced motion previously left the marquee frozen mid-track: .marquee is
   overflow:hidden and the track is width:max-content, so 23 of the 29 logos
   were clipped and unreachable. Wrap it into a static grid instead so everyone
   sees every client. */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee__inner{flex-wrap:wrap;width:auto;justify-content:center;animation:none !important}
  .marquee--reverse{display:none}
}