/* ============================================================
   FlowGenixX — Hero Motion Graphic
   "Living pipeline" — grid drift + flow lines with packets +
   atmospheric glow + occasional connection arcs.
   All tokens pulled from colors_and_type.css.
   ============================================================ */

/* ---- TUNABLES ----
   Edit these to retune the composition without touching markup.
   --------------------------------------------------------- */
.hero-motion {
  /* density */
  --hm-grid-cell:        80px;
  --hm-grid-opacity:     0.045;   /* faint grid */
  --hm-line-opacity:     0.08;    /* near-invisible flow lines */
  --hm-node-opacity:     0.18;
  --hm-packet-glow:      0.85;

  /* timing — seamless ambient loops */
  --hm-grid-loop:        60s;
  --hm-glow-loop:        38s;
  --hm-glow2-loop:       54s;
  --hm-arc-cycle:        7s;      /* connection cadence */

  /* colors — sourced from design system */
  --hm-grid-color:       var(--color-on-dark);
  --hm-line-color:       var(--color-on-dark);
  --hm-accent:           var(--color-primary);
  --hm-accent-soft:      rgba(204, 120, 92, 0.22);

  /* effective opacity behind type */
  --hm-overall-opacity:  0.7;

  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--hm-overall-opacity);
  contain: strict;
}

/* ---- LAYER 1: drifting grid ---- */
.hm-grid {
  position: absolute;
  inset: -2px -160px -2px -160px; /* extra width for horizontal drift */
  background-image:
    linear-gradient(to right,  rgba(250, 249, 245, var(--hm-grid-opacity)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250, 249, 245, var(--hm-grid-opacity)) 1px, transparent 1px);
  background-size: var(--hm-grid-cell) var(--hm-grid-cell);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 35%, transparent 85%);
  animation: hm-grid-drift var(--hm-grid-loop) linear infinite;
  will-change: transform;
}
@keyframes hm-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--hm-grid-cell), 0, 0); } /* one cell = seamless */
}

/* ---- LAYER 3: atmospheric glows ---- */
.hm-glow {
  position: absolute;
  width: 900px; height: 900px;
  left: 50%; top: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hm-accent-soft) 0%, rgba(204, 120, 92, 0) 60%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
  animation: hm-glow-drift var(--hm-glow-loop) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}
