/* The penalties page's 24-month conveyor (data-explainer="pen-conveyor"): each frame is the belt on
   one date, with every point placed by how long it has ridden. Drawn whole by the server; with the
   script, the frames come alive one after another and the points ride and drop. */

.pen-conveyor { margin: 26px 0 36px; container: penconv / inline-size; }
.cv-panel { margin: 0 0 26px; padding: 14px 0 0; border-top: 2px solid var(--ink); }
.cv-title { margin: 0 0 10px; font-family: var(--cond); font-weight: 700; font-size: 20px; line-height: 1.15; max-width: 34em; }
.cv-b .cv-title { color: var(--red); }
.cv-frames, .entry-body .cv-frames { list-style: none; margin: 0; padding: 0; }
.entry-body .cv-frame { margin: 0; }
.cv-frame, .cv-axis-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cv-frame { padding: 10px 0 2px; border-bottom: 1px solid var(--rule); }
.cv-when { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 36em; }
.cv-when b { display: inline-block; min-width: 92px; margin-right: 6px; font-size: 14px; color: var(--ink); }

/* The scale of months above each panel's belts */
.cv-axis { position: relative; height: 18px; margin: 0 14px; font: 12px/1.4 var(--mono); color: var(--ink-3); }
.cv-axis span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.cv-axis span:first-child { transform: translateX(-4px); }
.cv-axis span:last-child { transform: translateX(-100%); color: var(--red); font-weight: 600; }

.pen-conveyor figcaption { margin: 0; max-width: 46em; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* The belt: a band with treads between two rollers. */
.cv-belt { position: relative; height: 78px; margin: 0 14px; }
.cv-tread { position: absolute; left: -8px; right: -8px; top: 34px; height: 14px; border: 2px solid var(--ink); border-radius: 9px; background: repeating-linear-gradient(90deg, var(--mute) 0 1px, transparent 1px 9px) 0 0 / 100% 100%, var(--wash-2); }
.cv-roll { position: absolute; top: 33px; left: -9px; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 2px, var(--card) 2.5px); }
.cv-roll-r { left: auto; right: -9px; }
.cv-stopped .cv-tread { border-color: var(--red); background: repeating-linear-gradient(90deg, rgba(179, 38, 30, .35) 0 1px, transparent 1px 9px), var(--red-wash); }
.cv-brake { position: absolute; right: 18px; top: 58px; padding: 1px 6px; border: 1.5px solid var(--red); font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); background: var(--card); }

/* A point: the card's stamp, small. It sits on the belt by how far it has ridden. */
.cv-disc { position: absolute; z-index: 1; top: 8px; left: var(--a1); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--red); border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--card), inset 0 0 0 2.5px var(--red); color: var(--red); transform: translateX(-50%); }
.cv-disc b { font: 700 13px/1 var(--cond); }
.cv-drop { transform: translate(-50%, 44px) rotate(-28deg); opacity: .5; border-style: dashed; box-shadow: none; }

/* Wide: the words on the left, the belt on the right. */
@container penconv (min-width: 760px) {
	.cv-frame, .cv-axis-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 28px; align-items: center; }
	.cv-axis-row .cv-axis { grid-column: 2; }
	.cv-frame { padding: 4px 0 0; }
}

/* Motion: each frame lights up in turn, its points ride to their places, and those at the end fall off. */
@keyframes cv-lit { from { opacity: .35; } to { opacity: 1; } }
@keyframes cv-ride { from { left: var(--a0); } to { left: var(--a1); } }
@keyframes cv-on { 0% { opacity: 0; transform: translate(-50%, -26px) scale(1.5); } 70% { opacity: 1; transform: translate(-50%, 2px) scale(.95); } 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes cv-fall { 0% { opacity: 1; transform: translateX(-50%); border-style: solid; } 100% { opacity: .5; transform: translate(-50%, 44px) rotate(-28deg); border-style: dashed; } }
@keyframes cv-roll { from { background-position: 0 0, 0 0; } to { background-position: 27px 0, 0 0; } }
.cv-ready .cv-frame { opacity: .35; }
.cv-ready .cv-disc { left: var(--a0); }
.cv-ready .cv-new { opacity: 0; }
.cv-ready .cv-drop { transform: translateX(-50%); opacity: 1; border-style: solid; box-shadow: inset 0 0 0 1.5px var(--card), inset 0 0 0 2.5px var(--red); }
.cv-run .cv-frame { animation: cv-lit 500ms var(--ease) calc(var(--k) * 1500ms) both; }
.cv-run .cv-disc { animation: cv-ride 1000ms var(--ease) calc(var(--k) * 1500ms + 200ms) both; }
.cv-run .cv-new { animation: cv-on 480ms var(--ease) calc(var(--k) * 1500ms + 200ms) both; }
.cv-run .cv-drop { animation: cv-ride 900ms var(--ease) calc(var(--k) * 1500ms + 200ms) both, cv-fall 600ms cubic-bezier(.5, 0, .9, .6) calc(var(--k) * 1500ms + 1100ms) both; }
.cv-run .cv-frame:not(.cv-stopped) .cv-tread { animation: cv-roll 1000ms var(--ease) calc(var(--k) * 1500ms + 200ms) both; }

@media (max-width: 480px) {
	.cv-when b { display: block; min-width: 0; margin: 0 0 2px; }
}
.cv-mo { font-style: normal; }
@container penconv (max-width: 420px) { .cv-mo { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.cv-ready .cv-frame, .cv-ready .cv-new { opacity: 1; }
	.cv-ready .cv-disc { left: var(--a1); }
}