/*
 * Canonical preset: lib/animations.ts → ctaTwoReveal (scroll trigger)
 *
 * CTA Two scroll entrance chain on legacy Webflow pages:
 *
 *   1. `.cta-text-wrapper` — fadeIn (0ms)
 *   2. `.cta-girl-image-wrapper` — swoopRight.rise (400ms)
 *   3. `.cta-office-image.overflow-hidden` — swoopLeft.rise (400ms, with phone)
 *
 * Animations start paused once `CtaTwoReveal` adds `.cta-two-reveal-armed`.
 * `.is-in-view` starts the chain on first scroll into the section.
 *
 * Without `.cta-two-reveal-armed`, content stays visible so a missed JS bind
 * (e.g. before client navigation re-runs) never leaves the block hidden.
 *
 * Keyframes: app/animations.css (`ads-fade-in`, `ads-swoop-right-rise`,
 * `ads-swoop-left-rise`)
 *
 * Loaded by `app/(legacy)/layout.tsx`.
 */

@media (prefers-reduced-motion: no-preference) {
  .wf-body .cta-two-section.cta-two-reveal-armed .cta-text-wrapper {
    animation: ads-fade-in 750ms ease-in-out both;
    animation-delay: 0ms;
    animation-play-state: paused;
  }

  .wf-body .cta-two-section.cta-two-reveal-armed .cta-girl-image-wrapper {
    animation: ads-swoop-right-rise 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 400ms;
    animation-play-state: paused;
  }

  .wf-body
    .cta-two-section.cta-two-reveal-armed
    .cta-office-image.overflow-hidden {
    animation: ads-swoop-left-rise 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 400ms;
    animation-play-state: paused;
  }

  .wf-body .cta-two-section.cta-two-reveal-armed.is-in-view .cta-text-wrapper,
  .wf-body
    .cta-two-section.cta-two-reveal-armed.is-in-view
    .cta-girl-image-wrapper,
  .wf-body
    .cta-two-section.cta-two-reveal-armed.is-in-view
    .cta-office-image.overflow-hidden {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-body .cta-two-section.cta-two-reveal-armed .cta-text-wrapper,
  .wf-body .cta-two-section.cta-two-reveal-armed .cta-girl-image-wrapper,
  .wf-body
    .cta-two-section.cta-two-reveal-armed
    .cta-office-image.overflow-hidden {
    animation: none;
    opacity: 1;
    transform: none;
  }
}