/* Motion — reveals, orbs, delays */

/* Visible by default so content never stays blank if JS fails to init. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js-reveal .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--duration-slow, 500ms) var(--ease-out, ease),
    transform var(--duration-slow, 500ms) var(--ease-out, ease);
}

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

.reveal-delay-1 {
  transition-delay: 80ms;
}

.reveal-delay-2 {
  transition-delay: 160ms;
}

.reveal-delay-3 {
  transition-delay: 240ms;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(12px, -18px) scale(1.04); }
  66% { transform: translate(-10px, 10px) scale(0.97); }
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  html.js-reveal .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__orb,
  .float-card,
  .page-enter,
  .dashboard-shell__container > *:first-child {
    animation: none !important;
  }

  .btn:hover,
  .card:not(.card--static):hover {
    transform: none;
  }
}