/* Signed-out landing page layout. Tokens, fonts, the dot field and form
   controls come from app.css (loaded first). */

body.landing {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Corner labels, like a HUD. */
.corner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px clamp(20px, 3vw, 40px);
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.corner a { color: var(--muted); text-decoration: none; }
.corner a:hover, .corner a:focus-visible { color: var(--fg); }
.corner .brand { color: var(--muted); }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  padding: 2vh 20px 7vh;
}

/* Up to a header's height of room under the hero (.corner: 22px padding twice
   plus one line), so it's centered in the viewport rather than just below the
   header. It only takes free space, so short screens don't scroll for it. */
.hero::after {
  content: "";
  flex-grow: 1;
  max-height: calc(44px + 11.5px * 1.6);
}

/* Whole px per cell (28 x 27 cells) so the LED gaps stay exactly 1px. */
.mark {
  width: 196px;
  height: 189px;
  display: block;
  animation: boot 1s steps(27, end) 0.15s both;
}

/* Rows light up one at a time, like a pixel display booting. */
@keyframes boot {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.word {
  margin: 34px 0 44px;
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.install {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 6px 6px 6px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  animation: rise 0.6s ease-out 0.8s both;
}
.install:hover { border-color: var(--line-hi); }

.prompt { color: var(--blue-hi); user-select: none; }

.install code {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--fg);
  cursor: text;
  scrollbar-width: none;
}
.install code::-webkit-scrollbar { display: none; }

.copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.copy:hover, .copy:focus-visible { color: var(--fg); border-color: var(--line-hi); }
.copy.done { color: var(--blue-hi); border-color: rgba(104, 172, 248, 0.45); }
.copy svg { width: 14px; height: 14px; }

.then {
  margin: 14px 0 38px;
  color: var(--dim);
  font-size: 12.5px;
  animation: rise 0.6s ease-out 0.9s both;
}
.then code { font: inherit; color: var(--muted); overflow-wrap: anywhere; }

.signin {
  display: inline-flex;
  padding: 8px;
  border-radius: 50%;
  color: var(--white);
  transition: filter 0.2s;
  animation: rise 0.6s ease-out 1s both;
}
.signin:hover, .signin:focus-visible {
  color: var(--white);
  filter: drop-shadow(0 0 14px rgba(47, 116, 255, 0.8));
}
.signin svg { width: 36px; height: 36px; }

.note { margin: 0; color: var(--dim); font-size: 12.5px; }

.dev {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--dim);
}
.dev input, .dev button {
  font: inherit;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
}
.dev button { cursor: pointer; color: var(--muted); }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 900px) { .mark { width: 252px; height: 243px; } }
@media (min-width: 1400px) { .mark { width: 280px; height: 270px; } }
@media (min-width: 2000px) {
  body.landing { font-size: 16px; }
  .mark { width: 336px; height: 324px; }
  .word { font-size: 52px; margin-top: 42px; }
  .install { padding: 8px 8px 8px 22px; }
  .install code { font-size: 16px; }
  .copy { font-size: 13px; padding: 11px 15px; }
  .then { font-size: 14.5px; }
  .signin svg { width: 44px; height: 44px; }
  .corner { font-size: 13px; padding: 28px 48px; }
  .hero::after { max-height: calc(56px + 13px * 1.6); }
}

@media (max-width: 640px) {
  .install { padding-left: 14px; }
  .install code {
    font-size: 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .word { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .install, .then, .signin { animation: none; }
}