/* ============================================================================
   260827 — MODOS DE COR: ruído (grain) + barra de construção + seletor
   ----------------------------------------------------------------------------
   Complemento do 260822_modos-cor.css (que só redefine os tokens).
   Aqui: textura de granulado por modo, o #hs-construction no modo claro
   (aviso do Claude, 260827: ele só tinha estilo no modo roxo) e a UI do
   seletor injetada pelo 260827_modos.js.
   Grains: assets/260822_grain_{claro,escuro}_tile476.png (v0 procedural,
   tools/260822_assets_modo_claro.py — a versão final replica o granulado da
   página de projeto antiga, referência pendente do Henrique).
   ============================================================================ */

/* ── RUÍDO — camada fixa por cima de tudo, não intercepta clique ──
   z-index 9000: abaixo do modal de contato (#hs-contact = 9500) —
   achado da revisão pré-ship do Claude, 260827.
   PADRÃO = claro: grain claro em multiply. Roxo/escuro: grain escuro
   em overlay.                                                   */
body.home::before{
  content:"";
  position:fixed;inset:0;
  z-index:9000;
  pointer-events:none;
  background-image:url("assets/260822_grain_claro_tile476.png");
  background-size:476px 322px;      /* 260829: ladrilho recortado, não reduzido —
     o CSS já renderizava a 952x643 (metade do arquivo), então recortar 476x322
     mantém o MESMO pixel na tela e só faz o ruído repetir mais vezes. Como o
     speckle é aleatório por pixel, a emenda é imperceptível. 1.529 KB -> 244 KB. */
  mix-blend-mode:multiply;
  opacity:.55;
}
html[data-modo="roxo"] body.home::before{
  background-image:url("assets/260822_grain_escuro_tile476.png");
  mix-blend-mode:overlay;
  opacity:.45;
}
/* escuro: um pouco mais presente */
html[data-modo="escuro"] body.home::before{
  background-image:url("assets/260822_grain_escuro_tile476.png");
  mix-blend-mode:overlay;
  opacity:.5;
}

/* ── #hs-construction nos 3 modos (hoje só existe no roxo) ──────── */
html:not([data-modo="roxo"]):not([data-modo="escuro"]) #hs-construction{background:#140A2D;color:rgba(238,240,246,.78)}
html[data-modo="escuro"] #hs-construction{background:rgba(12,7,32,.85);color:rgba(238,240,246,.6)}

/* 260828: o controle principal passou para o S do HUD em style.css.
   Este bloco fica só como fallback em páginas sem #hs-modo-glyph. */
#hs-modo-switch{
  position:fixed;left:16px;bottom:16px;z-index:9100;
  display:flex;gap:2px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  background:rgba(14,8,32,.72);
  border:1px solid var(--line,rgba(255,255,255,.16));
  border-radius:6px;padding:3px;
  backdrop-filter:blur(6px);
}
#hs-modo-switch button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;color:var(--ice,#EEF0F6);opacity:.55;
  padding:5px 9px;border-radius:4px;
}
#hs-modo-switch button:hover{opacity:.9}
#hs-modo-switch button[aria-pressed="true"]{
  opacity:1;background:var(--magenta,#EC0F7C);color:#fff;
}
html:not([data-modo="roxo"]):not([data-modo="escuro"]) #hs-modo-switch{background:rgba(255,255,255,.75);border-color:#D4D4DE}

/* ════════════════════════════════════════════════════════════════════
   260827 v2 — MODO CLARO: cards, faixa de clientes, logos, Sobre
   (feedback do Henrique, 260827 ~03h)
   ════════════════════════════════════════════════════════════════════ */

/* ── CARDS no claro ─────────────────────────────────────────────────
   1. moldura tom-sobre-tom: ::before 2px maior, MESMO chanfro da arte
      (medido nos webp: TL 9,8%/5,45% · BR 26,1%/14,5% — 45°, assimétrico)
   2. O véu gelo screen 55% (a::after) foi REMOVIDO em 260829 a pedido do
      Henrique ("tira a névoa"): era ele quem lavava os cards de branco.
      Confirmado por CDP antes de remover: getComputedStyle(a,'::after') =
      #EEF0F6 / blend screen / opacidade .55; screenshot sem o véu ficou
      nítido (v4-sem-veu.png). DECISOES 032.
   Modo roxo: nada aqui se aplica (pedido explícito).                 */
html:not([data-modo="roxo"]):not([data-modo="escuro"]) .hs-card::before{
  content:"";position:absolute;inset:-2px;z-index:0;
  background:#D4D4DE;
  clip-path:polygon(9.8% 0,100% 0,100% 85.5%,73.9% 100%,0 100%,0 5.45%);
}
html:not([data-modo="roxo"]):not([data-modo="escuro"]) .hs-card a{position:relative;z-index:1}
/* overlay do glitch fica acima da arte */
html:not([data-modo="roxo"]):not([data-modo="escuro"]) .hs-card .hs-wip-fx{z-index:2}

/* ── FAIXA DE CLIENTES no claro ───────────────────────────────────── */
html:not([data-modo="roxo"]):not([data-modo="escuro"]) .hs-clients{background:#E4E6EE;border-color:var(--line)}
html:not([data-modo="roxo"]):not([data-modo="escuro"]) .hs-marq img{filter:brightness(0);opacity:.62}

/* ── LOGOS: equilíbrio óptico (vale nos 3 modos — o desequilíbrio
   era da altura fixa de 30px: flamengo (razão 0,81, vertical) ficava
   miúdo; globo/foroni (razão >4) esticavam. Alturas por peso visual. */
.hs-marq img[alt="flamengo"]{height:59.4px}
.hs-marq img[alt="disney"]{height:38.4px}
.hs-marq img[alt="gerdau"]{height:33.6px}
.hs-marq img[alt="starbucks"]{height:36.4px}
.hs-marq img[alt="foroni"]{height:31.2px}
.hs-marq img[alt="globo"]{height:28.8px}