/* ==========================================================================
   vexxek-flow.css : animated hero background for vexxek.com
   Load AFTER style.css. To undo: delete this file's <link> and the two
   <span class="flow-..."> tags inside .hero-banner in index.html.

   What it does (all on the cityscape banner):
   1. flow-gradient : a flowing cyan > violet > magenta > blue colour wash that
                      re-tints the photo as it drifts (blend mode "color",
                      so the photo's own light and dark detail stays).
   2. flow-lines    : thin horizontal lines drifting down, plus a brighter
                      line every 160px, faded out at the top and bottom edges.

   SPEED: change --flow-speed below. 1 = the original slow pace,
   2 = twice as fast, 4 = four times as fast, 0.5 = half speed.
   ========================================================================== */

:root {
  --flow-speed: 4;          /* animation speed multiplier (1 = original pace) */
  --flow-1: #14c8ff;        /* cyan    */
  --flow-2: #6a3dff;        /* violet  */
  --flow-3: #ff2fa8;        /* magenta */
  --flow-4: #2a5bff;        /* blue    */
  --flow-strength: .65;     /* tint amount: 0 = off, 1 = full colour */
  --flow-line-fine: rgba(170, 230, 255, .12);
  --flow-line-bold: rgba(90, 220, 255, .50);
}

/* Make the banner a self-contained stack so the effect never leaks outside it */
.hero-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-banner-inner {            /* logo + text stay above the effect */
  position: relative;
  z-index: 2;
}

.flow-gradient,
.flow-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- 1. Flowing colour wash ---------- */
.flow-gradient {
  mix-blend-mode: color;
  opacity: var(--flow-strength);
}

/* Layer A: wide gradient that slides left, seamless because the colour
   sequence repeats exactly once per 50% of its width */
.flow-gradient::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200%;
  background: linear-gradient(90deg,
    var(--flow-1) 0%,
    var(--flow-2) 12.5%,
    var(--flow-3) 25%,
    var(--flow-4) 37.5%,
    var(--flow-1) 50%,
    var(--flow-2) 62.5%,
    var(--flow-3) 75%,
    var(--flow-4) 87.5%,
    var(--flow-1) 100%);
  animation: flow-slide calc(40s / var(--flow-speed)) linear infinite;
  will-change: transform;
}

/* Layer B: soft colour blobs that wander, so the wash morphs, not just scrolls */
.flow-gradient::after {
  content: "";
  position: absolute;
  inset: -15%;
  opacity: .85;
  background:
    radial-gradient(38% 55% at 18% 35%, var(--flow-3), transparent 70%),
    radial-gradient(34% 50% at 78% 28%, var(--flow-1), transparent 70%),
    radial-gradient(40% 60% at 55% 85%, var(--flow-2), transparent 70%);
  animation: flow-drift calc(26s / var(--flow-speed)) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes flow-slide { to { transform: translateX(-50%); } }
@keyframes flow-drift {
  from { transform: translate3d(-6%, -3%, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.15); }
}

/* ---------- 2. Horizontal lines ---------- */
.flow-lines {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.flow-lines::before,
.flow-lines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -160px; bottom: 0;       /* 160px extra so the loop is seamless */
  will-change: transform;
}
.flow-lines::before {           /* fine lines, every 8px (10px/s at speed 1) */
  background: repeating-linear-gradient(to bottom,
    var(--flow-line-fine) 0 1px, transparent 1px 8px);
  animation: flow-down calc(16s / var(--flow-speed)) linear infinite;
}
.flow-lines::after {            /* bold line, every 160px (~7px/s at speed 1) */
  background: repeating-linear-gradient(to bottom,
    transparent 0 158px, var(--flow-line-bold) 158px 160px);
  animation: flow-down calc(24s / var(--flow-speed)) linear infinite;
}
@keyframes flow-down { to { transform: translateY(160px); } }  /* 160 = whole number of periods */

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-gradient::before,
  .flow-gradient::after,
  .flow-lines::before,
  .flow-lines::after { animation: none; }
}