/*
 * The hover ring: one green line going round whatever the pointer is on.
 *
 * It started as three copies — one on the watch page, one in the store, one in
 * the season page — because those are three documents and a @property cannot
 * be shared across them by wishing. They can share a stylesheet, so this is it:
 * every page that draws the ring links this file, and only its own selectors in
 * the list below ever match.
 *
 * Two shapes of answer, and the difference is deliberate:
 *
 *   a card, or anything in a scroller   the ring, and 2px of lift
 *   a chip or a button                  the ring where it has one, and a scale
 *
 * A card grown past its track is clipped by the scroller it sits in, and the
 * road's own controls sit against a page edge that clips too; those lift or
 * stay still rather than grow.
 */
@property --ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ring-spin { to { --ring-angle: 360deg; } }

:where(body.hud-watch, html.is-embed) :is(
  /* the watch page: the cards you can press */
  .hud-viewer, .hud-wallet, .play-along-pill,
  /* the store, in its panel */
  .shop-offer, .shop-wallet, .shop-artifact-choice,
  /* the season page, in the same panel */
  .sr-artifact, .sr-reward-card, .sr-earn-method, .sr-road-controls button
):hover::before,
/* a mode with a round open in it wears the ring for as long as it is open */
:where(body.hud-watch) .interaction-arena .ia-tabs button.is-available::before,
/* a pack is a row in one long card, and its ::before is the divider above it */
:where(html.is-embed) .ar-tile.shop-product:hover::after,
/* the artifact you have chosen wears the ring for as long as it is chosen */
:where(html.is-embed) .shop-artifact-choice[aria-pressed="true"]::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.6px;
  /* green unless something sets --ring-rgb: the round's clock runs it from
     green through amber to red as its time goes. */
  background: conic-gradient(from var(--ring-angle),
    rgba(var(--ring-rgb, 34, 197, 94), 0) 0 38%, rgba(var(--ring-rgb, 34, 197, 94), 0.5) 62%,
    rgba(var(--ring-rgb, 34, 197, 94), 0.9) 82%, rgb(var(--ring-rgb, 34, 197, 94)) 93%,
    rgba(var(--ring-rgb, 34, 197, 94), 0) 99%);
  /* paint the padding ring only, so the surface underneath stays clean */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ring-spin 2.6s linear infinite;
}

/* The ring needs a positioned box to sit in, and rows need a radius to follow. */
:where(body.hud-watch, html.is-embed) :is(
  .hud-viewer, .hud-wallet, .play-along-pill,
  .shop-offer, .shop-wallet, .shop-artifact-choice, .ar-tile.shop-product,
  .sr-artifact, .sr-reward-card, .sr-earn-method, .sr-road-controls button
) { position: relative; }

@media (prefers-reduced-motion: reduce) {
  :where(body.hud-watch, html.is-embed) :is(
    .hud-viewer, .hud-wallet, .play-along-pill,
    .shop-offer, .shop-wallet, .shop-artifact-choice,
    .sr-artifact, .sr-reward-card, .sr-earn-method, .sr-road-controls button
  ):hover::before,
  :where(html.is-embed) .ar-tile.shop-product:hover::after,
  :where(body.hud-watch) .interaction-arena .ia-tabs button.is-available::before,
  :where(html.is-embed) .shop-artifact-choice[aria-pressed="true"]::before { animation: none; }
}