/* ==========================================================================
   Digital Solutions 4India — Motion
   Entrance reveals (driven by IntersectionObserver in animations.js),
   floating decorative elements and keyframes. Everything is switched off
   for visitors who prefer reduced motion.
   ========================================================================== */

/* Reveal: content is only hidden when JS is running (html.js), so the site
   is fully readable without JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal--left { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal--zoom { transform: scale(.96); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Hero entrance */
.js .hero-enter > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 900ms var(--ease) forwards;
}
.js .hero-enter > *:nth-child(1) { animation-delay: 60ms; }
.js .hero-enter > *:nth-child(2) { animation-delay: 160ms; }
.js .hero-enter > *:nth-child(3) { animation-delay: 260ms; }
.js .hero-enter > *:nth-child(4) { animation-delay: 360ms; }
.js .hero-enter > *:nth-child(5) { animation-delay: 460ms; }
.js .hero-enter > *:nth-child(6) { animation-delay: 560ms; }

/* Animated gradient accent on hero words */
.hero h1 .text-gradient,
.page-hero h1 .text-gradient {
  background-size: 200% 100%;
  animation: gradient-pan 8s ease-in-out infinite alternate;
}

/* Floating cards */
.float-card--a { animation: float-y 7s ease-in-out infinite; }
.float-card--b { animation: float-y 8s ease-in-out -2s infinite; }
.float-card--c { animation: float-y 6.5s ease-in-out -4s infinite; }
.hero-ring { animation: spin-slow 40s linear infinite; }
.orb { animation: drift 18s ease-in-out infinite alternate; }

/* Sparkline draw-in */
.spark .spark-line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: draw 2.2s var(--ease) .9s forwards;
}

/* Logo marquee */
.marquee-track { animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.08); } }
@keyframes gradient-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .hero-enter > * { opacity: 1; transform: none; animation: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track [aria-hidden="true"] { display: none; }
  .spark .spark-line { stroke-dashoffset: 0; animation: none; }
  .wa-float::before { animation: none; }
}