/* ============================================================
   hero-animacao.css — animação da hero nas páginas públicas:
   Sobre, Blog, Carreiras e Imprensa. Cada página tem o seu próprio
   desenho (SVG .hx3 dentro do próprio index.php); o CSS é comum.
   Só mexe em .hero-grid, .hero-copy, .draw-col, .hx3 e .hx4 (desenho da página Código).
   ============================================================ */
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; position:relative; }
.hero-copy{ min-width:0; }
.draw-col{ width:100%; max-width:500px; margin-left:auto; position:relative; animation:h3-in .8s cubic-bezier(.22,.68,.36,1) .2s both; }
.hx3{ display:block; width:100%; height:auto; overflow:visible; }
.hx3 .s{ fill:none; stroke:var(--text); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.hx3 .d{ stroke-dasharray:1; stroke-dashoffset:0; }
.hx3 .tx{ font:500 11.5px 'Inter',system-ui,sans-serif; fill:var(--text-muted); }
.hx3 .pill{ font:600 12.5px 'Inter',system-ui,sans-serif; fill:var(--bg); }
.hx3 .flag{ transform-box:fill-box; transform-origin:0 50%; animation:h3-wave 2.8s ease-in-out infinite; }
.hx3.go .d{ animation:h3-dr var(--u,.8s) ease-in-out both; animation-delay:var(--t,0s); }
.hx3.go .f, .hx3.go .tx{ animation:h3-fi .5s ease both; animation-delay:var(--t,0s); }
.hx3.go .fl{ animation:h3-drop .7s cubic-bezier(.3,1.35,.5,1) both; animation-delay:var(--t,0s); }
@keyframes h3-dr{ 0%{ stroke-dashoffset:1; opacity:0; } 1%{ stroke-dashoffset:1; opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } }
@keyframes h3-fi{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes h3-drop{ 0%{ opacity:0; transform:translateY(-46px); } 30%{ opacity:1; } 100%{ opacity:1; transform:none; } }
@keyframes h3-wave{ 0%,100%{ transform:scaleX(1) skewY(0); } 50%{ transform:scaleX(.88) skewY(5deg); } }
@keyframes h3-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* Página Código (#hx4) */
.hx4{ display:block; width:100%; height:auto; overflow:visible; }
.hx4 .s{ fill:none; stroke:var(--text); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.hx4 .m{ stroke:var(--text-faint); stroke-width:2; }
.hx4 .d{ stroke-dasharray:1; stroke-dashoffset:0; }
.hx4 .tx{ font:500 11.5px 'Inter',system-ui,sans-serif; fill:var(--text-muted); }
.hx4 .pill{ font:600 12.5px 'Inter',system-ui,sans-serif; fill:var(--bg); }
.hx4 .flag{ transform-box:fill-box; transform-origin:0 50%; animation:h4-wave 2.8s ease-in-out infinite; }
.hx4.go .d{ animation:h4-dr var(--u,.8s) ease-in-out both; animation-delay:var(--t,0s); }
.hx4.go .f, .hx4.go .tx{ animation:h4-fi .5s ease both; animation-delay:var(--t,0s); }
.hx4.go .fl{ animation:h4-drop .7s cubic-bezier(.3,1.35,.5,1) both; animation-delay:var(--t,0s); }
@keyframes h4-dr{ 0%{ stroke-dashoffset:1; opacity:0; } 1%{ stroke-dashoffset:1; opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } }
@keyframes h4-fi{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes h4-drop{ 0%{ opacity:0; transform:translateY(-46px); } 30%{ opacity:1; } 100%{ opacity:1; transform:none; } }
@keyframes h4-wave{ 0%,100%{ transform:scaleX(1) skewY(0); } 50%{ transform:scaleX(.88) skewY(5deg); } }

@media (prefers-reduced-motion: reduce){ .draw-col{ animation:none; } .hx3 *, .hx4 *{ animation:none !important; } }
/* Coluna de texto fica com metade da largura: título um pouco menor só no desktop. */
@media (min-width:961px){ .hero-grid h1{ font-size:clamp(2.2rem,4.2vw,3.4rem); } }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } .draw-col{ margin:0 auto; max-width:440px; } }