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

/* the bill */
.usd-bill { position: relative; width: 100%; max-width: 360px; animation: usdLand .7s cubic-bezier(.2,.8,.2,1) both; }
.usd-bill img { width: 100%; display: block; border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
@keyframes usdLand { from { opacity: 0; translate: 0 -60px; rotate: -8deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
/* The "Federal Reserve Note" banner across the top of the note. */
.usd-hl { position: absolute; left: 24.5%; width: 51%; top: 2.5%; height: 10%; border-radius: 6px; border: 2.5px solid var(--gold); box-shadow: 0 0 0 4px rgba(252,192,80,.25), 0 0 18px rgba(252,192,80,.6); opacity: 0; scale: 1.15; transition: opacity .4s, scale .4s; }
.usd-bill.lit .usd-hl { opacity: 1; scale: 1; }

/* the web of swaps */
.usd-wb { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.usd-web { width: 100%; height: auto; display: block; overflow: visible; }
.usd-ls line { stroke: var(--violet-bright); stroke-width: 1.6; opacity: .75; }
.usd-sp line { stroke: var(--gold); stroke-width: 2.4; }
.usd-sp line.usd-rt { stroke: #FFE08A; stroke-width: 5; stroke-linecap: round; }
.usd-c circle { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; }
.usd-c text { font: 800 17px var(--sans); fill: var(--text); text-anchor: middle; }
.usd-c .usd-cn { font: 700 14px var(--sans); fill: var(--dim); }
.usd-ci { transform-box: fill-box; transform-origin: center; }
.usd-dl { display: none; transform-box: fill-box; transform-origin: center; }
.usd-dl circle { fill: #2F7D4F; stroke: var(--gold); stroke-width: 3; }
.usd-dl text { font: 800 26px var(--sans); fill: #FFF6DC; text-anchor: middle; }
.usd-web.hub .usd-dl { display: inline; }
.usd-web.routed .usd-c:nth-child(1) circle, .usd-web.routed .usd-c:nth-child(2) circle { stroke: #FFE08A; stroke-width: 3; }
.usd-web.glow .usd-dl circle { filter: drop-shadow(0 0 10px rgba(252,192,80,.8)); }
.usd-ct { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13.5px var(--sans); color: var(--dim); }
.usd-ct b { color: var(--text); font-weight: 800; }

/* sucres */
.usd-pile { position: relative; width: 190px; height: 130px; }
.usd-sn { position: absolute; left: 0; top: calc(var(--i) * 10px); width: 170px; height: 78px; rotate: calc((var(--i) - 2) * 3deg); border-radius: 8px; background: linear-gradient(135deg, #E9C9A4, #C79A6E); border: 2px solid #8C6A45; box-shadow: 0 6px 14px rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #3B2A16; transition: filter .8s, opacity .8s; }
.usd-sn b { font: 800 22px var(--sans); }
.usd-sn span { font: 700 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.usd-drop { position: absolute; right: -6px; bottom: -4px; padding: 4px 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); font: 800 13px var(--sans); color: var(--text); font-style: normal; opacity: 0; transition: opacity .5s; }
.usd-pile.melt .usd-sn { filter: grayscale(.85) brightness(.75); }
.usd-pile.melt .usd-drop { opacity: 1; }



/* the swap: the pile flies off, one big bill lands under its rate */
.usd-sw { display: flex; flex-direction: column; align-items: center; width: 100%; }
.usd-sw.go .usd-sn { transition: translate .9s cubic-bezier(.5,0,.75,0), opacity .9s; translate: 0 -160px; opacity: 0; }
.usd-sw.go .usd-sn:nth-child(2) { transition-delay: .06s; } .usd-sw.go .usd-sn:nth-child(3) { transition-delay: .12s; }
.usd-sw.go .usd-sn:nth-child(4) { transition-delay: .18s; } .usd-sw.go .usd-sn:nth-child(5) { transition-delay: .24s; }
.usd-sw.go .usd-drop { opacity: 0; }
.usd-got { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 340px; animation: usdLand .6s cubic-bezier(.2,.8,.2,1) both; }
.usd-got b { font: 800 26px var(--sans); color: var(--gold); }
.usd-got img { width: 100%; display: block; border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.usd-sw .usd-drop { display: none; }