/* ============================================================
   LIBRAGRO — universe "living soil"
   Deep forest greens, earth tones, warm canopy light.
   CSS-grown seedlings, drifting pollen, sun rays, organic
   wave dividers, leaf-masked photography.
   Loaded after style-v2.css on /libragro/.
   ============================================================ */

/* ---------- Token remap ---------- */
.theme-agro {
  --bg: oklch(18% 0.033 152);
  --bg-raise: oklch(22% 0.038 150);
  --bg-sunk: oklch(13.5% 0.025 148);
  --ink: oklch(94% 0.018 118);
  --ink-deep: oklch(13% 0.026 150);
  --text: oklch(83% 0.024 122);
  --text-dim: oklch(71% 0.03 122);
  --text-faint: oklch(58% 0.03 122);
  --line: oklch(94% 0.02 120 / 0.13);
  --line-strong: oklch(94% 0.02 120 / 0.28);

  /* gold family → sun-through-leaves warmth */
  --gold: oklch(70% 0.12 100);
  --gold-deep: oklch(74% 0.12 105);
  --gold-bright: oklch(86% 0.13 100);
  --gold-faint: oklch(80% 0.12 105 / 0.14);
  --gold-line: oklch(74% 0.12 105 / 0.45);

  /* agro palette */
  --leaf: oklch(74% 0.14 140);
  --leaf-deep: oklch(48% 0.1 145);
  --sun: oklch(88% 0.12 98);
  --earth: oklch(45% 0.06 80);

  --shadow-soft: 0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 40px -12px oklch(0% 0 0 / 0.5);
  --shadow-lift: 0 2px 4px oklch(0% 0 0 / 0.35), 0 24px 64px -16px oklch(0% 0 0 / 0.6);

  background: var(--bg);
  color: var(--text);
}

/* header glass + mobile menu in forest tones */
.theme-agro .site-header.is-scrolled .nav {
  background: oklch(19% 0.034 150 / 0.8);
}
@media (max-width: 900px) {
  .theme-agro .nav-links { background: oklch(15.5% 0.03 150 / 0.97); }
}

/* ---------- Shared entrance ---------- */
.agro-in {
  opacity: 0;
  animation: agro-rise 1.1s var(--ease-out) var(--ad, 0ms) forwards;
}
@keyframes agro-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   HERO — canopy light over a sunlit field
   ============================================================ */
.agro-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(6.5rem, 5rem + 6vw, 9rem);
  /* room for the next section's wave to overlap empty space */
  padding-bottom: clamp(2.6rem, 6vw, 4.6rem);
  isolation: isolate;
  overflow: clip;
}
.agro-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(58rem 38rem at 80% -12%, oklch(40% 0.085 145 / 0.5), transparent 62%),
    radial-gradient(42rem 30rem at 4% 112%, oklch(32% 0.06 122 / 0.45), transparent 60%),
    linear-gradient(180deg, oklch(14.5% 0.028 150), var(--bg) 58%);
}

/* sun rays through the canopy */
.agro-rays {
  position: absolute;
  top: -12%;
  right: -4%;
  width: 62%;
  height: 125%;
  z-index: -2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 82%);
          mask-image: linear-gradient(200deg, #000 30%, transparent 82%);
}
.agro-rays i {
  position: absolute;
  top: -6%;
  right: var(--r, 10%);
  width: clamp(4rem, 9vw, 8.5rem);
  height: 120%;
  background: linear-gradient(180deg, oklch(88% 0.11 100 / 0.16), oklch(88% 0.11 100 / 0.04) 55%, transparent 78%);
  filter: blur(7px);
  transform: rotate(17deg);
  animation: agro-rays 12s ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes agro-rays {
  from { opacity: 0.4; transform: rotate(15.5deg) translateX(-0.6rem); }
  to { opacity: 1; transform: rotate(18.5deg) translateX(0.6rem); }
}

/* drifting pollen / spores */
.agro-pollen { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.agro-pollen span {
  position: absolute;
  left: var(--x, 50%);
  bottom: var(--b, 8%);
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  background: var(--c, oklch(86% 0.12 115 / 0.9));
  filter: blur(0.6px);
  opacity: 0;
  animation: agro-pollen var(--t, 9s) ease-in-out var(--d, 0s) infinite;
}
@keyframes agro-pollen {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  14% { opacity: 0.85; }
  58% { opacity: 0.55; }
  100% { transform: translate3d(1.4rem, -13rem, 0); opacity: 0; }
}

.agro-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
  padding-block: clamp(2rem, 4vh, 3.5rem);
}

.agro-logo {
  width: clamp(3.8rem, 5vw, 4.8rem);
  height: auto;
  margin-bottom: 1.5rem;
  /* dark logo on dark world: flip lightness, keep the gold */
  filter: invert(0.94) hue-rotate(180deg) saturate(1.15);
}
.agro-hero .eyebrow { margin-bottom: clamp(1.4rem, 2.5vh, 2rem); flex-wrap: wrap; row-gap: 0.6rem; }
.agro-hero h1 {
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.75rem);
  max-width: 13ch;
}
.agro-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--leaf) 10%, var(--sun) 48%, var(--leaf) 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: agro-shimmer 7s ease-in-out infinite;
}
@keyframes agro-shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
.agro-hero .lede { margin-top: clamp(1.4rem, 2.5vh, 2rem); max-width: 52ch; }

