/* ============================================
   MODE 2 — Standalone CSS for /research page
   Extracted from style.css
   ============================================ */

/* Base reset & fonts (subset needed for this page) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Audiowide', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --accent: #4ecdc4;
  --bg: #0a0a0a;
  --text: #e8e8e8;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Back button */
.research-back {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 100;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  transition: color 0.3s, border-color 0.3s;
}
.research-back:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================
   MODE 2 (ambient nature scene)
   ============================================ */
.mode2 {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background: #0a0a0a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mode2.active {
  cursor: auto;
}

.mode2-name {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 6rem);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-scene, rgba(210, 230, 215, 0.82));
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-shadow: var(--text-shadow-scene, 0 1px 30px rgba(0, 0, 0, 0.35));
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%) translateZ(-350px);
  z-index: 10;
  pointer-events: none;
  margin: 0;
}
/* Research page: larger title, wrapping allowed */
.mode2-name.mode2-name--research {
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  white-space: normal;
  text-align: center;
  max-width: 80vw;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1.1;
  top: 12%;
}
@media (max-width: 480px) {
  .mode2-name.mode2-name--research {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    max-width: 90vw;
    top: 10%;
  }
}


/* Mode 2 — right controls group */
.mode2-controls-right {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.mode2-lang-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mode2-lang-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .mode2-controls-right { top: 1.5rem; right: 1.5rem; }
}
@media (max-width: 480px) {
  .mode2-controls-right { top: 1rem; right: 1rem; }
  .mode2-lang-btn { font-size: 0.6rem; padding: 0.3rem 0.5rem; }
}

/* Mode 2 — TOD debug button */
.mode2-tod-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.mode2-tod-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
  .mode2-tod-btn { font-size: 0.6rem; padding: 0.25rem 0.5rem; }
}

/* Mode 2 — hero spacer (in-flow, scrolls with content) */
.mode2-hero {
  position: relative;
  height: 100vh;
  z-index: 1;
}


/* Mode 2 — tag line (fixed — stays on screen) */
.mode2-tag {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text-scene, rgba(255, 255, 255, 0.88));
  text-shadow: var(--text-shadow-scene, 0 2px 16px rgba(0, 0, 0, 0.4));
  text-align: center;
  text-indent: 0.45em;
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%) translateZ(-350px);
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  margin: 0;
}
.tag-word {
  transition: opacity 0.3s;
}
.tag-word.active {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Floating tab text — fog-like appear/disappear */
.tab-text {
  position: absolute;
  z-index: 11;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 1.2s ease, filter 1.2s ease;
  color: var(--text-scene, rgba(255, 255, 255, 0.88));
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  /* Backdrop bar for readability */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 0 6px 6px 0;
  padding: 1.2rem 1.8rem;
}
.tab-text.visible {
  opacity: 1;
  filter: blur(0);
}
.tab-text__line {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 0.6em;
}
.tab-text__desc {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  max-width: 55ch;
  opacity: 0.85;
  margin: 0;
}

/* ============================================
   DYNAMIC DATA TICKER
   ============================================ */
.data-ticker {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  gap: 2.5rem;
  pointer-events: none;
}
.data-ticker__item {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: ticker-in 0.8s ease-out forwards;
}
.data-ticker__item:nth-child(1) { animation-delay: 0.3s; }
.data-ticker__item:nth-child(2) { animation-delay: 0.9s; }
.data-ticker__item:nth-child(3) { animation-delay: 1.5s; }
.data-ticker__item:nth-child(4) { animation-delay: 2.1s; }

.data-ticker__value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 500;
  color: #111111;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  line-height: 1;
}
.data-ticker__label {
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.7vw, 0.7rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 0.4rem;
}

@keyframes ticker-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Ticker items — count-up animation via JS */
.data-ticker__value[data-target] {
  font-variant-numeric: tabular-nums;
}

/* Tractor silhouette in scene */
.ambient-fg--tractor {
  position: absolute;
  bottom: 32%;
  right: 8%;
  width: clamp(80px, 12vw, 180px);
  z-index: 6;
  opacity: 0;
  filter: brightness(0) invert(0);
  animation: tractor-appear 3s ease-out 1.5s forwards;
}
@keyframes tractor-appear {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 0.25; transform: translateX(0); }
}

