/* OE – AI Agents Route Lines
 *
 * Plays once when scrolled into view (script.js adds .is-visible):
 *   0.05s+ eight tangled input waves draw in, one every 0.09s
 *   0.7s   the centre point pops in, its glow and label fade in
 *   1.0s+  each route draws from the centre, one every 0.25s
 *   1.5s+  route labels fade in; 2.2s+ end pills pop in
 *   2.6s   the highlighted route's glowing end point fades in and pulses
 *   3.0s+  a white "train" runs along each route 4 times, then fades
 * Looping movement stops after about 20s (WCAG 2.2.2: nothing moves for ever).
 * The base styles are the animated start; animations end on the final state.
 *
 * Hex exception (this block only, approved 2026-10-19): the prototype's gold,
 * teal and plum route colours and the wave colours have no --oe-* token.
 * Everything else uses tokens.
 */

.oe-block-ai-agents-route-lines {
  --oe-route-lines-gold: #B38D2F;
  --oe-route-lines-teal: #347074;
  --oe-route-lines-plum: #61385C;
  --oe-route-lines-wave-amber: #E7A800;
  --oe-route-lines-wave-red: #EF4130;
  --oe-route-lines-wave-green: #B9CC6F;
  --oe-route-lines-wave-teal: #30B5AE;
  --oe-route-lines-wave-magenta: #B3107A;

  --oe-route-lines-sky: var(--oe-color-sky-blue);
  --oe-route-lines-sky-60: color-mix(in srgb, var(--oe-color-sky-blue) 60%, white);
  --oe-route-lines-sky-30: color-mix(in srgb, var(--oe-color-sky-blue) 30%, white);
  --oe-route-lines-teal-30: color-mix(in srgb, var(--oe-route-lines-wave-teal) 30%, white);
  --oe-route-lines-label: var(--oe-color-heritage-blue);
  --oe-route-lines-muted: var(--oe-color-cool-grey);
  --oe-route-lines-ease: cubic-bezier(.65, 0, .35, 1);
  --oe-route-lines-pop: cubic-bezier(.3, 1.6, .5, 1);

  container: oe-route-lines / inline-size;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
}

/* ---------- Background glow and grid (optional) ---------- */

.oe-block-ai-agents-route-lines__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 45% 50%, color-mix(in srgb, var(--oe-route-lines-sky-60) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 35% 40% at 25% 60%, color-mix(in srgb, var(--oe-route-lines-sky-30) 25%, transparent), transparent 70%);
}

.oe-block-ai-agents-route-lines__bg::before,
.oe-block-ai-agents-route-lines__bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Fine 48px grid, fading out towards the edges. */
.oe-block-ai-agents-route-lines__bg::before {
  background:
    linear-gradient(color-mix(in srgb, var(--oe-route-lines-sky) 3.5%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, color-mix(in srgb, var(--oe-route-lines-sky) 3.5%, transparent) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 80%);
}

/* Circuit-board traces: the tile is a mask (black = shape), coloured with the token. */
.oe-block-ai-agents-route-lines__bg::after {
  background-color: var(--oe-route-lines-sky);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='black' stroke-opacity='.13'%3E%3Cpath d='M0 60H90l40 40h110M60 0v40l40 40v160M180 0v120l30 30v90M0 180h40l30-30h70'/%3E%3C/g%3E%3Cg fill='black' fill-opacity='.25'%3E%3Ccircle cx='90' cy='60' r='2'/%3E%3Ccircle cx='100' cy='80' r='2'/%3E%3Ccircle cx='210' cy='150' r='2'/%3E%3Ccircle cx='70' cy='150' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-size: 240px 240px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='black' stroke-opacity='.13'%3E%3Cpath d='M0 60H90l40 40h110M60 0v40l40 40v160M180 0v120l30 30v90M0 180h40l30-30h70'/%3E%3C/g%3E%3Cg fill='black' fill-opacity='.25'%3E%3Ccircle cx='90' cy='60' r='2'/%3E%3Ccircle cx='100' cy='80' r='2'/%3E%3Ccircle cx='210' cy='150' r='2'/%3E%3Ccircle cx='70' cy='150' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 80%);
  mask-size: 240px 240px, 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
}

/* ---------- Map ---------- */

.oe-block-ai-agents-route-lines__map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Gradient stops (colours set here so they follow the tokens). */
.oe-block-ai-agents-route-lines__stop-white { stop-color: var(--oe-color-primary-4); }
.oe-block-ai-agents-route-lines__stop-sky-30 { stop-color: var(--oe-route-lines-sky-30); }
.oe-block-ai-agents-route-lines__stop-sky-60 { stop-color: var(--oe-route-lines-sky-60); }
.oe-block-ai-agents-route-lines__stop-teal-30 { stop-color: var(--oe-route-lines-teal-30); }

