/* ============================================================
   MOTOR (CSS) do diagrama "Antes & Depois" — glass/futurista.
   Compartilhado pelas 3 variantes de conteúdo:
   antes-e-depois-a-ecossistema.html / -b-saidas.html / -c-qualidades.html
   ============================================================ */
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;src:url("/assets/theme/fonts/JetBrainsMono-Variable.woff2") format("woff2");}
:root{
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Aspekta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);-webkit-font-smoothing:antialiased}

.pad{
  --bg:#f4f6f2;--bg2:#eef2ea;--ink:#1b1e18;--dim:#6d7168;
  --line:rgba(20,45,20,.13);--dot:rgba(20,45,20,.30);
  --accent:#4f8b28;--accent-soft:#7fc23f;--amber:#a8841f;--red:#c25f4e;
  --glass-a:rgba(255,255,255,.74);--glass-b:rgba(255,255,255,.30);
  --glass-line:rgba(255,255,255,.9);--glass-edge:rgba(30,55,30,.14);
  --q-a:rgba(232,252,212,.82);--q-b:rgba(206,240,176,.40);--q-line:rgba(110,170,70,.6);
  --shadow:rgba(30,60,25,.16);--ring:#2a3326;--tdot:rgba(20,45,20,.35);
  --badge-bg:rgba(248,250,246,.94);--win-bg:rgba(233,250,215,.95);
  --tag-label:#6d7168;
  --warm0:#a8841f;--warm1:#b0801c;--warm2:#b06f22;--warm3:#b5652c;--warm4:#bb5a34;--warm5:#c25f4e;--warm6:#a86a22;--warm7:#b6632f;
  --green0:#4f8b28;--green1:#5a9438;--green2:#68a048;--green3:#79a94e;--green4:#4a8f5e;--green5:#5f9a6a;--green6:#6fae4e;
  --orb-op:.4;--glow-op:.62;
  background:radial-gradient(120% 120% at 50% 30%,var(--bg) 0%,var(--bg2) 100%);
  color:var(--ink);padding:clamp(64px,8vw,140px) 24px clamp(80px,10vw,160px);overflow:hidden;
}
.pad__inner{max-width:1400px;margin:0 auto}
.pad__lede{max-width:680px;margin:0 0 clamp(48px,6vw,96px);font-size:clamp(19px,2.3vw,28px);
  line-height:1.45;letter-spacing:-.01em;font-weight:400;color:var(--dim)}
.pad__lede strong{color:var(--ink);font-weight:500}
.pad__diagram{width:100%}
.pad__diagram svg{width:100%;height:auto;display:block;overflow:visible}

.gs-a{stop-color:var(--glass-a)} .gs-b{stop-color:var(--glass-b)}
.gs-qa{stop-color:var(--q-a)}    .gs-qb{stop-color:var(--q-b)}

