@media (max-width: 760px), (pointer: coarse) {
  html.oa-mobile-signal-ready .section-head {
    position: relative;
  }

  html.oa-mobile-signal-ready .oa-mobile-head-signal {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, var(--blue) 0 calc(100% - 12px), var(--acid) calc(100% - 12px));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }

  html.oa-mobile-signal-ready .section-head.oa-mobile-head-fired .oa-mobile-head-signal {
    animation: oa-mobile-head-draw 420ms steps(8, end) both;
  }

  html.oa-mobile-signal-ready .row:has(.oa-row-action:active) {
    box-shadow: inset 5px 0 0 var(--blue);
  }

  html.oa-mobile-signal-ready .row:has(.oa-row-action:active) .row-title {
    color: var(--acid);
    transform: translateX(3px);
  }

  html.oa-mobile-signal-ready .filter:active {
    color: var(--paper);
    background: var(--blue);
    box-shadow: inset 0 -3px 0 var(--acid);
  }

  html.oa-mobile-signal-ready .bar-nav a:active {
    color: var(--blue);
    box-shadow: inset 0 -2px 0 var(--acid);
  }

  html.oa-mobile-signal-ready .showcase-next-arrow:active,
  html.oa-mobile-signal-ready .hero-play-hit:active {
    box-shadow: inset 0 0 0 3px var(--blue), inset 0 -6px 0 var(--acid);
  }

  html.oa-mobile-signal-ready .instagram-follow:active,
  html.oa-mobile-signal-ready .letterboxd-quote:active {
    box-shadow: inset 5px 0 0 var(--blue);
  }

  @keyframes oa-mobile-head-draw {
    0% {
      opacity: 1;
      transform: scaleX(0);
    }
    78% {
      opacity: 1;
      transform: scaleX(1);
    }
    100% {
      opacity: 0;
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .oa-mobile-head-signal {
    display: none !important;
  }
}