/* FOUNDING SUPPORTERS. A broadcast end-credits card that recruits. Anton caps heads, the support
   face for names, mono for labels, broadcast-black ground, ONE accent: signal red, spent on the CTA,
   the offer bullets and the tally cursor in the open slot. Layout is editorial and left-weighted
   like the home hero; the roll itself sits on a centre axis like film end credits. Hard cuts only:
   names cut in one by one with a zero-length step, the slot cursor blinks on the brand tally
   (0.9s steps), hovers settle on the broadcast ease in under 300ms. Under reduced motion nothing
   moves. No gradient, no glow, no shadow. Spacing is on the 4/8 ladder. */
.credits {
  position: relative;
  z-index: 1;
  max-width: 1328px;
  margin: 0 auto;
  padding: calc(var(--chrome-h, 48px) + 80px) 48px 112px;
}

/* ---------- hero: headline left, offer plate right ---------- */
.cr-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 64px;
  align-items: end;
}
.cr-kicker {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font: 12px/1.4 var(--mono); letter-spacing: .2em; color: var(--grey);
}
.cr-kicker span + span::before { content: "/"; margin-right: 16px; color: #3a3f48; }
.cr-hero h1 {
  margin-top: 24px;
  font: 400 clamp(56px, 8.6vw, 136px)/.9 "Anton", var(--support);
  letter-spacing: .005em;
  overflow-wrap: anywhere;
}
.cr-line {
  max-width: 520px; margin-top: 32px;
  font: 400 19px/1.5 var(--support); color: #d4d8df;
  text-wrap: pretty;
}
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }
.cr-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px;
  background: var(--red); border: 1px solid var(--red); color: var(--on-red);
  font: 400 20px/1 "Anton", var(--support); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--cut), border-color 200ms var(--cut);
}
.cr-cta:hover { background: #bd0d25; border-color: #bd0d25; }
.cr-cta:active { background: #941124; border-color: #941124; }
.cr-alt {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); text-decoration: none; border-bottom: 1px solid #5e636d;
  transition: border-color 200ms var(--cut);
}
.cr-alt:hover { border-color: var(--white); }
.credits a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.cr-offer { padding: 32px; border: 1px solid var(--line); border-top: 4px solid var(--red); background: #101214; }
.cr-offer-rank { display: flex; justify-content: space-between; gap: 16px; font: 11px/1.4 var(--mono); letter-spacing: .16em; color: #b9bec6; }
.cr-offer-price { margin-top: 16px; font: 400 88px/.9 "Anton", var(--support); font-variant-numeric: tabular-nums; }
.cr-offer h2 { margin-top: 8px; font: 400 28px/1.1 "Anton", var(--support); letter-spacing: .01em; }
.cr-offer-list { list-style: none; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.cr-offer-list li { position: relative; padding: 0 0 8px 20px; font: 400 16px/1.5 var(--support); color: #d4d8df; }
.cr-offer-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--red); }
.cr-offer-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font: 12px/1.6 var(--mono); letter-spacing: .04em; color: #b9bec6; }

/* ---------- the roll: film end credits on a centre axis ---------- */
.roll { margin-top: 128px; text-align: center; }
.roll-bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 12px/1.4 var(--mono); letter-spacing: .18em; color: var(--grey); text-align: left;
}
.roll-count { color: var(--white); font-variant-numeric: tabular-nums; }
.roll-card {
  margin-top: 96px;
  font: 400 clamp(28px, 3.2vw, 44px)/1 "Anton", var(--support); letter-spacing: .04em; color: var(--white);
}
.roll-card::after { content: ""; display: block; width: 72px; height: 4px; margin: 24px auto 0; background: var(--red); }
.roll-state {
  margin: 32px auto 0; max-width: 560px;
  font: 400 18px/1.5 var(--support); color: #d4d8df;
}
.roll-state.is-quiet { font: 12px/1.6 var(--mono); letter-spacing: .14em; color: var(--grey); text-transform: uppercase; }
.roll-names {
  list-style: none;
  max-width: 1040px;
  margin: 56px auto 0;
  columns: 3;
  column-gap: 48px;
}
.roll-names li {
  break-inside: avoid;
  padding: 8px 0;
  font: 600 clamp(20px, 1.9vw, 26px)/1.3 var(--support);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  overflow-wrap: anywhere;
  animation: roll-cut 0s linear both;
  animation-delay: var(--at, 0s);
}
@keyframes roll-cut { from { visibility: hidden; } to { visibility: visible; } }
.roll-names.is-short { columns: 1; }

/* THE OPEN SLOT. The last line of every roll is the one not taken yet: hollow Anton letters with
   the tally blinking where the cursor would be. It is the whole page's empty state on its own, and
   on a full roll it is the next credit. */
.roll-slot {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: fit-content; max-width: 100%;
  margin: 72px auto 0; padding: 32px 48px;
  border: 1px solid #3a3f48;
  color: var(--white); text-decoration: none;
  transition: border-color 200ms var(--cut);
}
.roll-slot-label { font: 12px/1.4 var(--mono); letter-spacing: .2em; color: var(--red-ink); }
.roll-slot-name {
  display: block; text-wrap: balance;
  font: 400 clamp(40px, 5.6vw, 80px)/1 "Anton", var(--support); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--white);
  transition: color 200ms var(--cut);
}
.roll-slot-cursor { display: inline-block; width: .18em; height: .8em; margin-left: .16em; vertical-align: -.04em; background: var(--red); animation: tally .9s steps(2, jump-none) infinite; }
@keyframes tally { 50% { opacity: 0; } }
.roll-slot-sub { font: 400 16px/1.5 var(--support); color: #b9bec6; }
.roll-slot:hover { border-color: var(--white); }
.roll-slot:hover .roll-slot-name { color: var(--white); }
.roll[data-state="loading"] .roll-slot { visibility: hidden; }
/* Empty roll: the slot is the credit. Bigger, and it moves up under the card. */
.roll[data-state="empty"] .roll-slot { margin-top: 48px; padding: 48px 64px; border-color: #5e636d; }
.roll[data-state="empty"] .roll-slot-name { font-size: clamp(48px, 8vw, 120px); }

/* ---------- closing call ---------- */
.cr-close {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: end;
  margin-top: 144px; padding-top: 48px; border-top: 1px solid var(--line);
}
.cr-close h2 { font: 400 clamp(44px, 6vw, 96px)/.92 "Anton", var(--support); letter-spacing: .005em; }
.cr-close-side p { font: 400 17px/1.5 var(--support); color: #d4d8df; }
.cr-close-side .cr-actions { margin-top: 24px; }

@media (max-width: 900px) {
  .credits { padding: calc(var(--chrome-h, 112px) + 48px) 24px 104px; }
  .cr-hero, .cr-close { gap: 32px; }
  .cr-hero h1 { font-size: clamp(56px, 9vw, 80px); }
  .cr-offer { padding: 24px; }
  .cr-offer-price { font-size: 64px; }
  .cr-offer h2 { font-size: 22px; }
  .roll { margin-top: 96px; }
  .roll-names { columns: 2; }
  .cr-close { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 112px; }
}
@media (max-width: 700px) {
  .cr-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 620px) {
  .credits { padding: calc(var(--chrome-h, 112px) + 40px) 16px 96px; }
  .cr-kicker { letter-spacing: .16em; }
  .cr-line { font-size: 17px; margin-top: 24px; }
  .cr-actions { margin-top: 32px; }
  .cr-cta { width: 100%; font-size: 19px; }
  .cr-offer { padding: 24px; }
  .cr-offer-price { font-size: 72px; }
  .roll { margin-top: 80px; }
  .roll-bar { flex-direction: column; gap: 8px; }
  .roll-card { margin-top: 64px; }
  .roll-names { columns: 2; column-gap: 16px; margin-top: 40px; }
  .roll-names li { padding: 6px 0; font-size: 17px; letter-spacing: .04em; }
  .roll-names.is-short { columns: 1; }
  .roll-names.is-short li { font-size: 22px; }
  .roll-slot { width: 100%; padding: 32px 16px; margin-top: 56px; }
  .roll[data-state="empty"] .roll-slot { padding: 40px 16px; }
  .roll-slot-name { font-size: clamp(32px, 10vw, 40px); -webkit-text-stroke-width: 1.25px; }
  .roll[data-state="empty"] .roll-slot-name { font-size: clamp(36px, 11vw, 48px); }
  .cr-close { margin-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .roll-names li { animation: none; }
  .roll-slot-cursor { animation: none; }
  .cr-cta, .cr-alt, .roll-slot, .roll-slot-name { transition: none; }
}