/* ==========================================================================
   ClickApp — Animations
   ========================================================================== */

/* Scroll-triggered: hidden state only when JS class present (progressive enhancement) */
html.js [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
html.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

html.js [data-animate="fade-in"]      { transform: none; }
html.js [data-animate="slide-left"]   { transform: translateX(-40px); }
html.js [data-animate="slide-right"]  { transform: translateX(40px); }
html.js [data-animate="scale-in"]     { transform: scale(0.92); }
html.js [data-animate="clip-reveal"]  { clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 0.8s ease; }
html.js [data-animate="clip-reveal"].is-visible { clip-path: inset(0 0 0 0); }

/* Staggered children */
html.js [data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 0.08s);
}
html.js [data-animate="stagger"].is-visible > * { opacity: 1; transform: none; }

/* Reduced motion: disable all */
@media (prefers-reduced-motion: reduce) {
  html.js [data-animate] { opacity: 1 !important; transform: none !important; }
  .ca-hero__orb, .ca-hero__tech-badge, .ca-tech-stack__track, .ca-gradient-text,
  .ca-hero__mockup, .ca-cta::before {
    animation: none !important;
    transition: none !important;
  }
}

/* Utility animation classes */
.anim-float   { animation: caFloat 4s ease-in-out infinite; }
.anim-pulse   { animation: caPulseGlow 2.5s ease-in-out infinite; }
.anim-spin    { animation: caSpin 20s linear infinite; }
@keyframes caSpin { to { transform: rotate(360deg); } }