/* ── CLAUDE CODE BR · base comum dos 3 sites (claudecodebr.stauf · curso.stauf · mentor.stauf) ──
   stauf-f3, 30/09/2026. Decisão do operator (30/09 ~21:00): «Mistura» — estrutura e acabamento da casa Stauf
   (/opt/stauf-www/tokens/stauf-tokens.css: pretos, grafites, vidro, fios, tipografia Bricolage + IBM Plex, eixo com luz
   descendo) com o laranja do Claude do @claudecodebr (#C8704A, medido no logo e nas páginas antigas) como acento e o
   verde/amarelo do «BR» só em detalhe. Contraste medido (fórmula WCAG) sobre #070708: #C8704A 5,63 · #D98760 7,27 ·
   #8a8a86 5,81 · #b5b5b2 9,80. Sem style="" em lugar nenhum: a CSP é style-src 'self'. */

@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* casa Stauf (stauf-tokens.css) */
  --preto-0: #020202; --preto-1: #070708; --grafite-1: #111111; --grafite-2: #171717; --grafite-3: #212121;
  --vidro-1: #100a10; --vidro-2: #151217; --vidro-3: #1f1c22;
  --ink: #f4f4f2; --muted: #b5b5b2; --dim: #8a8a86;
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  /* Claude Code BR */
  --laranja: #C8704A; --laranja-texto: #D98760; --laranja-fundo: #6b3420;
  --verde: #2E9B3E; --amarelo: #F4D03F;
  --display: "Bricolage", "Plex", system-ui, sans-serif;
  --sans: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ez: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--preto-1); color: var(--ink); font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* grão da casa (referência 562 «foco com grão»): ruído fixo por cima de tudo, sem custo de animação */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--laranja); color: var(--preto-0); }
:focus-visible { outline: 2px solid var(--laranja-texto); outline-offset: 3px; border-radius: 2px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* rótulo mono da casa */
.rot { display: inline-block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-texto); }
.rot.dim { color: var(--dim); }

/* ── o EIXO: fio vertical com a luz descendo (stauf-site.css v9), aqui em laranja ── */
@keyframes desce { from { transform: translateY(-40%); } to { transform: translateY(260%); } }
.eixo { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent); }
.eixo::before { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 26%;
  background: linear-gradient(180deg, transparent, var(--laranja), transparent); filter: blur(1px); animation: desce 7s linear infinite; }

/* ── o bonequinho (pixel art do logo, viewBox recortado): pisca e respira em degraus, como sprite ── */
@keyframes pisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
.mascote { width: 100%; height: auto; overflow: visible; }
.mascote .corpo { animation: pula 2.4s steps(2, jump-none) infinite; transform-box: fill-box; }
.mascote .olho { transform-box: fill-box; transform-origin: 50% 100%; animation: pisca 4.6s steps(1, end) infinite; }
.mascote .olho.d { animation-delay: .02s; }

/* ── portal de luz atrás do bonequinho (o portal da águia do stauf.com.br, puxado para o laranja) ── */
@keyframes respira { from { opacity: .7; } to { opacity: 1; } }
.portal { position: absolute; inset: -30% -40%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 42% 40% at 50% 52%, rgba(255, 214, 190, .14) 0%, rgba(200, 112, 74, .26) 24%, rgba(107, 52, 32, .14) 48%, transparent 72%);
  animation: respira 6.4s ease-in-out infinite alternate; }

/* ── vidro (cartões do vídeo odanielnr1 na casa Stauf) ── */
.vidro { background: linear-gradient(180deg, var(--vidro-1) 0%, var(--vidro-1) 30%, var(--vidro-2) 65%, var(--vidro-3) 100%);
  border: 1px solid var(--line); border-radius: 14px; }

/* selo «em breve» */
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--laranja) 55%, transparent);
  border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-texto); white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 10px var(--laranja); animation: respira 1.6s ease-in-out infinite alternate; }

/* rodapé comum */
.rodape { position: relative; z-index: 1; padding: 40px var(--gutter) 48px; text-align: center; color: var(--dim); font: 400 12.5px/1.6 var(--mono); }
.rodape a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.rodape a:hover { color: var(--ink); border-color: var(--laranja); }
.bandeira { display: inline-block; width: 14px; height: 6px; vertical-align: middle; margin: 0 4px 2px;
  background: linear-gradient(180deg, var(--verde) 50%, var(--amarelo) 50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}