@media (max-width: 768px) {
  .data-ticker { gap: 1.5rem; top: 34%; }
  .data-ticker__value { font-size: clamp(1.2rem, 4vw, 2rem); }
  .ambient-fg--tractor { width: clamp(60px, 18vw, 120px); right: 5%; bottom: 30%; }
}
@media (max-width: 480px) {
  .data-ticker { gap: 1rem; flex-wrap: wrap; justify-content: center; max-width: 90vw; top: 35%; }
  .data-ticker__item { min-width: 35%; }
  .tab-text { padding: 0.8rem 1.2rem; }
  .ambient-fg--tractor { width: 70px; right: 3%; bottom: 28%; }
}
/* Per-tab positions (match zoom camera targets) */
.tab-text[data-tab="1"] { left: 12%; top: 42%; }
.tab-text[data-tab="2"] { left: 25%; top: 40%; }
.tab-text[data-tab="3"] { left: 38%; top: 42%; }
.tab-text[data-tab="4"] { left: 52%; top: 40%; }
.tab-text[data-tab="5"] { left: 65%; top: 42%; }

/* Tab-text mobile — center content instead of zoom-based positions */
@media (max-width: 768px) {
  .tab-text {
    transition: opacity 0.3s ease, filter 0.3s ease;
  }
  .tab-text[data-tab] {
    left: 5% !important;
    right: 5%;
    top: 35% !important;
    max-width: 90vw;
    padding: 0 1rem;
  }
  .tab-text__desc {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .tab-text[data-tab] {
    top: auto !important;
    bottom: 22%;
    left: 0 !important;
    right: 0;
    transform: none;
    text-align: center;
    max-width: none;
    padding: 0 1.5rem;
  }
  .tab-text__line {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }
  .tab-text__desc {
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: none;
  }
}

/* Mode 2 — motto (absolute — stays on sky) */
.mode2-motto {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(0.75rem, 1.2vw, 1.1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-scene, rgba(255, 255, 255, 0.88));
  text-align: center;
  text-indent: 0.28em;
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%) translateZ(-350px);
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: var(--text-shadow-scene, 0 1px 16px rgba(0, 0, 0, 0.3));
  margin: 0;
}
/* Research page: motto below title, bigger, no backdrop */
.mode2-motto.mode2-motto--research {
  top: 26%;
  white-space: normal;
  max-width: 75vw;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.4rem);
  letter-spacing: 0.1em;
  text-transform: none;
  opacity: 0.85;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}
@media (max-width: 480px) {
  .mode2-motto.mode2-motto--research {
    top: 26%;
    font-size: clamp(0.75rem, 2.8vw, 1rem);
    max-width: 90vw;
  }
}

/* Mode 2 — section nav (row above social links) */
.mode2-nav {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  display: flex;
  gap: 1.2rem;
  align-items: flex-end;
}

.mode2-nav-node {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(42, 90, 38, 0.88);
  border: 1.5px solid rgba(110, 170, 80, 0.55);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(150, 210, 100, 0.2);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.2s, border-color 0.25s, box-shadow 0.25s;
  transform-origin: center;
}

