/* Animations — Keyframes + scroll-reveal classes */

/* ── Scroll Reveal (GSAP handles animation, these are initial states) ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
}

.reveal--right {
  opacity: 0;
  transform: translateX(40px);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
}

/* When JS is disabled or GSAP hasn't loaded, show content */
.no-js .reveal,
.no-js .reveal--left,
.no-js .reveal--right,
.no-js .reveal--scale {
  opacity: 1;
  transform: none;
}

/* ── Image clip reveal ── */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-out);
}

.clip-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* ── Parallax wrapper ── */
.parallax-wrap {
  overflow: hidden;
}

.parallax-img {
  will-change: transform;
}

/* ── Fade keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Marquee (trust bar on mobile) ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  gap: var(--space-8);
  animation: marquee 30s linear infinite;
}

@media (min-width: 768px) {
  .marquee__track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── Process line fill ── */
.process-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  transform: translateY(-50%);
}

.process-line__fill {
  width: 100%;
  height: 100%;
  background-color: var(--color-accent);
  transform-origin: left;
  transform: scaleX(0);
}

/* ── Testimonial carousel transitions ── */
.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.testimonial-slide.is-active {
  position: relative;
  opacity: 1;
}

/* ── Stagger animation helper ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .clip-reveal,
  .stagger-children > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .marquee__track {
    animation: none;
  }

  .parallax-img {
    will-change: auto;
  }
}