/* =========================================================================
   Soouo · homepage hero — "Tubes" ambient background.
   Sits as the base-most layer inside .soouo-hero__bg (behind any uploaded
   hero media/canvas and, importantly, behind .soouo-hero__bg::after's dark
   veil gradient — that veil is what guarantees hero text stays readable,
   exactly as it already does for every other hero background option).
   Scoped entirely to .soouo-hero-tubes; nothing here applies site-wide.
   ========================================================================= */
.soouo-hero-tubes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Static premium fallback: shown whenever the canvas animation does not
     run (JS blocked, no 2D context, small/low-power device, or
     prefers-reduced-motion) — a soft navy/indigo/violet glow using the
     theme's own gradient tokens, so the hero never looks unfinished. */
  background:
    radial-gradient(60% 70% at 22% 30%, rgba(124, 58, 237, .28) 0%, rgba(124, 58, 237, 0) 70%),
    radial-gradient(55% 65% at 82% 68%, rgba(91, 33, 182, .30) 0%, rgba(91, 33, 182, 0) 70%);
}
.soouo-hero-tubes canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.soouo-hero-tubes canvas[data-soouo-tubes-ready] { opacity: 1; }

/* The canvas draws its own soft strokes; a light blur keeps the lines
   flowing rather than crisp/technical. Skipped on low-power heuristics by
   the JS itself (it simply never sets [data-soouo-tubes-ready] there). */
@supports (filter: blur(1px)) {
  .soouo-hero-tubes canvas { filter: blur(.6px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Belt-and-braces: hero-tubes.js already refuses to start in this case,
     but if it ever ran first and the setting changed mid-session, this
     still guarantees no motion — only the static gradient above shows. */
  .soouo-hero-tubes canvas { display: none; }
}