/* Adapted from anime-create's FV fade, scroll fade and shine patterns.
   Motion is enabled only after animation.js has initialized. */
html.motion-ready .motion-hero,
html.motion-ready .motion-item {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
html.motion-ready .motion-hero.is-visible,
html.motion-ready .motion-item.is-visible,
html.motion-ready .motion-item:focus-within {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1),
              transform .55s cubic-bezier(.2,.7,.2,1);
}
html.motion-ready .flow__item:nth-child(2).is-visible { transition-delay: .09s; }
html.motion-ready .flow__item:nth-child(3).is-visible { transition-delay: .18s; }
html.motion-ready .motion-hero:focus-within,
html.motion-ready .motion-item:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

/* A single restrained shine when a primary call to action is approached. */
.fv-primary,
.price-card .button { position: relative; overflow: hidden; }
.fv-primary::after,
.price-card .button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -75%;
  width: 35%;
  transform: skewX(-25deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .25), transparent);
  pointer-events: none;
}
@media (hover: hover) {
  .fv-primary:hover::after,
  .price-card .button:hover::after { animation: motion-shine .7s ease-out 1; }
}
.fv-primary:focus-visible::after,
.price-card .button:focus-visible::after { animation: motion-shine .7s ease-out 1; }
@keyframes motion-shine {
  to { transform: skewX(-25deg) translateX(600%); }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .motion-hero,
  html.motion-ready .motion-item,
  html.motion-ready .motion-hero.is-visible,
  html.motion-ready .motion-item.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fv-primary::after,
  .price-card .button::after { animation: none !important; }
}