:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.button,
.project-card,
.price-card {
  transition:
    transform 320ms var(--motion-ease),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 320ms ease;
}

.button .icon,
.text-link .icon,
.project-arrow,
.project-link .icon,
.footer-email .icon,
.feature-icon,
.step-number {
  transition:
    transform 320ms var(--motion-ease),
    color 220ms ease;
}

.project-image > img {
  transition: transform 750ms var(--motion-ease);
}

.primary-navigation a {
  position: relative;
}

.primary-navigation a::after {
  content: "";
  position: absolute;
  inset: auto 0 5px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--motion-ease);
}

.form-field input,
.form-field textarea {
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.form-field input:focus,
.form-field textarea:focus {
  background: #fff;
  box-shadow: 0 0 0 4px #0051d50a;
}

.legal-dialog[open] {
  animation: dialog-enter 250ms var(--motion-ease);
}

.legal-dialog[open]::backdrop {
  animation: backdrop-enter 220ms ease;
}

.form-status:not([hidden]) {
  animation: status-enter 220ms ease;
}

@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes status-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .primary-navigation.is-open {
    animation: menu-enter 220ms var(--motion-ease);
  }
}

@media (hover: hover) and (pointer: fine) {
  .project-card:is(:hover, :focus-visible) {
    transform: translateY(-4px);
    border-color: #c1c8d4;
    box-shadow: 0 16px 36px #0c0d1010;
  }

  .project-card:is(:hover, :focus-visible) .project-image > img {
    transform: scale(1.025);
  }

  .project-card:is(:hover, :focus-visible) :is(.project-arrow, .project-link .icon),
  .button.header-cta:is(:hover, :focus-visible) .icon,
  .footer-email:is(:hover, :focus-visible) .icon {
    transform: translate(3px, -3px);
  }

  .price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px #0c0d1010;
  }

  .button:is(:hover, :focus-visible) .icon,
  .text-link:is(:hover, :focus-visible) .icon {
    transform: translateX(3px);
  }

  .hero-actions .button-outline:is(:hover, :focus-visible) .icon {
    transform: translateY(3px);
  }

  .primary-navigation a:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
  }

  .benefit:hover .feature-icon {
    transform: translateY(-4px) rotate(-3deg);
  }

  .step:hover .step-number {
    color: var(--blue);
    transform: translateY(-3px);
  }
}

@media (hover: none), (pointer: coarse) {
  .button:hover,
  .project-card:hover .project-image > img {
    transform: none;
  }
}

.button:not(:disabled):active,
.menu-toggle:active {
  transform: scale(0.98);
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .project-card,
  .price-card,
  .project-image > img,
  .button .icon,
  .text-link .icon,
  .project-arrow,
  .project-link .icon,
  .footer-email .icon,
  .feature-icon,
  .step-number,
  .menu-toggle {
    transform: none !important;
  }

  .primary-navigation a::after {
    transition: none;
  }
}