/* ════════════════════════════════════════════════════════════
   SERVICES HERO — the shared formula
   One class set for every services hero (fractional-ai excluded).
   Structure per hero: ambient layer → eyebrow pill → two-line
   Anton H1 (line 2 in the cyan gradient) → prose sub → teardrop
   CTA → mono trust strip → staggered entrance.

   Markup is rendered at runtime by /js/svc-heroes.js from a
   per-service registry — copy lives THERE, once per service,
   and is shared by both members of each page pair (canonical +
   -caleb). The ambient animation is the per-service unique bit,
   selected by a modifier class:

     .svc-hero--fireflies   AI Transformation
     .svc-hero--streaks     AI Legacy Modernization (rising streaks)
     .svc-hero--conveyor    AI-Accelerated App Dev (conveyor dashes)
     .svc-hero--web         AI-Native Staff Aug (canvas lattice)
     .svc-hero--orbits      Recruiting (canvas comet-slivers)
   ════════════════════════════════════════════════════════════ */

/* Placeholder slot — holds the viewport open (dark) until the
   renderer swaps in the hero, so there's no layout jump. */
[data-svc-hero] { min-height: 100svh; background: var(--jg-dark); }

/* ── The formula ────────────────────────────────────────── */
.svc-hero {
  position: relative;
  min-height: 100svh;
  padding: 92px 24px;   /* symmetric — headline sits on the true viewport midline */
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--jg-dark);
  text-align: center;
  color: var(--jg-light);
}
.svc-hero__glow {
  position: absolute; z-index: 0; top: -22%; left: 50%; transform: translateX(-50%);
  width: min(900px, 120vw); height: min(900px, 120vw);
  background: radial-gradient(circle, rgba(0,189,255,0.14) 0%, transparent 66%);
  pointer-events: none;
}
.svc-hero__content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin-inline: auto; padding: 0 clamp(20px, 5vw, 40px); }
/* entrance — staggered on load (renderer adds .in) */
.svc-hero__content > * { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.svc-hero.in .svc-hero__content > * { opacity: 1; transform: none; }
.svc-hero.in .svc-hero__content > *:nth-child(1) { transition-delay: 0.05s; }
.svc-hero.in .svc-hero__content > *:nth-child(2) { transition-delay: 0.16s; }
.svc-hero.in .svc-hero__content > *:nth-child(3) { transition-delay: 0.30s; }
.svc-hero.in .svc-hero__content > *:nth-child(4) { transition-delay: 0.44s; }
.svc-hero.in .svc-hero__content > *:nth-child(5) { transition-delay: 0.58s; }
.svc-hero__eyebrow {
  display: inline-block; padding: 7px 20px; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--jg-primary); border: 1px solid rgba(0,189,255,0.32); background: rgba(0,189,255,0.06);
  margin-bottom: 26px;
}
.svc-hero__h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.02; letter-spacing: 0.01em;
  color: var(--jg-light); margin: 0 0 24px; text-wrap: balance;
}
.svc-hero__grad {
  background: linear-gradient(135deg, #00BDFF 0%, #0089D0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.svc-hero__sub {
  font-weight: 300; font-size: clamp(17.5px, 1.6vw, 1.22rem);
  line-height: 1.62; max-width: 840px; margin: 0 auto 36px;
  text-wrap: pretty; /* not `balance`: balance halves the rendered line width; pretty only guards orphans */
}
.svc-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.svc-hero__trust {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em;
  color: rgba(244,244,244,0.42);
}
.svc-hero__trust i { color: rgba(0,189,255,0.5); font-style: normal; }
.svc-hero__trust strong { color: #00BDFF; font-weight: 500; }
/* full-bleed ambient canvas (web / orbits) */
.svc-hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── Ambient · fireflies (AI Transformation) ────────────── */
.svc-hero--fireflies .svc-hero__glow {
  top: -24%;
  width: min(920px, 120vw); height: 920px;
  background: radial-gradient(circle, rgba(0,189,255,0.16) 0%, rgba(12,75,95,0.11) 38%, transparent 68%);
  animation: svc-glow 9s ease-in-out infinite; /* the glow breathes + sways — no moving lines */
}
@keyframes svc-glow {
  0%, 100% { transform: translateX(-53%) scale(1); opacity: 0.7; }
  50%      { transform: translateX(-47%) scale(1.08); opacity: 1; }
}
/* tiny dots that glow up and dissipate behind the text (positions
   + timing randomized per visit by the renderer) */
.svc-fireflies { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.svc-fireflies i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #7fe0ff; box-shadow: 0 0 12px 3px rgba(0,189,255,0.45);
  opacity: 0; animation: svc-fly 7s ease-in-out infinite;
}
@keyframes svc-fly {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  50%      { opacity: 0.75; transform: translateY(-14px) scale(1); }
}

/* ── Ambient · rising streaks (AI Legacy Modernization) ─── */
.svc-hero--streaks {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(0,189,255,0.10), transparent 55%),
    linear-gradient(180deg, var(--jg-dark) 0%, #131417 100%);
}
.svc-hero--streaks .svc-hero__glow {
  top: -18%; width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(0,189,255,0.13) 0%, transparent 68%);
  filter: blur(4px);
  animation: svc-breathe 9s ease-in-out infinite;
}
@keyframes svc-breathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}
.svc-flow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.svc-flow--v i {
  position: absolute; bottom: -180px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(0,189,255,0.13), transparent);
  box-shadow: 0 0 6px rgba(0,189,255,0.10);
  animation: svc-flow-v linear infinite;
}
@keyframes svc-flow-v { from { transform: translateY(0); } to { transform: translateY(calc(-100svh - 360px)); } }
.svc-flow--v i:nth-child(1)  { left: 5%;  height: 150px; animation-duration: 26s; animation-delay: 0s; }
.svc-flow--v i:nth-child(2)  { left: 13%; height: 90px;  animation-duration: 38s; animation-delay: -18s; }
.svc-flow--v i:nth-child(3)  { left: 22%; height: 120px; animation-duration: 30s; animation-delay: -24s; }
.svc-flow--v i:nth-child(4)  { left: 30%; height: 70px;  animation-duration: 44s; animation-delay: -8s; }
.svc-flow--v i:nth-child(5)  { left: 39%; height: 140px; animation-duration: 33s; animation-delay: -27s; }
.svc-flow--v i:nth-child(6)  { left: 48%; height: 100px; animation-duration: 40s; animation-delay: -35s; }
.svc-flow--v i:nth-child(7)  { left: 57%; height: 130px; animation-duration: 28s; animation-delay: -12s; }
.svc-flow--v i:nth-child(8)  { left: 65%; height: 80px;  animation-duration: 46s; animation-delay: -32s; }
.svc-flow--v i:nth-child(9)  { left: 73%; height: 155px; animation-duration: 31s; animation-delay: -5s; }
.svc-flow--v i:nth-child(10) { left: 81%; height: 110px; animation-duration: 36s; animation-delay: -22s; }
.svc-flow--v i:nth-child(11) { left: 89%; height: 95px;  animation-duration: 42s; animation-delay: -15s; }
.svc-flow--v i:nth-child(12) { left: 95%; height: 135px; animation-duration: 29s; animation-delay: -9s; }

