/* Without JavaScript, reveal targets remain visible and retain their normal layout. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.has-motion [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-motion [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

.has-motion [data-reveal-stagger]:not(.is-visible) > [data-reveal-variant="left"] {
  transform: translateX(-24px);
}

.has-motion [data-reveal-stagger]:not(.is-visible) > [data-reveal-variant="right"] {
  transform: translateX(24px);
}

.has-motion [data-reveal-stagger]:not(.is-visible) > [data-reveal-variant="zoom"] {
  transform: scale(0.96);
}

.has-motion .hero__content > h1,
.has-motion .hero__content > .hero__text,
.has-motion .hero__content > .hero__actions {
  animation: hero-entry 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.has-motion .hero__content > h1 {
  animation-delay: 0ms;
}

.has-motion .hero__content > .hero__text {
  animation-delay: 180ms;
}

.has-motion .hero__content > .hero__actions {
  animation-delay: 360ms;
}

.service-card__icon,
.feature-icon {
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.client-logo {
  border-radius: 14px;
}

.client-logo > a {
  display: inline-flex;
  border-radius: inherit;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .has-motion [data-reveal-stagger].is-visible > .service-card:hover,
  .service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(48, 75, 65, 0.2);
    box-shadow: 0 24px 44px rgba(16, 23, 20, 0.12);
  }

  .value-card:hover .feature-icon,
  .why-card:hover .feature-icon,
  .need-card:hover > span,
  .process-step:hover .feature-icon {
    transform: translateY(-2px);
  }

  .client-logo > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(16, 23, 20, 0.1);
  }

  .has-motion [data-reveal-stagger].is-visible > :is(.value-card, .why-card, .need-card, .case-card, .process-step):hover {
    transform: translateY(-3px);
    border-color: rgba(48, 75, 65, 0.18);
    box-shadow: 0 20px 38px rgba(16, 23, 20, 0.1);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .has-motion [data-reveal],
  .has-motion [data-reveal-stagger] > *,
  .has-motion .hero__content > h1,
  .has-motion .hero__content > .hero__text,
  .has-motion .hero__content > .hero__actions {
    opacity: 1;
    transform: none;
  }

  .service-card:hover,
  .client-logo > a:hover,
  .value-card:hover .feature-icon,
  .why-card:hover .feature-icon,
  .need-card:hover > span,
  .process-step:hover .feature-icon {
    transform: none;
  }
}