/* ==========================================================================
   components.css — the reusable Polyphus pieces: buttons, cards, consoles,
   log lines, status dots, feature rows, reveal primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-inline: 24px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__icon { transform: translate(2px, -2px); }

.btn--dark  { background: var(--card);  color: var(--lilac); }
.btn--dark:hover  { background: #32234f; }

.btn--light { background: var(--cream); color: #050505; }
.btn--light:hover { background: #fff; }

/* The one button that starts something running, so the one that is orange. */
.btn--run {
  height: 56px;
  padding-inline: 32px;
  background: var(--orange);
  color: var(--cream);
  font-size: 18px;
  font-weight: 700;
}
.btn--run:hover { background: #ff5630; }


/* --------------------------------------------------------------------------
   Deep purple card — bento tiles and role cards share it.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.card__body {
  position: relative;
  z-index: 2;
  padding: 32px;
}

.card__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--off-white);
}

.card__title strong { font-weight: 700; }


/* --------------------------------------------------------------------------
   The mark: brackets around a block cursor, drawn straight onto whatever is
   behind it. No plate — the sky is the background.
   -------------------------------------------------------------------------- */

.logo-mark {
  width: 37px;
  height: 24px;
  transition: transform var(--dur-fast) var(--ease-out);
}

a:hover > .logo-mark { transform: scale(1.06); }


/* --------------------------------------------------------------------------
   The cursor in `polyphus_`.

   A hard on/off, not a fade — a fade reads as a pulse, a step reads as a
   caret waiting for input. 1.06s is roughly the rate a real terminal uses;
   the keyframes jump at 49.9%/50% so the switch is instant at any duration.

   It is the one thing on the page that blinks, and it is the brand mark, so
   it earns the orange. Anyone who has asked for calmer motion gets it solid.
   -------------------------------------------------------------------------- */

.cursor {
  color: var(--orange);
  animation: cursor-blink 1.06s linear infinite;
}

@keyframes cursor-blink {
  0%, 49.9%  { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; opacity: 1; }
}


/* --------------------------------------------------------------------------
   Console — a monospace well inside a dark card.
   Every glyph is one cell wide, which is what lets the pipeline diagram,
   the file tree and the budget split line up. Do not set a proportional
   face on these; it breaks the layout, not just the mood.
   -------------------------------------------------------------------------- */

.console {
  border-radius: var(--r-well);
  background: var(--card-2);
  border: 1px solid rgba(233, 229, 216, 0.08);
  font-family: var(--mono);
  font-size: var(--fs-log);
  line-height: 1.85;
  color: #8b8578;
  overflow: hidden;
}

.console__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(233, 229, 216, 0.08);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6a5e;
}

.console__body { padding: 12px 14px; }

/* Log rows: lowercase, `>` prefix, no full stop. */
.log { list-style: none; margin: 0; padding: 0; }

.log li {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log li::before {
  content: ">";
  color: #6f6a5e;   /* the prefix is chrome, but it still has to be seen */
  flex: none;
}

.log li[data-state="run"]  { color: var(--orange); }
.log li[data-state="done"] { color: #8b8578; }
.log li[data-state="wait"] { color: #6f6a5e; }


/* --------------------------------------------------------------------------
   Status dot — orange only while something is actually running.
   -------------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-soft);
}

.status--idle::before { background: #6f6a5e; box-shadow: none; }


/* --------------------------------------------------------------------------
   Tag — a small mono pill. Used for role names and "coming" markers.
   -------------------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

/* "Built" is a fact, not a running process — it does not get the accent. */
.tag--live   { background: rgba(250, 247, 240, 0.18); color: #fff; }
.tag--soon   { background: transparent; color: #b8b2a5;
               box-shadow: inset 0 0 0 1px rgba(233, 229, 216, 0.28); }
.tag--ground { background: #f1eeea; color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   Feature rows — circular icon chip + one line of copy.
   -------------------------------------------------------------------------- */

.features { display: flex; flex-direction: column; gap: 12px; }

.feature { display: flex; align-items: center; gap: 16px; }

.feature__chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: #efeae4;
}

.feature__chip img { width: 24px; height: 24px; }

.feature__label {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 400;
  line-height: var(--lh-ui);
  letter-spacing: -0.02em;
  color: var(--ink-muted);
}


/* --------------------------------------------------------------------------
   Scroll reveal primitives.
   `.reveal`  — the block fades and lifts once.
   `.words`   — each word is its own span and they cascade in.
   Driven by js/modules/reveal.js adding `.is-in`.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-in { opacity: 1; transform: none; }

.words > .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
  will-change: transform, opacity;
}

.words.is-in > .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .words > .word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}