/* Movimento e arte (g·b, hero, diagramas dos casos). Par do motion.js e do arte.py.
   O tema de cada caso fornece --art-bg, --art-fg, --art-accent e --pingo. */

/* ---------- g·b: as letras giram em torno do pingo e podem sair do viewBox */
.gb{overflow:visible}
.gb .gb-pingo{transform-box:view-box;transform-origin:100px 100px}

/* header: o pingo pisca uma vez a cada carregamento de página */
.site-header .brand .gb-pingo{animation:gb-pisca .7s var(--ease-out,ease-out) .25s 1 both}
@keyframes gb-pisca{0%,100%{transform:scale(1)}45%{transform:scale(1.55)}}

/* ---------- hero (sobre o campo bordô) */
.hero-gb{--pingo:var(--acafrao,#F2B233);margin:0;color:var(--marfim,#FAFAFB);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,24px);padding:clamp(20px,4vw,48px)}
.hero-gb .gb-hero{display:block;width:min(100%,360px);height:auto}
.hero-gb-legenda{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-align:center;opacity:.92}

/* ---------- diagramas */
.project-art{--a-bg:var(--art-bg,var(--manto,#F1F2F4));--a-fg:var(--art-fg,var(--tinta,#14161B));--a-ac:var(--art-accent,var(--pingo,#A86A08))}
.project-art .a-fio{fill:none;stroke:var(--a-fg);stroke-width:3;opacity:.45}
.project-art .a-fio-fino{fill:none;stroke:var(--a-fg);stroke-width:3;opacity:.6}
.project-art .a-guia{fill:none;stroke:none}
.project-art .a-tracejado{stroke-dasharray:7 7}
.project-art .a-divisa{opacity:.35}
.project-art .a-no.a-tracejado{stroke-width:4;stroke-dasharray:10 6}
.project-art .a-no{fill:var(--a-bg);stroke:var(--a-fg);stroke-width:6}
.project-art .a-anel{stroke-width:12}
.project-art .a-bloco{fill:var(--a-fg)}
.project-art .a-celula{fill:none;stroke:var(--a-fg);stroke-width:3;opacity:.55}
.project-art .a-ombro{fill:none;stroke:var(--a-fg);stroke-width:6}
.project-art .a-pingo{fill:var(--pingo)}
.project-art text{fill:var(--a-fg)}
.project-art .a-rot{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:0}
.project-art .a-rot-p{font-size:19px}
.project-art .a-bloco-txt{fill:var(--a-bg);font-size:24px;font-weight:600}
.project-art .a-ia{font-size:34px;font-weight:600}
.project-art .a-mono{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:.1em}

/* estados acesos (.is-on) — o motion.js liga e desliga por janela do ciclo */
.project-art .a-voto{fill:transparent;stroke:var(--a-fg);stroke-width:3;transition:fill .35s,stroke .35s}
.project-art .a-voto.is-on{fill:var(--pingo);stroke:var(--pingo)}
.project-art .a-check{fill:none;stroke:var(--a-ac);stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease-out,ease-out)}
.project-art .a-check.is-on{stroke-dashoffset:0}
.project-art .a-hub{transition:stroke .3s}
.project-art .a-hub.is-on{stroke:var(--a-ac)}
.project-art .a-porta{transition:stroke .3s,stroke-dasharray .3s}
.project-art .a-porta.is-on{stroke:var(--a-ac)}

@media (prefers-reduced-motion:reduce){
  .site-header .brand .gb-pingo{animation:none}
  .project-art .a-voto,.project-art .a-check,.project-art .a-hub,.project-art .a-porta{transition:none}
}