/* Line Item, second layer: the pictures (generated miniatures) and the motion.
   Loaded after styles.css and overrides it where the two meet. */

/* ---------- hero: a horizon the things stand on, and a field that rises ---------- */
.hero { --seam: 50svh; }
.hero-top { height: max(0px, calc(var(--seam) - var(--lift, 0px))); }
.hero-title { top: var(--seam); z-index: 2; }
.copy-a { clip-path: inset(-10% -10% calc(34% + var(--lift, 0px)) -10%); }
.copy-b { clip-path: inset(calc(66% - var(--lift, 0px)) -10% -10% -10%); }
.hero-item { position: absolute; z-index: 1; top: calc(var(--seam) - var(--lift, 0px)); width: clamp(7rem, 19vw, 19rem); height: auto; pointer-events: none; }
.hi-left { left: var(--margin); transform: translateY(-98%); }
.hi-right { right: var(--margin); transform: translateY(-98%) scaleX(-1); }
@media (max-width: 47.99em) {
  .hero { --seam: 46svh; }
  .hero-item { width: 26vw; }
  .hi-left { left: -10vw; }
  .hi-right { right: -10vw; }
}

/* ---------- what it buys: one big picture, and a picture per row once the set is whole ---------- */
.went { overflow: clip; }
.went-grid { align-items: start; grid-template-rows: auto 1fr; row-gap: 2.5rem; }
.went-pic { grid-column: 1 / span 5; grid-row: 1; width: min(100%, 32rem); height: auto; }
.went-say { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
.ledger { grid-row: 1 / span 2; align-self: center; }
.went-note { margin-top: 1rem; }
.cap-who { display: block; }
.ledger.has-pics .lrow { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 2fr); align-items: center; }
.lpic { padding-right: 1rem; }
.lpic img { width: 100%; height: auto; }
@media (max-width: 63.99em) {
  .went-pic, .went-say, .ledger { grid-column: 1 / -1; grid-row: auto; }
  .went-pic { width: min(82%, 26rem); }
}

/* ---------- now move it: the coins beside the instruction, and a coin that flies ---------- */
.move-side { grid-column: 7 / span 6; display: flex; align-items: flex-end; gap: clamp(1rem, 2.5vw, 2.25rem); }
.move-coins { flex: none; width: clamp(6.5rem, 12vw, 11rem); height: auto; }
.move-side .move-lead { max-width: 24ch; }
#pool-amt { display: inline-block; min-width: 2.2em; }
.coin { position: fixed; z-index: 30; width: 20px; height: 20px; border-radius: 50%; background: #ecc45c; border: 3px solid #c99a2e; pointer-events: none; }
@media (max-width: 63.99em) {
  .move-side { grid-column: 1 / -1; }
}

/* ---------- council: a short street, two panels, one door to the dashboard ---------- */
.council { overflow: clip; }
.council-open { padding-bottom: 0; }
.council-say .button { margin-top: 1.75rem; }
.street { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 3vw; margin: clamp(3rem, 7vw, 6.5rem) calc(var(--margin) * -1) 0; padding: 0 7vw; }
.street::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: #5d1748; }
.st { position: relative; z-index: 1; height: auto; margin-bottom: 2.4%; }
.st-1 { width: 22%; }
.st-2 { width: 25%; }
.st-3 { width: 31%; }
.council-panels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--gutter); align-items: start; margin-top: var(--gutter); }
.council-panels .panel-a { grid-column: 1 / span 7; }
.council-panels .panel-b { grid-column: 8 / span 5; }
@media (max-width: 63.99em) {
  .council-panels .panel-a, .council-panels .panel-b { grid-column: 1 / -1; }
  .street { padding: 0 4vw; gap: 2vw; }
  .st-1 { width: 27%; }
  .st-2 { width: 30%; }
  .st-3 { width: 37%; }
}

