/* =========================================
   ecosystem.css - Ecosystem / How It Works view only (QUO-24 / OCW-13)

   Own sheet rather than an extension of home.css: this page shares no component
   with Home (no globe, no orbit, no hero grid), so folding it into home.css
   would put unrelated rules behind the same cache entry and grow the sheet the
   QUO-34 refactor exists to keep small.

   Every colour here is an existing base.css token, so the warm-stone light theme
   comes for free with no second palette to maintain. No literal colours, no
   orange, nothing outside the monochrome DNA.
   ========================================= */

.ecosystem-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

/* #viewMount clips, so the page scrolls inside its own surface rather than
   trying to scroll an ancestor that has overflow hidden. Same constraint that
   defeated QUO-37's original sticky location. */
.eco-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(32px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(48px, 10vh, 96px);
  -webkit-overflow-scrolling: touch;
}

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

.eco-header {
  max-width: 62ch;
  margin: 0 0 clamp(40px, 7vh, 72px);
}

.eco-eyebrow {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sidebar-text);
}

.eco-title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--sidebar-active-text);
}

.eco-lede {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.65;
  color: var(--sidebar-text);
}

/* ---- the loop ---- */

.eco-loop {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 70ch;
}

.eco-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  padding: 0 0 clamp(28px, 4.5vh, 44px);
}

/* The rail draws the thread between steps - the visual argument that these are
   one continuous loop rather than five separate cards. */
.eco-step-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.eco-step:not(:last-child) .eco-step-rail::after {
  content: '';
  position: absolute;
  top: 62px;
  bottom: -4px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    var(--border-content-frame),
    var(--border-content-glow)
  );
}

.eco-step-num {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--sidebar-text);
  opacity: 0.72;
}

.eco-step-icon {
  width: 22px;
  height: 22px;
  color: var(--sidebar-active-text);
  flex: 0 0 auto;
}

.eco-step-body {
  padding-top: 1px;
}

.eco-step-title {
  margin: 0 0 10px;
  font-size: clamp(1.06rem, 1.9vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sidebar-active-text);
}

.eco-step-text {
  margin: 0;
  font-size: clamp(0.94rem, 1.4vw, 1.02rem);
  line-height: 1.68;
  color: var(--sidebar-text);
}

/* ---- closing statement: why it is one system ---- */

.eco-close {
  max-width: 70ch;
  margin-top: clamp(12px, 3vh, 28px);
  padding: clamp(24px, 4vh, 36px) clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--border-content-frame);
  border-radius: 16px;
  background: var(--dark-section-bg);
}

.eco-close-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  color: var(--sidebar-active-text);
}

.eco-close-title {
  margin: 0 0 14px;
  font-size: clamp(1.12rem, 2.1vw, 1.44rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--sidebar-active-text);
}

.eco-close-text {
  margin: 0 0 14px;
  font-size: clamp(0.94rem, 1.4vw, 1.02rem);
  line-height: 1.68;
  color: var(--sidebar-text);
}

.eco-close-text:last-child {
  margin-bottom: 0;
}

/* ---- motion: staggered entry in reading order, per the issue's stagger rule.
   Spring easing and 0.2-0.28s per the site's motion DNA. 50ms offset per step,
   Customer -> Restaurant -> Rider -> Business -> settlement -> close. ---- */

@media (prefers-reduced-motion: no-preference) {
  .ecosystem-view.is-entering .eco-step,
  .ecosystem-view.is-entering .eco-close {
    opacity: 0;
    transform: translateY(10px);
    animation: eco-rise 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .ecosystem-view.is-entering .eco-step:nth-child(1) { animation-delay: 0.04s; }
  .ecosystem-view.is-entering .eco-step:nth-child(2) { animation-delay: 0.09s; }
  .ecosystem-view.is-entering .eco-step:nth-child(3) { animation-delay: 0.14s; }
  .ecosystem-view.is-entering .eco-step:nth-child(4) { animation-delay: 0.19s; }
  .ecosystem-view.is-entering .eco-step:nth-child(5) { animation-delay: 0.24s; }
  .ecosystem-view.is-entering .eco-close { animation-delay: 0.29s; }
}

@keyframes eco-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- mobile ---- */

@media (max-width: 767px) {
  .eco-step {
    grid-template-columns: 32px 1fr;
    gap: 14px;
  }

  .eco-step:not(:last-child) .eco-step-rail::after {
    top: 56px;
  }

  .eco-step-icon {
    width: 19px;
    height: 19px;
  }
}