@keyframes loader-roll {
  0%, 100% { transform: translateX(-4px) rotate(-5deg); }
  50% { transform: translateX(6px) rotate(7deg); }
}

@keyframes draw-loader-line {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-float {
  0%, 100% { transform: translate3d(-50%, -50%, 0) rotate(1deg); }
  50% { transform: translate3d(-50%, calc(-50% - 10px), 0) rotate(-0.5deg); }
}

@keyframes draw-thread {
  to { stroke-dashoffset: 0; }
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes transition-thread {
  to { transform: scaleX(1); }
}

@keyframes transition-ball {
  to { left: calc(100% + 20px); transform: rotate(320deg); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 150ms; }
.reveal[data-delay="3"] { transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}