/* Movimento complementar: conteúdo e navegação funcionam sem animações. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button,
  .button-small,
  .menu-toggle {
    transition: background-color 180ms ease, border-color 180ms ease,
      box-shadow 180ms ease, transform 180ms ease;
  }

  .service-card,
  .step-card,
  .audience-card {
    transition: transform 240ms ease, box-shadow 240ms ease,
      border-color 240ms ease;
  }

  .button-dot {
    transition: transform 180ms ease;
  }

  .navigation .nav-link {
    position: relative;
  }

  .navigation .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: #d76447;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
  }

  .navigation .nav-link:focus-visible::after {
    transform: scaleX(1);
  }

  .button:active,
  .button-small:active,
  .menu-toggle:active {
    transform: scale(0.98);
  }
}

/* Efeitos de hover apenas em dispositivos com ponteiro preciso. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover,
  .button-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(23 22 26 / 12%);
  }

  .button:hover .button-dot {
    transform: scale(1.3);
  }

  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 3px #d76447, 0 8px 20px rgb(23 22 26 / 8%);
  }

  .step-card:hover,
  .audience-card:hover {
    transform: translateY(-3px);
    border-color: #d76447;
  }

  .navigation .nav-link:hover::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}