.agro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.8rem, 3vh, 2.4rem);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.chip::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--leaf);
  border-radius: 0 100% 0 100%;
  transform: rotate(45deg);
}
.chip:hover { border-color: var(--gold-line); background: oklch(94% 0.02 120 / 0.05); }
.chip strong { color: var(--sun); font-weight: 600; }

/* arched field window + warm sun + growing seedling */
.agro-hero-visual { position: relative; justify-self: center; }
.agro-sun {
  position: absolute;
  top: -3.4rem;
  right: -2.6rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(90% 0.12 100 / 0.55), oklch(88% 0.11 100 / 0.16) 52%, transparent 72%);
  filter: blur(4px);
  z-index: -1;
  animation: agro-sun 9s ease-in-out infinite alternate;
}
@keyframes agro-sun {
  from { opacity: 0.7; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.04); }
}
.agro-arch {
  position: relative;
  width: min(23rem, 100%);
  aspect-ratio: 4 / 5;
  border-radius: 12rem 12rem var(--radius) var(--radius);
  overflow: clip;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.agro-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  animation: agro-breathe 18s ease-in-out infinite alternate;
}
@keyframes agro-breathe {
  from { transform: scale(1.03); }
  to { transform: scale(1.1); }
}
.agro-arch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, oklch(13% 0.025 148 / 0.55));
}

/* CSS seedling — grows on load, then sways */
.agro-hero-visual::before {
  content: '';
  position: absolute;
  left: -2rem;
  bottom: -0.7rem;
  width: 9rem;
  height: 2.4rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, oklch(38% 0.06 95), oklch(24% 0.04 110) 72%);
  box-shadow: 0 6px 18px -6px oklch(0% 0 0 / 0.5);
}
.sprout {
  position: absolute;
  left: 1.5rem;
  bottom: 0.6rem;
  animation: agro-sway 6s ease-in-out 2.6s infinite alternate;
  transform-origin: bottom center;
}
@keyframes agro-sway {
  from { transform: rotate(-2.4deg); }
  to { transform: rotate(2.6deg); }
}
.sprout-grow { position: relative; width: 3.4rem; height: 6.4rem; }
.sprout-grow i { position: absolute; display: block; }
.sprout-grow .stem {
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--leaf), var(--leaf-deep));
  transform-origin: bottom;
  transform: scaleY(0);
  animation: agro-grow 1.5s var(--ease-out) 0.7s forwards;
}
@keyframes agro-grow { to { transform: scaleY(1); } }
.sprout-grow .leaf {
  width: 1.7rem;
  height: 1.05rem;
  left: 50%;
  background: linear-gradient(120deg, var(--leaf), var(--leaf-deep));
  transform: rotate(var(--r)) scale(0);
  animation: agro-leaf 0.9s var(--ease-out) var(--ld) forwards;
}
@keyframes agro-leaf { to { transform: rotate(var(--r)) scale(1); } }
.sprout-grow .leaf--l { bottom: 3.1rem; margin-left: -1.68rem; --r: -34deg; --ld: 1.7s; border-radius: 100% 4px 100% 4px; transform-origin: right bottom; }
.sprout-grow .leaf--r { bottom: 4.3rem; margin-left: 0.02rem; --r: 34deg; --ld: 2.05s; border-radius: 4px 100% 4px 100%; transform-origin: left bottom; }

