/* ==========================================================================
   Kilnwork — section: ecosystem (orbital app & channel diagram)
   Every selector scoped under .s-ecosystem. Tokens only.

   Geometry: .s-ecosystem__orbit is a square inline-size container. Node
   positions are polar — each <li> carries --a (angle); the ring supplies --r
   (radius, in cqw). Rings animate the `rotate` property, tiles counter-rotate
   the same amount so every label stays upright and legible.
   ========================================================================== */

.s-ecosystem {
  --orbit-max: 42rem;
  --spin-outer: 150s;
  --spin-inner: 190s;
  --hair: inset 0 0 0 1px var(--border);
  isolation: isolate;
}

/* ---- decorative light ---------------------------------------------------- */

.s-ecosystem__orb { pointer-events: none; }

.s-ecosystem__orb--a {
  --orb-size: clamp(22rem, 52vw, 48rem);
  --orb-opacity: 0.30;
  inset-block-start: 18%;
  inset-inline-start: 50%;
  translate: -50% 0;
}

.s-ecosystem__orb--b {
  --orb-size: clamp(14rem, 30vw, 30rem);
  --orb-opacity: 0.16;
  inset-block-end: -12%;
  inset-inline-end: -8%;
}

/* ---- header -------------------------------------------------------------- */

.s-ecosystem__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.s-ecosystem__title {
  font-size: var(--step-7);
  letter-spacing: var(--tracking-tighter);
}

.s-ecosystem__lede { max-width: 34rem; }

/* ---- stage --------------------------------------------------------------- */

.s-ecosystem__stage {
  margin-block-start: clamp(var(--space-8), 5vw, var(--space-11));
}

.s-ecosystem__orbit {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: var(--orbit-max);
  aspect-ratio: 1;
  margin-inline: auto;
}

/* ---- bezel --------------------------------------------------------------- */

.s-ecosystem__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  overflow: visible;
}

/* A soft plate so the diagram sits in light, not on a flat void. */
.s-ecosystem__orbit::before {
  content: "";
  position: absolute;
  inset: 6%;
  z-index: var(--z-below);
  border-radius: var(--radius-pill);
  background-image: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--brand) 26%, transparent),
    color-mix(in oklab, var(--brand) 9%, transparent) 58%,
    transparent 82%
  );
  pointer-events: none;
}

.s-ecosystem__rim {
  stroke-width: 1;
  opacity: 0.22;
}

.s-ecosystem__ticks {
  stroke-width: 5;
  stroke-dasharray: 1.5 42.5;   /* 24 marks around r=168 */
  opacity: 0.30;
}

.s-ecosystem__track {
  stroke-width: 1;
  stroke-dasharray: 1.5 7;
  opacity: 0.38;
}

.s-ecosystem__halo {
  stroke-width: 1;
  opacity: 0.16;
}

.s-ecosystem__spokes {
  stroke-width: 1;
  opacity: 0.13;
}

/* Signal arcs: a short dash chases each track. */
.s-ecosystem__signal {
  stroke: var(--brand);
  stroke-width: 2;
  opacity: 0.7;
}

.s-ecosystem__signal--outer {
  --len: 879.6;                 /* 2πr, r = 140 */
  stroke-dasharray: 96 783.6;
}

.s-ecosystem__signal--inner {
  --len: 540.4;                 /* 2πr, r = 86  */
  stroke-dasharray: 64 476.4;
}

/* ---- hub ----------------------------------------------------------------- */

.s-ecosystem__hub {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md), var(--glow-brand);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.s-ecosystem__plate {
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 11cqw, 3.25rem);
  aspect-ratio: 1;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--brand);
  color: var(--ink-on-brand);
}

.s-ecosystem__mark {
  width: 62%;
  height: 62%;
  fill: currentColor;
}

.s-ecosystem__hub-word {
  font-size: clamp(var(--step--1), 3cqw, var(--step-1));
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--ink);
}

/* ---- rings and nodes ----------------------------------------------------- */

.s-ecosystem__ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon-only layout: tiles are small, so the tracks sit wider apart. */
.s-ecosystem__ring--outer { --r: 37cqw; }
.s-ecosystem__ring--inner { --r: 21cqw; }

.s-ecosystem__node {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  max-width: none;
  /* centre → out along the angle → un-rotate so the tile stays level */
  transform:
    translate(-50%, -50%)
    rotate(var(--a, 0deg))
    translate(var(--r))
    rotate(calc(var(--a, 0deg) * -1));
}

.s-ecosystem__tile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.s-ecosystem__tile--pill {
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  box-shadow: var(--hair), var(--shadow-sm);
}

.s-ecosystem__tile--dot {
  flex-direction: column;
  gap: var(--space-2);
}

