/* =====================================================================
   Nativebyte — Hero Animation Primitives
   Shared, reusable building blocks for bespoke hero scenes on each page.
   Ambient intensity, CSS + SVG, cursor-parallax + reduced-motion aware.
   ===================================================================== */

/* Scene container — sits inside .hero-art */
.ha-scene {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  --ha-primary: #F97316;
  --ha-primary-light: #FB923C;
  --ha-primary-dim: rgba(249, 115, 22, 0.35);
  --ha-primary-faint: rgba(249, 115, 22, 0.12);
  --ha-stroke: rgba(249, 115, 22, 0.45);
  --ha-stroke-dim: rgba(249, 115, 22, 0.22);
  --ha-ink: rgba(255, 255, 255, 0.92);
  --ha-muted: rgba(255, 255, 255, 0.45);
}

/* Parallax layers — JS sets --px/--py based on cursor position.
   Applied as a transform ONLY; position/inset left to the element itself. */
.ha-par {
  transform: translate(calc(var(--px, 0) * var(--ha-par-depth, 6px)),
                       calc(var(--py, 0) * var(--ha-par-depth, 6px)));
  transition: transform 450ms cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
/* A wrapper parallax layer that fills the scene — use <div class="ha-par-fill l1"> to wrap multiple items */
.ha-par-fill {
  position: absolute;
  inset: 0;
}
.ha-par.l1 { --ha-par-depth: 4px; }
.ha-par.l2 { --ha-par-depth: 10px; }
.ha-par.l3 { --ha-par-depth: 18px; }

/* ---------- SVG line styles ---------- */

.ha-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ha-svg .ln {
  fill: none;
  stroke: var(--ha-stroke);
  stroke-width: 1.25;
  stroke-linecap: round;
}
.ha-svg .ln-dim { stroke: var(--ha-stroke-dim); stroke-width: 1; }
.ha-svg .ln-dashed {
  stroke-dasharray: 4 5;
  animation: ha-dash 2.5s linear infinite;
}
@keyframes ha-dash { to { stroke-dashoffset: -18; } }

/* Marching ants on a connector — shows directed flow */
.ha-svg .ln-flow {
  stroke-dasharray: 8 10;
  animation: ha-flow 3.5s linear infinite;
}
@keyframes ha-flow { to { stroke-dashoffset: -36; } }

/* ---------- Nodes (stations) ---------- */

.ha-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
}

.ha-node .dot {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(20, 20, 28, 0.85);
  border: 1px solid var(--ha-stroke);
  display: grid; place-items: center;
  color: var(--ha-primary-light);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(249, 115, 22, 0.08);
  position: relative;
}
.ha-node .dot.sm { width: 30px; height: 30px; border-radius: 8px; }
.ha-node .dot.lg {
  width: 54px; height: 54px;
  border-radius: 12px;
  border-color: var(--ha-primary);
  background: rgba(249, 115, 22, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(249, 115, 22, 0.22);
}

.ha-node .dot svg { width: 50%; height: 50%; }
.ha-node .dot.sm svg { width: 56%; height: 56%; }

.ha-node .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ha-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.ha-node.active .dot {
  border-color: var(--ha-primary);
  background: rgba(249, 115, 22, 0.1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(249, 115, 22, 0.35);
}

/* Ambient node pulse */
@keyframes ha-node-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(249,115,22,0.2); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 28px rgba(0,0,0,0.5), 0 0 40px rgba(249,115,22,0.45); }
}
.ha-node.pulse .dot { animation: ha-node-pulse 3.6s ease-in-out infinite; }

/* ---------- Traveling pulses along paths ---------- */

/* A small dot emitted along an SVG path using offset-path */
.ha-pulse {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ha-primary-light);
  box-shadow: 0 0 10px var(--ha-primary), 0 0 18px rgba(249,115,22,0.4);
  offset-path: var(--ha-path);
  offset-distance: 0%;
  animation: ha-travel var(--ha-duration, 3.8s) cubic-bezier(.45,.05,.5,.95) infinite;
  animation-delay: var(--ha-delay, 0s);
}
@keyframes ha-travel {
  0%   { offset-distance: 0%;   opacity: 0; transform: scale(0.4); }
  8%   { opacity: 1; transform: scale(1); }
  88%  { opacity: 1; transform: scale(1); }
  100% { offset-distance: 100%; opacity: 0; transform: scale(0.4); }
}

/* ---------- Chip / tag primitives ---------- */

