/* Hero message flow (2026-10-21).
   Messages (circles: chat, rounded rectangles: email) arrive scattered from the left, settle into
   lanes, light up as they pass the rules gate (the hero seam on desktop) and leave in order.
   Transform and opacity only; paused off-screen; absent under reduced motion. */
.flow { position: absolute; inset: 0; z-index: 1; container-type: size; pointer-events: none; --gx: 52; }
/* Inline styles carry both layouts (--x0/--y0/--y1 desktop, --mx0/--my0/--my1 phone); the stylesheet picks one,
   because a stylesheet rule cannot override a property set inline. */
.flow i { --X0: var(--x0); --Y0: var(--y0); --Y1: var(--y1); --WY: var(--wy); }
.flow b { --LY: var(--ly); }
.flow.is-paused i, .flow.is-paused b { animation-play-state: paused; }

.flow i {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #6d93bd; opacity: 0;
  animation: flow-move var(--t) cubic-bezier(.45, .05, .35, 1) var(--dl) infinite both;
  will-change: transform, opacity;
}
.flow i.m { width: 8px; height: 6px; margin: -3px 0 0 -4px; border-radius: 1.5px; }
.flow i::after {
  position: absolute; inset: -3px; border-radius: inherit; background: #22d5f5;
  box-shadow: 0 0 12px 2px rgb(34 213 245 / 55%); opacity: 0; content: "";
  animation: flow-lit var(--t) linear var(--dl) infinite both;
}

/* Rules gate: one short tick per lane, pulsing quietly. On desktop the hero seam is the gate line. */
.flow b {
  position: absolute; left: 0; top: 0; width: 12px; height: 1px; margin-left: -6px;
  background: #22d5f5; opacity: .18;
  transform: translate(calc(var(--gx) * 1cqw), calc(var(--LY) * 1cqh));
  animation: flow-tick 3.2s ease-in-out var(--dl) infinite;
}
.flow__gate { display: none; }

@keyframes flow-move {
  0%   { transform: translate(calc(var(--X0) * 1cqw), calc(var(--Y0) * 1cqh)) scale(.5); opacity: 0; }
  12%  { opacity: .8; }
  45%  { transform: translate(calc((var(--X0) + var(--gx)) * .5cqw), calc((var(--Y0) + var(--Y1)) * .5cqh + var(--WY) * 1cqh)) scale(.85); }
  80%  { transform: translate(calc(var(--gx) * 1cqw - 18px), calc(var(--Y1) * 1cqh)) scale(1); opacity: .85; }
  88%  { transform: translate(calc(var(--gx) * 1cqw), calc(var(--Y1) * 1cqh)) scale(1.25); opacity: 1; }
  100% { transform: translate(calc(var(--gx) * 1cqw + 30px), calc(var(--Y1) * 1cqh)) scale(.6); opacity: 0; }
}
@keyframes flow-lit { 0%, 82% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: .6; } }
@keyframes flow-tick { 0%, 100% { opacity: .14; } 50% { opacity: .55; } }

/* Phones and tablets: the hero is one dark column. The flow runs in the band beside the logo,
   to a faint gate near the right edge, clear of the headline. */
@media (max-width: 900px) {
  .flow { --gx: 92; }
  .flow i { --X0: var(--mx0); --Y0: var(--my0); --Y1: var(--my1); --WY: 1; }
  .flow b { --LY: var(--mly); }
  .flow__gate {
    display: block; position: absolute; left: calc(var(--gx) * 1%); top: 7%; height: 22%; width: 1px;
    background: linear-gradient(180deg, transparent, rgb(34 213 245 / 45%) 30%, rgb(34 213 245 / 45%) 70%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) { .flow { display: none; } }