/* BDNF lesson. All rules scoped under .bdn-* */
.bdn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bdn-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* the dish */
.bdn-dish { width: 100%; max-width: 330px; }
.bdn-ds { width: 100%; height: auto; display: block; overflow: visible; }
.bdn-glass { fill: rgba(169,155,255,.07); }
.bdn-rim { fill: none; stroke: rgba(234,227,215,.35); stroke-width: 3; }
.bdn-c { cursor: pointer; }
.bdn-b { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2.5; transition: fill var(--die, 2600ms), stroke var(--die, 2600ms), opacity var(--die, 2600ms); }
.bdn-sh { fill: none; stroke: var(--violet-bright); stroke-width: 3.5; stroke-linecap: round; transition: stroke var(--die, 2600ms), opacity var(--die, 2600ms); }
.bdn-lg { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.2s ease-out .2s; }
.bdn-hit { fill: transparent; }
.bdn-drop { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.bdn-c.drip .bdn-drop { animation: bdnDrip .5s ease-in forwards; }
@keyframes bdnDrip { 0% { opacity: 1; transform: translateY(-14px); } 85% { opacity: 1; transform: translateY(30px) scale(.8); } 100% { opacity: 0; transform: translateY(30px) scale(.4); } }
.bdn-c.dying .bdn-b { fill: #4a4752; stroke: #66626e; opacity: .55; }
.bdn-c.dying .bdn-sh { stroke: #66626e; opacity: .45; }
.bdn-c.fed .bdn-b { fill: var(--violet); stroke: var(--gold); opacity: 1; transition-duration: .5s; }
.bdn-c.fed .bdn-sh { stroke: var(--violet-bright); opacity: 1; transition-duration: .5s; }
.bdn-c.grow .bdn-lg { stroke-dashoffset: 0; }
.bdn-c.dead { opacity: .18; transition: opacity .8s; }
.bdn-dish.ask .bdn-c:not(.fed) .bdn-hit { stroke: var(--gold); stroke-width: 2; animation: bdnAsk 1.1s ease-out 3 both; }
@keyframes bdnAsk { 0% { stroke-opacity: 0; } 30% { stroke-opacity: .95; } 100% { stroke-opacity: 0; } }

/* 1982 */
.bdn-scale { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 340px; }
.bdn-pile, .bdn-speck { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bdn-pile b, .bdn-speck b { font: 800 22px var(--sans); color: var(--text); }
.bdn-pile span, .bdn-speck span { font: 600 13px var(--sans); color: var(--dim); max-width: 120px; }
.bdn-blob { width: 120px; height: 96px; border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%; background: radial-gradient(circle at 35% 30%, #f3c6cf, #c98a9a 60%, #8e5a6c); box-shadow: inset -8px -10px 18px rgba(0,0,0,.25); }
.bdn-arrow { width: 34px; height: 2px; background: var(--line-strong); position: relative; opacity: 0; transition: opacity .4s .3s; }
.bdn-arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--line-strong); }
.bdn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 3px rgba(252,192,80,.7); margin: 45px 0; }
.bdn-speck { opacity: 0; transform: translateX(-10px); transition: opacity .5s .6s, transform .5s .6s; }
.bdn-scale.go .bdn-arrow { opacity: 1; }
.bdn-scale.go .bdn-speck { opacity: 1; transform: none; }

/* three drops */
.bdn-left { display: flex; gap: 8px; }
.bdn-left i { width: 16px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--gold); box-shadow: 0 0 8px rgba(252,192,80,.6); transition: opacity .3s; }
.bdn-left i.used { opacity: .15; box-shadow: none; }

/* a grown brain */
.bdn-br { width: 100%; max-width: 340px; }
.bdn-bs { width: 100%; height: auto; display: block; overflow: visible; }
.bdn-den { fill: none; stroke: var(--violet-bright); stroke-width: 10; stroke-linecap: round; }
.bdn-ax { stroke: var(--violet); stroke-width: 6; stroke-linecap: round; }
.bdn-ax.q, .bdn-tip.q { opacity: .5; }
.bdn-tip { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; }
.bdn-sp path { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .6s calc(var(--i) * 120ms) ease-out; }
.bdn-br.grow .bdn-sp path { stroke-dashoffset: 0; }
.bdn-sig { fill: #fff; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.bdn-bdnf { fill: var(--gold); opacity: 0; animation: bdnPop .5s var(--d) ease-out forwards; }
@keyframes bdnPop { from { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; } to { opacity: .9; } }
.bdn-lb { font: 600 13px var(--sans); fill: var(--dim); }
.bdn-soma { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 3; }
.bdn-tip { stroke: var(--gold); stroke-width: 3; }
.bdn-nb { font: 700 13px var(--sans); fill: var(--gold); opacity: 0; transition: opacity .4s .7s; }
.bdn-br.grow .bdn-nb { opacity: 1; }

/* rats */
.bdn-rats { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bdn-cage { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.bdn-cage img { width: 100%; height: clamp(110px, 17vh, 150px); object-fit: contain; }
.bdn-cage span { font: 700 13px var(--sans); color: var(--text); }
.bdn-mt { width: 100%; height: 10px; border-radius: 5px; background: var(--raised); overflow: hidden; }
.bdn-mt i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--gold); transition: width 1s ease-out; }
.bdn-rats.lit .no .bdn-mt i { width: 35%; }
.bdn-rats.lit .run .bdn-mt i { width: 80%; box-shadow: 0 0 8px rgba(252,192,80,.7); }

/* people */
.bdn-walk { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bdn-walk img { width: 100%; max-height: 180px; object-fit: contain; }
.bdn-bars { width: 100%; display: flex; flex-direction: column; gap: 6px; opacity: 0; transition: opacity .4s; }
.bdn-walk.go .bdn-bars { opacity: 1; }
.bdn-bar { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--dim); }
.bdn-bar i { position: relative; height: 12px; border-radius: 6px; background: var(--raised); }
.bdn-bar b { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 6px; transition: width 1s ease-out .2s, left 1s ease-out .2s; }
.bdn-bar.w b { background: var(--mint); }
.bdn-bar.s b { background: var(--dim); }
.bdn-walk.go .bdn-bar.w b { width: 40%; }
.bdn-walk.go .bdn-bar.s b { width: 28%; left: 22%; }
.bdn-cap { font: 600 12.5px var(--sans); color: var(--dim); text-align: center; }
.bdn-bar em { font-style: normal; font-weight: 800; color: var(--text); }

@media (max-height: 700px) {
  .bdn-dish { max-width: 280px; }
  .bdn-walk img { max-height: 110px; }
  .bdn-cage img { height: 92px; }
  .bdn-blob { width: 96px; height: 78px; }
}