.ha-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: #FDBA74;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.15);
}
.ha-chip.plain {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  box-shadow: none;
}
.ha-chip.sm { padding: 2px 7px; font-size: 9px; }

/* Badge that fades in and out */
.ha-chip.emerge {
  opacity: 0;
  animation: ha-emerge var(--ha-em-dur, 5s) ease-in-out infinite;
  animation-delay: var(--ha-em-delay, 0s);
}
@keyframes ha-emerge {
  0%, 15% { opacity: 0; transform: translateY(6px) scale(0.95); }
  25%, 75% { opacity: 1; transform: translateY(0) scale(1); }
  85%, 100% { opacity: 0; transform: translateY(-4px) scale(0.95); }
}

/* ---------- Document / card glyphs ---------- */

.ha-card {
  position: absolute;
  width: 72px; height: 90px;
  border-radius: 6px;
  background: rgba(20, 20, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 9px 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 5px;
}
.ha-card::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--ha-primary);
  border-right: 1.5px solid var(--ha-primary);
  opacity: 0.7;
}
.ha-card .ln {
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}
.ha-card .ln.hl { background: rgba(249, 115, 22, 0.65); }
.ha-card .ln.w70 { width: 70%; }
.ha-card .ln.w50 { width: 50%; }
.ha-card .ln.w85 { width: 85%; }

/* ---------- Grid / field backdrops ---------- */

.ha-field {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(249, 115, 22, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(249, 115, 22, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 55% at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at center, black 30%, transparent 80%);
  opacity: 0.6;
}

/* ---------- Sparkline / waveform backdrop ---------- */

.ha-wave {
  position: absolute;
  left: 0; right: 0; bottom: 14%;
  height: 25%;
  opacity: 0.55;
}
.ha-wave path {
  fill: none;
  stroke: var(--ha-primary-dim);
  stroke-width: 1.25;
  stroke-linecap: round;
  animation: ha-wave-drift 8s ease-in-out infinite;
}
@keyframes ha-wave-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- Ambient reveal-on-load ---------- */

.ha-scene {
  animation: ha-fade-in 1.2s ease-out both;
}
@keyframes ha-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Ambient backdrops (for text-only hero layouts) ---------- */

.ha-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  --ha-primary: #F97316;
  --ha-primary-light: #FB923C;
  --ha-primary-dim: rgba(249, 115, 22, 0.35);
  --ha-stroke: rgba(249, 115, 22, 0.2);
  --ha-stroke-dim: rgba(249, 115, 22, 0.1);
  animation: ha-fade-in 1.2s ease-out both;
}
/* Hero section needs relative + z-index wrangling so backdrop sits behind content */
section.hero { position: relative; }
section.hero > .container { position: relative; z-index: 1; }

/* Orbital rings drifting right side of hero */
.ha-bg .ha-bg-orbit {
  position: absolute;
  right: -6%;
  top: 50%;
  width: 600px;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  border: 1px solid var(--ha-stroke);
  border-radius: 50%;
  opacity: 0.45;
}
.ha-bg .ha-bg-orbit.r2 { width: 760px; opacity: 0.22; border-color: var(--ha-stroke-dim); }
.ha-bg .ha-bg-orbit.r3 { width: 920px; opacity: 0.1;  border-color: var(--ha-stroke-dim); }

/* Slow drifting dots on the orbital */
.ha-bg-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ha-primary);
  box-shadow: 0 0 12px var(--ha-primary), 0 0 24px rgba(249,115,22,0.4);
  offset-path: var(--ha-path);
  offset-distance: 0%;
  animation: ha-travel var(--ha-duration, 16s) linear infinite;
  animation-delay: var(--ha-delay, 0s);
  opacity: 0.6;
}

/* Faint topographic grid backdrop */
.ha-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(249, 115, 22, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(249, 115, 22, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 80% 50%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 80% 50%, black 10%, transparent 75%);
}

@media (prefers-reduced-motion: reduce) {
  .ha-bg-dot { animation: none !important; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ha-scene, .ha-scene *,
  .ha-svg .ln-dashed, .ha-svg .ln-flow,
  .ha-pulse, .ha-chip.emerge,
  .ha-node.pulse .dot, .ha-wave path {
    animation: none !important;
    transition: none !important;
  }
  .ha-chip.emerge { opacity: 1; transform: none; }
  .ha-pulse { opacity: 0; } /* hide traveling dots entirely in reduced mode */
  .ha-par { transform: none !important; }
}