.agro-hero-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Organic wave dividers ---------- */
.agro-wave {
  position: absolute;
  top: 1px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: clamp(2.6rem, 6vw, 4.6rem);
  transform: translateY(-100%);
  display: block;
}
.agro-wave path { fill: currentColor; }
.agro-journey .agro-wave { color: oklch(21.5% 0.037 150); }
.agro-forest .agro-wave { color: oklch(14.5% 0.027 148); }
.agro-pull .agro-wave { color: oklch(16.5% 0.03 150); }

/* ============================================================
   THE FIELD — from soil to harvest, a vertical journey
   ============================================================ */
.agro-journey {
  position: relative;
  padding-block: var(--space-section);
  background-color: oklch(21.5% 0.037 150);
  background-image:
    radial-gradient(oklch(32% 0.05 100 / 0.14) 1px, transparent 1.6px),
    radial-gradient(oklch(13% 0.03 150 / 0.4) 1.2px, transparent 1.8px);
  background-size: 26px 26px, 34px 34px;
  background-position: 0 0, 13px 17px;
}
.journey-head { max-width: 46rem; margin-bottom: var(--space-block); }
.journey-head .eyebrow { margin-bottom: 1.4rem; }

.journey {
  position: relative;
  list-style: none;
  display: grid;
  gap: clamp(2.6rem, 4.5vw, 4rem);
  max-width: 56rem;
}
/* the growing stem line */
.journey::before {
  content: '';
  position: absolute;
  left: calc(2.25rem - 1px);
  top: 2.2rem;
  bottom: 2.2rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--leaf), var(--leaf-deep) 60%, var(--earth));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 2.4s var(--ease-out) 250ms;
}
.journey.is-visible::before { transform: scaleY(1); }

.journey-stop {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.journey-plant {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: oklch(19% 0.034 150);
  box-shadow: inset 0 0 0 5px oklch(21.5% 0.037 150);
}
.journey-plant .plant { position: absolute; inset: 0; display: block; }
.journey-plant .plant i {
  position: absolute;
  display: block;
  transition: transform 0.9s var(--ease-out) var(--ld, 0.3s);
}
.journey.is-visible .journey-plant .plant i { --g: 1; }

/* stage · seed */
.plant .mound {
  left: 50%;
  bottom: 24%;
  width: 1.7rem;
  height: 0.55rem;
  margin-left: -0.85rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--earth);
  transform: scale(var(--g, 0));
}
.plant .seed {
  left: 50%;
  bottom: calc(24% + 0.4rem);
  width: 0.5rem;
  height: 0.68rem;
  margin-left: -0.25rem;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: oklch(74% 0.09 88);
  transform: scale(var(--g, 0));
  --ld: 0.55s;
}
/* stages · sprout & young plant */
.plant .stem {
  left: 50%;
  bottom: 22%;
  width: 2px;
  height: var(--h, 46%);
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--leaf), var(--leaf-deep));
  transform-origin: bottom;
  transform: scaleY(var(--g, 0));
}
.plant .leaf {
  left: 50%;
  width: var(--w, 0.8rem);
  height: 0.5rem;
  background: linear-gradient(120deg, var(--leaf), var(--leaf-deep));
  transform: rotate(var(--r)) scale(var(--g, 0));
}
.plant .leaf--l { bottom: var(--b, 46%); margin-left: calc(var(--w, 0.8rem) * -1); --r: -36deg; --ld: 0.7s; border-radius: 100% 3px 100% 3px; transform-origin: right bottom; }
.plant .leaf--r { bottom: var(--b, 58%); margin-left: 0; --r: 36deg; --ld: 0.9s; border-radius: 3px 100% 3px 100%; transform-origin: left bottom; }
.plant--field .stem { --h: 62%; }
.plant--field .leaf { --w: 1rem; height: 0.62rem; }
.plant--field .leaf--l { --b: 52%; }
.plant--field .leaf--r { --b: 64%; --ld: 0.85s; }
.plant--field .leaf--l2 { --b: 68%; --ld: 1.05s; }
.plant--field .leaf--r2 { --b: 78%; --ld: 1.25s; }

.journey-body { padding-top: 0.35rem; }
.journey-body h3 { margin-bottom: 0.7rem; }
.journey-body p { color: var(--text-dim); max-width: 54ch; }

/* ============================================================
   THE FOREST — REDD+ in Haut-Uélé
   ============================================================ */
