/* ==========================================================================
   Jobson Garden — home section motion

   Transition copied from the Wix Studio site, read off its live stylesheet
   rather than eyeballed:

     @keyframes motion-floatIn {
       0%      { opacity: 0; animation-timing-function: step-end; }
       0.0001% { opacity: 0; transform: translate(x, y); }
       100%    { opacity: 1; transform: translate(0, 0); }
     }
     duration 1.2s · cubic-bezier(0.445, 0.05, 0.55, 0.95) · fill backwards
     --motion-translate-x alternates +60px / -60px, y stays 0

   That step-end first frame is deliberate: it pins the element at opacity 0
   with NO transform for an instant, so nothing flashes at its start offset
   before the animation takes over.

   SCOPE: #what-we-do and #initiatives only. The hero has its own motion and
   is deliberately untouched.
   ========================================================================== */

.home-mission,
.home-initiatives {
  --float-dur:  1200ms;
  --float-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --float-x:    60px;
  --float-step: 110ms;   /* card rows arrive in sequence, not as a block */
}

/* Hidden state is scoped to .js, set before first paint — if scripting fails
   the section renders complete rather than blank. */
.js .home-mission [data-float],
.js .home-initiatives [data-float] {
  opacity: 0;
}

.js .home-mission [data-float].float-in,
.js .home-initiatives [data-float].float-in {
  /* "both", not Wix's "backwards": their base style is visible, so backwards
     fill alone is enough there. Ours starts at opacity 0, so a backwards-only
     fill drops the element back to invisible the instant the animation ends.
     Measured: opacity returned to 0 at the 100% mark. */
  animation: jg-float-in var(--float-dur) var(--float-ease) var(--float-delay, 0ms) both;
}

/* Direction is per element, matching the Wix site's alternating pattern. */
.js .home-mission [data-float="left"],
.js .home-initiatives [data-float="left"]  { --motion-x: calc(var(--float-x) * -1); }
.js .home-mission [data-float="right"],
.js .home-initiatives [data-float="right"] { --motion-x: var(--float-x); }

@keyframes jg-float-in {
  0% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  0.0001% {
    opacity: 0;
    transform: translate3d(var(--motion-x, 0), 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* The animation ends on opacity 1; hold it so nothing snaps back if the
   animation is ever cancelled. */
.js .home-mission [data-float].float-done,
.js .home-initiatives [data-float].float-done {
  opacity: 1;
  animation: none;
}

/* On a phone a 60px horizontal slide can overhang the viewport edge and
   flash a scrollbar. Shorten the travel rather than dropping the effect. */
@media (max-width: 768px) {
  .home-mission,
  .home-initiatives { --float-x: 28px; --float-step: 80ms; }
}

/* Rule 7: every animation branches here. */
@media (prefers-reduced-motion: reduce) {
  .js .home-mission [data-float],
  .js .home-initiatives [data-float],
  .js .home-mission [data-float].float-in,
  .js .home-initiatives [data-float].float-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}