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

@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    animation: rise-in 660ms var(--ease-out) backwards;
    animation-delay: var(--entrance-delay, 0ms);
  }

  .hero__content h1 {
    --entrance-delay: 70ms;
  }

  .hero__lead {
    --entrance-delay: 140ms;
  }

  .hero__content .button {
    --entrance-delay: 210ms;
  }

  .hero__media::before {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    block-size: 100%;
    background: linear-gradient(transparent 90%, rgb(144 252 72 / 9%) 99%, var(--color-accent));
    opacity: 0;
    pointer-events: none;
    animation: scan-image 1000ms var(--ease-out) 120ms;
    content: "";
  }

  .motion-reveal {
    animation: rise-in 560ms var(--ease-out) backwards;
  }

  .site-nav__link {
    transition: background-color 180ms ease;
  }

  .button {
    transition: background-color 180ms ease, translate 220ms var(--ease-out);
  }

  .card {
    transition: border-color 180ms ease;
  }

  .text-link__arrow {
    transition: translate 220ms var(--ease-out);
  }

  .text-link:is(:hover, :focus-visible) .text-link__arrow {
    translate: 0.25em;
  }

  .button:active {
    translate: 0 1px;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .button:hover:not(:active) {
    translate: 0 -2px;
  }

  .hero__image {
    scale: 1.045;
    translate: var(--hero-x, 0%) var(--hero-y, 0%);
    transition: translate 300ms ease-out;
  }
}

@keyframes rise-in {
  from {
    opacity: 0.5;
    transform: translateY(0.85rem);
  }
}

@keyframes scan-image {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  22% {
    opacity: 0.65;
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}