.s-ecosystem__chip {
  display: grid;
  place-items: center;
  width: clamp(2.125rem, 5.5cqw, 2.75rem);
  aspect-ratio: 1;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklab, var(--brand) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 26%, transparent);
  color: var(--brand);
}

.s-ecosystem__tile--dot .s-ecosystem__chip {
  background-color: var(--surface-raised);
  box-shadow: var(--hair), var(--shadow-sm);
  color: var(--ink);
}

.s-ecosystem__glyph {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Names are clipped, not removed, on narrow screens — the diagram goes
   icon-only there but every tile keeps its accessible name. */
.s-ecosystem__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@container (min-width: 32rem) {
  /* Labelled layout: pills are wide, so the tracks pull in to keep every
     tile inside the square. */
  .s-ecosystem__ring--outer { --r: 35cqw; }
  .s-ecosystem__ring--inner { --r: 21.5cqw; }

  .s-ecosystem__name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .s-ecosystem__tile--pill {
    padding-inline-end: var(--space-4);
  }

  .s-ecosystem__tile--pill .s-ecosystem__name {
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-snug);
    line-height: 1;
    color: var(--ink);
  }

  .s-ecosystem__tile--dot .s-ecosystem__name {
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    color: var(--ink-muted);
  }
}

/* ---- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .s-ecosystem__ring--outer { animation: kw-eco-spin var(--spin-outer) linear infinite; }
  .s-ecosystem__ring--outer .s-ecosystem__tile { animation: kw-eco-unspin var(--spin-outer) linear infinite; }

  .s-ecosystem__ring--inner { animation: kw-eco-unspin var(--spin-inner) linear infinite; }
  .s-ecosystem__ring--inner .s-ecosystem__tile { animation: kw-eco-spin var(--spin-inner) linear infinite; }

  .s-ecosystem__signal--outer { animation: kw-eco-signal 11s linear infinite; }
  .s-ecosystem__signal--inner { animation: kw-eco-signal 8s linear infinite reverse; }

  .s-ecosystem.is-paused .s-ecosystem__ring,
  .s-ecosystem.is-paused .s-ecosystem__tile,
  .s-ecosystem.is-paused .s-ecosystem__signal {
    animation-play-state: paused;
  }
}

@keyframes kw-eco-spin   { to { rotate: 360deg; } }
@keyframes kw-eco-unspin { to { rotate: -360deg; } }
@keyframes kw-eco-signal { to { stroke-dashoffset: calc(var(--len) * -1); } }

@media (prefers-reduced-motion: reduce) {
  .s-ecosystem__ring,
  .s-ecosystem__tile,
  .s-ecosystem__signal,
  .s-ecosystem__orb {
    animation: none;
    rotate: none;
  }
}

/* ---- legend -------------------------------------------------------------- */

.s-ecosystem__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-7);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.s-ecosystem__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  color: var(--ink-muted);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-snug);
}

.s-ecosystem__legend-item::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  border-radius: var(--radius-pill);
}

.s-ecosystem__legend-item--outer::before {
  background-color: color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.s-ecosystem__legend-item--inner::before {
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* ---- foot ---------------------------------------------------------------- */

.s-ecosystem__rule {
  margin-block: clamp(var(--space-8), 5vw, var(--space-10)) var(--space-7);
}

.s-ecosystem__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.s-ecosystem__note {
  max-width: 44ch;
  color: var(--ink-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

.s-ecosystem__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

/* --brand-hover is not remapped by .is-inverse, so it would fail contrast on
   the dark band. Shift toward --ink instead: safe in both themes. */
.s-ecosystem__cta { font-size: var(--step-1); }

.s-ecosystem__cta:hover,
.s-ecosystem__cta:focus-visible { color: var(--ink); }

.s-ecosystem__cta:active { color: var(--ink); opacity: 0.75; }

/* The pause control only works once JS is up, so it only shows once JS is up. */
.s-ecosystem__pause { display: none; }
.s-ecosystem.is-live .s-ecosystem__pause { display: inline-flex; }

.s-ecosystem__pause-icon {
  width: 0.8em;
  height: 0.8em;
  fill: currentColor;
}

.s-ecosystem__pause-tri { display: none; }

.s-ecosystem.is-paused .s-ecosystem__pause-bar { display: none; }
.s-ecosystem.is-paused .s-ecosystem__pause-tri { display: block; }

@media (prefers-reduced-motion: reduce) {
  .s-ecosystem.is-live .s-ecosystem__pause { display: none; }
}

/* ---- wide viewports ------------------------------------------------------ */

@media (width >= 64rem) {
  .s-ecosystem {
    --orbit-max: 46rem;
  }

  .s-ecosystem__foot {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }

  .s-ecosystem__note { max-width: 38ch; }
}