/* Route colours: --oe-route-lines-c is the line, the glow is a paler mix. */
.oe-block-ai-agents-route-lines__c--gold { --oe-route-lines-c: var(--oe-route-lines-gold); }
.oe-block-ai-agents-route-lines__c--teal { --oe-route-lines-c: var(--oe-route-lines-teal); }
.oe-block-ai-agents-route-lines__c--plum { --oe-route-lines-c: var(--oe-route-lines-plum); }
.oe-block-ai-agents-route-lines__c--sky-blue { --oe-route-lines-c: var(--oe-color-sky-blue); }
.oe-block-ai-agents-route-lines__c--turquoise { --oe-route-lines-c: var(--oe-color-primary); }
.oe-block-ai-agents-route-lines__c--royal-blue { --oe-route-lines-c: var(--oe-color-secondary-8); }

/* Input waves */
.oe-block-ai-agents-route-lines__wave {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: oe-route-lines-draw 1.6s cubic-bezier(.4, 0, .2, 1) calc(.05s + var(--oe-route-lines-i) * .09s) forwards;
}

.oe-block-ai-agents-route-lines__wave--teal-light { stroke: color-mix(in srgb, var(--oe-route-lines-wave-teal) 60%, white); }
.oe-block-ai-agents-route-lines__wave--teal { stroke: var(--oe-route-lines-wave-teal); }
.oe-block-ai-agents-route-lines__wave--amber { stroke: var(--oe-route-lines-wave-amber); }
.oe-block-ai-agents-route-lines__wave--red { stroke: var(--oe-route-lines-wave-red); }
.oe-block-ai-agents-route-lines__wave--green { stroke: var(--oe-route-lines-wave-green); }
.oe-block-ai-agents-route-lines__wave--magenta { stroke: var(--oe-route-lines-wave-magenta); }

/* Routes */
.oe-block-ai-agents-route-lines__glow,
.oe-block-ai-agents-route-lines__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: oe-route-lines-draw 1.3s var(--oe-route-lines-ease) calc(1s + var(--oe-route-lines-i) * .25s) forwards;
}

.oe-block-ai-agents-route-lines__glow {
  stroke: color-mix(in srgb, var(--oe-route-lines-c) 60%, white);
  stroke-width: 12;
  opacity: .45;
}

.oe-block-ai-agents-route-lines__line {
  stroke: var(--oe-route-lines-c);
  stroke-width: 4;
}

.oe-block-ai-agents-route-lines__train {
  fill: none;
  stroke: var(--oe-color-primary-4);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .035 .965;
  opacity: 0;
  animation:
    oe-route-lines-show .4s ease calc(3s + var(--oe-route-lines-i) * .4s) forwards,
    oe-route-lines-run 4.5s linear calc(3s + var(--oe-route-lines-i) * .4s) 4,
    oe-route-lines-hide .4s ease calc(20.6s + var(--oe-route-lines-i) * .4s) forwards;
}

.oe-block-ai-agents-route-lines__core-line {
  fill: none;
  stroke: var(--oe-route-lines-sky);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: oe-route-lines-draw .5s ease .8s forwards;
}

/* Labels and links */
.oe-block-ai-agents-route-lines__route {
  cursor: pointer;
}

.oe-block-ai-agents-route-lines__label {
  fill: var(--oe-route-lines-label);
  font-family: inherit;
  font-size: var(--oe-font-size-base);
  opacity: 0;
  transition: fill .2s ease;
  animation: oe-route-lines-fade .6s ease calc(1.5s + var(--oe-route-lines-i) * .25s) forwards;
}

g.oe-block-ai-agents-route-lines__route {
  cursor: default;
}

a.oe-block-ai-agents-route-lines__route:hover .oe-block-ai-agents-route-lines__label,
a.oe-block-ai-agents-route-lines__route:focus-visible .oe-block-ai-agents-route-lines__label {
  fill: var(--oe-route-lines-sky);
}

.oe-block-ai-agents-route-lines__hit {
  fill: transparent;
}

.oe-block-ai-agents-route-lines__route:focus-visible {
  outline: none;
}

