/*
 * The COLA ribbon (includes/pieces/ribbon.php): a steel machine with a dark slot, a belt of split
 * flaps across its front and round a drum at each end. Every flap's place is worked out here from
 * --p (which flap is in the window) and its own --i: flat along the front run, then wrapped round a
 * drum of radius --r (sin and cos of the arc), turning away and darkening; --pitch is a flap's step,
 * --H half the front run. The drums' caps turn with the belt.
 */

.rb { --pitch: 10.4; --H: 33; --r: 8; --cw: 9.6; --ch: 9.6rem; --pct: 1.5rem; }

/* ---- The readout over the machine ------------------------------------------------------------ */

.rb__read { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 10px 22px; margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--stone-2), inset 4px 0 0 var(--line); }
.rb-read { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rb-read__k { font: 700 .95rem/1.15 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rb-read__v { font: 700 1.6rem/1.1 var(--board-font); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-read--end { justify-self: end; align-items: flex-end; }
.rb-flaps .flaps__cells i { font-size: 1.55rem; color: var(--signal); }
.rb-flaps .flaps__cells i.is-flip b { color: var(--signal); }

/* ---- The machine -------------------------------------------------------------------------------- */

.rb__machine { container-type: inline-size; position: relative; height: calc(var(--ch) + 70px); overflow: hidden; border-radius: 12px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px), linear-gradient(180deg, #dfe3e7 0%, #b6bcc3 55%, #959ba4 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 14px 24px -18px rgba(0, 0, 0, .7);
	perspective: 110cqw; perspective-origin: 50% -30%; }
.rb__machine:active { cursor: grabbing; }
@media (prefers-color-scheme: dark) {
	.rb__machine { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #8e949d 0%, #6a7078 55%, #50555c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .35); }
}
.rb__slot { position: absolute; left: 4cqw; right: 4cqw; top: 30px; height: calc(var(--ch) + 16px); border-radius: 10px; background: linear-gradient(180deg, #08090b, #14161a 50%, #08090b); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .6); }
.rb__belt { position: absolute; left: 50%; top: 38px; width: 0; height: var(--ch); transform-style: preserve-3d; }
.rb .rb__cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }

/* One flap: flat on the front run, wrapped round a drum past it. */
.rb-card {
	--s: calc((var(--i) - var(--p)) * var(--pitch));
	--u: clamp(calc(var(--H) * -1), var(--s), var(--H));
	--a: clamp(-3.1, calc((var(--s) - var(--u)) / var(--r)), 3.1);
	position: absolute; top: 0; left: calc(var(--cw) * -.5cqw); width: calc(var(--cw) * 1cqw); height: var(--ch);
	transform: translate3d(calc((var(--u) + var(--r) * sin(var(--a))) * 1cqw), 0, calc((var(--r) * cos(var(--a)) - var(--r)) * 1cqw)) rotateY(calc(var(--a) * 1rad));
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	border-radius: 6px; color: var(--flap-ink); text-align: center;
	background: linear-gradient(180deg, #30343a 0%, #262a2f 49.3%, #050607 49.3%, #050607 50.7%, #202328 50.7%, #181a1e 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.rb-card > * { opacity: clamp(0, calc(1 - max(var(--a), calc(var(--a) * -1)) * 4), 1); }
.rb-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc((1 - cos(var(--a))) * .9); pointer-events: none; }
.rb-card__when { position: absolute; left: 0; right: 0; top: 10px; font: 700 .95rem/1 var(--board-font); letter-spacing: .02em; color: #c9c4ba; white-space: nowrap; }
.rb-card__pct { position: absolute; left: 0; right: 0; top: 32%; transform: translateY(-50%); font: 700 var(--pct)/1 var(--board-font); color: var(--flap-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-card__bar { position: absolute; left: 34%; right: 34%; top: 56%; height: 24%; border-radius: 2px; background: #050607; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9); }
.rb-card__bar i { position: absolute; left: 0; right: 0; bottom: 0; height: max(1px, calc(var(--t) * 100%)); border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #7fe0aa, #4fc48a 50%, #2f9b65); }
.rb-card__amt { position: absolute; left: 0; right: 0; bottom: 9px; font: 700 .95rem/1 var(--board-font); color: var(--signal); font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 50% 0; }
.rb-card.is-before .rb-card__amt { color: #8f8a80; }
.rb-card.is-before .rb-card__pct { color: #c9c4ba; }
.rb-card.is-now .rb-card__when { color: var(--signal); }
.rb-card.is-fold .rb-card__amt { animation: rb-fold .34s ease-out var(--fd, 0ms) both; }
@keyframes rb-fold { from { transform: perspective(120px) rotateX(-92deg); } to { transform: perspective(120px) rotateX(0); } }

/* The drums: eighteen lit facets round an upright axis, and a cap that turns with the belt. */
.rb-drum { position: absolute; left: 0; top: -8px; width: 0; height: calc(var(--ch) + 16px); transform-style: preserve-3d; }
.rb-drum--l { transform: translate3d(calc(var(--H) * -1cqw), 0, calc(var(--r) * -1cqw)); }
.rb-drum--r { transform: translate3d(calc(var(--H) * 1cqw), 0, calc(var(--r) * -1cqw)); }
.rb-drum__body { position: absolute; inset: 0; transform-style: preserve-3d; }
.rb-drum__body i { position: absolute; top: 0; bottom: 0; left: calc((var(--r) - .3) * -.1763cqw - .5px); width: calc((var(--r) - .3) * .3527cqw + 1px); transform: rotateY(calc(var(--k) * 1deg)) translateZ(calc((var(--r) - .3) * 1cqw)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
	background: linear-gradient(180deg, #2a2d31 0 4px, var(--c) 4px calc(100% - 4px), #2a2d31 calc(100% - 4px)); }
.rb-drum__cap { position: absolute; left: calc((var(--r) + .5) * -1cqw); top: calc((var(--r) + .5) * -1cqw); width: calc((var(--r) + .5) * 2cqw); height: calc((var(--r) + .5) * 2cqw); border-radius: 50%;
	transform: rotateX(90deg) rotateZ(calc(var(--p) * var(--pitch) / var(--r) * -1rad));
	background: radial-gradient(circle, #f1f3f5 0 9%, #5d636b 10% 13%, transparent 14%), conic-gradient(from 0deg, #c4c9cf, #eef0f2 12%, #9aa1aa 25%, #d6dade 40%, #8e949d 55%, #e3e6ea 70%, #a9afb6 85%, #c4c9cf);
	box-shadow: inset 0 0 0 .5cqw #6f767e; }
.rb-drum__cap::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 50% 0, #2a2d31 0 7%, transparent 8%), radial-gradient(circle at 100% 50%, #2a2d31 0 7%, transparent 8%), radial-gradient(circle at 50% 100%, #2a2d31 0 7%, transparent 8%), radial-gradient(circle at 0 50%, #2a2d31 0 7%, transparent 8%); }

/* The window: a brass bezel round the flap of the first increase. */
.rb__window { position: absolute; left: 50%; top: 31px; width: calc(var(--cw) * 1cqw + 14px); height: calc(var(--ch) + 14px); transform: translateX(-50%); border: 4px solid #c99a3e; border-radius: 10px; box-shadow: 0 0 0 1px #5c3f0c, inset 0 0 0 1px #5c3f0c, 0 4px 8px rgba(0, 0, 0, .45); pointer-events: none; }
.rb__window-k { position: absolute; left: 50%; top: -29px; transform: translateX(-50%); padding: 3px 8px 2px; border-radius: 4px; background: var(--board); color: var(--signal); font: 700 .95rem/1.1 var(--board-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

/* Without the 3D sums (older browsers): a flat strip to scroll sideways. */
@supports not (width: calc(sin(1) * 1px)) {
	.rb__machine { overflow-x: auto; perspective: none; }
	.rb__belt { position: relative; left: 0; width: max-content; }
	.rb__cards { position: relative; display: flex; gap: 6px; padding: 0 12px; }
	.rb-card { position: relative; left: 0; transform: none; flex: 0 0 auto; width: 76px; }
	.rb-card::after, .rb-drum, .rb__window { display: none; }
}

/* ---- Controls ---------------------------------------------------------------------------------- */

.rb__ctrl { margin-top: 14px; }
.js .rb .rb__ctrl { display: grid; gap: 12px; }
.rb-roll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.rb-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; min-width: 0; }
.rb-range .p-range { grid-column: 1 / -1; --line: #11865a; }
.rb-range__k { font: 700 .95rem/1.2 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rb-range__v { font: 700 1.4rem/1 var(--board-font); color: var(--ink); font-variant-numeric: tabular-nums; }
.rb .rb__say { margin: 14px 0 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }

@media (max-width: 599px) {
	.rb { --pitch: 20.5; --H: 30; --r: 12; --cw: 19.4; --ch: 9.2rem; --pct: 1.3rem; }
	.rb__read { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 12px; }
	.rb-read--end { grid-column: 1 / -1; justify-self: start; align-items: flex-start; }
	.rb-read__v { font-size: 1.35rem; }
	.rb-flaps .flaps__cells i { font-size: 1.4rem; }
	.rb-roll { grid-template-columns: 1fr 1fr; }
	.rb-roll .rb-range { grid-column: 1 / -1; grid-row: 1; }
	.rb-roll .p-btn { justify-self: stretch; }
}
@media (max-width: 359px) {
	.rb-read__v { font-size: 1.2rem; }
}
/* On the narrowest phones: three wider flaps in view. */
@container (max-width: 340px) {
	.rb__belt, .rb__window { --pitch: 26.5; --H: 30; --r: 13; --cw: 25; }
}
@media (prefers-reduced-motion: reduce) {
	.rb-card.is-fold .rb-card__amt { animation: none; }
}