@layer animations;

@layer animations {
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--motion-slow) var(--ease-out),
      transform var(--motion-slow) var(--ease-out);
    will-change: opacity, transform;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal] {
    --reveal-delay: 0ms;
    transition-delay: var(--reveal-delay);
  }

  .solution-grid .reveal:nth-child(1),
  .highlight-grid .reveal:nth-child(1) {
    --reveal-delay: 0ms;
  }

  .solution-grid .reveal:nth-child(2),
  .highlight-grid .reveal:nth-child(2) {
    --reveal-delay: 80ms;
  }

  .solution-grid .reveal:nth-child(3),
  .highlight-grid .reveal:nth-child(3) {
    --reveal-delay: 160ms;
  }

  .solution-grid .reveal:nth-child(4),
  .highlight-grid .reveal:nth-child(4) {
    --reveal-delay: 240ms;
  }

  .section__header.reveal {
    --reveal-delay: 0ms;
  }

  .tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: fade-up linear both;
      animation-timeline: view(block 90% 10%);
      transition: none;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
      animation: none !important;
    }
  }
}