/* ==========================================================
   SHS AMBIENT — section background visuals
   Same language as the legal pages (css/shs-legal.css):
   dot grid, dashed route lines with moving nodes, drifting glows.
   js/shs-ambient.js adds a .shs-amb layer to tinted sections
   (.section--alt, .shs-journey, .ai-section--alt) and CTA bands.
   Opt a section out with data-no-ambient.
   ========================================================== */

.shs-amb-host { position: relative; isolation: isolate; overflow: hidden; }
.shs-amb-host > .container { position: relative; z-index: 1; }

.shs-amb {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --amb-dot:   rgba(15,23,42,.09);
  --amb-route: rgba(37,99,235,.42);
  --amb-route2: rgba(6,182,212,.42);
  --amb-node:  #2563EB;
  --amb-b1: rgba(37,99,235,.16);
  --amb-b2: rgba(6,182,212,.14);
}
.shs-amb i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.shs-amb .b1 { width: 38vmax; height: 38vmax; left: -12vmax; top: -16vmax; background: radial-gradient(circle, var(--amb-b1), transparent 66%); animation: shsAmbA 28s ease-in-out infinite alternate; }
.shs-amb .b2 { width: 34vmax; height: 34vmax; right: -12vmax; bottom: -18vmax; background: radial-gradient(circle, var(--amb-b2), transparent 66%); animation: shsAmbB 34s ease-in-out infinite alternate; }
.shs-amb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shs-amb .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 2px 2px, var(--amb-dot) 1.3px, transparent 1.6px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
}
.shs-amb .routes {
  /* lines live at the edges so they never sit behind text */
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.9) 8%, transparent 22%, transparent 78%, rgba(0,0,0,.9) 92%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.9) 8%, transparent 22%, transparent 78%, rgba(0,0,0,.9) 92%, #000 100%);
}
.shs-amb .rt { fill: none; stroke: var(--amb-route); stroke-width: 1.8; stroke-dasharray: 3 11; stroke-linecap: round; animation: shsAmbDash 40s linear infinite; }
.shs-amb .rt.r2 { stroke: var(--amb-route2); animation-duration: 56s; animation-direction: reverse; }
.shs-amb .nd { fill: var(--amb-node); }
.shs-amb .rg { fill: none; stroke: var(--amb-node); stroke-width: 1; opacity: .5; transform-box: fill-box; transform-origin: center; animation: shsAmbRing 4.5s ease-out infinite; }

/* On the blue CTA band: white lines and dots */
.cta-band .shs-amb {
  --amb-dot:   rgba(255,255,255,.14);
  --amb-route: rgba(255,255,255,.38);
  --amb-route2: rgba(165,243,252,.40);
  --amb-node:  #fff;
  --amb-b1: rgba(255,255,255,.16);
  --amb-b2: rgba(103,232,249,.20);
}

@keyframes shsAmbA { to { transform: translate3d(10vw, 6vh, 0) scale(1.12); } }
@keyframes shsAmbB { to { transform: translate3d(-8vw, -6vh, 0) scale(1.1); } }
@keyframes shsAmbDash { to { stroke-dashoffset: -560; } }
@keyframes shsAmbRing { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }

@media (max-width: 720px) {
  .shs-amb i, .shs-amb .rt { animation: none; }
  .shs-amb .routes { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .shs-amb i, .shs-amb .rt, .shs-amb .rg { animation: none !important; }
}
@media print { .shs-amb { display: none !important; } }