.agro-forest {
  position: relative;
  padding-block: var(--space-section);
  background: oklch(14.5% 0.027 148);
  isolation: isolate;
}
.canopy { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.canopy i {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
}
.canopy i:first-child {
  top: -9rem;
  left: -12rem;
  width: 36rem;
  height: 26rem;
  background: radial-gradient(closest-side, oklch(32% 0.075 146 / 0.5), transparent);
}
.canopy i:last-child {
  bottom: -10rem;
  right: -12rem;
  width: 40rem;
  height: 28rem;
  background: radial-gradient(closest-side, oklch(28% 0.06 130 / 0.45), transparent);
}

.forest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
.forest-copy .eyebrow { margin-bottom: 1.4rem; }
.forest-copy h2 { margin-bottom: 1.4rem; }
.forest-copy p { color: var(--text-dim); }
.forest-copy p + p { margin-top: 1rem; }

.forest-principles {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.forest-principles li {
  position: relative;
  padding: 0.95rem 1.2rem 0.95rem 2.9rem;
  background: oklch(18.5% 0.032 149);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text);
  transition: border-color var(--duration-fast) ease, transform var(--duration) var(--ease-out);
}
.forest-principles li:hover {
  border-color: var(--gold-line);
  transform: translateX(0.35rem);
}
.forest-principles li::before {
  content: '';
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  translate: 0 -50%;
  background: linear-gradient(120deg, var(--leaf), var(--leaf-deep));
  border-radius: 0 100% 0 100%;
  transform: rotate(12deg);
}

.forest-photo { position: relative; }
.forest-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: rotate(-1.6deg);
}
.forest-photo figcaption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.3rem;
  padding-left: 1.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.forest-photo figcaption::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  background: var(--leaf-deep);
  border-radius: 0 100% 0 100%;
}

/* ============================================================
   THE LONG VIEW — quote over the community field
   ============================================================ */
.agro-pull {
  position: relative;
  padding-block: var(--space-section);
  background: oklch(16.5% 0.03 150);
  isolation: isolate;
  text-align: center;
}
.agro-pull-bg { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.agro-pull-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  filter: saturate(0.75) brightness(0.85);
}
.agro-pull-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50rem 30rem at 50% 100%, oklch(30% 0.06 140 / 0.4), transparent 65%),
    linear-gradient(180deg, oklch(16.5% 0.03 150), transparent 35%, transparent 65%, oklch(16.5% 0.03 150));
}
.agro-pull .container { position: relative; z-index: 1; }
.agro-pull .eyebrow { margin-bottom: 2.2rem; }
.agro-pull .pull-quote em { color: var(--gold-bright); }
.agro-pull .link-line { margin-top: 2.6rem; }
.agro-pull .agro-pollen { z-index: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .agro-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .agro-hero-visual { width: min(21rem, 82vw); }
  .agro-arch { width: 100%; }
  .forest-grid { grid-template-columns: minmax(0, 1fr); }
  .forest-photo { max-width: 34rem; }
}
@media (max-width: 640px) {
  .agro-hero-foot { letter-spacing: 0.16em; }
  .agro-hero-foot .scroll-cue { display: none; }
  .journey::before { left: calc(1.7rem - 1px); }
  .journey-stop { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.2rem; }
  .journey-plant { width: 3.4rem; height: 3.4rem; }
  .plant .leaf { --w: 0.65rem; height: 0.42rem; }
  .plant--field .leaf { --w: 0.8rem; height: 0.5rem; }
  .agro-sun { width: 8rem; height: 8rem; top: -2.4rem; right: -1.4rem; }
  .sprout { left: 1.2rem; }
}

/* ============================================================
   QA mode (?qa=1) + reduced motion — everything at final state
   ============================================================ */
.qa .agro-hero { min-height: 0; }
.qa .agro-in { opacity: 1; animation: none; transform: none; }
.qa .sprout-grow .stem { transform: none; animation: none; }
.qa .sprout-grow .leaf { transform: rotate(var(--r)) scale(1); animation: none; }
.qa .journey::before { transform: none; transition: none; }
.qa .journey-plant .plant i { --g: 1; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .agro-in { opacity: 1; animation: none; transform: none; }
  .agro-rays i, .agro-sun, .agro-arch img, .sprout,
  .agro-pollen span, .agro-hero h1 em { animation: none; }
  .sprout-grow .stem { transform: none; animation: none; }
  .sprout-grow .leaf { transform: rotate(var(--r)) scale(1); animation: none; }
  .journey::before { transform: none; transition: none; }
  .journey-plant .plant i { --g: 1; transition: none; }
  .agro-pollen span { opacity: 0; }
  .forest-principles li:hover { transform: none; }
}