/* Gradient band — V0.1 What We Build hero (62:1764): 1280×705, five rows 60/185/190/193/77.
   Ramps are V0.1 values sampled from the comp render (the Figma band is a raster).
   Motion (review B2, Nick #5): the discs drift ~3px/s, alternate rows in opposite directions,
   and a glow runs through a layer masked to the disc rims, each row on its own slow beat and
   against the row above. The glow is the row's own ramp, brighter and more saturated: a
   window slides while its fill counter-slides, so the colour stays put under it. The drift
   is one disc period per loop, so it never seams. Only transform animates. */
.block--gradient-band {
  --gb-rows: 60px 185px 190px 193px 77px;
  --gb-speed: 1;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  background: #28056e; /* V0.1 */
}
.block--gradient-band[data-speed="slow"] { --gb-speed: 2; }
.block--gradient-band[data-speed="fast"] { --gb-speed: 0.5; }

.gband { display: grid; grid-template-rows: var(--gb-rows); }

.gband__row {
  --p: 37px;       /* one disc period; the tile stretches to the row's height */
  --dur: 9s;       /* one pulse */
  --delay: 0s;
  --shade: 0.3;
  --drift: 12s;    /* one period per loop: 37px / 12s ≈ 3px/s */
  --dir: normal;   /* odd rows drift and shimmer left to right, even rows right to left */
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: var(--ramp);
}
.gband__row::before {
  content: "";
  background: var(--ink, #000);  /* the discs are a mask, so each row shades in its own deep tone */
  opacity: var(--shade);
}
.gband__row::before, .gband__vessels {
  position: absolute; inset: 0 calc(-1 * var(--p)); /* a period spare each side, for the drift */
  -webkit-mask: url("../../images/gradient-band-discs.svg") 0 50% / var(--p) var(--tile-h, 100%) repeat-x;
  mask: url("../../images/gradient-band-discs.svg") 0 50% / var(--p) var(--tile-h, 100%) repeat-x;
}
/* A static wash over the "flat" end of a row, where the comp's discs are all one colour. */
.gband__row::after { content: ""; position: absolute; inset: 0; background: var(--cover, none); }

/* The drift: the disc layers slide one period and loop. */
.gband__row::before, .gband__vessels {
  animation: gband-drift calc(var(--drift) * var(--gb-speed)) linear infinite var(--dir);
  will-change: transform;
}
@keyframes gband-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--p), 0, 0); }
}

