@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes gradient-pan {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes scroll-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes orb-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(30%, 20%); }
}
@keyframes orb-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20%, -10%) scale(1.1); }
}
@keyframes orb-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-30%, 25%) rotate(45deg); }
}

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.has-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.chat__bubble { animation: fade-in-up .35s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .hero__orb,
  .hero__title,
  .hero__scroll span,
  .marquee__track,
  .chat__bubble {
    animation: none !important;
  }
  .hero__title { background: none; color: var(--color-text); -webkit-text-fill-color: var(--color-text); }
}