/* ==========================================================================
   Hero orb — homepage-only animated line sphere.

   A pseudo-3D "clutter of lines" that reads as a tangled orb, tumbling
   slowly like a galaxy. Clicking/tapping the "ux" accent in the hero
   subtitle morphs it into a structured wireframe globe, centered on that
   same accent. All geometry/rotation/morphing is computed in
   js/hero-orb.js; this file only styles the resulting SVG. Runs on every
   viewport size, including mobile — click/tap works the same everywhere.
   ========================================================================== */

.hero-orb {
  position: absolute;
  width: min(85vw, 1200px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Fades the tangle out toward the bottom of the viewport, instead of
   getting hard-clipped by .hero's overflow. A previous attempt masked
   .hero-orb itself with mask-attachment: fixed to tie the gradient to the
   viewport rather than that element's own (larger, off-center) box — but
   mask-attachment isn't supported in Chromium, so it silently fell back to
   the element's own box and never lined up with the screen. This
   sidesteps that entirely: a plain background-color gradient, sized via
   inset: 0 to .hero itself (which already spans the viewport), painted
   above the orb but below the text. Top/left/right are left unfaded. */
.hero-orb-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 22%);
}

.hero-orb__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hero-orb__line {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero-orb__glow {
  fill: var(--color-lavender);
  filter: blur(2.5px);
  mix-blend-mode: screen;
}

.hero-orb__glow-trail {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  filter: blur(1.5px);
  mix-blend-mode: screen;
}