/*
 * Homepage-only styles: the animated ASCII logo + twinkle overlay, the fake
 * terminal/REPL hero sequence, and the client-side security-audit panel.
 * None of this is expected to repeat on other pages — if that changes
 * later, promote the relevant section into components.css alongside a
 * real reusable component (this is what already happened with the
 * services pillars — see .pillar/.dot in components.css — once About
 * needed the same "labeled category + detail list" pattern).
 */

/* ---------- ascii logo + twinkle overlay ---------- */
.splash { margin-bottom: 20px; }
.render-wrap { position: relative; }
.render {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.05;
  margin: 0 0 10px;
}
/* shimmer is bounded (finite iteration-count) so it settles after ~10s on load, not indefinitely */
.render .cell {
  opacity: 0;
  animation: cellIn 0.4s ease forwards, shimmer 1.4s ease-in-out 7;
}
/* twinkle overlay: each spark has its own bounded delay/duration/iteration-count
   baked in at generation time, so the whole field burns out on its own by ~10s */
/* positions are in ch/em, matching .render's grid metrics, so sparks
   land exactly on the character cells they were sampled from */
.sparkle { position: absolute; top: 0; left: 0; pointer-events: none; }
.spark {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0;
  animation-name: spark;
  animation-timing-function: ease-in-out;
}
@keyframes spark {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes cellIn { to { opacity: 1; } }
@keyframes shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.7); }
}

/* ---------- terminal / REPL hero sequence ---------- */
.repl-block { margin-bottom: 20px; }
.repl-cmd, .repl-prompt {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 13px; color: var(--muted);
}
.repl-seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--line-dim);
}
.repl-path { color: var(--muted-dim); }
.repl-cmd svg, .repl-prompt svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--muted-dim); }
.repl-time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted-dim); }
.repl-arrow { color: var(--muted-dim); }
.repl-cmd-text { color: var(--muted); }
.repl-out {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  margin: 6px 0 0 2ch; line-height: 1.65;
}
.repl-out.repl-mission { max-width: 46ch; }
.repl-mission-head {
  display: block;
  color: var(--text);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.repl-mission-line2 { color: var(--muted); }
.repl-mission-lede { color: var(--muted); }
.repl-mission-lede strong { color: var(--text); font-weight: 400; }

.repl-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-family: var(--mono); font-size: 13px; color: var(--text);
  caret-color: var(--sky);
}
.repl-input::placeholder { color: var(--muted-dim); }

/* decorative — the input's own caret-color (also blue) takes over once it's actually focused */
.repl-cursor {
  display: inline-block;
  width: 1ch;
  height: 1.1em;
  background: var(--sky);
  opacity: 0;
  animation-name: replFadeIn, blink;
  animation-duration: 0.3s, 1s;
  animation-timing-function: ease, step-end;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, both;
}
@keyframes blink { 50% { opacity: 0; } }
.repl-prompt:focus-within .repl-cursor { display: none; }

/* sequenced reveal: each prompt's own delay (baked in inline, computed from the
   command's character count) chains prefix -> typed command -> output, block by block */
.repl-seg, .repl-arrow, .repl-out, .repl-input {
  opacity: 0;
  animation-name: replFadeIn;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
@keyframes replFadeIn { to { opacity: 1; } }
.repl-cmd-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation-name: replType;
  animation-fill-mode: both;
  animation-timing-function: steps(var(--chars, 1));
}
@keyframes replType { to { width: var(--type-width); } }

/* ---------- services pane ---------- */
/* ---------- security-audit component ---------- */
.audit-row {
  display: flex; gap: 6px;
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  padding: 3px 0;
}
/* fixed width = length of the longest key ("do not track:") so every
   value column lines up regardless of its own key's length */
.audit-key { color: var(--muted-dim); flex: 0 0 13ch; }
.audit-value { color: var(--text); }
.audit-value.good { color: var(--olive); }
.audit-value.bad { color: var(--rust); }
.audit-note {
  font-family: var(--mono); font-size: 11px; color: var(--muted-dim);
  margin: 10px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .render .cell { animation: none; opacity: 1; }
  .spark { animation: none; opacity: 0; }
  .repl-seg, .repl-arrow, .repl-out, .repl-input { animation: none; opacity: 1; }
  .repl-cmd-text { animation: none; width: auto; }
  .repl-cursor { animation: none; opacity: 1; }
}