/*
 * Jobs page "We are growing" scroll reveal + card hover.
 *
 * Webflow Interactions drove a staggered entrance when
 * `.career-choose-us-section` entered the viewport: the ADS logo block
 * starts at inline `opacity:0`, then the tag, masked H2, and three
 * `.choose-box-3` cards cascade in.
 *
 * `JobsChooseUsReveal` adds `.jobs-choose-us-reveal-armed` on mount and
 * `.is-in-view` on first scroll into view. Animations stay paused at
 * their `from` keyframe until then (`animation-fill-mode: both`).
 *
 * Card hover recreates Webflow "Home Two Choose Us Hover In/Out 4"
 * (action lists a-177 / a-178): cream fill → peach fill, dark outline,
 * subtitle text lavender → navy.
 *
 * Keyframes: `app/animations.css` (swoop presets), plus local mask rise.
 * Loaded only on `/about/jobs`.
 */

@keyframes wf-jobs-choose-us-mask-rise {
  from {
    opacity: 0;
    transform: translateY(110%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wf-jobs-choose-us-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Webflow a-177 / a-178 — color + border hover on `.choose-box-3` cards */
.wf-body
  .career-choose-us-section
  .choose-us-service-block
  > .choose-box-3 {
  transition:
    background-color 300ms ease,
    border-color 500ms ease;
}

.wf-body
  .career-choose-us-section
  .choose-us-service-block
  > .choose-box-3
  .heading-six-8.choose-us-option-text.choose-us-option-text-two {
  transition: color 500ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .wf-body
    .career-choose-us-section
    .choose-us-service-block
    > .choose-box-3:hover,
  .wf-body
    .career-choose-us-section
    .choose-us-service-block
    > .choose-box-3:focus-visible {
    background-color: #ffc171;
    border-color: #282828;
  }

  .wf-body
    .career-choose-us-section
    .choose-us-service-block
    > .choose-box-3:hover
    .heading-six-8.choose-us-option-text.choose-us-option-text-two,
  .wf-body
    .career-choose-us-section
    .choose-us-service-block
    > .choose-box-3:focus-visible
    .heading-six-8.choose-us-option-text.choose-us-option-text-two {
    color: #1f2650;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .career-choose-us-image-wrapper {
    animation: ads-swoop-right-fade 1000ms cubic-bezier(0.22, 1, 0.36, 1)
      both;
    animation-play-state: paused;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .career-choose-us-text-wrapper
    > .tag {
    animation: wf-jobs-choose-us-fade-up 800ms cubic-bezier(0.22, 1, 0.36, 1)
      both;
    animation-delay: 120ms;
    animation-play-state: paused;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .overflow-hidden-8
    > h2 {
    animation: wf-jobs-choose-us-mask-rise 850ms
      cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 240ms;
    animation-play-state: paused;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .choose-us-service-block
    > .choose-box-3 {
    animation: wf-jobs-choose-us-fade-up 800ms cubic-bezier(0.22, 1, 0.36, 1)
      both;
    animation-play-state: paused;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .choose-us-service-block
    > .choose-box-3:nth-child(1) {
    animation-delay: 380ms;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .choose-us-service-block
    > .choose-box-3:nth-child(2) {
    animation-delay: 500ms;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .choose-us-service-block
    > .choose-box-3:nth-child(3) {
    animation-delay: 620ms;
  }

  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed.is-in-view
    .career-choose-us-image-wrapper,
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed.is-in-view
    .career-choose-us-text-wrapper
    > .tag,
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed.is-in-view
    .overflow-hidden-8
    > h2,
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed.is-in-view
    .choose-us-service-block
    > .choose-box-3 {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .career-choose-us-image-wrapper,
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .career-choose-us-text-wrapper
    > .tag,
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .overflow-hidden-8
    > h2,
  .wf-body
    .career-choose-us-section.jobs-choose-us-reveal-armed
    .choose-us-service-block
    > .choose-box-3 {
    animation: none;
    opacity: 1 !important;
    transform: none;
  }
}