/* Motion must never be required to see NextBias content. */

/* The base motion sheet hides elements only to stage an entrance. Reset them
   here so a delayed, stale, or failed script cannot leave the page blank. */
.motion-ready .home .hero-copy > *,
.motion-ready .hero-stack .stack-card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: none;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-live .home .hero-copy > * {
    animation: motion-lyric-enter var(--motion-long) var(--motion-spring) both;
  }

  .motion-live .hero-stack .stack-card {
    animation: motion-stack-enter 820ms var(--motion-spring) both;
  }

  .motion-live .hero-stack .stack-1 { animation-delay: 170ms; }
  .motion-live .hero-stack .stack-2 { animation-delay: 250ms; }
  .motion-live .hero-stack .stack-3 { animation-delay: 330ms; }
}

@keyframes motion-stack-enter {
  from {
    opacity: 0;
    translate: 0 46px;
    scale: .95;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* A runtime error or stale asset may activate this fail-safe class. */
.motion-fallback .home .hero-copy > *,
.motion-fallback .hero-stack .stack-card,
.motion-fallback .motion-reveal,
.motion-forced-visible {
  opacity: 1 !important;
  translate: 0 0 !important;
  rotate: 0deg !important;
  scale: 1 !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 620px) {
  .motion-ready .home .hero-copy > *,
  .motion-ready .hero-stack .stack-card {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    clip-path: none;
  }
}

@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .motion-live .home .hero-copy > * {
    animation-name: motion-lyric-enter-mobile;
    animation-duration: 620ms;
    animation-fill-mode: both;
  }

  .motion-live .hero-stack .stack-card {
    animation-name: motion-stack-enter-mobile;
    animation-duration: 560ms;
    animation-fill-mode: both;
  }

  .motion-live .hero-stack .stack-1 { animation-delay: 90ms; }
  .motion-live .hero-stack .stack-2 { animation-delay: 140ms; }
  .motion-live .hero-stack .stack-3 { animation-delay: 190ms; }
}

@keyframes motion-stack-enter-mobile {
  from {
    opacity: 0;
    translate: 0 22px;
    scale: .98;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}