/* ============================================================
   SouthLine — "Contour Drift" hero background
   The canvas is injected by hero-bg.js as the first child of the
   hero container, so it sits behind the copy but above the
   container's own background.
   ============================================================ */

.slhero-host{
  position:relative;
}

.slhero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;   /* the hero's links and buttons stay clickable */
  border:0;

  /* Setup is deferred until after load, so the canvas arrives late. It fades
     up over the static gradient below rather than snapping in. */
  opacity:0;
}

.slhero-canvas.slhero-in{
  opacity:1;
  transition:opacity .5s ease;
}

@media (prefers-reduced-motion: reduce){
  .slhero-canvas.slhero-in{ transition:none; }
}

/* Lift the real content above the canvas. Elementor's boxed container
   puts everything inside .e-con-inner, which this covers. */
.slhero-host > *:not(.slhero-canvas){
  position:relative;
  z-index:1;
}

/* The resting background. `slhero-idle` is set the moment the hero is claimed,
   so this paints immediately and then sits behind the opaque canvas once it
   fades in. `slhero-fallback` keeps it visible when WebGL is unavailable, runs
   on a software rasteriser, or the user asked to save data. */
.slhero-host.slhero-idle::before,
.slhero-host.slhero-fallback::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 42%, rgba(0,223,156,.13), transparent 70%),
    radial-gradient(70% 60% at 18% 70%, rgba(42,48,47,.55), transparent 72%),
    #101010;
}