/* =====================================================================
   RODOLFINHO — o mascote do fim da página

   ATENÇÃO: esta folha é a ÚNICA que sobrevive ao desmonte. Quando a
   pílula vermelha é tomada, o JS desliga todos os <link rel=stylesheet>
   MENOS este — é assim que a página vira HTML cru enquanto o mascote e o
   painel de reconstrução continuam desenhados. Nada aqui pode depender
   de variável ou classe definida no v2.css, porque naquele momento elas
   não existem mais. Por isso as cores estão em HEX literal.
   ===================================================================== */

.rodo{
  position:fixed; inset:0;
  z-index:9000;
  pointer-events:none;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.rodo[hidden]{ display:none; }

/* ---------- o boneco ---------- */
.rodo-eu{
  position:absolute; left:0;
  /* acima do rodapé: com bottom:0 os pés dele pisavam em cima do
     "main · build passing". O rodapé mede 73px, então 88px deixa uma
     folga de 15px — ele fica NO rodapé, não EM CIMA do texto. */
  bottom:88px;
  height:min(62vh, 420px);
  width:auto;
  transform:translateX(1.6vw);
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
}
/* Ele não anda mais: MONTA de partículas e SE DESFAZ nelas. O <img> fica
   invisível enquanto o canvas de poeira está no ar — se os dois
   aparecessem no mesmo quadro ele piscaria duplicado. */
.rodo.is-parado     .rodo-eu{ opacity:1; transition:opacity .25s; }
.rodo.is-desfazendo .rodo-eu{ opacity:0; }

/* a poeira dele, no lugar exato onde ele estava */
.rodo-po{
  position:absolute;
  pointer-events:none;
}
.rodo-po[hidden]{ display:none; }

/* ---------- balão de fala ---------- */
.rodo-fala{
  position:absolute;
  left:min(23vw, 268px); bottom:calc(min(46vh, 330px) + 88px);
  max-width:min(440px, 74vw);
  padding:16px 20px;
  background:rgba(10,12,20,.94);
  border:1px solid rgba(198,255,61,.34);
  border-radius:16px 16px 16px 4px;
  color:#e9eef2; font-size:15px; line-height:1.55;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s, transform .4s;
}
.rodo-fala.is-on{ opacity:1; transform:none; }
.rodo-fala b{ color:#c6ff3d; font-weight:700; }
.rodo-cursor{ color:#c6ff3d; }

/* ---------- as duas pílulas ---------- */
.rodo-pilulas{
  position:absolute;
  left:min(23vw, 268px); bottom:calc(min(30vh, 210px) + 88px);
  display:flex; gap:14px;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s, transform .45s;
}
.rodo-pilulas.is-on{ opacity:1; transform:none; pointer-events:auto; }
.rodo-pilula{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.rodo-pilula small{ font-weight:400; font-size:11px; opacity:.72; }
.rodo-pilula:hover{ transform:translateY(-3px) scale(1.03); }
.rodo-pilula:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.rodo-azul{
  background:linear-gradient(180deg, #4d7cff, #2b4fd8);
  color:#fff; box-shadow:0 10px 30px rgba(61,110,255,.4);
}
.rodo-vermelho{
  background:linear-gradient(180deg, #ff4d5e, #d81f34);
  color:#fff; box-shadow:0 10px 30px rgba(230,40,60,.42);
}
.rodo-azul:hover{ box-shadow:0 16px 40px rgba(61,110,255,.6); }
.rodo-vermelho:hover{ box-shadow:0 16px 40px rgba(230,40,60,.62); }

/* =====================================================================
   O DESMONTE — a partir daqui é o que segura a página "crua"
   ===================================================================== */

/* BRANCO, não escuro: página sem folha de estilo é branca com texto
   preto no tipo padrão do navegador. Forçar um fundo escuro aqui seria
   maquiar justamente o momento em que a página deveria estar nua.
   A fonte fica de fora de propósito — sem o v2.css o body cai no serif
   padrão do navegador sozinho, que é exatamente o que se quer ver. */
html.rodo-nu, html.rodo-nu body{
  background:#fff !important;
  color:#111 !important;
}
/* etapa 0: nada. Só o caret piscando, como um arquivo em branco. */
html.rodo-nu body > *:not(.rodo):not(.rodo-obra){ display:none !important; }
/* etapa 1 em diante: o conteúdo volta, ainda sem estilo nenhum */
html.rodo-nu.rodo-html body > *:not(.rodo):not(.rodo-obra){ display:revert !important; }
/* as telas 3D só voltam no passo do JavaScript */
html.rodo-nu:not(.rodo-js) #mindField,
html.rodo-nu:not(.rodo-js) #heroCerebro{ display:none !important; }

/* ---------- o painel de obra ---------- */
.rodo-obra{
  position:fixed; right:clamp(14px, 3vw, 40px); bottom:clamp(14px, 4vh, 40px);
  z-index:9001;
  width:min(430px, 90vw);
  background:#0e1118;
  border:1px solid rgba(198,255,61,.28);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  color:#e9eef2;
  overflow:hidden;
}
.rodo-obra[hidden]{ display:none; }
.rodo-obra-topo{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:#141821;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:12px; color:#8f9bb0;
}
.rodo-bolinha{ width:9px; height:9px; border-radius:50%; background:#ff5f57; }
.rodo-bolinha:nth-of-type(2){ background:#febc2e; }
.rodo-bolinha:nth-of-type(3){ background:#28c840; }
.rodo-obra-arq{ margin-left:6px; color:#c6ff3d; }
.rodo-obra-passo{ margin-left:auto; }

.rodo-obra pre{
  margin:0; padding:14px;
  font-size:12px; line-height:1.65;
  white-space:pre; overflow:auto;
  max-height:190px;
  color:#cfe3d0;
}
.rodo-obra pre .t{ color:#7fd4ff; }     /* tag */
.rodo-obra pre .a{ color:#c6ff3d; }     /* atributo/seletor */
.rodo-obra pre .c{ color:#5d6b7a; }     /* comentário */

.rodo-obra-pe{ padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.07); }
.rodo-obra-diz{ font-size:13px; line-height:1.5; color:#b9c4d2; margin-bottom:10px; }
.rodo-obra-diz b{ color:#c6ff3d; }
.rodo-aplicar{
  width:100%; padding:11px 16px;
  background:#c6ff3d; color:#05060a;
  border:none; border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:filter .2s, transform .2s;
}
.rodo-aplicar:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.rodo-aplicar:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.rodo-desistir{
  display:block; width:100%; margin-top:8px;
  background:none; border:none;
  font-family:inherit; font-size:11px; color:#6f7c8d;
  cursor:pointer; text-decoration:underline;
}

/* ---------- caret do "arquivo vazio" ---------- */
/* sobre o branco: o lime da marca não tem contraste, então aqui ele vem
   na versão escurecida que o tema claro já usa pra texto */
.rodo-vazio{
  position:fixed; left:clamp(16px, 5vw, 60px); top:clamp(16px, 8vh, 90px);
  z-index:8999;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:14px; color:#6a7280;
}
.rodo-vazio[hidden]{ display:none; }
.rodo-vazio i{ font-style:normal; color:#42690e; animation:rodoPisca 1.05s steps(1) infinite; }
@keyframes rodoPisca{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ---------- telas estreitas ---------- */
@media (max-width:760px){
  .rodo-eu{ height:min(38vh, 260px); bottom:76px; }
  .rodo-fala{ left:12px; right:12px; bottom:calc(min(40vh, 280px) + 76px); max-width:none; font-size:14px; }
  .rodo-pilulas{ left:12px; bottom:calc(min(26vh, 190px) + 76px); }
  .rodo-obra{ right:10px; left:10px; width:auto; }
}

/* ---------- movimento reduzido: ele aparece, não desfila ---------- */
@media (prefers-reduced-motion: reduce){
  /* sem poeira: quem pediu menos movimento não quer 6 mil partículas.
     Ele simplesmente aparece e simplesmente some. */
  .rodo-eu{ transition:opacity .5s; }
  .rodo-vazio i{ animation:none; }
}