/* hero-huly.css — "never-ending streak" hero (Huly-style)
   Layer stack inside the hero, right side, extending beyond the viewport top &
   bottom so the streak has no visible start or end:
     1. base streak art (light + texture)            .hh-base
     2. violet/blue ambient bloom drifting behind     .hh-bloom
     3. SVG path overlay: static orange glow + thin
        white-hot core + traveling white highlights   .hh-svg
   The base arc is ALWAYS lit; the moving highlights add a brighter pulse that
   flows along it forever (enters off-screen top, exits off-screen bottom). */

.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%);
}
/* ── intro reveal timeline ────────────────────────────────────────────────
   s0 pitch black → s1 light core grows → s2 surroundings appear → s3 flows.
   Layers fade via transitions; the infinite loops (breathe/flow) stay paused
   until s3 so the streak only starts moving once everything has arrived. */
@media (prefers-reduced-motion: no-preference) {
  .hh-intro .hh-glow,
  .hh-intro .hh-core { transition: opacity 1.5s ease; }
  .hh-intro .hh-base { transition: opacity 1.5s ease; }
  .hh-intro .hh-bloom { transition: opacity 1.7s ease; }
  .hh-intro .hh-pulse { transition: opacity 1.3s ease; }
  .hh-intro .hh-layers { transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1); }

  /* s0 — pitch black: nothing lit */
  .hh-intro.hh-s0 .hh-glow,
  .hh-intro.hh-s0 .hh-core,
  .hh-intro.hh-s0 .hh-base,
  .hh-intro.hh-s0 .hh-bloom,
  .hh-intro.hh-s0 .hh-pulse { opacity: 0; }

  /* s1 — the IMAGE has loaded in; the white streak + bloom stay hidden on top */
  .hh-intro.hh-s1 .hh-glow,
  .hh-intro.hh-s1 .hh-core,
  .hh-intro.hh-s1 .hh-bloom,
  .hh-intro.hh-s1 .hh-pulse { opacity: 0; }

  /* s2 — white-hot streak + bloom now present, but not yet flowing */
  .hh-intro.hh-s2 .hh-pulse { opacity: 0; }

  /* image "grows" in: scale up through s0→s1, settle by s2 */
  .hh-intro.hh-s0 .hh-layers,
  .hh-intro.hh-s1 .hh-layers { transform: translateX(-220px) scale(0.94); }

  /* 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;
  }
}
/* the art box overflows the hero top & bottom so the arc ends are clipped away.
   aspect kept ≥1 so a center-crop never clips the arc's upper tip; the streak's
   black areas vanish under screen-blend, leaving just the lit arc on the right. */
.hh-layers {
  position: absolute; top: -14%; bottom: -14%; right: -6%; width: 80%;
  transform: translateX(-220px);
  opacity: var(--glow-mult, 1);
  animation: hhBreathe 8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  will-change: filter;
  /* feather every exposed edge (left, right, bottom) so the warm dust dissolves
     into the black instead of ending as a hard rectangular seam. Two gradients
     intersected: horizontal fades both sides, vertical fades the bottom. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 80%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 52%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 80%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 52%, transparent 96%);
  mask-composite: intersect;
}
/* 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: 116%; right: -26%; opacity: calc(0.78 * var(--glow-mult, 1)); } }

.hh-base {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  mix-blend-mode: screen;
}

/* violet → blue ambient bloom that breathes/drifts behind the streak */
.hh-bloom {
  position: absolute; inset: -10% -20% -10% 0%; pointer-events: none;
  background:
    radial-gradient(42% 36% at 38% 78%, rgba(140,107,240,0.55), rgba(123,64,232,0.16) 48%, transparent 72%),
    radial-gradient(40% 34% at 60% 32%, rgba(255,150,70,0.40), transparent 66%);
  filter: blur(28px); mix-blend-mode: screen;
  animation: hhBloomDrift 14s cubic-bezier(0.22,1,0.36,1) infinite alternate;
}
@keyframes hhBloomDrift {
  0%   { transform: translate(-2%, 2%) scale(1);    opacity: 0.7; }
  100% { transform: translate(3%, -3%) scale(1.08); opacity: 0.95; }
}

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

/* static layers that fatten the always-on glow */
.hh-glow  { stroke: rgba(255,150,64,0.26); stroke-width: 120; }
.hh-core  { stroke: rgba(255,240,216,0.62); stroke-width: 16; }
/* bright white-hot center line running down the core, like the reference */
.hh-hot   { stroke: rgba(255,255,255,0.95); stroke-width: 5.5; }

/* traveling highlights — a long soft bright segment slides along the arc.
   pathLength is normalized to 1000; dash = bright segment, big gap = rest.
   The base arc stays lit underneath, so the gap never reads as "empty". */
.hh-pulse { stroke: rgba(255,244,224,0.95); }
.hh-pulse-a { stroke-width: 26; stroke-dasharray: 300 900;  animation: hhFlow 15s linear infinite; }
.hh-pulse-b { stroke-width: 16; stroke-dasharray: 220 980;  animation: hhFlow 15s linear infinite; animation-delay: -7.5s; }
@keyframes hhFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1200; }
}

@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)); }