/* hero-streak.css — Siteworks solar-halo hero
   Layer stack inside the hero:
     1. base solar halo art                            .hh-base
     2. violet/orange ambient bloom drifting behind     .hh-bloom
     3. SVG overlay: ring reinforcement + horizontal
        white-hot beam pulse                           .hh-svg
   The base halo is always lit; the animated overlay adds a restrained pulse
   across the beam so the hero keeps its existing loading/animation behavior. */

.hh-stage {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
/* the hero's own background matches the streak art's pure-black field so the
   side margins read as a continuation of the image (no rectangular seam), then
   feathers into the charcoal page background at the bottom for a soft handoff. */
.hh-hero { background: linear-gradient(180deg, #000 0%, #000 84%, var(--bg-base) 100%); }
.hh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.08) 48%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 72%, #000 96%);
}
/* ── intro reveal timeline ────────────────────────────────────────────────
   s0 dark → s1 solar ring draws in → s2 horizontal beam draws across →
   s3 full artwork/bloom appears and the traveling streak starts. The base
   raster art waits until the geometry has arrived so the reveal feels built,
   not like a background fading up all at once. */
@media (prefers-reduced-motion: no-preference) {
  .hh-intro .hh-base-wrap { transition: opacity .62s ease; }
  .hh-intro .hh-bloom { transition: opacity .7s ease; }
  .hh-intro .hh-pulse { transition: stroke-opacity .48s ease; }
  .hh-intro .hh-layers { transition: transform 1.7s cubic-bezier(0.22, 1, 0.36, 1); }

  .hh-intro .hh-ring-glow,
  .hh-intro .hh-ring-core {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0;
    transition:
      stroke-dashoffset .94s cubic-bezier(0.16, 1, 0.3, 1),
      opacity .28s ease;
  }

  .hh-intro .hh-beam-glow,
  .hh-intro .hh-beam-core,
  .hh-intro .hh-beam-hot {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0;
    transition:
      stroke-dashoffset .86s cubic-bezier(0.2, 0.86, 0.18, 1),
      opacity .26s ease;
  }

  .hh-intro .hh-floor-glow {
    opacity: 0;
    transform: scaleX(.18);
    transform-origin: 72.5% 73%;
    transition:
      opacity .45s ease,
      transform .9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hh-intro .hh-base-wrap,
  .hh-intro .hh-bloom { opacity: 0; }

  .hh-intro .hh-pulse { stroke-opacity: 0; }

  /* s1 — the circle/ring arrives first */
  .hh-intro.hh-s1 .hh-ring-glow,
  .hh-intro.hh-s1 .hh-ring-core {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .hh-intro.hh-s1 .hh-floor-glow {
    opacity: .62;
    transform: none;
  }

  /* s2 — hold the circle, then draw the beam across it */
  .hh-intro.hh-s2 .hh-ring-glow,
  .hh-intro.hh-s2 .hh-ring-core,
  .hh-intro.hh-s3 .hh-ring-glow,
  .hh-intro.hh-s3 .hh-ring-core {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .hh-intro.hh-s2 .hh-floor-glow,
  .hh-intro.hh-s3 .hh-floor-glow { opacity: 1; }

  .hh-intro.hh-s2 .hh-beam-glow,
  .hh-intro.hh-s2 .hh-beam-core,
  .hh-intro.hh-s2 .hh-beam-hot {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  /* s3 — the full environment fades in and the existing looping motion starts */
  .hh-intro.hh-s3 .hh-beam-glow,
  .hh-intro.hh-s3 .hh-beam-core,
  .hh-intro.hh-s3 .hh-beam-hot {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .hh-hero.hh-intro.hh-s3 .hh-base-wrap,
  .hh-hero.hh-intro.hh-s3 .hh-bloom { opacity: 1 !important; }

  .hh-hero.hh-intro.hh-s3 .hh-pulse { stroke-opacity: 1 !important; }

  /* slight camera settle while the ring/beam builds */
  .hh-intro.hh-s0 .hh-layers,
  .hh-intro.hh-s1 .hh-layers,
  .hh-intro.hh-s2 .hh-layers { transform: scale(1.055); }

  /* hold all looping motion until the streak goes live in s3 */
  .hh-intro.hh-s0 .hh-layers, .hh-intro.hh-s1 .hh-layers, .hh-intro.hh-s2 .hh-layers,
  .hh-intro.hh-s0 .hh-bloom,  .hh-intro.hh-s1 .hh-bloom,  .hh-intro.hh-s2 .hh-bloom,
  .hh-intro.hh-s0 .hh-pulse-a, .hh-intro.hh-s1 .hh-pulse-a, .hh-intro.hh-s2 .hh-pulse-a,
  .hh-intro.hh-s0 .hh-pulse-b, .hh-intro.hh-s1 .hh-pulse-b, .hh-intro.hh-s2 .hh-pulse-b {
    animation-play-state: paused;
  }

}
.hh-layers {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scale(1.025);
  opacity: var(--glow-mult, 1);
  animation: hhBreathe 8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  will-change: filter;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 99%);
}
/* slow "breathing" of overall light intensity, 1 → 1.8 and back */
@keyframes hhBreathe {
  from { filter: brightness(1); }
  to   { filter: brightness(1.8); }
}
@media (max-width: 1100px) {
  .hh-layers { width: 112%; left: -4%; opacity: calc(0.86 * var(--glow-mult, 1)); }
}

.hh-base-wrap,
.hh-base {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.hh-base {
  object-fit: cover; object-position: center;
  mix-blend-mode: normal;
}

/* violet → orange ambient bloom that breathes around the halo */
.hh-bloom {
  position: absolute; inset: -10% -20% -10% 0%; pointer-events: none;
  background:
    radial-gradient(42% 34% at 73% 76%, rgba(140,107,240,0.52), rgba(123,64,232,0.14) 48%, transparent 74%),
    radial-gradient(42% 40% at 72% 48%, rgba(255,126,61,0.40), rgba(255,126,61,0.12) 54%, transparent 75%);
  filter: blur(28px); mix-blend-mode: screen; opacity: 0.86;
  animation: hhBloomDrift 14s cubic-bezier(0.22,1,0.36,1) infinite alternate;
}
@keyframes hhBloomDrift {
  0%   { transform: translate(-2%, 2%) scale(1); }
  100% { transform: translate(3%, -3%) scale(1.08); }
}

.hh-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen; overflow: visible;
}
.hh-svg :is(path, circle) { fill: none; stroke-linecap: round; }

/* static layers that fatten the always-on halo and beam */
.hh-floor-glow { fill: rgba(140,107,240,0.42); stroke: none; }
.hh-ring-glow  { stroke: rgba(255,126,61,0.20); stroke-width: 82; }
.hh-ring-core  { stroke: rgba(255,150,64,0.44); stroke-width: 12; }
.hh-beam-glow  { stroke: rgba(255,126,61,0.18); stroke-width: 76; }
.hh-beam-core  { stroke: rgba(255,178,92,0.54); stroke-width: 10; }
/* bright white-hot center line running across the beam */
.hh-hot   { stroke: rgba(255,255,255,0.78); stroke-width: 3.5; }

/* traveling highlights — a soft bright segment slides across the beam.
   pathLength is normalized to 1000; dash = bright segment, big gap = rest. */
.hh-pulse { stroke: rgba(255,244,224,0.95); }
.hh-pulse-a { stroke-width: 18; stroke-dasharray: 150 850;  animation: hhFlow 9.5s linear infinite; }
.hh-pulse-b { stroke-width: 9; stroke-dasharray: 96 904;  animation: hhFlow 9.5s linear infinite; animation-delay: -4.75s; }
@keyframes hhFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1000; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-pulse-a, .hh-pulse-b { animation: none; stroke-dashoffset: -560; }
  .hh-bloom { animation: none; }
  .hh-layers { animation: none; filter: brightness(1.3); }
}

/* ── pointer-following brand-color spotlight on the rating stars ──────────
   Stars stay white until hovered; a soft radial of the brand color (Clutch
   red / Trustpilot green) blooms under the cursor and fades back to white. */
.hh-hero .rating-badge { --rc: #FFFFFF; }
.hh-hero .badge-clutch     { --rc: #FF3B30; }
.hh-hero .badge-trustpilot { --rc: #19C57A; }
.hh-hero .rating-badge .rating-stars {
  background-image: radial-gradient(58px circle at var(--mx, -200px) var(--my, 50%), var(--rc) 0%, #FFFFFF 78%);
  -webkit-background-clip: text; background-clip: text;
}
/* on hover, make the glyphs transparent so the clipped gradient shows through;
   wins over the .anim-done white-settle !important rule via higher specificity */
.hh-hero .rating-badge:hover { cursor: default; }
.hh-hero .rating-badge:hover .rating-stars .rstar { color: transparent !important; }
.hh-hero .rating-badge { transition: border-color .3s var(--ease), background .3s var(--ease); }
.hh-hero .rating-badge:hover { border-color: color-mix(in oklab, var(--rc) 45%, var(--border-default)); }