/* ============================================================
   01k.dev — COMING SOON
   Same swiss-brutalist ink/bone/vermillion system as the main
   site, with a canvas digital-rain of 0/1 (and rare accent "k")
   behind a hard-bordered card. No glass, no soft gradients.
   ============================================================ */

:root {
  --bg:       #0b0a08;
  --bg-2:     #131110;
  --paper:    #ece6d8;
  --paper-2:  #cfc9ba;
  --muted:    #837c69;
  --accent:   #ff3b14;
  --blue:     #3b54ff;
  --yellow:   #f4b400;
  --green:    #1fae6b;

  --line-2:   #4a4438;
  --bd-strong: 1.6px solid var(--line-2);

  --f-disp: "Bricolage Grotesque", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--paper);
  min-height: 100svh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* film grain, matches main site */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}

.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  background: var(--bg);
  border: var(--bd-strong);
  box-shadow: 10px 10px 0 var(--accent);
  padding: clamp(34px, 6vw, 60px) clamp(26px, 7vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  max-width: min(620px, 92vw);
  animation: rise .7s ease both, breathe 6s ease-in-out 1.2s infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes breathe {
  0%, 100% { box-shadow: 10px 10px 0 var(--accent); transform: translate(0, 0); }
  50%      { box-shadow: 7px 7px 0 var(--accent); transform: translate(-1.5px, -1.5px); }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.logo svg {
  width: clamp(220px, 32vw, 340px);
  height: auto;
  display: block;
  animation: glitch 9s ease-in-out infinite;
}
@keyframes glitch {
  0%, 92%, 100% { transform: translate(0, 0); filter: none; }
  93% { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 var(--blue)) drop-shadow(-2px 0 var(--accent)); }
  94% { transform: translate(2px, -1px); filter: drop-shadow(-2px 0 var(--blue)) drop-shadow(2px 0 var(--accent)); }
  95% { transform: translate(-1px, 0); filter: none; }
  96% { transform: translate(1px, 0); filter: drop-shadow(1px 0 var(--green)); }
  97% { transform: translate(0, 0); filter: none; }
}

.status {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 28px);
  letter-spacing: .12em;
  color: var(--paper);
}
.cursor {
  display: inline-block;
  margin-left: 3px;
  color: var(--accent);
  animation: blink 1s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.tagline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 460px;
}

@media (min-width: 700px) {
  .tagline { white-space: nowrap; }
}

.ftr-mini {
  position: fixed;
  left: 0; right: 0; bottom: 18px;
  z-index: 2;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

::selection { background: var(--accent); color: var(--bg); }

@media (max-width: 420px) {
  .card { gap: 18px; }
  .tagline { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .card { opacity: 1; transform: none; }
}