/* Teeny Core Linux — release countdown */

:root {
  --bg: #0b0f0c;
  --card: #121a15;
  --line: #1f2c24;
  --ink: #e8f3ec;
  --muted: #7f938a;
  --green: #5ee08a;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* An author-level `display` (.grid, .btn) beats the UA stylesheet's
   `[hidden] { display: none }`, which would leave the countdown and the ISO
   button on screen after the release. Force it. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* faint spotlight behind the numbers */
.glow {
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 70vh;
  background: radial-gradient(60% 60% at 50% 40%, rgba(94, 224, 138, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 5rem) 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Nothing anchors the bottom of the page any more, so centre the content.
     `safe` keeps it from being clipped on short viewports; in a browser that
     doesn't understand it the declaration is dropped and we fall back to the
     top-aligned layout. */
  justify-content: safe center;
}

/* ---------- header ---------- */

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 7.5vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}

.cursor {
  color: var(--green);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.when {
  margin: 1rem 0 0;
  color: var(--ink);
  font-size: 1.05rem;
}

.sep { margin: 0 .5rem; color: var(--line); }
.muted { color: var(--muted); }

/* ---------- countdown ---------- */

.grid {
  margin: clamp(2rem, 6vw, 3.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 1rem);
}

.unit {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(.9rem, 3vw, 1.5rem) .5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.num {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 11vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
}

.lbl {
  display: block;
  margin-top: .5rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the seconds card gets the accent + a tick flash */
.unit[data-unit="seconds"] { border-color: rgba(94, 224, 138, .35); }
.unit[data-unit="seconds"] .num { color: var(--green); }

.unit.tick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(94, 224, 138, .12);
  animation: flash .45s ease-out forwards;
}

@keyframes flash { to { opacity: 0; } }

.num.roll { animation: roll .32s ease-out; }

@keyframes roll {
  /* Start well clear of transparent: a deep fade here dips the number's
     contrast for the length of the animation, once a second. */
  0%   { transform: translateY(-.14em); opacity: .72; }
  100% { transform: none; opacity: 1; }
}

/* ---------- live state ---------- */

.live {
  margin: clamp(2rem, 6vw, 3.5rem) 0 0;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid rgba(94, 224, 138, .35);
  border-radius: 14px;
}

.live h2 { margin: 0 0 .5rem; font-size: 1.6rem; color: var(--green); }
.live p { margin: .5rem 0 0; }
.cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem !important; }

.btn {
  display: inline-block;
  background: var(--green);
  color: #06210f;
  font-weight: 600;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border-radius: 8px;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn:hover { filter: brightness(1.08); }

code { background: #18221c; padding: .1em .35em; border-radius: 4px; font-family: var(--mono); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.noscript {
  position: relative;
  z-index: 1;
  margin: 0 auto 2rem;
  max-width: 52rem;
  padding: 1rem 1.25rem;
  color: var(--ink);
}

/* ---------- narrow screens ---------- */

@media (max-width: 30rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .sep { display: block; height: 0; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; }
}