/* ==========================================================================
   ANIMATIONS — entrance, scroll reveal, micro-interactions
   ========================================================================== */

/* Fade up — visible by default, only animates when JS is alive.
   This prevents the page from showing as an empty void if JS is slow or fails. */
.fade-up { opacity: 1; transform: none; }
.js-ready .fade-up {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 1.1s cubic-bezier(.16,.84,.20,1) forwards;
}
.js-ready .fade-up:nth-child(1) { animation-delay: .15s; }
.js-ready .fade-up:nth-child(2) { animation-delay: .3s; }
.js-ready .fade-up:nth-child(3) { animation-delay: .45s; }
.js-ready .fade-up:nth-child(4) { animation-delay: .6s; }
.js-ready .fade-up:nth-child(5) { animation-delay: .75s; }
.js-ready .fade-up:nth-child(6) { animation-delay: .9s; }
.js-ready .fade-up:nth-child(7) { animation-delay: 1.05s; }

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

/* Hero-title lines — same pattern: visible by default, animate only with JS */
.hero-title .hero-line {
  display: block;
  opacity: 1;
  transform: none;
}
.js-ready .hero-title .hero-line {
  opacity: 0;
  transform: translateY(80px);
  animation: heroLineRise 1.2s cubic-bezier(.16,.84,.20,1) forwards;
}
.js-ready .hero-title .hero-line:nth-child(1) { animation-delay: .25s; }
.js-ready .hero-title .hero-line:nth-child(2) { animation-delay: .42s; }
.js-ready .hero-title .hero-line:nth-child(3) { animation-delay: .59s; }
@keyframes heroLineRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-triggered reveal — only active when JS sets html.js-ready
   (prevents content from being invisible if JS is slow or fails) */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.js-ready .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* CTA boxes never reveal — they are conversion-critical and must always be visible */
.cta-box.reveal { opacity: 1 !important; transform: none !important; }

.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }
.reveal:nth-child(5) { transition-delay: .4s; }
.reveal:nth-child(6) { transition-delay: .5s; }

/* Spin gradient border */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Subtle float */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Text shimmer */
@keyframes textShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduce motion respect — comprehensive */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Force animated elements to their final visible state */
  .reveal,
  .fade-up,
  .hero-title .hero-line {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Explicitly stop infinite background motion */
  .marquee-track,
  .testi-marquee-track,
  .hero-orb,
  .scroll-line,
  .pulse-dot,
  .loader-bar-fill,
  .cta-bg-orb {
    animation: none !important;
  }
  /* Reduced-motion: show as static horizontal-scroll list */
  .testi-marquee-track {
    flex-wrap: wrap;
    justify-content: center;
  }
  .testi-marquee {
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  /* Keep marquee content readable when animation is killed */
  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }
  /* Hide custom cursor on reduced motion (mouse-tracking animation) */
  .cursor, .cursor-follower { display: none !important; }
}