.motion-ready [data-animate] {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 2400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 2800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 2800ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--animate-delay, 180ms);
  will-change: opacity, transform;
}

.motion-ready [data-animate="scale"] {
  transform: translateY(28px) scale(0.94);
}

.motion-ready [data-animate="fade"] {
  transform: none;
}

.motion-ready [data-animate="left"] {
  transform: translateX(-52px);
}

.motion-ready [data-animate="right"] {
  transform: translateX(52px);
}

.motion-ready [data-animate="zoom"] {
  transform: scale(0.9);
}

.motion-ready [data-animate="soft-blur"] {
  filter: blur(10px);
  transform: translateY(28px) scale(0.96);
}

.motion-ready [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.motion-ready [data-count] {
  font-variant-numeric: tabular-nums;
}

.motion-ready .process-step .step-circle {
  transition:
    transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 1600ms ease,
    border-color 1600ms ease;
}

.motion-ready .process-step .step-line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--animate-delay, 180ms) + 450ms);
}

.motion-ready .process-step.is-visible .step-circle {
  transform: rotate(360deg) scale(1.04);
}

.motion-ready .process-step.is-visible .step-line {
  transform: scaleY(1);
}

.motion-ready .sol-carousel.is-visible .sol-slide.active img,
.motion-ready .superplano-img-wrap.is-visible img,
.motion-ready .antes-card.is-visible img {
  animation: imageDrift 3600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes imageDrift {
  from {
    opacity: 0.78;
    transform: scale(1.08);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.motion-ready :is(
  .btn-primary,
  .btn-ghost,
  .btn-cotizar,
  .btn-cta,
  .btn-submit,
  .btn-sm,
  .contact-wa-btn,
  .article-link,
  .acabados-link
) {
  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

@media (hover: hover) {
  .motion-ready :is(
    .btn-primary,
    .btn-ghost,
    .btn-cotizar,
    .btn-cta,
    .btn-submit,
    .btn-sm,
    .contact-wa-btn
  ):hover {
    transform: translateY(-4px);
  }

  .motion-ready :is(
    .problem-card,
    .porq-card,
    .razon-card,
    .project-card,
    .article-card,
    .acabado-card,
    .stat-card,
    .contact-card,
    .finish-detail,
    .solution-card,
    .solucion-card,
    .process-step
  ) {
    transition:
      transform 220ms ease,
      box-shadow 260ms ease,
      border-color 260ms ease;
  }

  .motion-ready :is(
    .problem-card,
    .porq-card,
    .razon-card,
    .project-card,
    .article-card,
    .acabado-card,
    .stat-card,
    .contact-card,
    .solution-card,
    .solucion-card
  ):hover {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-ready .process-step .step-line,
  .motion-ready .process-step .step-circle,
  .motion-ready .sol-carousel.is-visible .sol-slide.active img,
  .motion-ready .superplano-img-wrap.is-visible img,
  .motion-ready .antes-card.is-visible img {
    animation: none !important;
    transform: none !important;
  }
}