/* eco.css (2026-10-25, his ask: "a very clear breakdown of the substrates ... and the order of them when you scroll, how
   that works and how the plants grow through it ... highlight the differences in the ecosystems"). README, fishtank.cam
   section 81. Used on /neo (the Walstad layers, held while the steps pass; the four tanks side by side), /opae (food on
   the rock) and the two betta pages (why he lives alone). */

/* ---- the held picture: it stays while the steps scroll past, and each step adds a layer */
.eco-hold { position: relative; margin: 2rem auto 0; max-width: 46rem; }
.eco-fig { margin: 0 auto; width: min(100%, 40rem); padding: .5rem 0 0; background: var(--bg, #000); }
html.eco-on .eco-fig { position: sticky; top: calc(var(--barh, 56px) + 3.4rem); z-index: 2; }
html.eco-on .eco-fig::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5rem; height: 1.5rem; pointer-events: none;
  background: linear-gradient(var(--bg, #000), transparent); }
.eco-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.eco-fig text, .eco-dg text { font: 600 11px var(--sans, -apple-system, "SF Pro Text", Inter, system-ui, sans-serif); fill: var(--strong, #f2f4f6); }
.eco-fig text.r, .eco-dg text.r { text-anchor: end; } .eco-fig text.c, .eco-dg text.c { text-anchor: middle; }
.eco-fig text.s, .eco-dg text.s { font-weight: 500; font-size: 10px; fill: var(--grey, #8a8f98); }
.eco-fig text.dk { fill: #3b3325; } .eco-fig text.sm { font-weight: 500; font-size: 10px; } .eco-fig text.lt { fill: #f3ead8; }

.eco-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; position: relative; z-index: 1; display: grid; gap: 2.5rem; }
.eco-steps > li, .eco-cap { text-align: center; }
.eco-card { max-width: 34rem; margin: 0 auto; padding: 0 .5rem; }
.eco-n { display: block; margin-bottom: .55rem; font: 600 .72rem/1 var(--sc-mono, ui-monospace, Menlo, monospace); letter-spacing: .16em; color: var(--chum-text, #5AB0EA); text-transform: uppercase; }
.eco-card h3 { margin: 0; font: 600 clamp(1.5rem, 4.4vw, 2.2rem)/1.05 var(--sc-serif, var(--sans)); letter-spacing: -.025em; color: var(--strong, #fff); }
.eco-card p { margin: .55rem 0 0; color: var(--grey, #8e8e93); font-size: clamp(.98rem, 2.1vw, 1.1rem); line-height: 1.5; }
.eco-card p b { color: var(--text, #e8e8ed); font-weight: 600; }
.eco-cap { display: none; }
/* held: the steps become the scroll track, and the step being read shows under the picture */
html.eco-on .eco-fig svg { width: min(100%, calc((100svh - 17.5rem) * 1.43)); margin: 0 auto; }
html.eco-on .eco-cap { display: block; min-height: 12.5rem; padding-top: 1rem; }
html.eco-on .eco-cap .eco-card { animation: ecoIn .45s ease both; }
html.eco-on .eco-steps { display: block; margin: 0; padding-bottom: 30svh; }
html.eco-on .eco-steps > li { height: 42svh; opacity: 0; pointer-events: none; overflow: hidden; }
@keyframes ecoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 52rem) { html.eco-on .eco-cap { min-height: 10.5rem; } }

/* layers: hidden until their step, then they rise in */
html.eco-on .eco-fig [data-l] { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.eco-on .eco-fig [data-l].in { opacity: 1; transform: none; }
html.eco-on .eco-fig .eco-root { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .25s; }
html.eco-on .eco-fig [data-l].in .eco-root { stroke-dashoffset: 0; }
html.eco-on .eco-fig .eco-stem { transform: scaleY(.15); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
html.eco-on .eco-fig [data-l].in .eco-stem { transform: none; }
/* the step being read is drawn in full colour, the ones before it a little quieter */
html.eco-on .eco-fig [data-l].in:not(.cur) .eco-lab { opacity: .55; }
.eco-lab { transition: opacity .4s ease; }
@media (prefers-reduced-motion: no-preference) {
  html.eco-on .eco-fig [data-l].in .eco-nh { animation: ecoNh 3.2s ease-in-out infinite; }
  html.eco-on .eco-fig [data-l].in .eco-drip { animation: ecoDrip 2.6s ease-in infinite; }
}
@keyframes ecoNh { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx, -14px), var(--dy, -26px)); opacity: 0; } }
@keyframes ecoDrip { 0% { transform: translateY(-8px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
.eco-nh, .eco-drip { transform-box: fill-box; }
@media (max-width: 40rem) { .eco-fig text, .eco-dg text { font-size: 13px; } .eco-fig text.s, .eco-dg text.s, .eco-fig text.sm { font-size: 11.5px; } }

/* ---- plain diagrams (opae, betta) */
.eco-dg { margin: 2rem auto 0; width: min(100%, 40rem); }
.eco-dg svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- the four tanks side by side: one row each, one line each */
.eco-cmp { list-style: none; margin: 2rem auto 0; padding: 0; max-width: 46rem; display: grid; gap: .75rem; }
.eco-cmp a { display: grid; grid-template-columns: 3.25rem 1fr; gap: .1rem 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 18px;
  background: var(--raise, #0f0f10); color: inherit; text-decoration: none; }
.eco-cmp a:hover { background: color-mix(in srgb, var(--chum, #248FD3) 12%, var(--raise, #0f0f10)); }
.eco-cmp svg { grid-row: span 2; width: 3.25rem; height: 3.25rem; }
.eco-cmp b { font: 600 1.125rem/1.2 var(--sans); color: var(--strong, #fff); letter-spacing: -.02em; }
.eco-cmp b small { margin-left: .5rem; font: 600 .68rem/1 var(--sc-mono, ui-monospace, Menlo, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--chum-text, #5AB0EA); }
.eco-cmp span { color: var(--grey, #8e8e93); font-size: 1rem; line-height: 1.45; }
.eco-cmp a[aria-current] { outline: 1.5px solid color-mix(in srgb, var(--chum, #248FD3) 55%, transparent); }

/* the betta pages have their own type: keep the pieces in their look */
.eco-rows { list-style: none; margin: 1.75rem auto 0; padding: 0; max-width: 40rem; display: grid; gap: 1.1rem; }
.eco-rows li h3 { margin: 0; font: 600 1.2rem/1.2 var(--display, var(--sans)); letter-spacing: -.02em; color: var(--strong, #fff); }
.eco-rows li p { margin: .3rem 0 0; color: var(--grey, #8e8e93); line-height: 1.5; }
.eco-rows li p b { color: var(--text, #e8e8ed); font-weight: 600; }