/* ==========================================================================
   ARSH TOWNSHIPS — Motion
   Entrance reveals, hero transitions, reduced-motion fallbacks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll reveals
   Elements start visible; JS adds .reveal only when motion is allowed, so a
   failed script or a reduced-motion preference never hides content.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal--fade { transform: none; }
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.96); }

/* Below the two-column breakpoint the side reveals would sit outside the
   viewport before they run, so they enter vertically instead. */
@media (max-width: 1024px) {
  .reveal--left,
  .reveal--right { transform: translateY(26px); }
}

.reveal[data-reveal-delay="1"] { transition-delay: 90ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 180ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 270ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 360ms; }

/* --------------------------------------------------------------------------
   2. Hero slide transitions
   -------------------------------------------------------------------------- */

.hero__slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 900ms var(--ease-inout),
    visibility 900ms;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero__slide .hero__media img {
  transform: scale(1.08);
  transition: transform 7000ms linear;
}
.hero__slide.is-active .hero__media img { transform: scale(1); }

.hero__slide .hero__content > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.hero__slide.is-active .hero__content > * {
  opacity: 1;
  transform: none;
}
.hero__slide.is-active .hero__content > *:nth-child(1) { transition-delay: 140ms; }
.hero__slide.is-active .hero__content > *:nth-child(2) { transition-delay: 250ms; }
.hero__slide.is-active .hero__content > *:nth-child(3) { transition-delay: 360ms; }
.hero__slide.is-active .hero__content > *:nth-child(4) { transition-delay: 470ms; }

/* Before the slider script runs, the first slide is simply visible. */
.hero__slides:not([data-ready]) .hero__slide:first-child {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   3. Counters
   -------------------------------------------------------------------------- */

.counter { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__slide {
    transition: none;
  }
  .hero__slide .hero__media img { transform: none; }
  .hero__slide .hero__content > * { opacity: 1; transform: none; }
}