/* ===========================================================================
   THE INSIGHTS FAMILY — SIGNAL ANIMATION LAYER
   A living "real-time intelligence instrument". Three brand motions:
     RADAR  — a rotating scope that sweeps and detects signals (the logo, alive)
     WAVE   — drifting data wave-lines (the brand's "flow of data" motif)
     PULSE  — live blips and breathing glows (real-time)
   Everything is transform/opacity only (GPU-cheap) and every motion is gated
   behind prefers-reduced-motion: no-preference, with a visible static base.
   =========================================================================== */

/* ============================ RADAR SCOPE ================================= */
/* A large circular scope. Place with width/height + inline position; it holds
   faint concentric rings, a rotating sweep beam, and signal blips. */
.scope { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 0 62%, transparent 75%);
          mask-image: radial-gradient(circle, #000 0 62%, transparent 75%); }

/* concentric rings */
.scope__rings { position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--lime) 22%, transparent) 0 1.5px, transparent 2px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 53px,
      color-mix(in srgb, #fff 9%, transparent) 53px 54px); }
/* cross-hairs */
.scope__cross { position: absolute; inset: 0; border-radius: 50%;
  background:
    linear-gradient(0deg, transparent calc(50% - 0.5px), color-mix(in srgb,#fff 7%,transparent) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb,#fff 7%,transparent) 50%, transparent calc(50% + 0.5px)); }

/* rotating sweep beam: a conic gradient with a bright leading edge + fading tail */
.scope__sweep { position: absolute; inset: 0; border-radius: 50%; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--lime) 3%, transparent) 250deg,
    color-mix(in srgb, var(--lime) 12%, transparent) 320deg,
    color-mix(in srgb, var(--lime) 38%, transparent) 352deg,
    color-mix(in srgb, var(--lime) 70%, transparent) 359deg,
    transparent 360deg); }
/* leading radial line of the beam */
.scope__hand { position: absolute; left: 50%; top: 0; bottom: 50%; width: 1.5px; transform-origin: 50% 100%;
  background: linear-gradient(to top, color-mix(in srgb, var(--lime) 80%, transparent), transparent); }

@media (prefers-reduced-motion: no-preference) {
  .scope__sweep { animation: scope-rotate 7.5s linear infinite; }
  .scope__hand  { animation: scope-rotate 7.5s linear infinite; }
}
@keyframes scope-rotate { to { transform: rotate(360deg); } }

/* signal blips — positioned via inline --x/--y (%). They "detect": a dot lights
   up with an expanding ring, then fades, looping with staggered delays so the
   scope feels alive even though timing is only loosely tied to the beam. */
.blip { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 8px; height: 8px;
  transform: translate(-50%, -50%); }
.blip::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lime) 70%, transparent); opacity: 0.25; }
.blip::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--lime); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .blip::before { animation: blip-dot 7.5s ease-out infinite; }
  .blip::after  { animation: blip-ring 7.5s ease-out infinite; }
}
.blip.d1::before, .blip.d1::after { animation-delay: 0.6s; }
.blip.d2::before, .blip.d2::after { animation-delay: 1.9s; }
.blip.d3::before, .blip.d3::after { animation-delay: 3.1s; }
.blip.d4::before, .blip.d4::after { animation-delay: 4.4s; }
.blip.d5::before, .blip.d5::after { animation-delay: 5.6s; }
@keyframes blip-dot {
  0%, 100% { opacity: 0.22; transform: scale(0.7); }
  4% { opacity: 1; transform: scale(1.25); }
  26% { opacity: 0.3; transform: scale(0.9); }
}
@keyframes blip-ring {
  0% { opacity: 0; transform: scale(0.4); }
  4% { opacity: 0.9; }
  40% { opacity: 0; transform: scale(3); }
  100% { opacity: 0; transform: scale(3); }
}

/* ========================= EMANATING WAVE RINGS =========================== */
/* Continuous rings rippling out from an origin. Put 3 .emit children in a
   positioned, sized container; they expand and fade on a staggered loop. */
