/*
 * Portfolio awards listing (`/portfolio/awards`) — scroll reveal.
 *
 * Mirrors live Webflow Interactions on `.latest-feature-section`:
 *
 *   H2 `.awards---page-heading-text-color` — flipInBottom (1000ms, 450ms delay)
 *   Each `.award-block` — shrinkIn (1000ms, 200ms delay, scale 1.25 → 1)
 *
 * Each target is observed independently (`SCROLL_INTO_VIEW`). Animations run
 * only once `.is-in-view` is set so `.awards-reveal-armed` alone never hides
 * the heading (award cards still use inline `opacity:0` from Webflow HTML).
 *
 * Loaded only on `/portfolio/awards`.
 */

@keyframes wf-awards-shrink-in {
  from {
    opacity: 0;
    transform: scale(1.25);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wf-awards-flip-in-bottom {
  from {
    opacity: 0;
    transform: perspective(500px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wf-body
    .latest-feature-section.awards-reveal-armed
    .awards---page-heading-text-color:not(.is-in-view) {
    opacity: 0;
    transform: perspective(500px) rotateX(-90deg);
  }

  .wf-body
    .latest-feature-section.awards-reveal-armed
    .awards---page-heading-text-color.is-in-view {
    animation: wf-awards-flip-in-bottom 1000ms
      cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation-delay: 450ms;
    will-change: transform, opacity;
  }

  .wf-body
    .latest-feature-section.awards-reveal-armed
    .award-block:not(.is-in-view) {
    opacity: 0 !important;
    transform: scale(1.25);
  }

  .wf-body
    .latest-feature-section.awards-reveal-armed
    .award-block.is-in-view {
    animation: wf-awards-shrink-in 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
      both;
    animation-delay: 200ms;
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-body
    .latest-feature-section.awards-reveal-armed
    .awards---page-heading-text-color,
  .wf-body
    .latest-feature-section.awards-reveal-armed
    .award-block {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}