/* ───────────────────────────────────────────────────────────────────────────
 * Umwelt / Environment — natural light theme.
 * Everything is scoped to .env so the rest of the site keeps the dark cave look.
 * Structure: .env-nature (full-bleed sky · sun · clouds · ridge · drifting leaves · hills & river) sits behind the content;
 * the colour variables below re-skin every card / chart that env.js, energy.js and co2.js render.
 * ─────────────────────────────────────────────────────────────────────────── */
.env {
  --text: #16322b; --muted: #3a5951; --soft: #264840; --line: rgba(28, 98, 74, .22); --panel: rgba(255, 255, 255, .74); --panel2: rgba(255, 255, 255, .9);
  --leaf: #2f8f5b; --leaf-d: #1b6b43; --leaf-l: #b9e3c4; --moss: #5c8a3a; --sky: #2f86c1; --sky-d: #1f6aa3; --sky-l: #cfe8f6; --ocean: #1e7fae; --earth: #9c6b3a; --sand: #f3e7cc;
  --ink-or: #a14f00; --card-sh: 0 10px 34px rgba(24, 80, 70, .14), 0 1px 0 rgba(255, 255, 255, .8) inset;
  --e-temp: #d9552b; --e-co2: #1f8a52; --e-ice: rgba(47, 134, 193, .13);
  position: relative; isolation: isolate; color: var(--text);
  margin-top: 56px; padding: 176px 0 250px;
}
.env a { color: var(--ink-or); }
.env ::selection { background: rgba(47, 143, 91, .28); }