/* ---------- the closing question and the footer parade ---------- */
.ask { overflow: clip; }
@media (max-width: 47.99em) {
  .ask-q span { font-size: 15vw; }
}
.parade { overflow: hidden; margin-top: 3rem; }
.parade-track { display: flex; align-items: flex-end; width: max-content; gap: clamp(3rem, 9vw, 9rem); padding-right: clamp(3rem, 9vw, 9rem); }
.parade-track img { flex: none; width: auto; height: clamp(2.75rem, 6.2vw, 5.75rem); }
.foot-name { margin-top: 0; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero: the cast drives in along the horizon once the field has risen */
  .js .hero-item { transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
  .js .hi-right { transition-delay: 140ms; }
  .js .hero:not(.is-in) .hi-left { transform: translate(calc(-100% - 5rem), -98%); }
  .js .hero:not(.is-in) .hi-right { transform: translate(calc(100% + 5rem), -98%) scaleX(-1); }

  /* headings and blocks rise a little further than before */
  .js [data-reveal] { transform: translateY(40px); }
  .js [data-reveal].is-in { transform: none; }

  /* the pay bar draws itself, segment after segment */
  .js .paybar .seg { transition: flex-grow 500ms var(--ease-out), clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n, 0) * 130ms); clip-path: inset(0 0 0 0); }
  .js .paybar:not(.is-in) .seg { clip-path: inset(0 100% 0 0); }
  .js .payclause { transition: flex-grow 500ms var(--ease-out), opacity 600ms ease calc(350ms + var(--n, 0) * 130ms), transform 700ms var(--ease-out) calc(350ms + var(--n, 0) * 130ms); }
  .js .payclauses:not(.is-in) .payclause { opacity: 0; transform: translateY(14px); }

  /* the school bus arrives; the figures count up row by row */
  .js .went-pic { transition: transform 1500ms cubic-bezier(0.16, 1, 0.3, 1); }
  .js .went-grid:not(.is-in) .went-pic { transform: translateX(-70vw); }
  .js .ledger .lrow { transition: opacity 600ms ease calc(var(--n, 0) * 90ms), transform 800ms var(--ease-out) calc(var(--n, 0) * 90ms); }
  .js .ledger:not(.is-in) .lrow { opacity: 0; transform: translateY(22px); }

  /* the coins settle; lines step in when the government changes */
  .js .move-coins { transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease; }
  .js .move-side:not(.is-in) .move-coins { transform: translateY(46px) scale(0.92); opacity: 0; }
  .lines.swap-in .line { animation: line-in 440ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 28ms); }

  /* the convoy pulls up outside the council; then the bars grow out from zero */
  .js .st { transition: transform 1700ms cubic-bezier(0.16, 1, 0.3, 1); }
  .js .st-2 { transition-delay: 160ms; }
  .js .st-1 { transition-delay: 320ms; }
  .js .street:not(.is-in) .st { transform: translateX(-115vw); }
  .rank-fill { transition: width 800ms var(--ease-out) calc(var(--n, 0) * 45ms), left 500ms var(--ease-out); }
  .js .panel:not(.is-in) .rank-fill { width: 0 !important; }
  .swap-row { transition: opacity 500ms ease calc(var(--n, 0) * 90ms), transform 700ms var(--ease-out) calc(var(--n, 0) * 90ms); }
  .js .panel:not(.is-in) .swap-row { opacity: 0; transform: translateX(-18px); }

  /* the question closes in from both edges; the name rises; the parade drives only while the reader scrolls */
  .js .ask-l1 { transform: translateX(calc((1 - var(--p, 1)) * -24vw)); will-change: transform; }
  .js .ask-l2 { transform: translateX(calc((1 - var(--p, 1)) * 24vw)); will-change: transform; }
  .js .foot-name { transform: translateY(calc((1 - var(--p, 1)) * 28%)); will-change: transform; }
  .js .parade-track { transform: translateX(calc((var(--p, 1) - 1) * 38%)); will-change: transform; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 47.99em) {
  .js .paybar:not(.is-in) .seg { clip-path: inset(0 0 100% 0); }
}
@keyframes line-in { from { opacity: 0; transform: translateY(14px); } }