.hm-glow.hm-glow-2 {
  width: 520px; height: 520px;
  left: 25%; top: 60%;
  background: radial-gradient(circle, rgba(204, 120, 92, 0.14) 0%, rgba(204, 120, 92, 0) 65%);
  animation: hm-glow-drift-2 var(--hm-glow2-loop) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes hm-glow-drift {
  0%   { transform: translate(-58%, -52%); }
  100% { transform: translate(-42%, -48%); }
}
@keyframes hm-glow-drift-2 {
  0%   { transform: translate(-30%, -50%); }
  100% { transform: translate(15%, -45%); }
}

/* ---- LAYER 2: SVG flow lines + packets ---- */
.hm-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hm-track {
  stroke: rgba(250, 249, 245, var(--hm-line-opacity));
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* Packet container — full hero width, contains absolutely-positioned packets.
   Translate uses % of the container, so it reflows with the hero.            */
.hm-packets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hm-packet {
  position: absolute;
  left: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--hm-accent);
  box-shadow: 0 0 6px var(--hm-accent), 0 0 14px rgba(204, 120, 92, 0.45);
  opacity: 0;
  will-change: transform, opacity;
}
/* Per-track vertical positions match the SVG track y-values (as %) */
.hm-packet-1 { top: 14.25%; }
.hm-packet-2 { top: 28.25%; }
.hm-packet-3 { top: 45%;    }
.hm-packet-4 { top: 61.75%; }
.hm-packet-5 { top: 77%;    }
.hm-packet-6 { top: 90.25%; }

/* Each packet defines its own offset path for left→right travel,
   using percentage-based animations so they reflow with the hero.
   We use 6 tracks at varied y-positions and durations.            */

/* Track durations are coprime-ish so they don't visually align.
   translateX uses viewport width units so packets cross the entire hero. */
.hm-packet-1 { animation: hm-travel  9s linear infinite, hm-fade  9s linear infinite; animation-delay:  0s,    0s; }
.hm-packet-2 { animation: hm-travel 11s linear infinite, hm-fade 11s linear infinite; animation-delay: -3.2s, -3.2s; }
.hm-packet-3 { animation: hm-travel 13s linear infinite, hm-fade 13s linear infinite; animation-delay: -6.4s, -6.4s; }
.hm-packet-4 { animation: hm-travel  8s linear infinite, hm-fade  8s linear infinite; animation-delay: -1.5s, -1.5s; }
.hm-packet-5 { animation: hm-travel 14s linear infinite, hm-fade 14s linear infinite; animation-delay: -8.7s, -8.7s; }
.hm-packet-6 { animation: hm-travel 10s linear infinite, hm-fade 10s linear infinite; animation-delay: -5.1s, -5.1s; }

@keyframes hm-travel {
  from { transform: translateX(-20px); }
  to   { transform: translateX(calc(100vw - -20px)); }
}
/* Use container-relative width inside .hero so it reflows with section, not viewport. */
@supports (width: 100cqw) {
  .hero-motion { container-type: inline-size; }
  @keyframes hm-travel {
    from { transform: translateX(-20px); }
    to   { transform: translateX(calc(100cqw + 20px)); }
  }
}
/* Fade in on entry, hold, fade as it approaches end → ending pulse handled below */
@keyframes hm-fade {
  0%   { opacity: 0; }
  6%   { opacity: var(--hm-packet-glow); }
  85%  { opacity: var(--hm-packet-glow); }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

/* "Booked meeting" pulse — anchored at the right end of each track */
.hm-pulse {
  fill: var(--hm-accent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.hm-pulse-1 { animation: hm-pulse 9s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; animation-delay: 0s; }
.hm-pulse-2 { animation: hm-pulse 11s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; animation-delay: -3.2s; }
.hm-pulse-3 { animation: hm-pulse 13s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; animation-delay: -6.4s; }
.hm-pulse-4 { animation: hm-pulse 8s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; animation-delay: -1.5s; }
.hm-pulse-5 { animation: hm-pulse 14s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; animation-delay: -8.7s; }
.hm-pulse-6 { animation: hm-pulse 10s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; animation-delay: -5.1s; }

@keyframes hm-pulse {
  0%, 92%   { opacity: 0; transform: scale(0.6); }
  94%       { opacity: 0.55; transform: scale(1); }
  100%      { opacity: 0; transform: scale(2.4); }
}

/* ---- Connection nodes & arcs ---- */
.hm-node {
  fill: rgba(250, 249, 245, var(--hm-node-opacity));
}

/* Arc paths fade in/out, drawing a connection between two nodes.
   Each arc gets a unique cycle, staggered so only ~1 is visible at a time. */
.hm-arc {
  stroke: var(--hm-accent);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
.hm-arc-1 { animation: hm-arc-draw 28s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: 0s; }
.hm-arc-2 { animation: hm-arc-draw 28s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: -7s; }
.hm-arc-3 { animation: hm-arc-draw 28s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: -14s; }
.hm-arc-4 { animation: hm-arc-draw 28s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: -21s; }

@keyframes hm-arc-draw {
  0%, 78%  { opacity: 0; stroke-dashoffset: 200; }
  82%      { opacity: 0.5; stroke-dashoffset: 200; }
  92%      { opacity: 0.5; stroke-dashoffset: 0; }
  98%      { opacity: 0; stroke-dashoffset: 0; }
  100%     { opacity: 0; stroke-dashoffset: 200; }
}

/* ---- prefers-reduced-motion: static fallback ---- */
@media (prefers-reduced-motion: reduce) {
  .hm-grid,
  .hm-glow,
  .hm-packet,
  .hm-pulse,
  .hm-arc {
    animation: none !important;
  }
  .hm-packet { opacity: var(--hm-packet-glow); transform: translateX(40vw); }
  .hm-packet-2 { transform: translateX(20vw); }
  .hm-packet-4 { transform: translateX(70vw); }
  .hm-packet-6 { transform: translateX(55vw); }
  .hm-arc-1 { opacity: 0.3; stroke-dashoffset: 0; }
}