/*
 * Allodial mission statement — GSAP progressive enhancement.
 *
 * One controller owns the section. GSAP only changes word opacity and vertical
 * position; CSS provides the static layout and reduced-motion fallback.
 */

html.mission-gsap-ready [data-leverage-story] [data-leverage-step] {
  opacity: 1 !important;
  color: rgba(248, 244, 232, 0.98) !important;
  border-color: rgba(239, 233, 218, 0.1) !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color 240ms ease !important;
}

html.mission-gsap-ready [data-leverage-story] .leverage-fact {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

html.mission-gsap-ready [data-leverage-story] .mission-word {
  display: inline-block;
  white-space: nowrap;
  transform-origin: 50% 78%;
}

/* The resolved stack is intentionally cumulative: earlier statements stay
   readable while the next line comes into focus. */
html.mission-gsap-ready [data-leverage-story] .leverage-step {
  text-wrap: pretty;
}

/* Manifesto chapter ------------------------------------------------------ */

.manifesto-chapter {
  overflow: clip;
  color: var(--inverse);
  background: #0b1c1a;
  border-bottom: 1px solid rgba(239, 233, 218, 0.16);
}

.manifesto-chapter .leverage-declaration {
  border-bottom: 0;
}

.capacity-visual {
  display: grid;
  max-width: 930px;
  margin-top: 23px;
  padding-top: 17px;
  grid-template-columns: minmax(190px, 0.31fr) minmax(0, 0.69fr);
  align-items: stretch;
  gap: clamp(20px, 2.5vw, 38px);
  border-top: 1px solid rgba(239, 233, 218, 0.17);
}

.capacity-summary {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  border-right: 1px solid rgba(239, 233, 218, 0.12);
  flex-direction: column;
}

.capacity-summary strong {
  display: block;
  color: #e0b956;
  font-size: clamp(62px, 6.4vw, 96px);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: 0.72;
}

.capacity-summary p {
  max-width: 225px;
  margin-top: 12px;
  padding-right: 22px;
  color: rgba(239, 233, 218, 0.74);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.22;
}

.capacity-matrix {
  min-width: 0;
}

.capacity-matrix-head {
  display: flex;
  min-height: 20px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(239, 233, 218, 0.46);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capacity-matrix-head b {
  color: rgba(239, 233, 218, 0.8);
  font-weight: 400;
}

.capacity-grid {
  display: grid;
  margin-top: 8px;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: clamp(2px, 0.28vw, 4px);
}

.capacity-grid > span {
  aspect-ratio: 1;
  background: rgba(239, 233, 218, 0.34);
  border: 1px solid rgba(239, 233, 218, 0.13);
  border-radius: 2px;
  transform: translateZ(0);
  will-change: opacity, transform;
}

.capacity-grid > .is-represented {
  background: #d8b14f;
  border-color: rgba(250, 226, 159, 0.92);
  box-shadow: 0 0 15px rgba(216, 177, 79, 0.22);
}

.capacity-key.leverage-equation {
  display: grid;
  max-width: none;
  margin-top: 11px;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px 18px;
  color: rgba(239, 233, 218, 0.56);
  font-size: 10px;
  letter-spacing: 0.045em;
}

.capacity-key.leverage-equation span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.capacity-key.leverage-equation i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: rgba(239, 233, 218, 0.28);
  border: 1px solid rgba(239, 233, 218, 0.2);
  border-radius: 1px;
}

.capacity-key.leverage-equation .capacity-key-represented i {
  background: #d8b14f;
  border-color: rgba(250, 226, 159, 0.88);
}

.capacity-key.leverage-equation b {
  color: rgba(250, 246, 234, 0.96);
  font-size: 13px;
}

.capacity-key.leverage-equation .capacity-key-unit {
  justify-self: end;
  color: rgba(239, 233, 218, 0.34);
}

/* State silhouettes remain part of the same dark thesis instead of becoming
   a detached light marketing strip. */
.manifesto-states.state-carousel {
  background:
    radial-gradient(circle at 72% 18%, rgba(84, 145, 113, 0.11), transparent 32%),
    #0b1c1a;
  border-top: 1px solid rgba(239, 233, 218, 0.13);
  border-bottom: 0;
}

.manifesto-states .state-carousel-head {
  min-height: 94px;
  border-bottom-color: rgba(239, 233, 218, 0.12);
}

.manifesto-states .state-carousel-head p {
  color: rgba(239, 233, 218, 0.68);
  font-size: clamp(15px, 1.55vw, 20px);
}

.manifesto-states .state-carousel-head strong {
  color: #f2ecdd;
  font-weight: 400;
}

.manifesto-states .state-carousel-head > span {
  color: #d8b14f;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manifesto-states .state-marquee {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(216, 177, 79, 0.44) rgba(239, 233, 218, 0.06);
  scrollbar-width: thin;
}

.manifesto-states .state-marquee:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(216, 177, 79, 0.72);
}

.manifesto-states .state-marquee::before {
  background: linear-gradient(90deg, #0b1c1a, transparent);
}

.manifesto-states .state-marquee::after {
  background: linear-gradient(-90deg, #0b1c1a, transparent);
}

.manifesto-states .state-marquee li {
  color: rgba(247, 241, 226, 0.94);
  background: rgba(239, 233, 218, 0.035);
  border-color: rgba(239, 233, 218, 0.13);
  scroll-snap-align: start;
}

.manifesto-states .state-marquee li::after {
  background: linear-gradient(90deg, #d8b14f, rgba(216, 177, 79, 0.06));
}

.manifesto-states .state-marquee img {
  opacity: 0.9;
  filter: invert(92%) sepia(8%) saturate(421%) hue-rotate(349deg) brightness(102%) contrast(88%);
}

.manifesto-states .state-marquee b {
  color: #d8b14f;
}

@media (max-width: 720px) {
  html.mission-gsap-ready [data-leverage-story] [data-leverage-step] {
    color: rgba(248, 244, 232, 0.96) !important;
  }

  .capacity-visual {
    margin-top: 17px;
    padding-top: 13px;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 13px;
  }

  .capacity-summary strong {
    font-size: 57px;
  }

  .capacity-summary p {
    margin-top: 8px;
    padding-right: 10px;
    font-size: 11px;
  }

  .capacity-matrix-head {
    font-size: 10px;
  }

  .capacity-grid {
    gap: 2px;
  }

  .capacity-key.leverage-equation {
    margin-top: 8px;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    font-size: 10px;
  }

  .capacity-key.leverage-equation span {
    align-items: flex-start;
    white-space: normal;
  }

  .capacity-key.leverage-equation b {
    font-size: 11px;
  }

  .capacity-key.leverage-equation .capacity-key-unit {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .manifesto-states .state-carousel-head {
    min-height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.mission-gsap-ready [data-leverage-story] [data-leverage-step],
  html.mission-gsap-ready [data-leverage-story] .leverage-fact,
  html.mission-gsap-ready [data-leverage-story] .leverage-fact > strong,
  html.mission-gsap-ready [data-leverage-story] .leverage-equation > *,
  html.mission-gsap-ready [data-leverage-story] .leverage-method,
  html.mission-gsap-ready [data-leverage-story] .mission-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .capacity-grid > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .manifesto-states .state-marquee {
    overflow-x: auto;
    scroll-snap-type: inline proximity;
  }

  .manifesto-states .state-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}