/*
 * Jobs listing (`/about/jobs`) — hero + opportunities scroll reveal.
 *
 * Mirrors live Webflow Interactions:
 *
 * Hero (`.career-banner-section-2`):
 *   Tag — flipInTop (400ms)
 *   H1 — fadeIn (450ms)
 *   Paragraph — flipInBottom (450ms)
 *   Team photo — fadeIn (250ms)
 *   Contact CTA — fade up (560ms, from jobs-hero-animations.css)
 *
 * Opportunities (`.career-opportunities-section`):
 *   Tag — flipInBottom (400ms)
 *   H2 — fadeIn (450ms)
 *   Each `.opportunities` card — growIn (450ms + stagger)
 *
 * `JobsListingReveal` arms each section and adds `.is-in-view` on scroll.
 */

@keyframes wf-jobs-listing-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wf-jobs-listing-flip-in-top {
  from {
    opacity: 0;
    transform: perspective(500px) rotateX(24deg) translateY(36px);
  }
  to {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) translateY(0);
  }
}

@keyframes wf-jobs-listing-flip-in-bottom {
  from {
    opacity: 0;
    transform: perspective(500px) rotateX(-24deg) translateY(-36px);
  }
  to {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) translateY(0);
  }
}

@keyframes wf-jobs-listing-grow-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ----- Hero banner ----- */
  .wf-body
    .career-banner-section-2.jobs-listing-reveal-armed.is-in-view
    .career-banner-text-wrapper
    > .tag {
    animation: wf-jobs-listing-flip-in-top 850ms
      cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 400ms;
    will-change: transform, opacity;
  }

  .wf-body
    .career-banner-section-2.jobs-listing-reveal-armed.is-in-view
    .career-banner-text-wrapper
    .overflow-hidden-7
    > h1 {
    animation: wf-jobs-listing-fade-in 750ms ease-in-out both;
    animation-delay: 450ms;
    will-change: opacity;
  }

  .wf-body
    .career-banner-section-2.jobs-listing-reveal-armed.is-in-view
    .career-banner-text-wrapper
    > p.paragraph-4 {
    animation: wf-jobs-listing-flip-in-bottom 850ms
      cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 450ms;
    will-change: transform, opacity;
  }

  /* ----- Opportunities ----- */
  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed:not(.is-in-view)
    .opportunities-wrapper
    > .w-dyn-item
    > .opportunities {
    opacity: 0;
    transform: translateY(40px) scale(0.94);
  }

  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .career-opportunities-text-wrapper
    .tag {
    animation: wf-jobs-listing-flip-in-bottom 850ms
      cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 400ms;
    will-change: transform, opacity;
  }

  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .career-opportunities-text-wrapper
    .overflow-hidden-10
    > h2 {
    animation: wf-jobs-listing-fade-in 750ms ease-in-out both;
    animation-delay: 450ms;
    will-change: opacity;
  }

  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .opportunities-wrapper
    > .w-dyn-item
    > .opportunities {
    animation: wf-jobs-listing-grow-in 850ms cubic-bezier(0.22, 1, 0.36, 1)
      both;
    will-change: transform, opacity;
  }

  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .opportunities-wrapper
    > .w-dyn-item:nth-child(1)
    > .opportunities {
    animation-delay: 450ms;
  }

  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .opportunities-wrapper
    > .w-dyn-item:nth-child(2)
    > .opportunities {
    animation-delay: 570ms;
  }

  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .opportunities-wrapper
    > .w-dyn-item:nth-child(3)
    > .opportunities {
    animation-delay: 690ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-body .career-banner-section-2.jobs-listing-reveal-armed.is-in-view
    .career-banner-text-wrapper
    > .tag,
  .wf-body .career-banner-section-2.jobs-listing-reveal-armed.is-in-view
    .career-banner-text-wrapper
    .overflow-hidden-7
    > h1,
  .wf-body .career-banner-section-2.jobs-listing-reveal-armed.is-in-view
    .career-banner-text-wrapper
    > p.paragraph-4,
  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .career-opportunities-text-wrapper
    .tag,
  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .career-opportunities-text-wrapper
    .overflow-hidden-10
    > h2,
  .wf-body
    .career-opportunities-section.jobs-listing-reveal-armed.is-in-view
    .opportunities-wrapper
    > .w-dyn-item
    > .opportunities {
    animation: none;
    opacity: 1 !important;
    transform: none;
  }
}