/* Reversible scroll fades: entering cards rise gently, leaving cards fade away.
   Other component transforms (e.g. the staggered library layout) stay intact. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .discovery-column,
    .capability-card,
    .enterprise-banner,
    .service-card,
    .library-grid > button {
      animation: card-passage 1s linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }

    .capability-card:nth-child(2n),
    .service-card:nth-child(2),
    .library-grid > button:nth-child(3n + 2) {
      animation-range-start: entry 8%;
    }

    .library-grid > button:nth-child(3n) {
      animation-range-start: entry 14%;
    }

    /* A keyboard-focused card must stay readable, even near a viewport edge. */
    .discovery-column:focus-within,
    .capability-card:focus-within,
    .enterprise-banner:focus-within,
    .service-card:focus-within,
    .library-grid > button:focus-visible {
      animation: none;
      opacity: 1;
      translate: none;
      scale: none;
    }

    @keyframes card-passage {
      0% { opacity: 0; translate: 0 88px; scale: .94; }
      30%, 80% { opacity: 1; translate: 0 0; scale: 1; }
      100% { opacity: 0; translate: 0 -64px; scale: .96; }
    }
  }
}

/* Browsers without view timelines keep every card visible. */
@media (prefers-reduced-motion: reduce) {
  .discovery-column,
  .capability-card,
  .enterprise-banner,
  .service-card,
  .library-grid > button {
    animation: none;
    opacity: 1;
    translate: none;
    scale: none;
  }
}

@media (max-width: 700px) {
  .capability-card:nth-child(n),
  .service-card:nth-child(n),
  .library-grid > button:nth-child(n) {
    animation-range-start: entry 0%;
  }
}