.oe-block-ai-agents-route-lines__route:focus-visible .oe-block-ai-agents-route-lines__hit {
  stroke: var(--oe-route-lines-sky);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

/* End pills */
.oe-block-ai-agents-route-lines__pad > rect {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: oe-route-lines-pop .5s var(--oe-route-lines-pop) calc(2.2s + var(--oe-route-lines-i) * .2s) forwards;
}

.oe-block-ai-agents-route-lines__pad-glow {
  fill: var(--oe-route-lines-c);
  opacity: .5;
}

.oe-block-ai-agents-route-lines__pad-body {
  fill: var(--oe-route-lines-c);
}

.oe-block-ai-agents-route-lines__pad-mark {
  fill: var(--oe-color-primary-4);
}

/* Highlighted route: glowing end point */
.oe-block-ai-agents-route-lines__beacon > * {
  opacity: 0;
  animation: oe-route-lines-fade .7s ease calc(2.6s + var(--oe-route-lines-i) * .2s) forwards;
}

.oe-block-ai-agents-route-lines__beacon-halo {
  fill: none;
  stroke: var(--oe-route-lines-sky-60);
  stroke-width: 1.2;
  stroke-dasharray: 2 5;
}

.oe-block-ai-agents-route-lines__beacon-ring {
  fill: none;
  stroke: var(--oe-route-lines-sky-60);
  stroke-width: 1.5;
  stroke-dasharray: 22 8;
}

.oe-block-ai-agents-route-lines__beacon-core {
  fill: var(--oe-color-primary-4);
  stroke: var(--oe-route-lines-sky-30);
  stroke-width: 3;
}

.oe-block-ai-agents-route-lines__beacon .oe-block-ai-agents-route-lines__beacon-pulse {
  fill: none;
  stroke: var(--oe-route-lines-sky-60);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: oe-route-lines-ring 2.8s ease-out calc(3.2s + var(--oe-route-lines-i) * .2s) 6;
}

/* Centre point */
.oe-block-ai-agents-route-lines__centre-glow {
  opacity: 0;
  animation: oe-route-lines-fade 1s ease .7s forwards;
}

.oe-block-ai-agents-route-lines__centre {
  fill: var(--oe-color-primary-4);
  stroke: var(--oe-route-lines-sky-30);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: oe-route-lines-pop .6s var(--oe-route-lines-pop) .7s forwards;
}

.oe-block-ai-agents-route-lines__centre-ring {
  fill: none;
  stroke: var(--oe-route-lines-sky-60);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: oe-route-lines-ring 3.2s ease-out 1.6s 6;
}

.oe-block-ai-agents-route-lines__centre-label {
  fill: var(--oe-route-lines-muted);
  font-family: inherit;
  font-size: var(--oe-font-size-small);
  text-anchor: middle;
  opacity: 0;
  animation: oe-route-lines-fade .6s ease 1s forwards;
}

/* Hold everything at the start until the block is in view. */
.oe-block-ai-agents-route-lines.is-armed:not(.is-visible) *,
.oe-block-ai-agents-route-lines.is-armed:not(.is-visible) *::before,
.oe-block-ai-agents-route-lines.is-armed:not(.is-visible) *::after {
  animation-play-state: paused;
}

/* Narrow: the whole map scales down, so enlarge the text to stay readable. */
@container oe-route-lines (max-width: 600px) {
  .oe-block-ai-agents-route-lines__label {
    font-size: calc(var(--oe-font-size-base) * 1.6);
  }

  .oe-block-ai-agents-route-lines__centre-label {
    font-size: calc(var(--oe-font-size-small) * 1.2);
  }
}

@keyframes oe-route-lines-draw { to { stroke-dashoffset: 0; } }
@keyframes oe-route-lines-fade { to { opacity: 1; } }
@keyframes oe-route-lines-show { to { opacity: .95; } }
@keyframes oe-route-lines-hide { from { opacity: .95; } to { opacity: 0; } }
@keyframes oe-route-lines-pop { to { transform: scale(1); } }
@keyframes oe-route-lines-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes oe-route-lines-ring {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Reduced motion: show the finished map, no movement. */
@media (prefers-reduced-motion: reduce) {
  .oe-block-ai-agents-route-lines__map * {
    animation: none !important;
  }

  .oe-block-ai-agents-route-lines__wave,
  .oe-block-ai-agents-route-lines__glow,
  .oe-block-ai-agents-route-lines__line,
  .oe-block-ai-agents-route-lines__core-line {
    stroke-dashoffset: 0;
  }

  .oe-block-ai-agents-route-lines__pad > rect,
  .oe-block-ai-agents-route-lines__centre {
    transform: none;
  }

  .oe-block-ai-agents-route-lines__label,
  .oe-block-ai-agents-route-lines__beacon > *,
  .oe-block-ai-agents-route-lines__centre-glow,
  .oe-block-ai-agents-route-lines__centre-label {
    opacity: 1;
  }

  .oe-block-ai-agents-route-lines__train,
  .oe-block-ai-agents-route-lines__centre-ring,
  .oe-block-ai-agents-route-lines__beacon-pulse {
    display: none;
  }
}