/* ==========================================================================
   Radar sweep (radar.js) over radar-ti.webp: the stock scanner hero, the
   features hub's library cards and the band under each help page hero.
   From the part3 handoff's radar-tickers.css (SITE-1443); split out of
   competitor-pages.css so the help pages in the app shell can load it alone.
   ========================================================================== */

.rt-wrap { position: relative; }
.rt-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.rt-svg .rt-b { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rt-svg.rt-on .rt-b { animation: rtLit 3.6s ease-out infinite both; }
.rt-svg .rt-sw { opacity: 0; transform-box: view-box; }
.rt-svg.rt-on .rt-sw { animation: rtSweep 3.6s linear infinite; }
.rt-svg.rt-on.rt-off .rt-b,
.rt-svg.rt-on.rt-off .rt-sw { animation-play-state: paused; }
.rt-svg .rt-sw line { stroke: var(--ti-green); stroke-width: 4; stroke-opacity: 0.8; }
.rt-svg .rt-wash { stop-color: var(--ti-green); }
.rt-svg .rt-halo { fill-opacity: 0.25; }
.rt-svg .rt-dot { filter: drop-shadow(0 0 10px currentColor); }
.rt-svg .rt-up { color: var(--ti-green); }
.rt-svg .rt-down { color: var(--ti-orange); }
.rt-svg .rt-halo,
.rt-svg .rt-dot,
.rt-svg .rt-pct { fill: currentColor; }
.rt-svg text {
  font: var(--ti-fw-bold) var(--rt-fs, 64px) / 1 var(--ti-font);
  fill: var(--ti-text);
  paint-order: stroke;
  stroke: var(--ti-bg-deep);
  stroke-width: 10px;
}
.rt-svg .rt-pct { font-size: calc(var(--rt-fs, 64px) * 0.72); font-weight: var(--ti-fw-black); }
/* Tickers link to Stock Info: hover/focus holds the ticker lit */
.rt-svg a.rt-lk { pointer-events: auto; cursor: pointer; outline: none; }
.rt-svg .rt-hit { fill: transparent; stroke: none; pointer-events: all; }
.rt-svg a.rt-lk:hover .rt-b,
.rt-svg a.rt-lk:focus .rt-b { opacity: 1; animation-play-state: paused; }
.rt-svg a.rt-lk:hover text:not(.rt-pct),
.rt-svg a.rt-lk:focus text:not(.rt-pct) { fill: var(--ti-orange); text-decoration: underline; }
.rt-svg a.rt-lk:focus-visible .rt-hit { stroke: var(--ti-text); stroke-width: 6; }
@keyframes rtLit {
  0% { opacity: 0; transform: scale(0.4); }
  8% { opacity: 1; transform: scale(1.25); }
  14% { opacity: 1; transform: scale(1); }
  78% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes rtSweep {
  0% { opacity: 0.85; transform: rotate(0deg); }
  100% { opacity: 0.85; transform: rotate(360deg); }
}
/* As specific as the .rt-on rules above, so reduced motion always wins (the
   JS also never adds .rt-on then) */
@media (prefers-reduced-motion: reduce) {
  .rt-svg .rt-b,
  .rt-svg.rt-on .rt-b { opacity: 1; animation: none; }
  .rt-svg .rt-sw,
  .rt-svg.rt-on .rt-sw { display: none; }
}

/* Help pages: a short full-width band under the hero, the radar centred
   in it (data-radar-tix on a .rt-band). */
.rt-band {
  height: 150px;
  margin: 14px 0 18px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-bg-deep) url(/MainSite/images/help-finder/radar-ti.webp) center / cover;
  box-shadow: inset 0 0 50px var(--ti-bg-deep);
  overflow: hidden;
}
@media (max-width: 768px) {
  .rt-band { height: 170px; margin: 12px 0 16px; }
}