.mode2-nav-node:hover {
  background: rgba(58, 122, 50, 0.96);
  border-color: rgba(150, 210, 100, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(80, 160, 60, 0.35), inset 0 1px 0 rgba(180, 240, 130, 0.25);
  transform: scale(1.12);
}

.mode2-nav-node svg {
  display: block;
  pointer-events: none;
}

/* Home button — disabled when already on home */
.mode2-nav-home.is-current {
  pointer-events: none;
}

/* Mode 2 — waypoint markers (labels above nav nodes) */
.mode2-nav-node {
  overflow: visible;
}

.waypoint-label {
  position: absolute;
  bottom: calc(100% + 48px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.3s, text-shadow 0.3s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Vertical stem line via ::before on label */
.waypoint-label::before {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom,
    rgba(110, 170, 80, 0.45),
    rgba(110, 170, 80, 0.12));
  transition: background 0.3s;
}

/* Small dot at stem top */
.waypoint-label::after {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(110, 170, 80, 0.5);
  transition: background 0.3s, box-shadow 0.3s;
}

.waypoint-tag {
  display: none;
}

/* Hover: brighten everything */
.mode2-nav-node:hover .waypoint-label {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 12px rgba(110, 170, 80, 0.4), 0 1px 8px rgba(0, 0, 0, 0.6);
}

.mode2-nav-node:hover .waypoint-label::before {
  background: linear-gradient(to bottom,
    rgba(110, 170, 80, 0.8),
    rgba(110, 170, 80, 0.25));
}

.mode2-nav-node:hover .waypoint-label::after {
  background: rgba(150, 210, 100, 0.8);
  box-shadow: 0 0 6px 2px rgba(110, 170, 80, 0.35);
}


/* Active label (mobile only — shows centered node name) */
.mode2-nav-active-label {
  display: none;
}

/* Mobile: scrollable nav, hide individual labels */
@media (max-width: 768px) {
  .mode2-nav {
    left: 0;
    right: 0;
    transform: none;
    justify-content: center;
    gap: 1rem;
    padding: 0 0.5rem;
  }
  .mode2-nav-node {
    flex-shrink: 0;
  }
  .waypoint-label {
    display: none;
  }
  .waypoint-label::before,
  .waypoint-label::after {
    display: none;
  }
  .waypoint-tag {
    display: none;
  }
  .mode2-nav-active-label {
    display: block;
    position: absolute;
    bottom: calc(5rem + 56px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: opacity 0.3s;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .mode2-nav {
    gap: 0.6rem;
    padding: 0;
    bottom: 4rem;
  }
  .mode2-nav-node { width: 38px; height: 38px; }
  .mode2-nav-node svg { width: 16px; height: 16px; }
  .mode2-nav-active-label {
    bottom: calc(4rem + 48px);
    font-size: 0.48rem;
  }
}

/* 3D puppet theater — disable on small screens */
@media (max-width: 480px) {
  .ambient-scene { perspective: none; }
  .ambient-valley { transform-style: flat; }
  .ambient-fg, .fog-layer, .smoke-container, .firefly-layer { --depth: 0px; }
  .smoke-container, .firefly-layer { transform: none; }

  /* ── Mobile scene composition ──
     Without 3D perspective all layers appear at full size.
     Push foreground down / shrink it to reveal mountains and sky. */
  .ambient-fg--mountains { transform: translateX(-50%); height: 50%; bottom: 25%; }
  .ambient-fg--hills     { transform: translateX(-50%); bottom: -25%; }
  .ambient-fg--center    { transform: translateX(-50%); bottom: -10%; }
  .ambient-fg--center-low { transform: translateX(-50%); bottom: 0%; }
  .ambient-fg--left      { height: 40%; bottom: 5%; left: -12%; }
  .ambient-fg--left-low  { height: 40%; bottom: 12%; left: -18%; }
  .ambient-fg--far       { transform: translateX(-50%); }
  .ambient-fg--far-low   { transform: translateX(-50%); }
  .ambient-fg--man       { transform: none; bottom: 30%; z-index: 8; }

  /* ── Title / motto / tags — higher on mobile ── */
  .mode2-tag {
    left: 0; right: 0;
    transform: none;
    text-align: center;
    top: 4%;
    font-size: clamp(0.45rem, 1.8vw, 0.7rem);
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
  .mode2-name {
    left: 0; right: 0;
    transform: none;
    text-align: center;
    top: 8%;
    font-size: clamp(1.8rem, 5vw, 3rem);
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
  .mode2-motto {
    left: 0; right: 0;
    transform: none;
    text-align: center;
    top: 14%;
    font-size: clamp(0.55rem, 1.5vw, 0.75rem);
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }
}

/* ── Medium screens (notebook) — name / motto / man figure ── */
@media (min-width: 769px) and (max-width: 1600px) {
  /* Reduce left forest heights — less dominant, creates more "zoomed out" feel */
  .ambient-fg--left     { height: 50%; }
  .ambient-fg--left-low { height: 50%; }

  .mode2-tag {
    left: 0; right: 0;
    transform: none;
    text-align: center;
    top: 3%;
    font-size: clamp(0.55rem, 0.88vw, 0.88rem);
    letter-spacing: 0.35em;
    text-indent: 0.35em;
  }
  .mode2-name {
    left: 0; right: 0;
    transform: none;
    text-align: center;
    text-indent: 0;
    top: 7%;
    font-size: clamp(2rem, 4vw, 4rem);
  }
  .mode2-motto {
    left: 0; right: 0;
    transform: none;
    text-align: center;
    text-indent: 0;
    top: 17%;
    font-size: clamp(0.62rem, 0.95vw, 0.95rem);
  }
  /* Restore man to ground level (bottom: 38% pushed him into the sky) */
  .ambient-fg--man {
    bottom: 33%;
  }
}

/* Mode 2 — social links (mobile adjustments below) */
.mode2-social {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mode2-social-link {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.mode2-social-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.mode2-social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mode2-social-link-rg svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 480px) {
  .mode2-social {
    bottom: 1.5rem;
    gap: 1rem;
  }
  .mode2-social-link {
    color: rgba(255, 255, 255, 0.7);
  }
  .mode2-social-link svg {
    width: 20px;
    height: 20px;
  }
  .mode2-social-link-rg svg {
    width: 26px;
    height: 26px;
  }
}

/* ============================================
   AMBIENT SCENE — layout
   ============================================ */
.ambient-scene {
  position: absolute;
  inset: 0;
  overflow: visible;
  z-index: 0;
  will-change: transform;
  perspective: 1200px;

  /* ── Time-of-day color variables (defaults = day palette) ── */
  /* Sky gradient */
  --sky-top: #6BA3BE;
  --sky-mid1: #8BBDD0;
  --sky-mid2: #B5CFC0;
  --sky-mid3: #D4D9BC;
  --sky-low: #E2D5BC;
  --sky-bottom: #D4C4A8;
  /* Celestial */
  --sun-inner: rgba(255,235,180,0.6);
  --sun-outer: rgba(255,210,140,0.2);
  --ray-color: rgba(255,248,220,0.06);
  --sun-opacity: 1;
  --moon-opacity: 0;
  --stars-opacity: 0;
  /* Atmosphere */
  --cloud-fill: rgba(255,255,255,0.35);
  --mist-1a: rgba(200,220,210,0.22);
  --mist-1b: rgba(220,235,225,0.18);
  --mist-2a: rgba(190,210,200,0.2);
  --mist-2b: rgba(210,225,215,0.16);
  /* Terrain */
  --mtns-far: #8BA4B8;
  --mtns-mid: #7B96A8;
  --valley-wall: #6E8B7B;
  --forest-fill: #1E3D28;
  --meadow-front: #4A7D42;
  --meadow-back: #3D6B38;
  --rock-fill: #8B8672;
  --rock-shadow: #6B6358;
  /* Vegetation */
  --tree-trunk: #3A2E22;
  --tree-trunk-light: #4A3728;
  --tree-foliage-dark: #2D5A3D;
  --tree-foliage-mid: #345E43;
  --tree-foliage-bright: #3D6B4A;
  --tree-foliage-highlight: #4A7D56;
  --grass-1: #6B9E4F;
  --grass-2: #5B8C3E;
  --grass-3: #7BAF5B;
  /* Water */
  --water-fill: #6BA8B8;
  --water-highlight: #8BC4D0;
  /* Accents */
  --firefly-color: #E8D87A;
  --firefly-glow: rgba(232,216,122,0.5);
  --firefly-glow-soft: rgba(232,216,122,0.2);

  background: linear-gradient(
    to bottom,
    var(--sky-top) 0%,
    var(--sky-mid1) 25%,
    var(--sky-mid2) 40%,
    var(--sky-mid3) 50%,
    var(--sky-low) 58%,
    var(--sky-bottom) 63%,
    var(--ground-base, #948062) 70%,
    var(--ground-mid, #784826) 80%,
    var(--ground-top, #120f0a) 90%,
    var(--ground-rock, #787878) 100%
  );
}

.ambient-valley {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.ambient-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* Forest silhouette layers */
.ambient-fg {
  position: absolute;
  bottom: 25%;
  height: auto;
  pointer-events: none;
  --depth: 0px;
  backface-visibility: hidden;
}

/* Forest zoom — transform-origin for camera zoom on whole scene */
.ambient-fg--mountains {
  --depth: -300px;
  left: 50%;
  transform: translateX(-50%) translateZ(var(--depth));
  bottom: 25%;
  height: 40%;
  width: auto;
  min-width: 130vw;
  object-fit: cover;
  z-index: 1;
  filter: var(--filter-mtns, brightness(0) invert(1) brightness(0.45) sepia(0.3) hue-rotate(180deg) drop-shadow(0 6px 12px rgba(0,0,0,0.3)));
}
/* Animated fog layers */
.fog-layer {
  --depth: -220px;
  position: absolute;
  left: 0;
  width: 200%;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 30% 70% at 15% 50%, rgba(200, 215, 220, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 25% 60% at 45% 40%, rgba(210, 220, 225, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse 20% 80% at 75% 55%, rgba(195, 210, 218, 0.3) 0%, transparent 60%);
}
.fog-layer--1 {
  --depth: -250px;
  bottom: 28%;
  height: 15%;
  animation: fog-drift-1 35s linear infinite, fog-pulse-1 12s ease-in-out infinite;
}
.fog-layer--2 {
  --depth: -200px;
  bottom: 32%;
  height: 12%;
  animation: fog-drift-2 28s linear infinite, fog-pulse-2 16s ease-in-out infinite;
}
.fog-layer--3 {
  --depth: -170px;
  bottom: 25%;
  height: 10%;
  opacity: 0.6;
  animation: fog-drift-3 22s linear infinite, fog-pulse-3 20s ease-in-out infinite;
}
@keyframes fog-drift-1 {
  0%   { transform: translateX(0) translateZ(var(--depth)); }
  100% { transform: translateX(-50%) translateZ(var(--depth)); }
}
@keyframes fog-drift-2 {
  0%   { transform: translateX(-50%) translateZ(var(--depth)); }
  100% { transform: translateX(0) translateZ(var(--depth)); }
}
@keyframes fog-drift-3 {
  0%   { transform: translateX(-10%) translateZ(var(--depth)); }
  100% { transform: translateX(-60%) translateZ(var(--depth)); }
}
@keyframes fog-pulse-1 {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}
@keyframes fog-pulse-2 {
  0%, 100% { opacity: 0.5; }
  40%      { opacity: 0.2; }
  70%      { opacity: 0.45; }
}
@keyframes fog-pulse-3 {
  0%, 100% { opacity: 0.4; }
  30%      { opacity: 0.15; }
  60%      { opacity: 0.5; }
}

/* ============================================
   SMOKE — stoupající ze základny hory
   ============================================ */
.smoke-container {
  --depth: -220px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(var(--depth));
  overflow: hidden;
}
.smoke-puff {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* Zdroj A — hlavní těžký sloupec (vlevo od středu) */
.smoke-a {
  left: 43%;
  bottom: 25%;
  width: 90px;
  height: 80px;
  background: radial-gradient(circle at 42% 44%,
    rgba(215, 225, 240, 0.75) 0%,
    rgba(200, 215, 232, 0.4)  45%,
    transparent 72%);
  filter: blur(16px);
}
/* Zdroj B — střed, světlejší */
.smoke-b {
  left: 50%;
  bottom: 26%;
  width: 65px;
  height: 60px;
  background: radial-gradient(circle at 44% 42%,
    rgba(222, 230, 242, 0.65) 0%,
    rgba(208, 220, 236, 0.35) 45%,
    transparent 70%);
  filter: blur(12px);
}
/* Zdroj C — pravý, tenký vláknový */
.smoke-c {
  left: 57%;
  bottom: 25.5%;
  width: 52px;
  height: 48px;
  background: radial-gradient(circle at 45% 43%,
    rgba(224, 230, 240, 0.6) 0%,
    rgba(210, 220, 234, 0.3) 45%,
    transparent 70%);
  filter: blur(9px);
}
/* Zdroj D — difúzní základna, pomalá a široka */
.smoke-d {
  left: 45%;
  bottom: 24.5%;
  width: 170px;
  height: 90px;
  background: radial-gradient(ellipse at 45% 50%,
    rgba(218, 228, 240, 0.5)  0%,
    rgba(205, 218, 235, 0.22) 50%,
    transparent 75%);
  filter: blur(28px);
}

@keyframes smoke-rise-a {
  0%   { transform: translate(  0px,   0px) scale(0.30) rotate( 0deg); opacity: 0;    }
  7%   {                                                                 opacity: 0.48; }
  45%  { transform: translate(-16px, -11vh) scale(1.45) rotate(-6deg); opacity: 0.28; }
  80%  {                                                                 opacity: 0.14; }
  100% { transform: translate(-30px, -26vh) scale(2.80) rotate(-12deg); opacity: 0;    }
}
@keyframes smoke-rise-b {
  0%   { transform: translate(  0px,  0px) scale(0.28) rotate( 0deg); opacity: 0;    }
  9%   {                                                                opacity: 0.38; }
  45%  { transform: translate( 10px, -9vh) scale(1.25) rotate( 5deg); opacity: 0.20; }
  80%  {                                                                opacity: 0.10; }
  100% { transform: translate( 20px,-22vh) scale(2.40) rotate(10deg); opacity: 0;    }
}
@keyframes smoke-rise-c {
  0%   { transform: translate( 0px,   0px) scale(0.25) rotate(0deg); opacity: 0;    }
  9%   {                                                               opacity: 0.30; }
  45%  { transform: translate( 6px,  -8vh) scale(1.10) rotate(4deg); opacity: 0.16; }
  80%  {                                                               opacity: 0.08; }
  100% { transform: translate(12px, -19vh) scale(2.00) rotate(8deg); opacity: 0;    }
}
@keyframes smoke-rise-d {
  0%   { transform: translate( 0px,   0px) scale(0.40) rotate( 0deg); opacity: 0;    }
  7%   {                                                                opacity: 0.25; }
  50%  { transform: translate(-8px,  -7vh) scale(1.70) rotate(-4deg); opacity: 0.14; }
  100% { transform: translate(-15px,-17vh) scale(3.20) rotate(-8deg); opacity: 0;    }
}

.smoke-a1 { animation: smoke-rise-a 20s ease-out  -0s     infinite; }
.smoke-a2 { animation: smoke-rise-a 20s ease-out  -5s     infinite; }
.smoke-a3 { animation: smoke-rise-a 20s ease-out  -10s    infinite; }
.smoke-a4 { animation: smoke-rise-a 20s ease-out  -15s    infinite; }

.smoke-b1 { animation: smoke-rise-b 24s ease-out  -0s     infinite; }
.smoke-b2 { animation: smoke-rise-b 24s ease-out  -6s     infinite; }
.smoke-b3 { animation: smoke-rise-b 24s ease-out  -12s    infinite; }
.smoke-b4 { animation: smoke-rise-b 24s ease-out  -18s    infinite; }

.smoke-c1 { animation: smoke-rise-c 17s ease-out  -0s     infinite; }
.smoke-c2 { animation: smoke-rise-c 17s ease-out  -4.25s  infinite; }
.smoke-c3 { animation: smoke-rise-c 17s ease-out  -8.5s   infinite; }
.smoke-c4 { animation: smoke-rise-c 17s ease-out  -12.75s infinite; }

.smoke-d1 { animation: smoke-rise-d 30s ease-out  -0s     infinite; }
.smoke-d2 { animation: smoke-rise-d 30s ease-out  -10s    infinite; }
.smoke-d3 { animation: smoke-rise-d 30s ease-out  -20s    infinite; }

/* Wind lines — terrain-following via stroke-dashoffset */
.wind-terrain-svg {
  --depth: -60px;
  z-index: 8;
  pointer-events: none;
  transform: translateX(-50%) translateZ(var(--depth));
}
.wind-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-linecap: round;
  stroke-dasharray: 80 920;
}
.wl1 { stroke-width: 0.9; stroke-opacity: 0.30; animation: wind-travel 13s linear infinite; }
.wl2 { stroke-width: 0.7; stroke-opacity: 0.22; animation: wind-travel 17s linear infinite 3s; }
.wl3 { stroke-width: 1.0; stroke-opacity: 0.26; animation: wind-travel 11s linear infinite 7s; }
.wl4 { stroke-width: 0.6; stroke-opacity: 0.18; animation: wind-travel 19s linear infinite 11s; }
.wl5 { stroke-width: 0.8; stroke-opacity: 0.20; animation: wind-travel 15s linear infinite 5s; }
.wl6 { stroke-width: 0.5; stroke-opacity: 0.14; animation: wind-travel 22s linear infinite 14s; }

@keyframes wind-travel {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Gentle wind sway on forest layers */
@keyframes forest-sway-center {
  0%, 100% { transform: translateX(-50%) translateZ(var(--depth)); }
  50%      { transform: translateX(calc(-50% + 3px)) translateZ(var(--depth)); }
}
@keyframes forest-sway-left {
  0%, 100% { transform: translateX(0) translateZ(var(--depth)); }
  50%      { transform: translateX(3px) translateZ(var(--depth)); }
}

.ambient-fg--far-low {
  --depth: -200px;
  left: 70%;
  transform: translateX(-50%) translateZ(var(--depth));
  bottom: 18%;
  animation: forest-sway-center 14s ease-in-out infinite;
  z-index: 3;
  filter: var(--filter-forest-far, brightness(0) invert(1) brightness(0.25) sepia(1) hue-rotate(85deg) saturate(0.6));
}
.ambient-fg--far {
  --depth: -140px;
  left: 72%;
  transform: translateX(-50%) translateZ(var(--depth));
  bottom: 15%;
  z-index: 4;
  filter: var(--filter-forest-mid, brightness(0) invert(1) brightness(0.22) sepia(1) hue-rotate(95deg) saturate(0.85));
  animation: forest-sway-center 12s ease-in-out infinite;
  animation-delay: -1s;
}
.ambient-fg--center-low {
  --depth: -160px;
  left: 45%;
  transform: translateX(-50%) translateZ(var(--depth));
  bottom: 10%;
  z-index: 4;
  filter: var(--filter-forest-mid, brightness(0) invert(1) brightness(0.2) sepia(1) hue-rotate(80deg) saturate(0.7));
  animation: forest-sway-center 16s ease-in-out infinite;
  animation-delay: -3s;
}
.ambient-fg--center {
  --depth: -100px;
  left: 50%;
  transform: translateX(-50%) translateZ(var(--depth));
  bottom: 0%;
  z-index: 5;
  filter: var(--filter-forest-near, brightness(0) invert(1) brightness(0.12) sepia(1) hue-rotate(60deg) saturate(1.5));
  animation: forest-sway-center 13s ease-in-out infinite;
  animation-delay: -2s;
}
.ambient-fg--left-low {
  --depth: -130px;
  left: -10%;
  bottom: 25%;
  height: 60%;
  width: auto;
  z-index: 5;
  filter: var(--filter-forest-mid, brightness(0) invert(1) brightness(0.2) sepia(1) hue-rotate(80deg) saturate(0.7));
  animation: forest-sway-left 15s ease-in-out infinite;
  animation-delay: -1.5s;
}
.ambient-fg--left {
  --depth: -70px;
  left: -5%;
  bottom: 15%;
  height: 60%;
  width: auto;
  z-index: 6;
  animation: forest-sway-left 11s ease-in-out infinite;
  animation-delay: -3.5s;
  filter: var(--filter-forest-near, brightness(0) invert(1) brightness(0.12) sepia(1) hue-rotate(60deg) saturate(1.5));
}
.ambient-fg--man {
  --depth: -30px;
  right: 28%;
  bottom: 33%;
  height: 9%;
  width: auto;
  z-index: 6;
  transform: translateZ(var(--depth));
  filter: brightness(0);
}
.ambient-fg--hills {
  --depth: -30px;
  left: 50%;
  transform: translateX(-50%) translateZ(var(--depth));
  bottom: -10%;
  z-index: 7;
  min-width: 115vw;
}

/* Sun glow */
.ambient-glow {
  position: absolute;
  top: 3%;
  right: 12%;
  width: 35vw;
  height: 35vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, var(--sun-inner) 0%, var(--sun-outer) 35%, transparent 70%);
  opacity: var(--sun-opacity);
  border-radius: 50%;
  pointer-events: none;
  animation: glow-pulse 8s ease-in-out infinite;
}

/* Light rays */
.ambient-rays {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 85%;
  background:
    linear-gradient(155deg, rgba(255, 248, 220, 0.06) 0%, transparent 35%),
    linear-gradient(165deg, transparent 15%, rgba(255, 248, 220, 0.04) 25%, transparent 45%),
    linear-gradient(145deg, transparent 35%, rgba(255, 248, 220, 0.035) 50%, transparent 65%);
  pointer-events: none;
  animation: rays-shimmer 10s ease-in-out infinite;
}

/* Clouds (SVG paths) */
.ambient-cloud {
  filter: blur(3px);
  pointer-events: none;
}

.ambient-cloud--1 { animation: cloud-sway-1 45s ease-in-out infinite; }
.ambient-cloud--2 { animation: cloud-sway-2 55s ease-in-out infinite; }
.ambient-cloud--3 { animation: cloud-sway-3 65s ease-in-out infinite; }
.ambient-cloud--4 { animation: cloud-sway-4 50s ease-in-out infinite; }
.ambient-cloud--5 { animation: cloud-sway-5 60s ease-in-out infinite; }

/* Mist layers */
.ambient-mist {
  position: absolute;
  left: -50%;
  width: 200%;
  pointer-events: none;
}

.ambient-mist--1 {
  top: 22%;
  height: 10%;
  background: linear-gradient(90deg, transparent 10%, var(--mist-1a) 30%, var(--mist-1b) 70%, transparent 90%);
  filter: blur(30px);
  animation: mist-drift-1 40s ease-in-out infinite;
}

.ambient-mist--2 {
  top: 32%;
  height: 8%;
  background: linear-gradient(90deg, transparent 15%, var(--mist-2a) 35%, var(--mist-2b) 65%, transparent 85%);
  filter: blur(35px);
  animation: mist-drift-2 50s ease-in-out infinite;
}

/* Mountain subtle float */
.ambient-mtns-far { animation: mt-float 25s ease-in-out infinite; }
.ambient-mtns-mid { animation: mt-float 20s ease-in-out infinite reverse; }

/* Grass blades */
.grass-cluster {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: grass-sway 3.5s ease-in-out infinite;
  animation-delay: var(--d);
}

/* Valley trees (gentle sway) */
.valley-tree {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: tree-sway 8s ease-in-out infinite;
  animation-delay: var(--td);
}

/* Fireflies */
.firefly-layer {
  --depth: -50px;
  position: absolute;
  inset: 0;
  opacity: var(--firefly-visibility, 0);
  transition: opacity 4s ease;
  pointer-events: none;
  z-index: 9;
  transform: translateZ(var(--depth));
}

.ambient-firefly {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: 2px;
  height: 2px;
  background: var(--firefly-color);
  border-radius: 50%;
  box-shadow: 0 0 3px 1px var(--firefly-glow), 0 0 8px 3px var(--firefly-glow-soft);
  pointer-events: none;
  z-index: 1;
  animation:
    firefly-float var(--dur) ease-in-out var(--delay) infinite,
    firefly-glow 3s ease-in-out var(--delay) infinite;
}

/* SVG fill/stroke classes (driven by time-of-day variables) */
.fill-mtns-far { fill: var(--mtns-far); }
.fill-mtns-mid { fill: var(--mtns-mid); }
.fill-valley-wall { fill: var(--valley-wall); }
.fill-forest { fill: var(--forest-fill); }
.fill-meadow-front { fill: var(--meadow-front); }
.fill-meadow-back { fill: var(--meadow-back); }
.fill-rock { fill: var(--rock-fill); }
.fill-rock-shadow { fill: var(--rock-shadow); }
.tree-trunk { fill: var(--tree-trunk); }
.tree-trunk-light { fill: var(--tree-trunk-light); }
.tree-foliage-dark { fill: var(--tree-foliage-dark); }
.tree-foliage-mid { fill: var(--tree-foliage-mid); }
.tree-foliage-bright { fill: var(--tree-foliage-bright); }
.tree-foliage-highlight { fill: var(--tree-foliage-highlight); }
.grass-stroke-1 { stroke: var(--grass-1); }
.grass-stroke-2 { stroke: var(--grass-2); }
.grass-stroke-3 { stroke: var(--grass-3); }
.fill-water { fill: var(--water-fill); }
.stroke-water { stroke: var(--water-fill); }
.stroke-water-highlight { stroke: var(--water-highlight); }

/* Stars layer (hidden by default, shown at night) */
.ambient-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--stars-opacity);
  transition: opacity 2s ease;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: star-twinkle 4s ease-in-out infinite;
}
.star:nth-child(2n)  { animation-delay: -1.2s; animation-duration: 3.5s; }
.star:nth-child(3n)  { animation-delay: -2.5s; animation-duration: 5s; }
.star:nth-child(5n)  { animation-delay: -0.8s; animation-duration: 4.5s; }
.star--bright { width: 3px; height: 3px; box-shadow: 0 0 4px 1px rgba(255,255,255,0.4); }
.star--dim    { width: 1px; height: 1px; opacity: 0.5; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Moon */
.ambient-moon {
  position: absolute;
  top: 8%;
  left: 15%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 40%, #e8e4d8 0%, #d4cfc2 60%, #b8b3a6 100%);
  box-shadow: 0 0 20px 8px rgba(200,200,180,0.15), 0 0 60px 20px rgba(200,200,180,0.08);
  pointer-events: none;
  z-index: 0;
  opacity: var(--moon-opacity);
  transition: opacity 2s ease;
}


/* ============================================
   AMBIENT SCENE — keyframes
   ============================================ */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes rays-shimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes cloud-sway-1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(100px); } }
@keyframes cloud-sway-2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-70px); } }
@keyframes cloud-sway-3 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(85px); } }
@keyframes cloud-sway-4 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-90px); } }
@keyframes cloud-sway-5 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(75px); } }

@keyframes mist-drift-1 { 0%, 100% { transform: translateX(-5%); } 50% { transform: translateX(5%); } }
@keyframes mist-drift-2 { 0%, 100% { transform: translateX(3%); } 50% { transform: translateX(-7%); } }
@keyframes mist-drift-3 { 0%, 100% { transform: translateX(-4%); } 50% { transform: translateX(6%); } }

@keyframes mt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes grass-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  60%      { transform: rotate(1.5deg); }
}

@keyframes firefly-float {
  0% { transform: translate(0, 0); }
  25% { transform: translate(18px, -25px); }
  50% { transform: translate(-12px, -40px); }
  75% { transform: translate(22px, -18px); }
  100% { transform: translate(0, 0); }
}

@keyframes firefly-glow {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.5; }
}

/* === Override: Mode 2 always visible on standalone page === */
.mode2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}