.pad-pill{fill:url(#gGlass);stroke:var(--glass-edge);stroke-width:1;filter:url(#gShadow)}
.pad-pill--q{fill:url(#gQGlass);stroke:var(--q-line)}
.pad-sheen{fill:none;stroke:var(--glass-line);stroke-width:1;opacity:.7}
.pad-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;fill:var(--ink)}
.pad-ico{fill:none;stroke:var(--dim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pad-ico-dot{fill:var(--dim)}
.pad-ico--q{stroke:currentColor}
.pad-ico--q-fill{fill:currentColor;stroke:none}
.pad-ico-alert{animation:padAlert var(--adur,4.6s) ease-in-out infinite;animation-delay:var(--adel,0s)}
.pad-ico-neon{color:var(--accent);animation:padNeon var(--ndur,5.2s) ease-in-out infinite;animation-delay:var(--ndel,0s)}
@keyframes padAlert{0%,100%{opacity:1}50%{opacity:.52}}
@keyframes padNeon{0%,100%{color:var(--accent)}50%{color:#00ffa6}}

.pad-conn{fill:none;stroke:var(--line);stroke-width:1.2}
.pad-conn--out{fill:none;stroke:var(--accent);stroke-width:1.3;opacity:.5}
.pad-conn--tip{fill:none;stroke:var(--accent);stroke-width:1.8}
.pad-cdot{fill:var(--dot)}
.pad-cdot--accent{fill:var(--accent)}

.pad-petal{stroke:var(--glass-edge);stroke-width:1}
.pad-petal--top{fill:rgba(206,247,158,.28)}
.pad-petal--bottom{fill:rgba(224,214,120,.30)}
.pad-petal--side{fill:rgba(167,226,110,.24)}
.pad-core{fill:url(#gGlass);stroke:var(--glass-line);stroke-width:1;filter:url(#gShadow)}
.pad-core-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;fill:var(--ink)}
.pad-ringdot{fill:var(--ring)}
.pad-gridcell{fill:var(--accent)}
.pad-glow{opacity:var(--glow-op)}
.pad-orbs{opacity:var(--orb-op)}

.pad-chip{fill:var(--badge-bg);stroke:var(--glass-edge);stroke-width:1}
.pad-chip--amber{stroke:var(--amber)} .pad-chip--red{stroke:var(--red)}
.pad-chip-bang{font-family:var(--mono);font-size:11px;font-weight:700}
.pad-chip-bang--amber{fill:var(--amber)} .pad-chip-bang--red{fill:var(--red)}
.pad-chip-label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;fill:var(--tag-label)}
.pad-solo{fill:var(--badge-bg);stroke:var(--glass-edge);stroke-width:1}
.pad-solo-glyph{font-size:12px;fill:var(--dim)}
.pad-solo-glyph--red{fill:var(--red)}

.pad-out-panel{fill:var(--win-bg);stroke:var(--q-line);stroke-width:1}
.pad-out-txt{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;fill:var(--accent)}
.pad-out-ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pad-out-ico-fill{fill:currentColor;stroke:none}

@keyframes padTravel{0%{offset-distance:0%;opacity:0}5%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}
.pad-chipmove{offset-rotate:0deg;animation:padTravel var(--dur,5.5s) linear infinite;animation-delay:var(--delay,0s)}
/* fluxo de dados = traço curto correndo pela linha (dash animado no próprio path),
   estilo Monad. Entrada em cores negativas (--warm), saída em positivas (--green). */
.pad-flow{fill:none;stroke-width:2.4;stroke-linecap:round;
  animation:padFlow var(--dur,3.2s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes padFlow{to{stroke-dashoffset:var(--period,-210px)}}

@keyframes padOut{
  0%  {offset-distance:0%;   opacity:0; animation-timing-function:cubic-bezier(.5,.02,.86,.32)}
  7%  {offset-distance:46%;  opacity:1; animation-timing-function:cubic-bezier(.15,.7,.34,1)}
  15% {offset-distance:100%; opacity:1; animation-timing-function:linear}
  21% {offset-distance:100%; opacity:1}
  26% {offset-distance:100%; opacity:0}
  100%{offset-distance:100%; opacity:0}
}
.pad-out{offset-rotate:0deg;animation:padOut var(--dur,10.5s) infinite;animation-delay:var(--delay,0s)}

@keyframes padSpin{to{transform:rotate(360deg)}}
.pad-ring{transform-box:fill-box;transform-origin:center;animation:padSpin 16s linear infinite}

@keyframes padBlink{0%,100%{opacity:.15}50%{opacity:1}}
.pad-blink{animation:padBlink var(--bdur,2.4s) ease-in-out infinite;animation-delay:var(--bdel,0s)}

@keyframes padGlow{0%,100%{opacity:calc(var(--glow-op)*.7)}50%{opacity:var(--glow-op)}}
.pad-glow{animation:padGlow 6s ease-in-out infinite}
@keyframes padDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}
.pad-orb1{animation:padDrift 14s ease-in-out infinite}
.pad-orb2{animation:padDrift 18s ease-in-out infinite reverse}

@media (max-width:980px){.pad__diagram{overflow-x:auto;padding-bottom:8px}.pad__diagram svg{min-width:1120px}}
@media (prefers-reduced-motion:reduce){
  .pad-flow,.pad-ring,.pad-glow,.pad-chipmove,.pad-blink,.pad-orb1,.pad-orb2,.pad-ico-alert,.pad-ico-neon{animation:none}
  .pad-flow{opacity:.6}.pad-blink{opacity:.7}.pad-chipmove{offset-distance:50%}
}

#pad-theme{position:fixed;left:-9999px}
.pad-toggle{position:fixed;top:16px;right:16px;z-index:10;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border-radius:4px;cursor:pointer;
  background:#1c1c1c;color:#f7f7f5;user-select:none}
.pad-toggle::before{content:"Tema escuro"}
#pad-theme:checked ~ .pad-toggle{background:#cef79e;color:#1c1c1c}
#pad-theme:checked ~ .pad-toggle::before{content:"Tema claro"}
#pad-theme:checked ~ .pad{
  --bg:#222f30;--bg2:#1a2425;--ink:#e9eae4;--dim:#9aa39a;
  --line:rgba(255,255,255,.12);--dot:rgba(255,255,255,.30);
  --accent:#cef79e;--accent-soft:#a7e26e;--amber:#e0c36a;--red:#e28a7a;
  --glass-a:rgba(255,255,255,.10);--glass-b:rgba(255,255,255,.02);
  --glass-line:rgba(255,255,255,.22);--glass-edge:rgba(255,255,255,.14);
  --q-a:rgba(206,247,158,.14);--q-b:rgba(206,247,158,.03);--q-line:rgba(206,247,158,.5);
  --shadow:rgba(0,0,0,.4);--ring:#e9eae4;--tdot:rgba(255,255,255,.5);
  --badge-bg:rgba(26,36,37,.96);--win-bg:rgba(34,49,38,.96);
  --tag-label:#e7e9e2;
  --warm0:#cdb066;--warm1:#c9a45e;--warm2:#c69660;--warm3:#c2885d;--warm4:#bd7d5c;--warm5:#b9735c;--warm6:#b56a5c;--warm7:#c59a63;
  --green0:#00ffa6;--green1:#4dffb0;--green2:#8befac;--green3:#a7e26e;--green4:#57d98d;--green5:#7fe6c0;--green6:#b6f08a;
  --orb-op:0;--glow-op:.12;
}