/* =========================================================
   Animated graphics
   - Hero: logo-mark blocks build in one at a time, then drift
   - Challenge graphics: three looping animations
   - Approach: funder flow diagram ($ coins travel left to right)
   - Who's at the table: scrolling name rows
   - Early results: pilot artwork
   - Form: confirmation mark
   Looping motion pauses via the header control (.motion-paused)
   and stops entirely under prefers-reduced-motion.
   ========================================================= */

/* Shared fills */
.f-ink { fill: var(--g-ink); }
.f-gold { fill: var(--g-gold); }
.f-gold-tint { fill: var(--g-gold-tint); }
.f-sand { fill: var(--g-sand); }
.f-navy-mid { fill: var(--g-navy-mid); }

/* ---------- Hero ---------- */
.hero-svg .blk-in,
.hero-svg .blk-drift,
.hero-svg .mark-sway { transform-box: view-box; transform-origin: 0 0; }

/* Build: each block slides in along its own axis, bottom block first */
.hero-svg .blk-in {
  animation: blk-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 420ms + 250ms);
}
@keyframes blk-in {
  from { opacity: 0; transform: translateX(var(--from)); }
  to   { opacity: 1; transform: none; }
}
/* Drift: each block moves independently (about 20-30px on screen)... */
.hero-svg .blk-drift {
  animation: blk-drift var(--t) ease-in-out 2.2s infinite alternate;
}
@keyframes blk-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
/* ...while the whole mark sways slowly around its centre */
.hero-svg .mark-sway { animation: mark-sway 18s ease-in-out 2.2s infinite alternate; }
@keyframes mark-sway {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-4deg); }
}
.hero-svg .bg-bar {
  transform-box: view-box;
  animation: bg-in 1600ms var(--ease-out) both, bg-drift var(--t) ease-in-out 1.6s infinite alternate;
}
@keyframes bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bg-drift { to { transform: translate(var(--x), var(--y)); } }

