.hero-content {
  animation: heroContentIn 700ms ease both;
}

.hero-visual {
  animation: heroVisualIn 800ms ease 120ms both;
}

.website-benefits-header,
.benefit-card,
.portfolio-showcase-header,
.portfolio-carousel,
.portfolio-showcase-action,
.pricing-header,
.pricing-card {
  will-change: opacity, transform;
}

.website-benefits-section.is-visible .website-benefits-header {
  animation: benefitsHeaderIn 700ms ease both;
}

.website-benefits-section.is-visible .benefit-card {
  animation: benefitsCardIn 620ms ease both;
}

.website-benefits-section.is-visible .benefit-card:nth-child(1) {
  animation-delay: 90ms;
}

.website-benefits-section.is-visible .benefit-card:nth-child(2) {
  animation-delay: 180ms;
}

.website-benefits-section.is-visible .benefit-card:nth-child(3) {
  animation-delay: 270ms;
}

.website-benefits-section.is-visible .benefit-card:nth-child(4) {
  animation-delay: 360ms;
}

.portfolio-showcase-section.is-visible .portfolio-showcase-header {
  animation: benefitsHeaderIn 700ms ease both;
}

.portfolio-showcase-section.is-visible .portfolio-carousel {
  animation: portfolioCarouselIn 760ms ease 120ms both;
}

.portfolio-showcase-section.is-visible .portfolio-showcase-action {
  animation: benefitsHeaderIn 620ms ease 260ms both;
}

.pricing-section.is-visible .pricing-header {
  animation: benefitsHeaderIn 700ms ease both;
}

.pricing-section.is-visible .pricing-card {
  animation: benefitsCardIn 620ms ease both;
}

.pricing-section.is-visible .pricing-card:nth-child(1) {
  animation-delay: 100ms;
}

.pricing-section.is-visible .pricing-card:nth-child(2) {
  animation-delay: 200ms;
}

.pricing-section.is-visible .pricing-card:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes heroContentIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

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

@keyframes benefitsHeaderIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

@keyframes benefitsCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes portfolioCarouselIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-visual,
  .website-benefits-section.is-visible .website-benefits-header,
  .website-benefits-section.is-visible .benefit-card,
  .portfolio-showcase-section.is-visible .portfolio-showcase-header,
  .portfolio-showcase-section.is-visible .portfolio-carousel,
  .portfolio-showcase-section.is-visible .portfolio-showcase-action,
  .pricing-section.is-visible .pricing-header,
  .pricing-section.is-visible .pricing-card {
    animation: none;
  }

  .benefit-card {
    opacity: 1;
    transform: none;
  }

  .portfolio-showcase-header,
  .portfolio-carousel,
  .portfolio-showcase-action {
    opacity: 1;
    transform: none;
  }

  .pricing-header,
  .pricing-card {
    opacity: 1;
    transform: none;
  }

  .inquiry-modal,
  .inquiry-dialog {
    transition: none;
  }
}