/* Lightweight motion system for the business landing page */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
      opacity .72s cubic-bezier(.2, .72, .25, 1),
      transform .72s cubic-bezier(.2, .72, .25, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
  }

  .motion-ready .motion-reveal.motion-from-left {
    transform: translate3d(-28px, 0, 0);
  }

  .motion-ready .motion-reveal.motion-from-right {
    transform: translate3d(28px, 0, 0);
  }

  .motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  .motion-ready .hero-content > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    animation: hero-content-in .72s cubic-bezier(.2, .72, .25, 1) forwards;
  }

  .motion-ready .hero-content > :nth-child(1) { animation-delay: .08s; }
  .motion-ready .hero-content > :nth-child(2) { animation-delay: .16s; }
  .motion-ready .hero-content > :nth-child(3) { animation-delay: .24s; }
  .motion-ready .hero-content > :nth-child(4) { animation-delay: .32s; }
  .motion-ready .hero-content > :nth-child(5) { animation-delay: .4s; }

  .motion-ready .hero-banner > img {
    animation: hero-image-drift 16s ease-in-out infinite alternate;
    will-change: transform;
  }

  .business-site .episode-card .ai-video-thumbnail,
  .business-site .service-card svg,
  .business-site .price-icon {
    transition: transform .45s cubic-bezier(.2, .72, .25, 1);
  }

  .business-site .episode-card:hover .ai-video-thumbnail {
    transform: scale(1.045);
  }

  .business-site .service-card:hover svg,
  .business-site .price-card:hover .price-icon {
    transform: translateY(-4px) scale(1.04);
  }

  .business-site .episode-update {
    animation: episode-status-pulse 2.8s ease-in-out infinite;
  }

  .business-site .ai-video-open::after {
    animation: play-button-breathe 2.4s ease-in-out infinite;
  }

  .business-site .final-cta {
    background-size: 120% 120%;
    animation: cta-background-shift 9s ease-in-out infinite alternate;
  }
}

@keyframes hero-content-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-image-drift {
  from { transform: scale(1.005); }
  to { transform: scale(1.04); }
}

@keyframes episode-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 61, 92, 0); }
  50% { box-shadow: 0 0 0 7px rgba(226, 61, 92, .08); }
}

@keyframes play-button-breathe {
  0%, 100% { box-shadow: 0 8px 22px rgba(226, 61, 92, .24); }
  50% { box-shadow: 0 8px 28px rgba(226, 61, 92, .48); }
}

@keyframes cta-background-shift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-reveal {
    transform: translate3d(0, 16px, 0);
    transition-duration: .55s;
  }

  .motion-ready .motion-reveal.motion-from-left,
  .motion-ready .motion-reveal.motion-from-right {
    transform: translate3d(0, 16px, 0);
  }

  .motion-ready .motion-reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .motion-ready .hero-banner > img {
    animation-duration: 20s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .hero-content > *,
  .hero-banner > img,
  .episode-update,
  .ai-video-open::after,
  .final-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}