/* The Founding 50 page. Loaded only by templates/founding_50.html, after
   ticket.css. The golden ticket is the headline; under it sit the conditions
   of admission, printed like a ticket's fine print, and the register: the
   numbered ledger of every team that has qualified, in qualification order.
   Gold comes from the --gold-* tokens, so it holds in both themes. */
.f50p{ --f50p-w:60rem; padding-block:clamp(1.5rem,4vw,3rem) var(--sec-y); }
.f50p :where(h1, h2, h3, p, ol){ margin:0; }
.f50p__stage{ position:relative; max-width:var(--f50p-w); margin-inline:auto; perspective:1100px; }

/* the small print and the register share one column with the ticket */
.f50p__section{ max-width:var(--f50p-w); margin:clamp(3rem,7vw,5rem) auto 0; }
.f50p__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 1.5rem; padding-bottom:.9rem; border-bottom:3px double var(--gold-line); }
.f50p__head h2{ font:900 clamp(1.6rem,3.4vw,2.3rem)/1 var(--f-sans); font-stretch:112%; letter-spacing:-.01em; text-transform:uppercase; color:var(--text); }
.f50p__head p{ color:var(--text-faint); font-size:.95rem; }

/* Conditions of admission: three numbered clauses, ruled like fine print */
.f50p__terms{ list-style:none; padding:0; counter-reset:clause; }
.f50p__terms li{
  counter-increment:clause; display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 1rem;
  padding-block:1.15rem; border-bottom:1px solid var(--line);
}
.f50p__terms li::before{
  content:counter(clause, decimal-leading-zero); grid-row:span 2;
  font:900 1.9rem/1 var(--f-sans); font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:var(--gold-text);
}
.f50p__terms h3{ font:800 1.12rem/1.25 var(--f-sans); color:var(--text); }
.f50p__terms p{ margin-top:.3rem; color:var(--text-dim); max-width:46rem; }
.f50p__terms a{ color:var(--gold-text); font-weight:700; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--gold-line) 55%, transparent); text-underline-offset:.18em; }
.f50p__terms a:hover{ color:var(--gold-text-hi); text-decoration-color:currentColor; }
.f50p__fine{ margin-top:1rem; color:var(--text-faint); font-size:.9rem; }

/* The register: a ledger, two columns wide on a desktop */
.f50p__ledger{ list-style:none; padding:0; columns:2; column-gap:2.5rem; column-rule:1px solid var(--line); }
.f50p__ledger li{ break-inside:avoid; border-bottom:1px dotted var(--line-strong); }
.f50p__entry{
  display:grid; grid-template-columns:4.6rem minmax(0,1fr); align-items:center; gap:.1rem 1rem;
  padding:.85rem .6rem; color:inherit; text-decoration:none; transition:background-color .2s var(--ease);
}
.f50p__entry:hover{ background:color-mix(in srgb, var(--gold-line) 9%, transparent); text-decoration:none; }
.f50p__entry:focus-visible{ outline:2px solid var(--gold-line); outline-offset:-2px; }
.f50p__no{ grid-row:span 2; display:flex; align-items:baseline; gap:.2em; color:var(--gold-text); font-variant-numeric:tabular-nums; }
.f50p__no small{ font:700 .68rem/1 var(--f-sans); font-stretch:70%; letter-spacing:.16em; text-transform:uppercase; }
.f50p__no b{ font:900 1.75rem/1 var(--f-sans); letter-spacing:-.03em; }
.f50p__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; color:var(--text); }
.f50p__meta{ color:var(--text-faint); font-size:.82rem; font-variant-numeric:tabular-nums; }
.f50p__entry:hover .f50p__name{ color:var(--gold-text-hi); }

/* before anyone qualifies: one open line in the ledger, and the way in */
.f50p__open{
  display:grid; grid-template-columns:4.6rem minmax(0,1fr) auto; align-items:center; gap:.5rem 1rem;
  padding:1.1rem .6rem; border-bottom:1px dotted var(--line-strong);
}
.f50p__open p{ color:var(--text-dim); }
.f50p__open strong{ color:var(--text); }
.f50p__open .btn{ border-color:var(--gold-line); color:var(--gold-text); }
.f50p__open .btn:hover{ background:color-mix(in srgb, var(--gold-line) 12%, transparent); color:var(--gold-text-hi); }

@media (max-width:43.99rem){
  .f50p__ledger{ columns:1; }
  .f50p__terms li{ grid-template-columns:2.6rem minmax(0,1fr); }
  .f50p__terms li::before{ font-size:1.5rem; }
  .f50p__open{ grid-template-columns:4.6rem minmax(0,1fr); }
  .f50p__open .btn{ grid-column:1 / -1; justify-self:start; }
}

/* Entrance: the ticket is dispensed as the page opens (ticket.css has the
   keyframes; the home page plays the same thing on scroll). */
@media (prefers-reduced-motion:no-preference){
  .f50p__stage::before{
    content:""; position:absolute; z-index:2; left:-1.5%; right:-1.5%; top:-3px; height:6px; border-radius:3px;
    background:rgb(var(--shade) / .7); box-shadow:inset 0 2px 2px rgb(var(--shade) / .9), 0 1px 0 var(--line-strong);
    transform:scaleX(0); pointer-events:none; animation:slot-open 2.1s .15s var(--ease) both;
  }
  .f50p__stage .ticket{ animation:ticket-feed 1.35s .47s both; }
  .f50p__stage .ticket::before{ animation:foil-pass 1s 1.85s var(--ease) both; }
}

/* First visit: gold confetti falls once the ticket is out. */
.founding-confetti{ position:fixed; inset:0; z-index:80; overflow:hidden; pointer-events:none; }
.founding-confetti i{
  position:absolute; top:-24px; left:var(--confetti-x); width:9px; height:17px; border-radius:2px;
  background:var(--confetti-colour); box-shadow:0 0 7px rgba(255,212,92,.45);
  animation:founding-confetti-fall var(--confetti-duration) cubic-bezier(.16,.7,.35,1) var(--confetti-delay) both;
}
@keyframes founding-confetti-fall{ from{ opacity:1; } to{ translate:var(--confetti-drift) 110vh; rotate:720deg; opacity:.15; } }
@media (prefers-reduced-motion:reduce){ .founding-confetti{ display:none; } }