/* "Tava casierului" (includes/stories/tava-casierului.php): an employer's budget sorted, in bundles
   of 1.000 lei, into the compartments of a cashier's birch tray. Each bundle is shown or hidden by
   its state (--o0 … --o6); each compartment's loose notes are lifted and thickened by theirs
   (--l0 … --l6, --s0 … --s6). data-state (the kit's) picks them here. */

.story--tava {
	--tc-in: var(--acc); --tc-net: var(--acc); --tc-cas: var(--cas); --tc-cass: var(--cass); --tc-tax: var(--tax); --tc-cam: var(--brown); --tc-vouch: var(--green);
	--tc-tcas: color-mix(in srgb, var(--brown) 74%, #e8c9a4); --tc-tcass: color-mix(in srgb, var(--brown) 50%, #e8c9a4);
	/* Pale birch, a slate felt, the paper of the bands. */
	--tc-wood: #d9c095; --tc-wood-lit: #e8d4ae; --tc-wood-top: #f1e4c8; --tc-wood-end: #b99a69; --tc-wood-in: #ccb084; --tc-wood-side: #b4936a; --tc-grain: #b0905f;
	--tc-felt: #4b5059; --tc-ao: rgba(10, 12, 16, .34); --tc-cast: #3a2f20;
	--tc-band: #f4eddc; --tc-band-edge: #a99c80; --tc-rubber: #8a4a2a;
}
@media (prefers-color-scheme: dark) {
	.story--tava {
		--tc-tcas: color-mix(in srgb, var(--brown) 70%, #6b4226); --tc-tcass: color-mix(in srgb, var(--brown) 46%, #6b4226);
		--tc-wood: #8f7a56; --tc-wood-lit: #a38c64; --tc-wood-top: #b9a37b; --tc-wood-end: #6e5b3d; --tc-wood-in: #84704f; --tc-wood-side: #6a5839; --tc-grain: #6d5a3b;
		--tc-felt: #23272e; --tc-ao: rgba(0, 0, 0, .45); --tc-cast: #000;
		--tc-band: #d8cfbb; --tc-band-edge: #8f8570; --tc-rubber: #c27a52;
	}
}

/* The notes: each compartment's colour, a lit top, the face in front, the side away from the light. */
.tc .tc-s--in { --c: var(--tc-in); } .tc .tc-s--net { --c: var(--tc-net); } .tc .tc-s--cas { --c: var(--tc-cas); } .tc .tc-s--cass { --c: var(--tc-cass); }
.tc .tc-s--tax { --c: var(--tc-tax); } .tc .tc-s--cam { --c: var(--tc-cam); } .tc .tc-s--vouch { --c: var(--tc-vouch); }
.tc .tc-s--tcas { --c: var(--tc-tcas); } .tc .tc-s--tcass { --c: var(--tc-tcass); }
.tc .tc-f { fill: var(--c); }
.tc .tc-r { fill: color-mix(in srgb, var(--c) 64%, #000); }
.tc .tc-t { fill: color-mix(in srgb, var(--c) 56%, #fff); }
.tc .tc-note { fill: color-mix(in srgb, var(--c) 48%, #fff); stroke: color-mix(in srgb, var(--c) 72%, #000); stroke-width: .5; stroke-opacity: .45; }
.tc .tc-fr { fill: none; stroke: color-mix(in srgb, var(--c) 78%, #fff); stroke-width: .8; }
.tc .tc-edge { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: .9; stroke-linejoin: round; }
.tc .tc-seam { fill: none; stroke: color-mix(in srgb, var(--c) 45%, #000); stroke-width: .9; stroke-opacity: .7; stroke-linejoin: round; }
.tc .tc-pl1 { fill: #000; fill-opacity: .17; }
.tc .tc-pl2 { fill: #fff; fill-opacity: .16; }
.tc .tc-ll { fill: none; stroke-width: .6; stroke-linejoin: round; }
.tc .tc-ll--1 { stroke: #000; stroke-opacity: .17; }
.tc .tc-ll--0 { stroke: #fff; stroke-opacity: .16; }
/* In the dark the site's colours are pale tints; the notes take them deeper, so the light still models them. */
@media (prefers-color-scheme: dark) {
	.tc .tc-f { fill: color-mix(in srgb, var(--c) 74%, #000); }
	.tc .tc-r { fill: color-mix(in srgb, var(--c) 44%, #000); }
	.tc .tc-t { fill: color-mix(in srgb, var(--c) 92%, #fff); }
	.tc .tc-note { fill: color-mix(in srgb, var(--c) 86%, #fff); }
	.tc .tc-fr { stroke: color-mix(in srgb, var(--c) 62%, #000); stroke-opacity: .55; }
	.tc .tc-pl2, .tc .tc-ll--0 { fill-opacity: .1; stroke-opacity: .1; }
	.tc .tc-pl1 { fill-opacity: .24; } .tc .tc-ll--1 { stroke-opacity: .24; }
	.tc .tc-edge { stroke-opacity: .45; }
}
.tc .tc-band { fill: var(--tc-band); stroke: var(--tc-band-edge); stroke-width: .6; }
.tc .tc-band--t { fill: color-mix(in srgb, var(--tc-band) 80%, #fff); }
.tc .tc-slip { fill: none; stroke: color-mix(in srgb, var(--c) 40%, #fff); stroke-width: .6; stroke-opacity: .85; }
.tc .tc-perf { fill: none; stroke: color-mix(in srgb, var(--c) 55%, #000); stroke-width: .9; stroke-dasharray: 1.4 1.6; }
.tc .tc-rubber { fill: none; stroke: var(--tc-rubber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st--s.tc .tc-rubber { stroke-width: 1.2; }

/* The tray. */
.tc .tc-cast { fill: var(--tc-cast); fill-opacity: .26; }
.tc .tc-lit0 { stop-color: var(--tc-wood-lit); }
.tc .tc-lit1 { stop-color: var(--tc-wood); }
.tc .tc-w-front { stroke: color-mix(in srgb, var(--tc-wood-end) 70%, #000); stroke-width: .6; stroke-opacity: .5; }
.tc .tc-w-top { fill: var(--tc-wood-top); stroke: var(--tc-wood-end); stroke-width: .5; stroke-opacity: .7; }
.tc .tc-w-in { fill: var(--tc-wood-in); }
.tc .tc-w-side { fill: var(--tc-wood-side); }
.tc .tc-w-end { fill: var(--tc-wood-end); }
.tc .tc-w-lip { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 1; stroke-linejoin: round; }
.tc .tc-grain { fill: none; stroke: var(--tc-grain); stroke-width: .7; stroke-opacity: .6; }
.tc .tc-felt { fill: var(--tc-felt); }
.tc .tc-ao { fill: var(--tc-ao); }

/* Words: the compartments' names and amounts, the two groups, the readout, the key, the notes. */
.tc .tc-name { font: 700 14px var(--sans); fill: var(--ink); }
.tc .tc-amt { font: 500 14px var(--mono); fill: var(--ink); }
.tc .tc-grp { font: 650 11.5px var(--sans); fill: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.tc .tc-grp__v { font: 500 13.5px var(--mono); letter-spacing: 0; text-transform: none; fill: var(--ink); }
.tc .tc-brk { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-linejoin: round; }
.tc .tc-big { font-size: 38px; }
.tc .tc-what { font-size: 14.5px; }
.tc .tc-keyt { font: 500 13px var(--sans); fill: var(--ink-2); }
.tc .tc-eq { font: 500 14px var(--sans); fill: var(--ink-2); }
.tc .tc-eq__v { font: 500 14px var(--mono); fill: var(--ink); }
/* The back row's labels, on their stacks; written over the paper so a stack behind never shows through. */
.tc .tc-tagt { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.tc .tc-tag__n { font: 700 14px var(--sans); fill: var(--ink); }
.tc .tc-tag__v { font: 500 14px var(--mono); fill: var(--ink); }
.tc .tc-tag-live { display: none; }
.story--tava.is-scrub .tc-tag-live { display: inline; }
.tc .st-note { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.st--s.tc .tc-name { font-size: 11.5px; letter-spacing: -.005em; }
.st--s.tc .tc-amt { font-size: 12px; }
.st--s.tc .tc-grp { font-size: 10.5px; letter-spacing: .05em; }
.st--s.tc .tc-grp__v { font-size: 11.5px; }
.st--s.tc .tc-big { font-size: 27px; }
.st--s.tc .tc-what { font-size: 12.5px; }
.st--s.tc .tc-keyt { font-size: 12px; }
.st--s.tc .tc-eq, .st--s.tc .tc-eq__v { font-size: 12.5px; }
.st--s.tc .tc-tag__n, .st--s.tc .tc-tag__v { font-size: 12px; }
.st--s.tc .st-note { font-size: 17px; }

/* The states: which bundles are there, how high and thick the loose notes lie. */
.tc .tc-v { --o: var(--o6); --lift: var(--l6); --hs: var(--s6); opacity: var(--o); }
.story--tava[data-state="0"] .tc-v { --o: var(--o0); --lift: var(--l0); --hs: var(--s0); }
.story--tava[data-state="1"] .tc-v { --o: var(--o1); --lift: var(--l1); --hs: var(--s1); }
.story--tava[data-state="2"] .tc-v { --o: var(--o2); --lift: var(--l2); --hs: var(--s2); }
.story--tava[data-state="3"] .tc-v { --o: var(--o3); --lift: var(--l3); --hs: var(--s3); }
.story--tava[data-state="4"] .tc-v { --o: var(--o4); --lift: var(--l4); --hs: var(--s4); }
.story--tava[data-state="5"] .tc-v { --o: var(--o5); --lift: var(--l5); --hs: var(--s5); }
/* A bundle not there waits a little above its place, so it drops in when it comes. */
.tc .tc-bun { transform: translateY(calc((1 - var(--o)) * -16px)); }
.tc .tc-m { transform-box: view-box; transform-origin: 0 0; }
.tc .tc-lid { transform: translateY(calc((var(--lift) + var(--hs)) * -1px)); }
.tc .tc-up { transition: opacity .45s ease; }

/* Moving between steps. */
.scrolly.is-live .story--tava .tc-bun { transition: opacity .35s ease, transform .6s cubic-bezier(.3, .9, .3, 1); transition-delay: calc(var(--j, 0) * 70ms); }
.scrolly.is-live .story--tava .tc-lo, .scrolly.is-live .story--tava .tc-ao, .scrolly.is-live .story--tava .tc-tag, .scrolly.is-live .story--tava .tc-in .tc-cast { transition: opacity .4s ease; }
.scrolly.is-live .story--tava .tc-m { transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.story--tava.is-scrub .tc-in, .story--tava.is-scrub .tc-st, .story--tava.is-scrub .tc-up { opacity: 0; }
.story--tava.is-scrub .tc .pencil, .story--tava.is-scrub .tc .st-note-g { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.scrolly.is-live .story--tava.is-scrub .tc-bun { transition: opacity .15s ease, transform .25s ease; transition-delay: 0s; }
	.scrolly.is-live .story--tava.is-scrub .tc-m { transition-duration: .2s; }
}
@media (prefers-reduced-motion: reduce) { .story--tava * { transition-duration: 0s !important; transition-delay: 0s !important; } }

/* The slider (only with script). */
.tc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.tc-ctl[hidden] { display: none; }
.tc-ctl__l { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.tc-ctl__o { font: 600 15px var(--mono); color: var(--ink); }
.tc-ctl.is-idle .tc-ctl__o { font: 500 13.5px var(--sans); color: var(--ink-3); }
.tc-ctl__r { flex: 1 1 120px; min-width: 0; accent-color: var(--acc); height: 28px; margin: 0; }