/* ---------- Challenge graphics (dark section) ---------- */
.feature-art { width: 100%; height: 100%; display: block; }
/* On navy: gold, gold tint, sky, light blue */
.feature-art .ic-a { fill: #D6D2C4; }
.feature-art .ic-b { fill: #F1B434; }
.feature-art .ic-m { fill: #F6CE7B; }
.feature-art .ic-c { fill: #A1A9B7; }
.feature-art rect { transform-box: fill-box; transform-origin: center; }

/* 2. Scattered blocks assemble into a path of five, hold, then scatter */
.feature-art--path rect { animation: path-build 5.6s var(--ease-out) infinite; animation-delay: calc(var(--n) * 110ms); }
@keyframes path-build {
  0%, 8%    { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0.3; }
  36%, 72%  { transform: none; opacity: 1; }
  94%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0.3; }
}
/* 3. A solid block breaks into pieces, spreads out, comes back together */
.feature-art--break rect { animation: break-apart 5.8s cubic-bezier(0.65, 0, 0.25, 1) infinite; }
@keyframes break-apart {
  0%, 20%   { transform: none; }
  48%, 62%  { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  88%, 100% { transform: none; }
}
/* Loops start when the graphic is in view */
.js .feature-art rect { animation-play-state: paused; }
.js .is-visible .feature-art rect { animation-play-state: running; }

/* ---------- Goal icons ---------- */
.goal-icon { flex: 0 0 auto; width: 28px; height: 28px; fill: currentColor; overflow: visible; }
.goal-icon .gi-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.goal-icon .gi-cut { fill: var(--dark-bg); }
.goal-icon .gi-front { stroke: var(--dark-bg); stroke-width: 1.5; }
/* Aligned capital: bars slide into alignment as the label appears */
.js .goal-icon--aligned rect { transform: translateX(var(--x)); transition: transform 900ms var(--ease-out) 500ms; }
.js .is-visible .goal-icon--aligned rect,
.js .is-visible.goal__label .goal-icon--aligned rect { transform: none; }

/* ---------- Funder flow diagram ---------- */
.diagram { width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.diagram--wide { display: none; max-width: 68rem; margin-inline: auto; }
.diagram--tall { max-width: 26rem; margin-inline: auto; }
@media (min-width: 760px) {
  .diagram--wide { display: block; }
  .diagram--tall { display: none; }
}
.dg-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg-line--nat { stroke: var(--c-navy); }
.dg-line--reg { stroke: var(--c-navy-mid); }
.dg-line--loc { stroke: var(--c-navy-light); }
.dg-line--out { stroke: var(--c-navy); }
.dg-pill { stroke: none; }
.dg-pill--nat { fill: var(--c-navy); }
.dg-pill--reg { fill: var(--c-navy-mid); }
.dg-pill--loc { fill: var(--c-navy-light); }
/* Labels share one size and weight; "ALL IN FOR JOBS" is Archivo Black in caps
   (echoing the logo); the two hub sub-lines are smaller and lighter */
.dg-pill-text, .dg-core-title, .dg-hex-text {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.dg-core-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.dg-core-sub { font-family: var(--font-sans); font-size: 16px; font-weight: 400; }
.dg-pill-text { fill: var(--c-white); }
.dg-pill-text--loc { fill: var(--c-navy); }
.dg-core { fill: var(--c-gold); }
.dg-core-title, .dg-core-sub { fill: var(--c-navy); }
/* Three outcome hexagons, tessellated as a honeycomb cluster */
/* Honeycomb: a cream "grout" line separates the touching hexagons */
.dg-hex { stroke: var(--c-cream-light); stroke-width: 4; stroke-linejoin: round; }
.dg-hex--a { fill: var(--c-navy); }
.dg-hex--b { fill: var(--c-navy-mid); }
.dg-hex--c { fill: var(--c-gold); }
.dg-hex--a-text { fill: var(--c-cream-light); }
.dg-hex--b-text { fill: var(--c-white); }
.dg-hex--c-text { fill: var(--c-navy); }
.dg-sm { font-size: 14px; }
.dg-sm.dg-core-sub { font-size: 12px; }
.dg-sm.dg-core-title { font-size: 22px; }
.coin circle { fill: var(--c-navy); }
.coin text { fill: var(--c-gold); font-weight: 800; font-family: var(--font-sans); }

/* Draw-in, first time the diagram is seen: pills, lines left to right, hub, then the three hexagons */
.diagram .dg-pill-g, .diagram .dg-core-g, .diagram .dg-hex-g { transform-box: fill-box; transform-origin: center; }
.js .diagram-wrap .dg-pill-g { opacity: 0; transform: translateX(-16px); transition: opacity 600ms var(--ease-out) var(--pd), transform 700ms var(--ease-out) var(--pd); }
.js .diagram-wrap .dg-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms cubic-bezier(0.45, 0, 0.25, 1) var(--dl); }
.js .diagram-wrap .dg-core-g { opacity: 0; transform: scale(0.85); transition: opacity 700ms var(--ease-out) 1.05s, transform 900ms var(--ease-out) 1.05s; }
.js .diagram-wrap .dg-hex-g { opacity: 0; transform: scale(0.8); transition: opacity 600ms var(--ease-out) var(--hd), transform 700ms var(--ease-out) var(--hd); }
.js .diagram-wrap.is-visible .dg-pill-g,
.js .diagram-wrap.is-visible .dg-core-g,
.js .diagram-wrap.is-visible .dg-hex-g { opacity: 1; transform: none; }
.js .diagram-wrap.is-visible .dg-line { stroke-dashoffset: 0; }

/* ---------- Blurred backdrop shapes (as in the hero) ----------
   Faint, blurred blocks at the hero's 22.5deg angle, placed behind
   sections. Kept low-opacity and away from text columns for legibility. */
.has-blobs { position: relative; isolation: isolate; overflow: hidden; }
.blobs {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Fade out toward every edge so no blurred shape ever ends in a hard line */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
/* Diagram: backdrop extends past the figure so the shapes have room */
.diagram-wrap.has-blobs { overflow: visible; }
.diagram-wrap .blobs { inset: -12% -3%; }
.blobs span {
  position: absolute;
  left: var(--l); top: var(--t);
  /* Sizes and opacities in the markup are scaled here: 70% size, 50% opacity */
  width: calc(var(--w) * 0.7); height: calc(var(--h) * 0.7);
  background: var(--c, var(--c-gold));
  opacity: calc(var(--o, 0.4) * 0.5);
  filter: blur(var(--b, 48px));
  transform: rotate(22.5deg);
  will-change: transform;
  animation: blob-drift var(--d, 20s) ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: rotate(22.5deg) translate(0, 0); }
  to   { transform: rotate(22.5deg) translate(var(--x, 30px), var(--y, -20px)); }
}
.js .blobs span { animation-play-state: paused; }
.js .is-visible > .blobs span, .js .has-blobs.is-visible > .blobs span { animation-play-state: running; }

/* ---------- Who's at the table: scrolling rows ---------- */
.marquee {
  display: grid;
  gap: clamp(0.25rem, 0.1rem + 0.6vw, 0.75rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__row { overflow: hidden; }
.js .marquee__row { opacity: 0; transform: translateX(var(--enter, 40px)); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--row-delay, 0ms); }
.js .marquee.is-visible .marquee__row { opacity: 1; transform: none; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed, 48s) linear infinite;
  animation-direction: var(--dir, normal);
}
.js .marquee__track { animation-play-state: paused; }
.js .marquee.is-visible .marquee__track { animation-play-state: running; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  font-size: clamp(3rem, 1.6rem + 6.4vw, 8rem);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.22;                 /* room for descenders (g, p, y) */
  padding-block: 0.02em 0.08em;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.marquee__item .bar-mark { font-size: 0.45em; color: var(--c-gold); }
.marquee__row--1 .marquee__item { color: var(--text); }
.marquee__row--2 .marquee__item { color: transparent; -webkit-text-stroke: 2px var(--text); }
.marquee__row--2 .marquee__item .bar-mark { color: var(--text); }
.marquee__row--3 .marquee__item { color: var(--c-navy-mid); }
.marquee__row--3 .marquee__item .bar-mark { color: var(--c-gold); }

/* ---------- Pilot art ---------- */
.pilot__graphic { width: 100%; height: auto; display: block; }
.pg-tile { fill: var(--g-tile); stroke: var(--line-strong); stroke-width: 1; }
.pilot__art .pg-tile { fill: var(--surface); }
.pg-lit, .pg-lit-smil { fill: var(--g-gold); }
.pg-origin { fill: var(--g-ink); }
.pg-ring { fill: none; stroke: var(--g-ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.pg-link { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.pg-national { fill: var(--g-ink); }
.pg-dot { fill: var(--g-navy-mid); }

/* Pilot 1: pilot tile pulses, the pattern replicates outward tile by tile */
.pg-lit {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: tile-lit 6s var(--ease-out) infinite;
  animation-delay: calc(var(--d) + 0.6s);
}
@keyframes tile-lit {
  0%   { opacity: 0; transform: scale(0.4); }
  10%  { opacity: 1; transform: none; }
  62%  { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; transform: scale(0.85); }
}
.pg-ring { animation: ring 2s ease-out infinite; }
@keyframes ring { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.js .pilot .pg-lit, .js .pilot .pg-ring { animation-play-state: paused; }
.js .pilot.is-visible .pg-lit, .js .pilot.is-visible .pg-ring { animation-play-state: running; }

/* ---------- Timeline node animations (on black) ---------- */
.tl-art .tl-gold { fill: #F1B434; }
.tl-art .tl-white { fill: #F3EDE0; }
.tl-art .tl-sand { fill: #D6D2C4; }
.tl-art .tl-navy-light { fill: #A1A9B7; }
.tl-art .tl-tile { fill: #3D506B; stroke: rgba(255,255,255,0.18); stroke-width: 0.75; }
.tl-art .tl-link { fill: none; stroke: rgba(255,255,255,0.3); stroke-width: 1; }
.tl-art rect, .tl-art path { transform-box: fill-box; transform-origin: center; }

/* Oct 2025: four logo blocks come together, hold, drift apart */
.tl-art--gather rect { animation: tl-gather 5s var(--ease-out) infinite; animation-delay: calc(var(--n) * 120ms); }
@keyframes tl-gather {
  0%, 10%   { transform: translate(var(--x), var(--y)); opacity: 0.3; }
  38%, 74%  { transform: none; opacity: 1; }
  96%, 100% { transform: translate(var(--x), var(--y)); opacity: 0.3; }
}
/* Oct 2026: block bursts into rectangle confetti, then regroups */
.tl-art--confetti rect { fill: #F1B434; animation: tl-confetti 5s cubic-bezier(0.65, 0, 0.25, 1) infinite; }
@keyframes tl-confetti {
  0%, 22%   { transform: none; fill: #F1B434; }
  46%, 62%  { transform: translate(var(--x), var(--y)) rotate(var(--r)); fill: var(--c); }
  88%, 100% { transform: none; fill: #F1B434; }
}
/* 2027-2028: the pilot tile pulses, the pattern replicates outward */
.tl-art .tl-lit { fill: #F1B434; opacity: 0; animation: tile-lit 6s var(--ease-out) infinite; animation-delay: calc(var(--d) + 0.6s); }
/* 2029-2030: outlined squares grow outward endlessly; the line stays a constant thin stroke */
.tl-art .tl-zoom {
  fill: none;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 0; animation: tl-zoom 4.8s linear infinite; animation-delay: calc(var(--k) * -1.2s);
}
@keyframes tl-zoom {
  0%   { transform: scale(0.3); opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 0.9; }
  100% { transform: scale(4.2); opacity: 0; }
}
.tl-art .tl-seed { animation: tl-seed 1.2s ease-in-out infinite alternate; }
@keyframes tl-seed { from { transform: scale(0.85); } to { transform: scale(1.15); } }
/* 2031+: a red block joins at the top, the other red block leaves at the bottom,
   then the ring turns 180deg so the new gap is back at the top (seamless loop) */
.tl-art .tl-arc { fill: none; stroke-width: 6; stroke-linecap: butt; }
.tl-art .tl-s-gold { stroke: #F1B434; }
.tl-art .tl-s-white { stroke: #F3EDE0; }
.tl-art .tl-s-sand { stroke: #D6D2C4; }
.tl-art .tl-s-navy-light { stroke: #A1A9B7; }
.tl-art .tl-ring { transform-box: view-box; transform-origin: 32px 32px; animation: tl-ring 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes tl-ring {
  0%, 60%   { transform: rotate(0deg); }
  94%, 100% { transform: rotate(180deg); }
}
.tl-art .tl-arc--in { animation: tl-arc-in 6s var(--ease-out) infinite; }
@keyframes tl-arc-in {
  0%         { transform: translateY(-18px); opacity: 0; }
  8%         { opacity: 1; }
  28%, 100%  { transform: none; opacity: 1; }
}
.tl-art .tl-arc--out { animation: tl-arc-out 6s var(--ease-out) infinite; }
@keyframes tl-arc-out {
  0%, 38%    { transform: none; opacity: 1; }
  56%, 100%  { transform: translateY(18px); opacity: 0; }
}
/* Loops start when the timeline is in view */
.js .tl-art * { animation-play-state: paused; }
.js .timeline.is-visible .tl-art * { animation-play-state: running; }

/* ---------- Form confirmation mark ---------- */
.confirm-mark { flex: 0 0 auto; width: 34px; height: auto; overflow: visible; }
.confirm-mark rect { fill: var(--text); }
.cm-blk { transform-box: view-box; transform-origin: 0 0; animation: blk-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i) * 160ms); }

/* ---------- Reduced motion: static final states ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-svg .blk-in, .hero-svg .blk-drift, .hero-svg .mark-sway, .hero-svg .bg-bar,
  .feature-art rect, .marquee__track, .blobs span, .tl-art *, .pg-lit, .pg-ring, .cm-blk { animation: none !important; }
  .pg-lit, .tl-art .tl-lit { opacity: 1; }
  .tl-art .tl-zoom { opacity: 0.9; transform: scale(calc(0.8 + var(--k) * 0.7)); }
  .js .marquee__row { opacity: 1; transform: none; }
}