/* Deliberate, low-motion enhancements shared by the portfolio. */
:root {
  --motion-fast: 180ms;
  --motion-enter: 520ms;
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
}

@keyframes portfolio-hero-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes case-study-article-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .motion-hero {
    animation: portfolio-hero-enter var(--motion-enter) var(--motion-ease) both;
  }

  .motion-enabled .motion-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--motion-enter) var(--motion-ease) var(--motion-block-delay, 0ms),
      transform var(--motion-enter) var(--motion-ease) var(--motion-block-delay, 0ms);
  }

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

  .motion-enabled .case-study article.case-study-article-motion {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  .motion-enabled .case-study article.case-study-article-motion.is-visible {
    animation: case-study-article-enter 560ms var(--motion-ease) var(--article-motion-delay, 0ms) both;
  }
}

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

  .case-study article.case-study-article-motion {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}