.emitter { position: absolute; z-index: 0; pointer-events: none; }
.emit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--lime) 55%, transparent);
  opacity: 0; transform: scale(0.05); }
@media (prefers-reduced-motion: no-preference) {
  .emit { animation: emit 6s cubic-bezier(0.16,1,0.3,1) infinite; }
  .emit.e2 { animation-delay: 2s; }
  .emit.e3 { animation-delay: 4s; }
}
@keyframes emit {
  0% { opacity: 0; transform: scale(0.05); }
  8% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1); }
}

/* ============================ DATA WAVE-LINES ============================= */
/* The brand's "flow of data" motif. A wavefield holds a 200%-wide SVG of
   identical halves; drifting it by -50% loops seamlessly. Layer several at
   different speeds/opacities for depth. */
.wavefield { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wavefield__svg { position: absolute; left: 0; width: 200%; height: 100%; }
.waveline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.waveline--1 { stroke: color-mix(in srgb, var(--lime) 42%, transparent); }
.waveline--2 { stroke: color-mix(in srgb, #fff 16%, transparent); }
.waveline--3 { stroke: color-mix(in srgb, var(--coral) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .waveline--1 { animation: wave-drift 26s linear infinite; }
  .waveline--2 { animation: wave-drift 38s linear infinite reverse; }
  .waveline--3 { animation: wave-drift 52s linear infinite; }
}
@keyframes wave-drift { to { transform: translateX(-50%); } }

/* Slim wave divider that sits at a section seam */
.wave-divider { position: relative; height: 90px; margin-top: -90px; z-index: 3; pointer-events: none; overflow: hidden; }
.wave-divider .wavefield__svg { height: 100%; }

/* ============================ AMBIENT GLOW DRIFT ========================== */
@media (prefers-reduced-motion: no-preference) {
  .glow--drift { animation: glow-drift 16s ease-in-out infinite alternate; }
  .glow--drift.gd2 { animation-duration: 22s; animation-delay: -6s; }
  .glow--breathe { animation: glow-breathe 9s ease-in-out infinite; }
}
@keyframes glow-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(40px,-30px,0) scale(1.15); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.55; }
}

/* ============================ HERO FRAME FLOAT ============================ */
@media (prefers-reduced-motion: no-preference) {
  .float-soft { animation: float-soft 7s ease-in-out infinite; }
  .float-soft.fs2 { animation-duration: 9s; animation-delay: -2s; }
  .float-soft.fs3 { animation-duration: 8s; animation-delay: -4s; }
}
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================ LIVE NUMBER / TAG =========================== */
/* Headline keyword: a slow lime glow breath */
@media (prefers-reduced-motion: no-preference) {
  .glow-pulse { animation: glow-pulse 4.5s ease-in-out infinite; }
}
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--lime) 26%, transparent); }
  50% { text-shadow: 0 0 34px color-mix(in srgb, var(--lime) 55%, transparent); }
}

/* Bar fills: a soft travelling shimmer to read as "live" */
.bar__fill { position: relative; overflow: hidden; }
.bar__fill::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .in .bar__fill::after { animation: bar-shimmer 3.4s ease-in-out infinite; }
  .bar:nth-child(2) .bar__fill::after { animation-delay: 0.4s; }
  .bar:nth-child(3) .bar__fill::after { animation-delay: 0.8s; }
  .bar:nth-child(4) .bar__fill::after { animation-delay: 1.2s; }
}
@keyframes bar-shimmer { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(220%); } }

/* Scanline pulse for the live viz panel header dot already handled by tif-pulse-dot */

/* ============================ SECTION ENTRANCE WAVES ====================== */
/* A one-shot ripple that fires when a dark section reveals (JS adds .signal-on) */
.signal-burst { position: absolute; z-index: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--lime) 50%, transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .signal-on .signal-burst { animation: emit 2.4s cubic-bezier(0.16,1,0.3,1); }
}