/* LINK — countdown.css
   Styles for the two variants js/countdown.js renders. Both pages already
   define the palette and the two faces; this file only reads them, with the
   brand hex as a fallback so /links (which carries its own :root) and / (which
   reads main.css) agree without either having to change.

   The digits are the same object on both pages — lime Anton on an ink slab,
   skewed, with the headline's pink/cyan split-offset. The variants differ in
   size and in what surrounds them: the hero sits loose in the page, the card
   sits in a box built like /links' own signup box.

   Each variant reserves its height, so the digits appearing is never a shift. */

.cd {
  --cd-ink:var(--ink,#0A0A0C);
  --cd-lime:var(--lime,#B6FF00);
  --cd-pink:var(--pink,#FF2E88);
  --cd-cyan:var(--cyan,#00E5FF);
  --cd-grey:var(--grey,#808090);
  --cd-line:var(--line,#26262E);
  --cd-display:var(--display,'Anton',Impact,sans-serif);
  --cd-mono:var(--mono,'IBM Plex Mono','SFMono-Regular',Menlo,monospace);
  /* The one knob the variants turn. Everything below is sized off it. */
  --cd-size:clamp(40px,9vw,72px);
}

/* The digits are aria-hidden; this carries the same information as a sentence. */
.cd__sr {
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%); border:0;
}

/* ---------- the digits, shared ---------- */

.cd__kicker {
  font-family:var(--cd-mono); font-size:clamp(10px,2.6vw,12px);
  letter-spacing:0.22em; text-transform:uppercase; color:var(--cd-grey);
}
.cd__digits { display:flex; align-items:flex-start; gap:clamp(5px,1.2vw,12px); }
.cd__unit { display:flex; flex-direction:column; align-items:center; gap:clamp(5px,1vw,8px); }

/* Same treatment as .hero__title: lime on an ink slab, skewed, split pink/cyan.
   Offsets are 3px rather than the title's 6px because the digits are a third
   of its size — .foot__word does the same at the same scale. */
.cd__num {
  font-family:var(--cd-display); font-weight:400;
  font-size:var(--cd-size); line-height:0.9; letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
  color:var(--cd-lime); background:var(--cd-ink); padding:0 0.08em;
  transform:var(--skew,skewX(-8deg));
  text-shadow:3px 0 0 var(--cd-pink),-3px 0 0 var(--cd-cyan);
}
.cd__sep {
  font-family:var(--cd-display); font-size:var(--cd-size);
  line-height:0.9; color:var(--cd-grey);
}
.cd__label {
  font-family:var(--cd-mono); font-size:clamp(9px,2.2vw,11px);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--cd-grey);
}

/* T-0, pre-launch still on. */
.cd__zero {
  width:fit-content;
  font-family:var(--cd-display); font-size:clamp(30px,7vw,58px); line-height:0.9;
  letter-spacing:0.02em; text-transform:uppercase;
  color:var(--cd-lime); background:var(--cd-ink); padding:0 0.12em;
  transform:var(--skew,skewX(-8deg));
}

/* ---------- hero variant (/) ---------- */

.cd--hero {
  pointer-events:auto; align-self:flex-start;
  display:flex; flex-direction:column; gap:clamp(8px,1.4vw,12px);
  min-height:clamp(108px,15vw,146px);
}
.cd--hero .cd__zero { align-self:flex-start; }
/* T-0, launched: .btn is main.css's lime CTA, reused as-is. */
.cd--hero .btn { align-self:flex-start; }

/* ---------- card variant (/links) ---------- */

/* Built like that page's signup box, because it is the same kind of object:
   a bordered panel sitting in the 520px column. The column is narrow, so the
   digits are sized off it rather than off the viewport. */
.cd--card {
  --cd-size:clamp(34px,10vw,52px);
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--cd-line); padding:18px;
  background:rgba(19,19,24,.75);
  min-height:clamp(122px,32vw,142px);
  margin-bottom:30px;
}
.cd--card .cd__kicker { font-size:10px; font-weight:600; letter-spacing:0.13em; }
.cd--card .cd__label { font-size:9.5px; font-weight:600; letter-spacing:0.13em; }
.cd--card .cd__zero { font-size:clamp(26px,8vw,38px); }

/* /links has no .btn — it is a page of its own tiles — so the launched state
   gets the lime CTA at card scale here. */
.cd--card .cd__cta {
  align-self:flex-start;
  display:inline-block; text-decoration:none;
  background:var(--cd-lime); color:var(--cd-ink);
  font-family:var(--cd-display); font-size:17px;
  letter-spacing:0.02em; text-transform:uppercase; padding:12px 20px;
}
.cd--card .cd__cta:hover { background:var(--cd-cyan); color:var(--cd-ink); }

/* T-0. The reserved height only ever existed so the digits arriving could not
   move the page; with the timer gone for good it would just be a hole. After
   both variants, so it wins over the min-height each of them sets. */
.cd--done { min-height:0; }

/* Nothing here animates yet. The guard is one line and it means a digit-change
   effect can be added later without having to remember this. */
@media (prefers-reduced-motion:reduce) {
  .cd, .cd * { transition:none !important; animation:none !important; }
}