/* Micro-interaction layer for the WashNgo website mock-up.
   Only hover, focus, press, reveal and state feedback is added. Layout, colour tokens and copy are unchanged.
   Movement sits behind prefers-reduced-motion: no-preference. Colour fades remain for everyone. */

:root {
  --ease-out-quint: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-header {
  transition:
    box-shadow 0.36s var(--ease-out-quint),
    border-color 0.36s var(--ease-out-quint);
}
.site-header.is-scrolled {
  box-shadow: 0 10px 28px #073f3914;
  border-bottom-color: transparent;
}

.button {
  transition:
    background 0.36s var(--ease-out-quint),
    color 0.36s var(--ease-out-quint),
    box-shadow 0.36s var(--ease-out-quint),
    transform 0.32s var(--ease-out-quint);
}

.service-choice {
  transition:
    border-color 0.2s,
    box-shadow 0.36s var(--ease-out-quint),
    transform 0.36s var(--ease-out-quint);
}

.faq-item {
  transition:
    border-color 0.36s var(--ease-out-quint),
    box-shadow 0.36s var(--ease-out-quint);
}
.faq-item:hover {
  box-shadow: 0 6px 18px #073f3910;
}

@media (prefers-reduced-motion: no-preference) {
  .button.button:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
  }

  .button .icon-arrow {
    transition: transform 0.4s var(--ease-out-quint);
  }
  .button:hover .icon-arrow {
    transform: translateX(3px);
  }

  .site-header nav a {
    position: relative;
  }
  .site-header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.36s var(--ease-out-quint);
  }
  .site-header nav a:hover::after,
  .site-header nav a:focus-visible::after {
    transform: scaleX(1);
  }

  .service-choice.service-choice:active {
    transform: scale(0.985);
    transition-duration: 0.08s;
  }
  .service-choice.active .choice-check {
    animation: check-pop 0.45s var(--ease-back) both;
  }

  .faq-item summary > span {
    transition: transform 0.4s var(--ease-back);
  }
  .faq-item[open] .faq-answer {
    animation: answer-in 0.36s var(--ease-out-soft) both;
  }

  .benefit-row > div > svg {
    transition: transform 0.45s var(--ease-back);
  }
  .why-grid > article {
    transition:
      transform 0.4s var(--ease-out-soft),
      box-shadow 0.4s var(--ease-out-soft);
  }
  .why-grid > article .icon-tile {
    transition: transform 0.5s var(--ease-back);
  }

  .js-motion [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(6px);
  }
  .js-motion [data-reveal] {
    transition:
      opacity 0.7s var(--ease-out-soft) var(--reveal-delay, 0ms),
      transform 0.7s var(--ease-out-soft) var(--reveal-delay, 0ms),
      filter 0.6s var(--ease-out-quint) var(--reveal-delay, 0ms);
  }
}

/* Pointer-only feedback: magnetic primary buttons, lifted cards and icon response. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-primary:hover {
    transform: translate(var(--magnet-x, 0px), calc(var(--magnet-y, 0px) - 2px));
  }
  .benefit-row > div:hover > svg {
    transform: translateY(-2px) rotate(-6deg) scale(1.08);
  }
  .why-grid > article:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .why-grid > article:hover .icon-tile {
    transform: rotate(-6deg) scale(1.06);
  }
}

@keyframes check-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}