/* RosterAtlas holding page. Tokens and the hero, glass and marquee rules mirror app/site.css (Rebrand v2), standalone. */
:root{
  --bg:#0A0A0B;--bg-2:#121214;--bg-3:#1A1A1D;--line:#26262A;
  --fg:#ECE7DC;--muted:#A29D93;
  --acc:#C8F23A;--on-acc:#0A0A0B;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --glass:rgba(236,231,220,.045);--glass-line:rgba(236,231,220,.09);--glass-hi:inset 0 1px 0 rgba(236,231,220,.07);
  --glass-hdr:rgba(20,20,22,.52);--blur:blur(20px) saturate(1.3);
  --glow-a:color-mix(in srgb,var(--acc) 16%,transparent);--glow-b:rgba(255,122,92,.10);--glow-c:rgba(236,231,220,.06);
  --max:1240px;--pad:48px;
  color-scheme:dark;
}
@media(max-width:1099px){:root{--pad:32px}}
@media(max-width:719px){:root{--pad:20px}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--acc);color:var(--on-acc)}
h1,p{margin:0}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cap{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.glass{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-hi);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}

/* — ambient glows: as on the site, plus a slow drift — */
@keyframes rx-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,3vh) scale(1.08)}}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient>span{position:absolute;border-radius:50%;animation:rx-drift 22s ease-in-out infinite}
.ambient>span:nth-child(1){width:62vw;height:62vw;left:-18vw;top:-24vw;background:radial-gradient(closest-side,var(--glow-a),transparent);filter:blur(40px)}
.ambient>span:nth-child(2){width:52vw;height:52vw;right:-16vw;top:30vh;background:radial-gradient(closest-side,var(--glow-b),transparent);filter:blur(50px);animation-duration:28s;animation-direction:reverse}
.ambient>span:nth-child(3){width:44vw;height:44vw;left:24vw;bottom:-22vw;background:radial-gradient(closest-side,var(--glow-c),transparent);filter:blur(40px);animation-duration:34s}
.topbar,main{position:relative;z-index:1}
main{flex:1;display:flex;flex-direction:column}

/* — header pill — */
.topbar{padding:12px 16px 0}
.topbar-inner{max-width:calc(var(--max) - 32px);margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 20px;
  border-radius:999px;background:var(--glass-hdr);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),0 18px 40px -24px rgba(0,0,0,.7);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{display:block;height:21px;width:auto}
.brand-word{font-weight:700;font-size:17px;letter-spacing:-.04em;line-height:1}
.status{display:inline-flex;align-items:center;gap:10px;color:var(--fg)}
@keyframes rx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:rx-pulse 1.8s ease-in-out infinite;box-shadow:0 0 12px var(--acc)}

/* — hero — */
@keyframes rx-rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.hero{width:100%;max-width:var(--max);margin:0 auto;padding:72px var(--pad) 88px}
.hero-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;padding-bottom:64px;animation:rx-rise .8s ease-out both}
.hero-meta>:last-child{text-align:right;color:var(--fg)}
.hero-meta .dot{color:var(--acc)}
.hero h1{font-size:clamp(42px,8.5vw,124px);font-weight:600;line-height:.9;letter-spacing:-.06em;text-wrap:balance}
.hero h1>span{display:block;animation:rx-rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1>span:nth-child(2){animation-delay:.12s}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--acc)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:32px;align-items:end;margin-top:56px}
.hero-lead{max-width:440px;font-size:17px;line-height:1.5;color:var(--muted);text-wrap:pretty;animation:rx-rise .9s .24s ease-out both}

/* — countdown — */
.count{justify-self:end;width:100%;max-width:640px;padding:22px 26px 24px;border-radius:24px;animation:rx-rise .9s .36s ease-out both}
.count-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}
.count-head .mono{color:var(--fg)}
.count-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:8px}
.unit{display:grid;justify-items:center;gap:10px}
.digits{display:flex;gap:4px}
.digit{position:relative;width:.62em;height:1.12em;overflow:hidden;font-size:clamp(40px,5.4vw,72px);font-weight:600;letter-spacing:-.04em;line-height:1.12;
  font-variant-numeric:tabular-nums;text-align:center;border-radius:10px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(236,231,220,.06)}
/* A hairline across the middle, like a split-flap card. */
.digit::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(10,10,11,.7)}
.digit>span{position:absolute;inset:0;display:block}
@keyframes rx-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes rx-out{from{transform:none;opacity:1}to{transform:translateY(-100%);opacity:0}}
.digit>span.in{animation:rx-in .5s cubic-bezier(.2,.8,.2,1) both}
.digit>span.out{animation:rx-out .5s cubic-bezier(.2,.8,.2,1) both}
.unit:last-child .digit{color:var(--acc)}
.sep{font-size:clamp(28px,3.6vw,48px);font-weight:500;line-height:2.1;color:var(--muted);animation:rx-pulse 2s ease-in-out infinite}
.progress{margin-top:22px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.progress>span{display:block;height:100%;width:0;background:var(--acc);box-shadow:0 0 12px var(--acc);transition:width 1s linear}
.count.done .count-grid{opacity:.4}

/* — marquee: same band as the home page — */
@keyframes rx-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;margin-top:auto}
.marquee-track{display:flex;width:max-content;gap:clamp(18px,3vw,48px);white-space:nowrap;animation:rx-marq 60s linear infinite}
.marquee-track>span{display:inline-flex;align-items:center;gap:clamp(18px,3vw,48px);font-size:clamp(32px,5vw,76px);font-weight:600;letter-spacing:-.05em;line-height:1}
.marquee-track>span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--muted)}
.marquee-track>span:nth-child(4n+3){font-family:var(--serif);font-style:italic;font-weight:400}
.marquee-track i{font-style:normal;font-size:.45em;color:var(--acc);-webkit-text-stroke:0}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;max-width:var(--max);margin:0 auto;padding:22px var(--pad) 28px}

@media(max-width:1099px){.hero-row{grid-template-columns:minmax(0,1fr)}.count{justify-self:start}}
@media(max-width:719px){
  .hero{padding:40px var(--pad) 56px}
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:36px}
  .hero-meta>:nth-child(2),.hero-meta>:nth-child(3){display:none}
  .hero h1{font-size:max(50px,14vw)}
  .hero-row{margin-top:32px}
  .hero-lead{font-size:16px}
  .count{padding:18px 16px 20px;border-radius:20px}
  .count-grid{gap:4px}
  .digits{gap:3px}
  .digit{font-size:clamp(28px,9vw,44px);border-radius:7px}
  .sep{font-size:22px}
  .marquee{padding:14px 0}
  .foot{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}