/* Hero radar, "the light finds you" (see hero.js). */

/* Before the script takes over, hold the hero back so nothing flashes in place first.
   An inline script adds .gs-intro and removes it after 3s whatever happens, so the hero can never stay hidden. */
.gs-intro .hero-radar .radar,
.gs-intro .hero-radar .hero-center,
.gs-intro .hero-radar .signals,
.gs-intro .hero-radar .signals-m { opacity: 0; }

/* The beam's light on the headline.
   A glow-only copy of the headline sits inside the beam, behind the real text. The beam (.radar-sweep) rotates;
   .sweep-light rotates with it and shows only a wedge trailing the beam's edge; .sweep-text spins back the other
   way at the same rate, so the copy stays still under the real headline. All compositor transforms: smooth, and
   the light sweeps across letters continuously instead of switching whole letters on. */
.radar-sweep .sweep-light {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: conic-gradient(from 0deg, transparent 0deg 292deg, rgba(0,0,0,.35) 335deg, #000 360deg);
  mask-image: conic-gradient(from 0deg, transparent 0deg 292deg, rgba(0,0,0,.35) 335deg, #000 360deg);
}
/* A zero-size pivot at the beam's centre, so the spinning layer is only as big as the headline copy */
.radar-sweep .sweep-text { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: radar-sweep-back 6s linear infinite; }
@keyframes radar-sweep-back { to { transform: rotate(-360deg); } }

.glow-copy {
  position: absolute; margin: 0; color: transparent; text-align: center; pointer-events: none;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--blip) 80%, transparent),
    0 0 36px color-mix(in srgb, var(--blip) 60%, transparent);
}

/* Desktop mouse: a soft circle of the same light behind the headline */
.hero-center h1.has-torch { position: relative; isolation: isolate; }
.h1-torch {
  inset: 0; z-index: -1; opacity: 0; transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(circle 150px at var(--mx, -999px) var(--my, -999px), #000, transparent);
  mask-image: radial-gradient(circle 150px at var(--mx, -999px) var(--my, -999px), #000, transparent);
}
.h1-torch.on { opacity: 1; }

.hero-radar .radar { will-change: transform, opacity; }