/* ================================================================
   AgentFlow animation kit — drop-in motion for any surface.
   - React: wrap with <Animate variant="fade-up"> (see anim/Animate.tsx)
   - Vanilla (landing): add data-anim="fade-up" + load landing/anim.js
   Variants: fade-up (default), fade-in, scale-in, float, pulse-soft,
   shimmer, march. Tune per element with --af-delay / --af-duration.
   Content stays visible when JS is off or motion is reduced.
   ================================================================ */

@keyframes af-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes af-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes af-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes af-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes af-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes af-shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}
@keyframes af-march {
  to { stroke-dashoffset: -12; }
}

/* Hidden pre-state applies ONLY when JS runs (html.af-js), so no-JS
   visitors and crawlers always see content. */
html.af-js .af-anim,
html.af-js [data-anim] {
  opacity: 0;
}
html.af-js .af-anim.af-in,
html.af-js [data-anim].af-in {
  opacity: 1;
  animation-name: var(--af-name, af-fade-up);
  animation-duration: var(--af-duration, 0.6s);
  animation-timing-function: var(--af-ease, cubic-bezier(0.22, 1, 0.36, 1));
  animation-delay: var(--af-delay, 0ms);
  animation-fill-mode: both;
}
.af-fade-in { --af-name: af-fade-in; }
.af-fade-up { --af-name: af-fade-up; }
.af-scale-in { --af-name: af-scale-in; }

/* Ambient loops — apply directly, no reveal needed */
.af-float { animation: af-float 5s ease-in-out infinite; }
.af-pulse-soft { animation: af-pulse-soft 2.4s ease-in-out infinite; }
.af-shimmer {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: af-shimmer 2.8s linear infinite;
}

/* Stagger helper for lists: children play in sequence */
.af-stagger > * {
  --af-delay: calc(var(--af-i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  html.af-js .af-anim,
  html.af-js [data-anim] {
    opacity: 1;
    animation: none;
  }
  .af-float, .af-pulse-soft, .af-shimmer {
    animation: none;
  }
}