/* ── Ambient · conveyor dashes (AI-Accelerated App Dev) ──── */
.svc-hero--conveyor .svc-hero__glow { top: -24%; }
.svc-flow--h i {
  position: absolute; left: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,189,255,0.13), transparent);
  box-shadow: 0 0 6px rgba(0,189,255,0.10);
  transform: translateX(-160px);
  animation: svc-flow-h linear infinite;
}
@keyframes svc-flow-h { from { transform: translateX(-160px); } to { transform: translateX(100vw); } }
/* base scatter — the renderer re-randomizes these per visit */
.svc-flow--h i:nth-child(1)  { top: 8%;  width: 150px; animation-duration: 26s; animation-delay: 0s; }
.svc-flow--h i:nth-child(2)  { top: 16%; width: 90px;  animation-duration: 38s; animation-delay: -18s; }
.svc-flow--h i:nth-child(3)  { top: 24%; width: 120px; animation-duration: 30s; animation-delay: -24s; }
.svc-flow--h i:nth-child(4)  { top: 32%; width: 70px;  animation-duration: 44s; animation-delay: -8s; }
.svc-flow--h i:nth-child(5)  { top: 41%; width: 140px; animation-duration: 33s; animation-delay: -27s; }
.svc-flow--h i:nth-child(6)  { top: 50%; width: 100px; animation-duration: 40s; animation-delay: -35s; }
.svc-flow--h i:nth-child(7)  { top: 59%; width: 130px; animation-duration: 28s; animation-delay: -12s; }
.svc-flow--h i:nth-child(8)  { top: 67%; width: 80px;  animation-duration: 46s; animation-delay: -32s; }
.svc-flow--h i:nth-child(9)  { top: 75%; width: 155px; animation-duration: 31s; animation-delay: -5s; }
.svc-flow--h i:nth-child(10) { top: 83%; width: 110px; animation-duration: 36s; animation-delay: -22s; }
.svc-flow--h i:nth-child(11) { top: 90%; width: 95px;  animation-duration: 42s; animation-delay: -15s; }
.svc-flow--h i:nth-child(12) { top: 96%; width: 135px; animation-duration: 29s; animation-delay: -9s; }

/* ── Ambient · transforming web (AI-Native Staff Aug) ────── */
.svc-hero--web .svc-hero__glow { top: -16%; width: 900px; height: 900px; max-width: 130vw; }

/* ── Ambient · comet orbits (Recruiting) ─────────────────── */
/* Fade the canvas out toward the hero's bottom edge so a clipped
   wide-orbit arc can't read as one orphaned dash in the dark band. */
.svc-hero--orbits .svc-hero__canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 94%);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 560px) {
  .svc-hero__trust { font-size: 0.68rem; gap: 9px; }
}

/* ── Reduced motion — land the entrance, still the ambience ── */
@media (prefers-reduced-motion: reduce) {
  .svc-hero__glow, .svc-fireflies i, .svc-flow i { animation: none; }
  .svc-fireflies, .svc-flow { display: none; }
  .svc-hero__content > * { opacity: 1; transform: none; transition: none; }
}