/* ==========================================================================
   SB GO — CUSTOM STYLES
   Put your own CSS here. This file loads after style.css, so anything you
   write here wins.
   ========================================================================== */

/* ---------- Scroll / load animations ----------
   Any element with data-animate="fade-up" | "fade-right" | "fade-left" | "fade"
   fades in when it scrolls into view. Optional data-delay="0.2" (seconds). */
.js [data-animate] {
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  will-change: opacity, transform;
}
.js [data-animate="fade-up"] {
  transform: translateY(20px);
}
.js [data-animate="fade-right"] {
  transform: translateX(-24px);
}
.js [data-animate="fade-left"] {
  transform: translateX(16px);
}
.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Franchise form: small slide when switching steps */
.form-step-enter {
  animation: formStepIn 0.25s ease;
}
@keyframes formStepIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .form-step-enter {
    animation: none;
  }
}

/* ---------- Your styles below ---------- */