html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ponytail: hero blocks need CSS vars + @keyframes together — can't do in Tailwind classes alone */
@keyframes organize {
  0%, 24% { transform: translate(var(--x0), var(--y0)) rotate(var(--r0)) scale(.9); opacity: .72; }
  48%, 74% { transform: translate(var(--x1), var(--y1)) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--x0), var(--y0)) rotate(var(--r0)) scale(.9); opacity: .72; }
}

.hero-block {
  animation: organize 5.4s cubic-bezier(.65, 0, .2, 1) infinite;
  animation-delay: calc(var(--d) * 55ms);
  transform: translate(var(--x0), var(--y0)) rotate(var(--r0)) scale(.92);
}

.flow-watch [class*="animate-"] {
  animation-play-state: paused;
}

.flow-watch.is-visible [class*="animate-"] {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .hero-block { animation: none; transform: translate(var(--x1), var(--y1)) rotate(0deg); }
}