/* One emerald pass on intentional hover; no sticky animation on touch. */
:is(.button, .application-tabs button, .view-switch button, .icon-button) {
  position: relative;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  :is(.button, .application-tabs button, .view-switch button, .icon-button)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, #249f7010 41%, #32c48d45 48%, #70e8b560 50%, #32c48d45 52%, #249f7010 59%, transparent 65%);
    background-size: 250% 100%;
    background-position: 100% 50%;
    opacity: 0;
  }
  :is(.button, .application-tabs button, .view-switch button, .icon-button):is(:hover, :focus-visible)::after {
    animation: button-emerald-pass 1200ms cubic-bezier(.2, .55, .45, 1) both;
  }
}
@keyframes button-emerald-pass {
  0% { background-position: 100% 50%; opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { background-position: 0% 50%; opacity: 0; }
}
[data-background-motion=paused] :is(.button, .application-tabs button, .view-switch button, .icon-button)::after { display: none; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  :is(.button, .application-tabs button, .view-switch button, .icon-button)::after { display: none; }
}

/* Text links use the same pass, clipped to the lettering. */
@media (hover: hover) and (pointer: fine) {
  a[href]:not(.button):not(:has(img)):is(:hover, :focus-visible) {
    background-image: linear-gradient(105deg, transparent 35%, #249f7070 41%, #087c52 47%, #32c48d 50%, #087c52 53%, #249f7070 59%, transparent 65%), linear-gradient(currentColor, currentColor);
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: link-emerald-pass 1200ms cubic-bezier(.2, .55, .45, 1) both;
  }
}
@keyframes link-emerald-pass {
  from { background-position: 100% 50%, 0 0; }
  to { background-position: 0% 50%, 0 0; }
}
[data-background-motion=paused] a[href]:not(.button):not(:has(img)):is(:hover, :focus-visible) {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  a[href]:not(.button):not(:has(img)):is(:hover, :focus-visible) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}