/* Scroll reveal and restrained image parallax for the stacked mobile portfolio. */
@media (max-width: 1023.98px) {
  .portfolio-card[data-portfolio-motion-ready] {
    --portfolio-parallax: 0px;
    opacity: 0;
    transform: translate3d(0, 54px, 0);
    clip-path: inset(0 0 12% 0);
    transition:
      opacity .7s ease,
      transform 1s cubic-bezier(.22, 1, .36, 1),
      clip-path 1.05s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform, clip-path;
  }

  .portfolio-card[data-portfolio-motion-ready].is-portfolio-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0);
  }

  .portfolio-card[data-portfolio-motion-ready] .portfolio-card__media img {
    transform: translate3d(0, var(--portfolio-parallax), 0) scale(1.09);
    transition: transform .12s linear;
    will-change: transform;
  }

  .portfolio-card[data-portfolio-motion-ready] .portfolio-card__name,
  .portfolio-card[data-portfolio-motion-ready] .portfolio-card__content {
    opacity: 0;
    transform: translate3d(0, 20px, 0) !important;
    transition: opacity .62s ease, transform .82s cubic-bezier(.22, 1, .36, 1);
  }

  .portfolio-card[data-portfolio-motion-ready].is-portfolio-visible .portfolio-card__name {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: .16s;
  }

  .portfolio-card[data-portfolio-motion-ready].is-portfolio-visible .portfolio-card__content {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: .25s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card[data-portfolio-motion-ready],
  .portfolio-card[data-portfolio-motion-ready] .portfolio-card__name,
  .portfolio-card[data-portfolio-motion-ready] .portfolio-card__content {
    opacity: 1;
    transform: none !important;
    clip-path: none;
    transition: none;
  }

  .portfolio-card[data-portfolio-motion-ready] .portfolio-card__media img {
    transform: none;
    transition: none;
  }
}