/* ============================================================
 * crt-buttons.css — Shared CRT terminal button system
 * Offline Comedy · brand-neon, Space Mono, scanline aesthetic
 * ============================================================ */

/* Space Mono is this sheet's own dependency — loaded here so every
   page that links crt-buttons.css renders .crt-cta in the real face
   instead of the generic monospace fallback. @import must precede
   all rules; display=swap keeps text visible while the font loads. */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* Design tokens — defined here; pages that already set these
   via their own :root block will naturally override because
   specificity is equal and page styles load after this sheet. */
:root {
  --off-bg:        #050805;
  --off-bg-deep:   #040604;
  --off-green:     #39FF14;
  --off-green-lit: #5BFF3A;
  --off-yellow:    #FFD23C;
}

/* ── Base button ─────────────────────────────────────────── */
.crt-cta {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-align: center;
  padding: 18px 16px;
  color: var(--off-green-lit);
  background: var(--off-bg-deep);
  border: 1px solid rgba(57,255,20,0.4);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(57,255,20,.9), 0 0 16px rgba(57,255,20,.45);
  box-shadow: 0 0 12px rgba(57,255,20,.3), inset 0 0 16px rgba(57,255,20,.1);
  transition: filter 0.1s ease;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  /* Bracket chars are literal text siblings of .crt-label — keep
     them from wrapping away from the label on narrow viewports. */
  white-space: nowrap;
}

.crt-cta:hover  { filter: brightness(1.25); }
.crt-cta:active { filter: brightness(0.95); transform: translateY(1px); }

/* :focus-visible provides the a11y indicator — glow alone is not
   sufficient contrast for keyboard/AT users. */
.crt-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--off-green), 0 0 12px rgba(57,255,20,.4);
}

/* Scanline overlay via pseudo-element; pointer-events:none so it
   never blocks clicks, even on touch targets. */
.crt-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,0)   4px
  );
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* ── Secondary / ghost variant ───────────────────────────── */
/* Quieter: dimmer border + glow. No intro flicker, no idle blink. */
.crt-cta--ghost {
  color: var(--off-green);
  border-color: rgba(57,255,20,0.22);
  text-shadow: 0 0 6px rgba(57,255,20,.55);
  box-shadow: 0 0 8px rgba(57,255,20,.18);
}

/* Disabled state */
.crt-cta:disabled,
.crt-cta[disabled] {
  opacity: .4;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* ── Blinking cursor (primary only) ─────────────────────── */
.crt-cursor {
  animation: crt-blink 1.06s steps(1) infinite;
}
@keyframes crt-blink {
  50% { opacity: 0; }
}

/* ── Reusable utility classes ────────────────────────────── */
/* Scanline overlay for panels, headers, scarcity lines, etc.
   Wrap any element in .crt-scanlines to add the same repeating
   line texture that the button uses on its ::after. */
.crt-scanlines {
  position: relative;
  overflow: hidden;
}
.crt-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,0)   4px
  );
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Green emissive glow — use on any span/element that should carry
   the neon-green text-shadow.  e.g. <span class="crt-glow-green"> */
.crt-glow-green {
  text-shadow: 0 0 8px rgba(57,255,20,.9), 0 0 16px rgba(57,255,20,.45);
}

/* Yellow accent glow — used for scramble cycling chars and scarcity
   highlights ("$ … 66 left_"). */
.crt-glow-yellow {
  text-shadow: 0 0 8px rgba(255,210,60,.9), 0 0 16px rgba(255,160,30,.5);
}

/* ── Reduced motion ──────────────────────────────────────── */
/* JS skips scramble + flicker + blink when this matches. CSS
   ensures the cursor also stops and transitions are instant. */
@media (prefers-reduced-motion: reduce) {
  .crt-cta {
    transition: none;
  }
  .crt-cursor {
    animation: none;
  }
}