/* ==========================================================================
   Scroll-reveal + micro-interaction animation utilities
   Driven by an IntersectionObserver in main.js which adds `.is-visible`
   ========================================================================== */

/* Scoped to .js so content is fully visible by default — if JavaScript
   fails to load or run for any reason, nothing on the page is hidden.
   The tiny blocking script in <head> adds .js before first paint. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-soft),
    transform var(--dur-slow) var(--ease-out-soft);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="left"] {
  transform: translateX(-36px);
}
[data-reveal="left"].is-visible {
  transform: translateX(0);
}

.js [data-reveal="right"] {
  transform: translateX(36px);
}
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

.js [data-reveal="scale"] {
  transform: scale(0.94);
}
[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* Staggered children: main.js sets --stagger-index per item */
[data-reveal-group] > * {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Count-up number ticking */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* Gentle float for decorative art */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-anim {
  animation: float-y 5.5s ease-in-out infinite;
}

/* Shimmer sweep for CTA buttons */
@keyframes shimmer-sweep {
  0% { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}

/* Marquee scroll for the logo strip */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Subtle pulse for live badges / pins */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(245, 130, 32, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(245, 130, 32, 0); }
}

/* Fade-slide for FAQ answer panels */
@keyframes answer-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}