/* club·code — styles complementares ao Tailwind CDN */

/* paleta como triplets RGB pra suportar Tailwind alpha (/<alpha-value>) */
:root {
  --bg: 250 247 242;
  --bg-alt: 242 238 230;
  --ink: 26 26 26;
  --ink-soft: 74 74 74;
  --ink-muted: 138 133 124;
  --rule: 232 226 214;
  --accent: 255 107 53;
  --accent-ink: 196 74 31;
}

/* modo terminal: piscada periódica de 5s a cada 15s (script.js) */
body.cc-terminal {
  --bg: 8 10 12;
  --bg-alt: 18 20 24;
  --ink: 235 235 235;
  --ink-soft: 175 180 185;
  --ink-muted: 110 115 125;
  --rule: 38 42 50;
  --accent: 40 255 122;
  --accent-ink: 25 200 95;
}

/* tipografia inteira vira mono no modo terminal */
body.cc-terminal,
body.cc-terminal * {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
}

/* exceção: o wordmark 'club·code' do hero mantém Space Grotesk */
body.cc-terminal #hero h1,
body.cc-terminal #hero h1 * {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
}

/* glitch sutil nas transições de/para o modo terminal */
@keyframes cc-glitch {
  0%   { filter: none; transform: translate(0); }
  14%  { filter: hue-rotate(45deg) contrast(1.4) saturate(1.5); transform: translate(-4px, 1px); }
  28%  { filter: invert(0.12) contrast(1.5); transform: translate(3px, -2px); }
  42%  { filter: hue-rotate(-40deg) brightness(1.2); transform: translate(-2px, 2px); }
  56%  { filter: contrast(1.4) saturate(1.8); transform: translate(4px, 0); }
  70%  { filter: invert(0.08) hue-rotate(30deg); transform: translate(-3px, -1px); }
  84%  { filter: contrast(1.2) brightness(1.1); transform: translate(1px, 1px); }
  100% { filter: none; transform: translate(0); }
}
body.cc-glitch {
  animation: cc-glitch 320ms steps(8, end);
}

/* overlay de scanlines/RGB split durante o glitch (suave) */
body.cc-glitch::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.08) 0,
      rgba(0,0,0,0.08) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      90deg,
      rgba(255,0,80,0.06) 0%,
      transparent 50%,
      rgba(0,200,255,0.06) 100%
    );
  mix-blend-mode: difference;
  animation: cc-scanlines 120ms steps(2, end) infinite;
}
@keyframes cc-scanlines {
  0%   { transform: translateY(0); opacity: 0.7; }
  50%  { transform: translateY(2px); opacity: 0.5; }
  100% { transform: translateY(-1px); opacity: 0.7; }
}

html { scroll-behavior: smooth; }

body { font-feature-settings: "ss01", "cv11"; }

/* bullet laranja no wordmark "club·code" */
.dot {
  width: 0.55em;
  height: 0.55em;
  background-color: rgb(var(--accent));
  border-radius: 9999px;
  position: relative;
  top: -0.05em;
}

.dot-sm {
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(var(--accent));
  border-radius: 9999px;
  position: relative;
  top: -0.05em;
}

/* form: estado de sucesso/erro */
#form-message[data-tone="success"] { color: rgb(var(--accent-ink)); }
#form-message[data-tone="error"]   { color: #B91C1C; }

/* foco visível */
:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 4px;
  border-radius: 2px;
}

/* input autofill — manter paleta */
input:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--ink));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--bg-alt)) inset;
  transition: background-color 9999s ease-out 0s;
}

/* prompt de terminal (>_) — uso: <span class="cc-prompt"></span>texto */
.cc-prompt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: rgb(var(--accent));
  margin-right: 0.4em;
  font-weight: 500;
}
.cc-prompt::before { content: ">"; }
.cc-prompt::after {
  content: "_";
  margin-left: 0.05em;
  animation: cc-blink 1.05s steps(2, jump-none) infinite;
}
@keyframes cc-blink {
  50% { opacity: 0; }
}

/* spinner + verbos rotativos (estilo Claude Code) */
.cc-spinner {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  color: rgb(var(--ink-muted));
  user-select: none;
}
.cc-spinner__icon {
  color: rgb(var(--accent));
  display: inline-block;
  width: 1ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cc-spinner__verb {
  transition: opacity 180ms ease;
}
.cc-spinner__verb.is-fading {
  opacity: 0;
}