/* ---- full-bleed backdrop ---- */
.env-nature { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; overflow: clip;
  background:
    linear-gradient(180deg, rgba(11, 9, 7, 0) 0, #0d1d20 54px, #16424a 112px, #5fa9c6 176px, #a8d8ea 250px, #d3ecf3 430px, #e8f4ee 800px, #e3f2e2 calc(100% - 720px), #cfe8cc calc(100% - 470px), #a9d6a4 calc(100% - 250px), #77b97f 100%); }
.en-sun { position: absolute; top: 96px; right: 14%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 205, .95), rgba(255, 226, 150, .5) 38%, rgba(255, 214, 120, 0) 72%); transform: translate3d(0, calc(var(--py, 0) * -26px), 0); }
.en-sun::after { content: ""; position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffbe8, #ffe9a6 70%); box-shadow: 0 0 60px 20px rgba(255, 230, 150, .55); }
.en-cloud { position: absolute; height: 54px; border-radius: 99px; background: rgba(255, 255, 255, .72); filter: blur(7px); animation: en-drift 140s linear infinite; }
.en-cloud::before, .en-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.en-cloud::before { width: 46%; height: 150%; left: 14%; top: -62%; } .en-cloud::after { width: 34%; height: 120%; left: 52%; top: -40%; }
.en-cloud.c1 { top: 250px; width: 280px; left: -320px; } .en-cloud.c2 { top: 400px; width: 200px; left: -240px; animation-duration: 190s; animation-delay: -70s; opacity: .7; }
.en-cloud.c3 { top: 170px; width: 230px; left: -260px; animation-duration: 160s; animation-delay: -120s; opacity: .55; }
@keyframes en-drift { to { transform: translate3d(calc(100vw + 700px), 0, 0); } }
.en-ridge { position: absolute; left: 0; right: 0; top: 0; height: 128px; width: 100%; display: block; }
.en-ridge .rb { fill: #12302f; opacity: .85; } .en-ridge .rf { fill: #0b0907; }

/* floating leaves & seeds — a sticky viewport-sized layer so they keep drifting as you read */
.en-leaves { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; overflow: clip; }
.en-lf { position: absolute; top: -48px; will-change: transform; animation: en-fall linear infinite; }
.en-lf > svg { display: block; animation: en-sway ease-in-out infinite alternate; }
@keyframes en-fall { from { transform: translate3d(0, -6vh, 0); } to { transform: translate3d(0, 112vh, 0); } }
@keyframes en-sway { from { transform: translateX(-26px) rotate(-28deg); } to { transform: translateX(34px) rotate(40deg); } }

/* hills + river at the bottom; the last hill is the page's own dark colour so the section settles back into the cave */
.en-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; }
.en-ground svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.en-ground .h1 { fill: #8cc58e; } .en-ground .h2 { fill: #5fa575; } .en-ground .h3 { fill: #2f7a58; } .en-ground .h4 { fill: #17463a; } .en-ground .h5 { fill: #0b0907; }
.en-ground .rv { fill: url(#en-water); }
.en-ground .wv1 { animation: en-wave 16s linear infinite; } .en-ground .wv2 { animation: en-wave 24s linear infinite reverse; }
@keyframes en-wave { to { transform: translateX(-50%); } }
.en-ground .lyr { transform: translate3d(0, calc(var(--py2, 0) * 1px), 0); }

/* ---- headings ---- */
.env .w-kicker { color: #145238; }
.env .w-head h2 { color: var(--text); }
.env .w-lead { color: var(--muted); }
.env .muted { color: var(--muted); }

/* ---- buttons / chips ---- */
.env-btn { color: var(--text); background: rgba(255, 255, 255, .7); border-color: rgba(28, 98, 74, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.env-btn:hover { background: #fff; border-color: var(--leaf); box-shadow: 0 6px 18px rgba(31, 107, 67, .18); transform: translateY(-1px); }
.env-btn.primary { background: linear-gradient(180deg, #ffbe5c, var(--orange)); color: #2a1503; border-color: #e58a12; box-shadow: 0 8px 22px rgba(247, 147, 26, .32); }
.env-btn.primary:hover { background: linear-gradient(180deg, #ffc974, #fa9d2c); }
.env-btn:focus-visible, .env-chip:focus-visible, .env-prog button:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 2px; }
.env-chip { background: rgba(255, 255, 255, .7); border-color: rgba(28, 98, 74, .28); color: var(--soft); }
.env-chip[aria-pressed=true] { color: var(--text); border-color: var(--leaf); background: #e5f6e9; box-shadow: 0 0 0 1px rgba(47, 143, 91, .25) inset; }
.env-chip .cx.lanes { background: #7c5fd6; }
.env-skip { color: var(--soft); background: rgba(255, 255, 255, .6); border-color: rgba(28, 98, 74, .3); } .env-skip:hover { color: var(--text); border-color: var(--leaf); background: #fff; }

/* ---- gate ---- */
.env-gate { border: 1px solid rgba(255, 255, 255, .85); background: radial-gradient(520px 260px at 14% 62%, rgba(255, 226, 150, .55), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(226, 244, 233, .78)); box-shadow: var(--card-sh), 0 26px 60px rgba(24, 90, 70, .12); backdrop-filter: blur(6px); }
.eg-glow { background: radial-gradient(closest-side, rgba(255, 224, 140, .75), transparent); }
.eg-rock { background: #8cc58e; border-radius: 60% 60% 0 0; } .eg-rock.r1 { background: #7bb887; } .eg-rock.r2 { background: #5fa575; }
.eg-cave::after { content: "🌿"; position: absolute; right: 10%; bottom: 6px; font-size: 22px; } .eg-cave::before { content: "🌼"; position: absolute; left: 12%; bottom: 8px; font-size: 18px; }
.eg-reply { color: var(--ink-or); font-weight: 600; }
.stick .sk-o { stroke: #1b2a24; }

/* ---- story ---- */
.env-prog button { color: var(--muted); } .env-prog button i { background: rgba(28, 98, 74, .18); }
.env-prog button.past i { background: rgba(47, 143, 91, .65); } .env-prog button.on i { background: var(--leaf); box-shadow: 0 0 10px rgba(47, 143, 91, .5); } .env-prog button.on { color: var(--text); }
.env-card { border: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(236, 248, 241, .86)); box-shadow: var(--card-sh), 0 24px 54px rgba(24, 90, 70, .14); backdrop-filter: blur(8px); }
.ev-title { color: var(--text); }
.ev-badge.real { color: #14693f; border-color: rgba(31, 138, 82, .5); background: rgba(31, 138, 82, .09); } .ev-badge.approx { color: var(--ink-or); border-color: rgba(161, 79, 0, .45); background: rgba(247, 147, 26, .1); }
.ev-note { color: var(--muted); }
.e-grid { stroke: rgba(28, 98, 74, .11); } .e-axis { stroke: rgba(28, 98, 74, .45); }
.e-tick { fill: #4a6860; } .e-axl { fill: #4a6860; } .ev-chart[data-x] .e-axl.e-l { fill: #4a6860; }
.e-axl.e-l { fill: #b13f18; } .e-axl.e-r { fill: #17703f; }
.env-card[data-scene=orbit] .e-axl.e-l, .env-card[data-scene=holo] .e-axl.e-l, .env-card[data-scene=modern] .ev-sub:first-child .e-axl.e-l { fill: #17703f; }
.env-card[data-scene=orbit] .e-axl.e-r { fill: #b13f18; }
.e-rng { fill: rgba(31, 138, 82, .14); }
.e-band { fill: var(--e-ice); } .e-band-t { fill: #1f6aa3; opacity: 1; }
.e-strip { fill: #d6e4e8; } .e-strip.m { fill: #f0dcae; } .e-strip.c { fill: #bfe0ef; } .e-strip-t { fill: #1d3a35; }
.e-dim { fill: rgba(236, 246, 240, .72); }
.e-ref { stroke: rgba(28, 98, 74, .5); } .e-ref-t { fill: #3d5a52; }
.e-mark { stroke: rgba(161, 79, 0, .6); } .e-mark-t { fill: var(--ink-or); }
.e-lane.ecc { stroke: #6b4bcb; } .e-lane.obl { stroke: #0d8b82; } .e-lane.pre { stroke: #c18200; } .e-lane-t { fill: #3d5a52; stroke: #f2faf5; }
.e-tipline { stroke: rgba(22, 50, 43, .5); } .e-dot { fill: #fff; stroke: #16322b; }
.e-tipbox { background: rgba(255, 255, 255, .96); border-color: rgba(28, 98, 74, .3); color: var(--text); box-shadow: 0 8px 22px rgba(24, 80, 70, .2); }
.e-tipbox i { color: var(--muted); }
.e-ln { stroke-width: 2.6; }
.leaf .lf { fill: #16322b; } .leaf .lf.sm { fill: #8a5200; } .leaf .arr { stroke: #d98a12; } .leaf .fl.o .arr, .leaf .fl.s .arr { stroke: #1f8a52; }
.leaf circle[fill="#ffd27a"] { fill: #ffc94d; } .leaf g[stroke="#ffd27a"] { stroke: #ffc94d; }

.env-step { border: 1px solid rgba(28, 98, 74, .2); background: rgba(255, 255, 255, .66); backdrop-filter: blur(5px); box-shadow: 0 6px 22px rgba(24, 80, 70, .08); opacity: .72; }
.env-step.on { opacity: 1; border-color: rgba(47, 143, 91, .65); background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 1px rgba(47, 143, 91, .15), 0 16px 40px rgba(24, 90, 70, .16); }
.env-step p { color: var(--soft); } .env-step b { color: var(--text); }
.es-facts dt { color: var(--muted); } .es-facts dd { color: var(--ink-or); }
.es-facts > div { background: rgba(231, 244, 236, .8) !important; border-color: rgba(28, 98, 74, .2) !important; }
.es-say { background: rgba(207, 232, 246, .55); border-color: rgba(47, 134, 193, .35); } .es-say p { color: #1d3d52; }
.es-src { color: var(--muted); }
.e-src { color: var(--ink-or); border-color: rgba(161, 79, 0, .35); background: rgba(255, 255, 255, .7); } .e-src:hover { border-color: var(--orange); background: #fff; }

/* ---- Bitcoin & climate cards ---- */
.env-btc { border-top: 1px solid rgba(28, 98, 74, .25); }
.btc-mix { background: var(--panel); border-color: rgba(255, 255, 255, .85); box-shadow: var(--card-sh); backdrop-filter: blur(6px); } .btc-mix h4 { color: var(--muted); }
.mixleg { color: var(--soft); } .mixleg b { color: var(--text); }
.mixtot span { border-color: rgba(28, 98, 74, .3); color: var(--soft); background: rgba(255, 255, 255, .55); } .mixtot .s { border-color: rgba(31, 138, 82, .55); color: #14693f; background: rgba(31, 138, 82, .1); } .mixtot .f { border-color: rgba(150, 90, 40, .5); color: #8a4f1c; background: rgba(217, 138, 78, .12); }
.mx-hydro { background: #2fa3b8; } .mx-wind { background: #5fcf8e; } .mx-solar { background: #f2c94c; } .mx-other { background: #a8d672; } .mx-nuclear { background: #e8c34a; }
.mx-gas { background: #98a3a8; } .mx-coal { background: #4b4f52; } .mx-oil { background: #7a5a43; }
.mixbar i { color: #0f221c; } .mixbar i.mx-coal, .mixbar i.mx-oil { color: #fff; }
.btc-card { border: 1px solid rgba(255, 255, 255, .88); background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(240, 249, 243, .84)); box-shadow: var(--card-sh); backdrop-filter: blur(6px); transition: transform .25s, box-shadow .25s; }
.btc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(24, 90, 70, .2), 0 1px 0 #fff inset; }
.bc-tag { color: var(--ink-or); border-color: rgba(161, 79, 0, .4); background: rgba(247, 147, 26, .09); }
.bc-who { color: var(--muted); } .bc-who b { color: var(--text); } .bc-text { color: var(--soft); }
.bc-keep { color: #5b3a0c; background: rgba(247, 147, 26, .1); border-left-color: var(--orange); } .bc-keep b { color: var(--ink-or); }
.btc-crit { border-color: rgba(161, 79, 0, .5); background: rgba(255, 244, 224, .7); } .btc-crit ul { color: var(--soft); }
.btc-all { color: var(--muted); }

/* ---- way back to the mine ---- */
.env-back { border: 1px solid rgba(255, 255, 255, .9); background: radial-gradient(420px 240px at 12% 70%, rgba(255, 222, 140, .6), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(222, 242, 232, .8)); box-shadow: var(--card-sh), 0 26px 60px rgba(24, 90, 70, .14); }
.eb-cave { background: radial-gradient(closest-side at 50% 85%, #fff2c4, #b9e0c5 70%, #8cc58e); border: 2px solid rgba(28, 98, 74, .35); border-bottom: 0; }
.eb-torch { display: none; }
.eb-cave::before { content: "☀"; position: absolute; top: 12px; right: 18px; font-size: 26px; color: #f4a81c; text-shadow: 0 0 18px rgba(255, 200, 80, .9); }
.eb-body p { color: var(--soft); }

/* ---- shared tool shells (energy tracker, CO2 calculator) ---- */
.env-tools { margin-top: 48px; display: grid; gap: 34px; }

@media (max-width: 900px) {
  .env { padding: 172px 0 200px; margin-top: 36px; }
  .en-sun { width: 240px; height: 240px; right: -40px; top: 70px; }
  .en-ridge { height: 92px; }
  .en-ground { height: 300px; }
  .en-cloud.c1 { top: 190px; }
  .env-step { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) { .en-cloud, .en-lf, .en-lf > svg, .en-ground .wv1, .en-ground .wv2 { animation: none !important; } .en-lf { display: none; } .env-btn, .btc-card { transition: none; } }

/* the backdrop is full-bleed, so the world container must not clip it horizontally (body still clips overflow) */
#world-view { overflow-x: visible; }
#world-view .w-hero, #world-map, #world-time, #world-learn, #world-view .w-foot { overflow-x: clip; }