/* ==========================================================================
   site-mk-mcp-comando.css: cena do hero 'mcp-comando' (barra de comando, feixe e nos da operacao).
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* --- 12.1 Cena do hero: barra de comando, feixe e nos da operacao ------ */
/* Nao e um mini mockup de 240px: e a moldura inteira do hero (940px). Vive em
   app/views/site/mockups/mcp-comando.php e tem laco proprio em site.js. */
.mkc {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: var(--bg-card);
  font-family: var(--font-sans);
}

/* O FEIXE e ATMOSFERA, nao concorrente do texto.
   O dono olhou a primeira versao e disse que as listras atrapalhavam a
   leitura. Alem de cortar linhas e opacidade no PHP, o feixe passa por uma
   mascara vertical: ele aparece inteiro nas duas faixas de ar (acima da barra
   e abaixo dos rotulos), fica a ~30% atras da barra, a ~62% no vao onde
   correm as vias e quase some (14%) na faixa das caixas e dos rotulos, que e
   onde ha texto fino sobre branco.
   E uma rampa CONTINUA, nao um recorte: entre um patamar e o outro ha sempre
   um degrade longo, entao o feixe parece recuar para o fundo em vez de ser
   cortado com tesoura. */
.mkc__feixe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 13%,
    rgba(0, 0, 0, .30) 22%, rgba(0, 0, 0, .30) 37%,
    rgba(0, 0, 0, .62) 50%, rgba(0, 0, 0, .62) 58%,
    rgba(0, 0, 0, .14) 67%, rgba(0, 0, 0, .14) 85%,
    #000 96%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 13%,
    rgba(0, 0, 0, .30) 22%, rgba(0, 0, 0, .30) 37%,
    rgba(0, 0, 0, .62) 50%, rgba(0, 0, 0, .62) 58%,
    rgba(0, 0, 0, .14) 67%, rgba(0, 0, 0, .14) 85%,
    #000 96%);
}

.mkc__linha { fill: none; stroke-linecap: round; }

.mkc__linha--a { stroke: var(--primary); }

.mkc__linha--b { stroke: var(--mk-line); }

/* AS VIAS: o caminho de verdade entre a barra e cada no. O "d" sai do PHP no
   tamanho nominal e o site.js (modulo 24.1) remede no DOM e reescreve, a cada
   boot e a cada mudanca de largura.
   'non-scaling-stroke' porque o viewBox nominal e esticado ate o JS chegar:
   sem ele a espessura do traco mudaria junto. */
.mkc__vias {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mkc__via { fill: none; stroke: var(--line); stroke-width: 1; }

/* O RASTRO e as duas BRASAS correm por cima da via cinza. O rastro e o
   caminho ja percorrido (fraco); as brasas sao janelas curtas de tracejado
   que TERMINAM na bolinha. Empilhadas, a opacidade soma perto da ponta e cai
   para tras: a ponta forte e o comeco esmaecido, sem gradiente animado. */
.mkc__rastro {
  fill: none;
  stroke: var(--primary);
  stroke-opacity: .32;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.mkc__brasa { fill: none; stroke: var(--primary); stroke-linecap: round; }

.mkc__brasa--meio { stroke-opacity: .30; stroke-width: 2; }

.mkc__brasa--ponta { stroke-opacity: .55; stroke-width: 2.6; }

/* A bolinha do pedido. Nasce invisivel: sem JS (e com movimento reduzido) ela
   nao existe na cena, e o que fica e a via cinza. A opacidade fica na camada
   de DENTRO, que e a que o GSAP anima; a de fora e so posicao. */
.mkc__bola-fx { opacity: 0; }

.mkc__bola-halo { fill: var(--primary); opacity: .16; }

.mkc__bola-nucleo { fill: var(--primary); }

.mkc__stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 36px 32px;
}

/* Barra de comando: a mesma anatomia do campo falso do bento (pill, sparkles,
   texto de uma linha, botao redondo), no tamanho do hero. */
.mkc__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 600px;
  max-width: 100%;
  height: 68px;
  padding: 0 12px 0 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
}

/* Light sweep: o mesmo feixe branco do hover dos botoes (.st-btn__sweep),
   aqui disparado quando o pedido sai. A janela que corta e um elemento
   proprio, para o anel de realce (inset -1px) nao ser cortado junto. */
.mkc__bar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
}

.mkc__bar-luz {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  opacity: 0;
}

