/* ==========================================================================
   MS HOST — MOTION
   All non-essential motion is gated behind prefers-reduced-motion at the
   bottom of this file.
   ========================================================================== */

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

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 64px 64px;
  }
}

@keyframes aurora-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.12); }
}

@keyframes aurora-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, 4%) scale(1.08); }
}

@keyframes aurora-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, -6%) scale(1.1); }
}

@keyframes badge-shimmer {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes grow-bar {
  from { width: 0%; }
}

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

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

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

@keyframes particle-rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% {
    transform: translateY(-140px) translateX(var(--drift, 12px));
    opacity: 0;
  }
}

.grad-text {
  animation: gradient-drift 7s linear infinite;
}

/* Hero headline + badge — plays once on load, not on scroll (the hero
   is always visible immediately, so a scroll trigger would never fire). */
.hero-badge,
.hero h1,
.hero .body-lg,
.hero-ctas {
  animation: fade-up 0.8s var(--ease) both;
}
.hero-badge { animation-delay: 0s; }
.hero h1 { animation-delay: 0.08s; }
.hero .body-lg { animation-delay: 0.18s; }
.hero-ctas { animation-delay: 0.28s; }

.aurora-blob.a1 { animation: aurora-drift-1 18s ease-in-out infinite; }
.aurora-blob.a2 { animation: aurora-drift-2 22s ease-in-out infinite; }
.aurora-blob.a3 { animation: aurora-drift-3 26s ease-in-out infinite; }

.infra-panel {
  animation: float-slow 7s ease-in-out 0.2s infinite, fade-in 0.8s var(--ease) 0.2s both;
}

.hero-badge .dot,
.infra-panel-head .status .dot {
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.bg-grid.is-animated {
  animation: grid-drift 22s linear infinite;
}

/* ---- Scroll reveal ------------------------------------------------------
   One consistent, restrained entrance used for whole sections (not every
   individual card) — applied via IntersectionObserver in main.js. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

/* ---- Per-card stagger (pricing grid, feature grid) ------------------------
   transition-delay is set inline per card index by main.js so the whole
   catalog animates in as one wave rather than all at once. */
.card-reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

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

/* ---- Magnetic-feel button press ------------------------------------------ */
.btn:active {
  transform: scale(0.97);
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .card-reveal {
    opacity: 1;
    transform: none;
  }

  .aurora-blob {
    animation: none !important;
  }

  .particles {
    display: none;
  }

  .marquee-track {
    animation: none !important;
  }
}