/* The trace: two comets chasing round an element's edge, in its station's colours. The hub's
   cards run it on hover; a station's player stage runs it, slower, while you're tuned in.
   The border is a conic gradient whose starting angle (--trace) turns; --trace-on fades it.
   An element opts in with class "trace" and sets --trace-fill (an image) for its inside. */
@property --trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --trace-on { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes trace { to { --trace: 360deg; } }
.trace { border: 3px solid transparent; }

/* WJAM (and WSYF): blue chasing red. */
.trace {
  background: var(--trace-fill, linear-gradient(#fff, #fff)) padding-box, conic-gradient(from var(--trace),
    transparent 0deg, rgba(35, 80, 184, calc(var(--trace-on) * 0.3)) 40deg, rgba(35, 80, 184, var(--trace-on)) 116deg,
    transparent 120deg,
    transparent 180deg, rgba(224, 54, 43, calc(var(--trace-on) * 0.3)) 220deg, rgba(224, 54, 43, var(--trace-on)) 296deg,
    transparent 300deg) border-box;
}

/* WHNK: Goose's poster colours, hot pink chasing bright yellow. */
.trace.station-whnk, .station-whnk .trace {
  background: var(--trace-fill, linear-gradient(#fff, #fff)) padding-box, conic-gradient(from var(--trace),
    transparent 0deg, rgba(220, 58, 143, calc(var(--trace-on) * 0.3)) 40deg, rgba(220, 58, 143, var(--trace-on)) 116deg,
    transparent 120deg,
    transparent 180deg, rgba(255, 228, 0, calc(var(--trace-on) * 0.35)) 220deg, rgba(255, 222, 0, var(--trace-on)) 296deg,
    transparent 300deg) border-box;
}

/* WEGG: Eggy's Waiting Game cover, a warm comet (coral, amber, orb yellow) chasing a cool one (sky blue to aqua). */
.trace.station-wegg, .station-wegg .trace {
  background: var(--trace-fill, linear-gradient(#fff, #fff)) padding-box, conic-gradient(from var(--trace),
    transparent 0deg, rgba(240, 96, 126, calc(var(--trace-on) * 0.3)) 30deg, rgba(232, 162, 90, calc(var(--trace-on) * 0.85)) 80deg, rgba(247, 232, 140, var(--trace-on)) 116deg,
    transparent 120deg,
    transparent 180deg, rgba(43, 127, 196, calc(var(--trace-on) * 0.35)) 215deg, rgba(43, 127, 196, var(--trace-on)) 260deg, rgba(92, 198, 232, var(--trace-on)) 296deg,
    transparent 300deg) border-box;
}

/* WYEM: the rainbow of Phish's old logo, two comets, green tail to violet head. */
.trace.station-wyem, .station-wyem .trace {
  background: var(--trace-fill, linear-gradient(#fff, #fff)) padding-box, conic-gradient(from var(--trace),
    transparent 0deg, rgba(54, 194, 58, calc(var(--trace-on) * 0.25)) 20deg, rgba(255, 224, 26, calc(var(--trace-on) * 0.5)) 39deg, rgba(255, 138, 28, calc(var(--trace-on) * 0.7)) 58deg, rgba(238, 42, 42, calc(var(--trace-on) * 0.85)) 77deg, rgba(212, 42, 214, calc(var(--trace-on) * 0.95)) 96deg, rgba(91, 46, 201, calc(var(--trace-on) * 1)) 115deg,
    transparent 119deg,
    transparent 180deg,
    transparent 180deg, rgba(54, 194, 58, calc(var(--trace-on) * 0.25)) 200deg, rgba(255, 224, 26, calc(var(--trace-on) * 0.5)) 219deg, rgba(255, 138, 28, calc(var(--trace-on) * 0.7)) 238deg, rgba(238, 42, 42, calc(var(--trace-on) * 0.85)) 257deg, rgba(212, 42, 214, calc(var(--trace-on) * 0.95)) 276deg, rgba(91, 46, 201, calc(var(--trace-on) * 1)) 295deg,
    transparent 299deg) border-box;
}