/*
 * Portfolio case studies listing (`/portfolio/case-study`) — scroll reveal.
 *
 * Mirrors the live Webflow Interactions sequence on `.blog-three-section`:
 *
 *   #RecentWork tag — fadeIn (400ms)
 *   H1 — flipInBottom (400ms)
 *   Each `.blog-three-main` card — growIn / BOTTOM (450ms + 120ms stagger)
 *   Decorative star — fadeIn (600ms)
 *
 * Animations apply only once `.is-in-view` is set so `.case-study-reveal-armed`
 * alone never hides content (SSR / missed observer stay visible).
 *
 * Loaded only on `/portfolio/case-study`.
 */

@keyframes ads-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wf-case-study-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-case-study-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) {
  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .blog-three-text-wrapper
    .tag.border-radius-hundred {
    animation: ads-fade-in 750ms ease-in-out both;
    animation-delay: 400ms;
    will-change: opacity;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .blog-three-text-wrapper
    > .overflow-hidden
    > h1 {
    animation: wf-case-study-flip-in-bottom 850ms
      cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 400ms;
    will-change: transform, opacity;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .collection-list
    > .w-dyn-item
    > .blog-three-main {
    animation: wf-case-study-grow-in 850ms cubic-bezier(0.22, 1, 0.36, 1)
      both;
    will-change: transform, opacity;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .collection-list
    > .w-dyn-item:nth-child(1)
    > .blog-three-main {
    animation-delay: 450ms;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .collection-list
    > .w-dyn-item:nth-child(2)
    > .blog-three-main {
    animation-delay: 570ms;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .collection-list
    > .w-dyn-item:nth-child(3)
    > .blog-three-main {
    animation-delay: 690ms;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .collection-list
    > .w-dyn-item:nth-child(4)
    > .blog-three-main {
    animation-delay: 810ms;
  }

  .wf-body
    .blog-three-section.case-study-reveal-armed.is-in-view
    .star-image.star-ten {
    animation: ads-fade-in 750ms ease-in-out both;
    animation-delay: 600ms;
    will-change: opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-body .blog-three-section.case-study-reveal-armed .tag.border-radius-hundred,
  .wf-body
    .blog-three-section.case-study-reveal-armed
    .blog-three-text-wrapper
    > .overflow-hidden
    > h1,
  .wf-body
    .blog-three-section.case-study-reveal-armed
    .collection-list
    > .w-dyn-item
    > .blog-three-main,
  .wf-body .blog-three-section.case-study-reveal-armed .star-image.star-ten {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}