/* The pulse: a soft window 60% of the row wide sweeps across, then rests off-screen. */
.gband__vessels { z-index: 1; overflow: hidden; }
.gband__glow, .gband__glow::before {
  position: absolute; top: 0; bottom: 0; left: 0;
  animation: gband-pulse calc(var(--dur) * var(--gb-speed)) cubic-bezier(0.45, 0, 0.55, 1) var(--delay) infinite var(--dir) backwards;
  will-change: transform;
}
.gband__glow {
  margin-left: var(--p); /* row x0, inside the widened vessels layer */
  width: 60cqw;
  opacity: 0.8; /* Nick 09-28: the pulse 20% less visible */
  -webkit-mask: radial-gradient(50% 120% at 50% 50%, #000, rgb(0 0 0 / 0.45) 45%, transparent 75%);
  mask: radial-gradient(50% 120% at 50% 50%, #000, rgb(0 0 0 / 0.45) 45%, transparent 75%);
}
.gband__glow::before {
  content: "";
  left: calc(-1 * var(--p)); width: calc(100cqw + 2 * var(--p)); /* covers the row wherever the drift has it */
  background: var(--ramp);
  filter: saturate(1.7) brightness(1.2);
  animation-name: gband-pulse-fill;
}
@keyframes gband-pulse {
  from { transform: translate3d(-60cqw, 0, 0); }
  70%, to { transform: translate3d(100cqw, 0, 0); } /* ~30% of each beat is a rest */
}
@keyframes gband-pulse-fill { /* the exact inverse, so the fill holds still under the window */
  from { transform: translate3d(60cqw, 0, 0); }
  70%, to { transform: translate3d(-100cqw, 0, 0); }
}

/* V0.1 ramps */
.gband__row--1 {
  --p: 38px; --delay: -1.2s; --shade: 0.3; --tile-h: 180%; --ink: #3c0676;
  --ramp: linear-gradient(90deg, #7f10ec 0%, #861fe7 12%, #9f13c3 19%, #bd20b7 31%, #d329af 37%, #f249a8 44%, #fc5a9f 56%, #fb6999 69%, #fc6a84 75%, #fc706c 81%, #fc7c3a 94%, #fd8222 100%);
}
.gband__row--2, .gband__row--4 { --dir: reverse; }
.gband__row--2 {
  --delay: -2.6s; --shade: 0.5; --ink: #10002e;
  --ramp: linear-gradient(90deg, #2a0772 0%, #2a0772 24%, #3b0d83 36%, #622397 48%, #8e37b3 56%, #a440ba 68%, #c54bc0 76%, #dc53cb 87%, #f350c6 100%);
  --cover: linear-gradient(90deg, #2a0772 0%, #2a0772 14%, rgb(42 7 114 / 0) 34%);
}
.gband__row--3 { /* the headline's row: V0.1's pale lavender, taken deep so the white type passes (6:1 or better, 11-03) */
  --delay: -4.6s; --shade: 0.3; --ink: #0c0640;
  --ramp: linear-gradient(90deg, #1c0f5e 0%, #24127a 25%, #3a1fa0 45%, #4a2fc4 62%, #5b3fe0 80%, #7b3fd0 100%);
}
.gband__row--4 {
  --delay: -3.4s; --shade: 0.32; --ink: #0a7250;
  --ramp: linear-gradient(90deg, #02aca6 0%, #02aba6 36%, #1fb4ad 48%, #51ba7e 55%, #69bf68 61%, #8fc731 68%, #b3cf02 75%, #d1d805 81%, #dee103 87%, #e2f60a 100%);
  --cover: linear-gradient(90deg, #02aca6 0%, #02aca6 22%, rgb(2 172 166 / 0) 42%);
}
.gband__row--5 {
  --p: 46px; --drift: 15s; --delay: -5.4s; --shade: 0.26; --tile-h: 180%; --ink: #a8300c;
  --ramp: linear-gradient(90deg, #fc940c 0%, #fba026 12%, #fbae42 19%, #fbc780 31%, #fcd2a1 40%, #fbd4a9 44%, #fabfa3 50%, #fb9e8e 56%, #f88077 62%, #f6524e 75%, #f5403c 81%, #f3342e 87%, #f2392c 100%);
}

/* Content sits on the same row grid, so the eyebrow and headline stay locked to their bands. */
.gband__content {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: var(--gb-rows); grid-template-columns: minmax(0, 1fr); /* long copy wraps instead of widening the band */
}
.gband__eyebrow { grid-row: 2; align-self: start; margin-top: 53px; } /* eyebrow at y225 like every page heading, so moving between pages doesn't jump (review S2) */
.gband__eyebrow .tag--eyebrow { color: inherit; border-width: 1.5px; }
.gband__headline {
  grid-row: 3; align-self: center;
  padding-left: 12px; /* V0.1: the headline box sits at x60, the pill at x48 */
  text-shadow: 0 0 40px rgb(80 40 160 / 0.18);
}
@media (min-width: 1024px) {
  .gband__headline { font-size: min(var(--fs-display-1), 8.45vw); margin-bottom: 16px; } /* one line from 1024 up; V0.1 sits 8px above the row's centre */
}

@media (max-width: 1023px) {
  .block--gradient-band { --gb-rows: 48px 150px 170px 156px 62px; }
  .gband__row { --p: 30px; }
  .gband__row--1 { --p: 31px; }
  .gband__row--5 { --p: 37px; }
  .gband__headline { padding-left: 0; }
}

@media (max-width: 767px) {
  .block--gradient-band { --gb-rows: 40px 132px 150px 132px 52px; }
  .gband__row { --p: 26px; }
  .gband__row--1 { --p: 26px; }
  .gband__row--5 { --p: 31px; }
  .gband__eyebrow { margin-top: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .gband__glow { display: none; }
  .gband__row::before, .gband__vessels { animation: none; }
}

/* Zone-one backgrounds (site/plugins/zone-backgrounds). With anything but Static picked, the band shows the
   background's ground and its canvas (.zbg), and the headline takes dark ink on a light ground. The shingles
   stay in the markup as the fallback, and show again wherever the background doesn't run: phones (unless it
   opts in), reduced motion, and a failed load or no WebGL (.zbg-failed). */
.block--gradient-band .zbg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.block--gradient-band.zbg-live .zbg { opacity: 1; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .block--gradient-band[data-bg]:not(.zbg-failed) { background: var(--zbg-ground, var(--surface-page)); }
  .block--gradient-band[data-bg]:not(.zbg-failed) .gband { visibility: hidden; }
  .block--gradient-band[data-bg]:not(.zbg-failed) .gband *,
  .block--gradient-band[data-bg]:not(.zbg-failed) .gband *::before { animation-play-state: paused; }
  .block--gradient-band[data-bg-tone="dark"]:not(.zbg-failed) { color: var(--ink-primary); }
  .block--gradient-band[data-bg-tone="dark"]:not(.zbg-failed) .gband__headline { text-shadow: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .block--gradient-band[data-bg][data-bg-phones]:not(.zbg-failed) { background: var(--zbg-ground, var(--surface-page)); }
  .block--gradient-band[data-bg][data-bg-phones]:not(.zbg-failed) .gband { visibility: hidden; }
  .block--gradient-band[data-bg][data-bg-phones]:not(.zbg-failed) .gband *,
  .block--gradient-band[data-bg][data-bg-phones]:not(.zbg-failed) .gband *::before { animation-play-state: paused; }
  .block--gradient-band[data-bg-tone="dark"][data-bg-phones]:not(.zbg-failed) { color: var(--ink-primary); }
  .block--gradient-band[data-bg-tone="dark"][data-bg-phones]:not(.zbg-failed) .gband__headline { text-shadow: none; }
}