/* ============================================================
   THE ECOSYSTEM JOURNEY — scroll-scrubbed world
   A continuous camera glide through the story: 2012 → Now.
   Pure code, brand palette, theme-aware. Falls back to stacked
   cards on mobile / reduced motion / no GSAP.
   ============================================================ */

.world {
  position: relative;
}

.world__intro {
  text-align: center;
  padding: var(--space-12) var(--space-6) 0;
}

.world__viewport {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.world__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.world__layer svg {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 72%;
  display: block;
}

.world__layer--far svg { height: 60%; opacity: 0.5; }
.world__layer--mid svg { height: 66%; opacity: 0.75; }
.world__layer--front svg { height: 72%; }

/* World palette — theme aware */
.world {
  --w-hill-far: #DCE5DD;
  --w-hill-mid: #BFD2C4;
  --w-hill-front: #9DBBA5;
  --w-ground: #E9E2D8;
  --w-line: #1A6B5C;
  --w-accent: #C4653A;
  --w-glow: #D4A855;
  --w-structure: #2A4A3E;
  --w-structure-light: #FAFAF7;
}

[data-theme="dark"] .world {
  --w-hill-far: #1E2420;
  --w-hill-mid: #24322A;
  --w-hill-front: #2C4335;
  --w-ground: #1A1F1B;
  --w-line: #3DA890;
  --w-accent: #E07A4F;
  --w-glow: #E0B865;
  --w-structure: #E8E4DF;
  --w-structure-light: #26302A;
}

/* Journey path */
.world__path {
  fill: none;
  stroke: var(--w-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  opacity: 0.9;
}

/* Station cards — HTML overlay riding the front layer */
.world__card {
  position: absolute;
  width: 300px;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px var(--color-card-shadow);
  opacity: 0;
  transform: translateY(24px);
}

.world__card-year {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.world__card-venture {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}

.world__card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Scroll hint inside the world */
.world__hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  transition: opacity 0.4s var(--ease-out);
}

.world__hint-arrow {
  display: inline-block;
  animation: hintNudge 1.6s ease-in-out infinite;
}

@keyframes hintNudge {
  50% { transform: translateX(5px); }
}

/* Birds drifting across the mid layer */
.w-bird {
  animation: birdDrift 26s ease-in-out infinite alternate;
}

.w-bird--2 {
  animation-duration: 34s;
  animation-delay: -8s;
}

.w-bird--3 {
  animation-duration: 30s;
  animation-delay: -15s;
}

@keyframes birdDrift {
  to { transform: translateX(90px); }
}

@media (prefers-reduced-motion: reduce) {
  .w-bird { animation: none; }
}

/* The journey's path visibly continues down into the Ventures section */
.world::after {
  content: '';
  display: block;
  width: 3px;
  height: 76px;
  margin: 0 auto;
  background: repeating-linear-gradient(to bottom, var(--w-accent) 0 3px, transparent 3px 14px);
  opacity: 0.65;
}

.world--static::after {
  display: none;
}

.world--travelled .world__hint {
  opacity: 0;
}

/* ============================================================
   STATIC MODE — mobile, reduced motion, or no GSAP.
   The journey becomes a clean stacked timeline.
   ============================================================ */
.world--static .world__viewport {
  height: auto;
  overflow: visible;
  padding: var(--space-8) var(--space-6) var(--space-12);
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.world--static .world__layer--far,
.world--static .world__layer--mid {
  display: none;
}

/* Front layer becomes the stacked-card flow; only its scenery hides */
.world--static .world__layer--front {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  will-change: auto;
}

.world--static .world__layer--front svg {
  display: none;
}

.world--static .world__hint {
  display: none;
}

.world--static .world__card {
  position: static;
  width: auto;
  opacity: 1;
  transform: none;
  border-left: 3px solid var(--color-primary);
}