.mkc__bar-anel {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.mkc__bar-ico { position: relative; display: inline-flex; flex: 0 0 auto; color: var(--primary); }

.mkc__bar-ico svg { width: 20px; height: 20px; }

.mkc__bar-txt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  /* A frase e o que a cena vende, e ela e TEXTO DIGITADO, nao placeholder. Em
     --text-ghost (#a1a1a1 sobre #f3f3f7) dava 2,3:1 e disputava a atencao com
     o feixe; em --text-1-soft passa a 13,7:1 e se le primeiro. */
  color: var(--text-1-soft);
  white-space: nowrap;
  overflow: hidden;
}

.mkc__bar-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mkc__caret { flex: 0 0 auto; width: 2px; height: 21px; border-radius: 1px; background: var(--primary); }

.mkc__bar-go {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

.mkc__bar-go svg { width: 18px; height: 18px; }

/* O vao entre a barra e o trilho (era a altura da antiga haste, hoje desenhada
   dentro das vias). Fixo, e a pilha centrada: assim ele nao estica junto com a
   moldura e a via nao vira um risco solto no meio do branco. */
.mkc__rail { position: relative; display: flex; width: 100%; max-width: 840px; margin-top: 74px; padding-top: 22px; }

.mkc__no {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.mkc__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-muted);
}

.mkc__ico { display: inline-flex; }

.mkc__ico svg { width: 20px; height: 20px; stroke-width: 1.6; }

/* Camada "aceso": um segundo icone na cor da marca por cima do cinza. Assim o
   no acende por OPACIDADE, sem animar cor nem borda (contrato de motion). */
.mkc__lit {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-subtle);
  color: var(--primary-text);
  opacity: 0;
}

.mkc__ring {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
}

/* O chequezinho da chegada. A borda e da cor do fundo (nao e sombra): e o que
   o separa da caixa quando ele encosta na quina. */
.mkc__check {
  position: absolute;
  top: -7px; right: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border: 2px solid var(--bg-card);
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  opacity: 0;
  pointer-events: none;
}

.mkc__check svg { width: 11px; height: 11px; stroke-width: 3; }

.mkc__lbl {
  position: relative;
  margin-top: 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* A copia escura do rotulo por cima da cinza: o rotulo "escurece" por
   opacidade, sem animar cor. O mockup inteiro e aria-hidden. */
.mkc__lbl-on { position: absolute; left: 0; top: 0; color: var(--text-1); opacity: 0; }

@media (max-width: 1024px) {
  .mkc { height: 330px; }

  .mkc__stack { padding: 44px 24px; }

  /* 68 + 64 + 22 + 48 + 10 + 16 = 228, mais os 88 de padding: 316 dentro dos
     330. Com os 74 do desktop sobravam 4px e a pilha encostava na moldura. */
  .mkc__rail { margin-top: 64px; }
}

@media (max-width: 768px) {
  .mkc { height: 288px; }

  .mkc__stack { padding: 32px 16px; }

  .mkc__bar { width: 420px; height: 56px; padding: 0 10px 0 18px; gap: 10px; }

  .mkc__bar-ico svg { width: 17px; height: 17px; }

  .mkc__bar-txt { font-size: 14px; }

  .mkc__caret { height: 18px; }

  .mkc__bar-go { width: 38px; height: 38px; }

  .mkc__bar-go svg { width: 16px; height: 16px; }

  .mkc__rail { margin-top: 58px; padding-top: 18px; }

  .mkc__box { width: 40px; height: 40px; }

  .mkc__ico svg { width: 17px; height: 17px; }

  .mkc__check { top: -6px; right: -6px; width: 17px; height: 17px; }

  .mkc__check svg { width: 10px; height: 10px; }

  .mkc__lbl { margin-top: 8px; font-size: 11px; }
}

@media (max-width: 480px) {
  .mkc { height: 246px; }

  .mkc__stack { padding: 24px 8px; }

  .mkc__bar { height: 48px; padding: 0 8px 0 14px; gap: 8px; }

  .mkc__bar-txt { font-size: 12px; }

  .mkc__caret { height: 15px; }

  .mkc__bar-go { width: 32px; height: 32px; }

  .mkc__bar-go svg { width: 14px; height: 14px; }

  .mkc__rail { margin-top: 44px; padding-top: 14px; }

  .mkc__box { width: 34px; height: 34px; }

  .mkc__ico svg { width: 15px; height: 15px; }

  .mkc__check { top: -5px; right: -5px; width: 15px; height: 15px; border-width: 1.5px; }

  .mkc__check svg { width: 9px; height: 9px; }

  .mkc__lbl { margin-top: 6px; font-size: 10px; }
}