.direction-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.direction-hover > .hover-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--wipe-size, 300%);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  background: var(--cream);
  transform: translate(-50%, -50%) rotate(-20deg) translateY(-101%);
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.direction-hover > .button-content {
  position: relative;
  z-index: 1;
}

.direction-hover.is-direction-hovered {
  color: var(--surface);
}

.hero-action-primary.direction-hover.is-direction-hovered {
  border-color: transparent;
}

.hero-action-secondary.direction-hover.is-direction-hovered {
  border-color: rgba(247, 244, 238, 0.28);
}

.smiths-home .hero-actions .hero-action.direction-hover {
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Keep the hero buttons stationary while their white fill layer wipes in. */
body.smiths-home .hero-actions .hero-action.direction-hover:is(:hover, :active),
.smiths-home .hero-actions .hero-action.direction-hover:hover svg {
  transform: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .smiths-home .hero-actions .hero-action-primary.direction-hover:hover svg {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .smiths-home .hero-actions .hero-action.direction-hover,
  .direction-hover,
  .direction-hover > .hover-bg,
  .direction-hover > .button-content {
    transition: none;
  }

  .direction-hover:hover,
  .direction-hover:hover svg {
    transform: none;
  }
}