/* ==========================================================================
   ecosystem.css — the serpentine cycle board.

   Follows the group's own infographic: eight stages flow left-to-right, wrap,
   and loop back on themselves. A wire drawn behind the stages animates like
   the loop section — it draws itself in, a stream of light flows along it, and
   a comet travels the whole circuit lighting each stage as it passes. Below,
   the green creed-hub and the five value marks; a dark banner closes it.
   ========================================================================== */

.eco { position: relative; overflow: clip; }
.eco__title { max-width: 18ch; }

/* --- Flow board ----------------------------------------------------------- */

.flow {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 14px;
}

.flow__wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.flow__track,
.flow__stream {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow__track {
  stroke: color-mix(in srgb, var(--t-husk) 20%, transparent);
  stroke-width: 2;
}
/* the moving "current" — marching dashes once the track has drawn in */
.flow__stream {
  stroke: var(--c-land);
  stroke-width: 2.4;
  stroke-dasharray: 3 12;
  opacity: 0;
  transition: opacity 600ms var(--e-out);
}
.flow.is-live .flow__stream { opacity: 0.9; animation: stream-run 1.4s linear infinite; }
@keyframes stream-run { to { stroke-dashoffset: -30; } }

.flow__comet {
  fill: var(--c-kunyit);
  opacity: 0;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-kunyit) 65%, transparent));
}
.flow.is-live .flow__comet { opacity: 1; }

.flow__board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 520px)  { .flow__board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px)  { .flow__board { grid-template-columns: repeat(4, 1fr); } }

/* Snake the second row back the other way on the wide layout. */
@media (min-width: 680px) {
  .node:nth-child(5) { grid-column: 4; grid-row: 2; }
  .node:nth-child(6) { grid-column: 3; grid-row: 2; }
  .node:nth-child(7) { grid-column: 2; grid-row: 2; }
  .node:nth-child(8) { grid-column: 1; grid-row: 2; }
}

/* --- A stage node --------------------------------------------------------- */

.node {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 0;
  background: none;
}

.node__disc {
  position: relative;
  width: clamp(96px, 15vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-husk);
  box-shadow: 0 14px 30px -18px rgba(26, 20, 13, 0.55);
  transition: transform var(--d-mid) var(--e-spring), box-shadow var(--d-mid) var(--e-out);
}
.node__disc img { width: 100%; height: 100%; object-fit: cover; }

/* accent ring + a conic sweep that only shows when the stage is lit/hovered */
.node__disc::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--node-accent, var(--c-land));
  opacity: 0.4;
  transition: opacity var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}

.node__no {
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  min-width: 1.5rem;
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--node-accent, var(--c-land));
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px -2px rgba(26, 20, 13, 0.5);
}

.node__title {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.25;
  max-width: 16ch;
}
.node__note {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--fg-dim);
  max-width: 22ch;
}

/* lit (comet passing) + hover share the spotlight look */
.node:hover .node__disc,
.node.is-lit .node__disc {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 22px 40px -18px rgba(26, 20, 13, 0.65);
}
.node:hover .node__disc::after,
.node.is-lit .node__disc::after {
  opacity: 1;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--node-accent) 16%, transparent);
}

/* --- Base row: creed-hub + value marks ------------------------------------ */

.eco__base {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
  align-items: center;
}
@media (min-width: 860px) { .eco__base { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

.hub {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}
/* slowly rotating conic halo (uiverse-style) behind the core */
.hub__glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--c-land) 60%, transparent),
    color-mix(in srgb, var(--c-kunyit) 55%, transparent),
    color-mix(in srgb, var(--c-table) 55%, transparent),
    color-mix(in srgb, var(--c-land) 60%, transparent));
  filter: blur(14px);
  opacity: 0.5;
  z-index: -1;
  animation: hub-spin 14s linear infinite;
}
@keyframes hub-spin { to { transform: rotate(360deg); } }

.hub__core {
  display: grid;
  place-items: center;
  text-align: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  color: #fff;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c-land) 90%, #fff 6%), var(--c-land) 58%, #3a6828 100%);
  box-shadow: inset 0 0 46px -12px rgba(0,0,0,0.4), 0 24px 52px -26px rgba(47, 108, 40, 0.6);
}
.hub__leaf { width: clamp(22px, 3vw, 30px); height: auto; opacity: 0.9; margin-bottom: 0.5rem; }
.hub__text {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 2vw, 1.28rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.value__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.value__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-4);
}
@media (min-width: 560px) { .value__grid { grid-template-columns: repeat(5, 1fr); } }

.ecv { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.ecv__ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--c-land);
  transition: transform var(--d-mid) var(--e-spring), border-color var(--d-mid) var(--e-out), background var(--d-mid) var(--e-out);
}
.ecv:hover .ecv__ring {
  transform: translateY(-4px);
  border-color: var(--c-land);
  background: color-mix(in srgb, var(--c-land) 8%, transparent);
}
.ecv__ring svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.ecv__label {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.3;
}

/* --- Closing banner ------------------------------------------------------- */

.creed {
  position: relative;
  overflow: hidden;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.4rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, #16110b 0%, #1f2a20 60%, #16110b 100%);
  color: var(--t-night);
  text-align: center;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}
.creed__sheen {
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(217, 149, 39, 0.12), transparent);
  transform: skewX(-14deg);
  animation: creed-sheen 6.5s ease-in-out infinite;
}
@keyframes creed-sheen { 0%, 100% { left: -45%; } 55% { left: 115%; } }

.creed__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.1rem;
}
.creed__item {
  font-family: var(--f-mono);
  font-size: clamp(0.66rem, 1.5vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t-night) 88%, transparent);
}
.creed__sep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-kunyit);
  opacity: 0.8;
}
.creed__closing {
  position: relative;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
  color: #fff;
}

/* --- Phones: hide the wire, lay each stage out as a readable row ---------- */

@media (max-width: 679px) { .flow__wire { display: none; } }

@media (max-width: 519px) {
  .node {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: var(--s-4);
    text-align: left;
  }
  .node__disc { width: 76px; }
  .node__no { left: 0; transform: none; }
  .node__title, .node__note { max-width: none; text-align: left; }
}

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

@media (prefers-reduced-motion: reduce) {
  .flow__stream, .hub__glow, .creed__sheen { animation: none; }
  .flow__comet { display: none; }
  .flow__stream { opacity: 0.6; }
  .node.is-lit .node__disc { transform: none; }
}