/* Motion layer. Loaded after style.css and easy to remove.
   Every effect is turned off for visitors who ask for reduced motion. */

/* Second water layer behind the hero's curved edge, drifting slowly */
.hero-wave--back {
  left: -60px;
  width: calc(100% + 120px);
  height: 140px;
  opacity: 0.9;
  animation: wave-drift 12s ease-in-out infinite alternate;
}

.hero-wave--back path {
  fill: rgba(245, 162, 93, 0.16);
}

@keyframes wave-drift {
  from {
    transform: translateX(-40px);
  }

  to {
    transform: translateX(40px);
  }
}

/* Buttons lift slightly on hover */
.btn,
.button {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(65, 93, 130, 0.7);
}

.btn-light:hover {
  box-shadow: 0 12px 24px -14px rgba(255, 255, 255, 0.55);
}

/* Feature cards: an accent line draws across, and the icon tilts */
.feature {
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}

.feature:hover::before {
  transform: scaleX(1);
}

.feature-icon {
  transition: transform 0.4s var(--ease), background 0.3s ease;
}

.feature:hover .feature-icon {
  transform: rotate(-6deg) scale(1.06);
  background: #f7ead9;
}

/* Process steps appear in turn, and each number fills in */
.js .steps .step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.steps.is-visible .step {
  opacity: 1;
  transform: none;
}

.steps.is-visible .step:nth-child(2) {
  transition-delay: 0.12s;
}

.steps.is-visible .step:nth-child(3) {
  transition-delay: 0.24s;
}

.steps.is-visible .step:nth-child(4) {
  transition-delay: 0.36s;
}

.step-num {
  transition: background 0.5s ease, color 0.5s ease;
}

.steps.is-visible .step-num {
  background: var(--teal);
  color: var(--white);
}

/* Client logos sit in grey and come into colour on hover */
.client-logo {
  filter: none;
  opacity: 1;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* The closing email gets an underline that draws in on hover */
.closing-email {
  border-bottom: 0;
  background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 100% / 0 3px;
  padding-bottom: 4px;
  transition: background-size 0.45s var(--ease), color 0.2s ease;
}

.closing-email:hover {
  background-size: 100% 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave--back,
  .btn,
  .button,
  .feature,
  .feature::before,
  .feature-icon,
  .steps .step,
  .step-num,
  .client-logo,
  .closing-email {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .steps .step {
    opacity: 1;
  }

  .client-logo {
    filter: none;
    opacity: 1;
  }
}