/* 05b · DEFENSE · prefixo .def-
   Capítulo do segundo produto: fundo de papel (o Attack alterna preto e branco) e uma tela clara, de revisão
   de código, à esquerda; os três itens à direita.
   O padrão (sem data-e) é o estado final: patch aplicado. O JS, só com movimento, põe data-e na moldura:
   lendo → risco → sugestao → aplicando → (sem data-e).
   Laranja só no risco: a linha do return, o pulso que a marca e o selo "Risco encontrado". */

.def{--fundo:var(--c-papel);--sup:var(--c-branco);--sup-2:var(--c-papel);--secao-y:clamp(4rem,6.6vw,6rem);
  padding-top:calc(var(--secao-y) + var(--def-bd)*.6);--def-bd:clamp(40px,6vw,88px);background:var(--fundo)}
.def .secao-cab{margin-bottom:clamp(32px,4vw,56px)}
.def.tx-hachura::before{background-image:repeating-linear-gradient(105deg,transparent 0 46px,color-mix(in srgb,var(--texto) 6%,transparent) 46px 47px);
  -webkit-mask-image:linear-gradient(260deg,transparent 35%,var(--c-preto));mask-image:linear-gradient(260deg,transparent 35%,var(--c-preto))}

/* borda superior: o preto do capítulo Attack desce num degrau largo de 15°, que anda com a rolagem */
.def-borda{--s:calc(86% - var(--p,1)*46%);--kb:calc(var(--def-bd)*var(--tan15));
  position:absolute;left:0;right:0;top:-1px;height:var(--def-bd);background:var(--c-preto);pointer-events:none;
  clip-path:polygon(calc(var(--s) + var(--kb)) 0,100% 0,100% 100%,var(--s) 100%)}

.def-corpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--calha);row-gap:var(--e-12)}
.def-fig,.def-itens{grid-column:1/-1;min-width:0}

/* ---------- a tela: pull request ---------- */
.def-pr{position:relative;box-shadow:0 28px 56px -40px color-mix(in srgb,var(--c-preto) 45%,transparent)}
.def-topo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);padding:var(--e-4)}
.def-ic{color:var(--texto-3)}
.def-nome{flex:1 1 calc(100% - 40px);min-width:0;font:700 1.0625rem/1.25 var(--f-sans);letter-spacing:-.02em;color:var(--texto)}
.def-num{display:block;font:400 .8125rem/1.5 var(--f-mono);letter-spacing:0;color:var(--texto-3)}
.def-nome b{display:block}

/* selo de estado */
.def-selo{position:relative;flex:0 1 auto;display:inline-flex;align-items:center;gap:var(--e-2);width:fit-content;max-width:100%;min-height:32px;padding:0 12px 0 10px;
  border:1px solid var(--texto);border-radius:var(--r-etiqueta);background:var(--texto);color:var(--fundo);font:700 .875rem/1.2 var(--f-sans)}
.def-selo-ok{flex:none;width:14px;height:14px}
.def-selo-p{display:none}
[data-e] .def-selo{background:transparent;border-color:var(--borda-controle);color:var(--texto-2);font-weight:400}
[data-e] .def-selo-ok{display:none}
:is([data-e="risco"],[data-e="sugestao"],[data-e="aplicando"]) .def-selo{border-color:var(--acento);color:var(--acento);font-weight:700}
:is([data-e="risco"],[data-e="sugestao"],[data-e="aplicando"]) .def-selo-p{display:block}
.mov .def-selo.def-troca{animation:def-selo 620ms var(--curva-tela) both}
@keyframes def-selo{from{clip-path:inset(-2px 100% -2px -2px)}to{clip-path:inset(-2px -2px -2px -2px)}}

/* arquivo e diff */
.def-arq{border-top:1px solid var(--linha)}
.def-arq-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);padding:10px var(--e-4);border-bottom:1px solid var(--linha);background:var(--sup-2);font:400 .8125rem/1.5 var(--f-mono);color:var(--texto)}
.def-arq-cab code,.def-diff code,.def-sug code{font:inherit}
.def-mais{flex:none;font-weight:700}
.def-diff{position:relative;padding-block:var(--e-2);font:400 .8125rem/1.75 var(--f-mono);color:var(--texto-3);overflow:hidden}
.def-l{position:relative;display:grid;grid-template-rows:1fr}
.def-li{display:grid;grid-template-columns:2.6em 1.3em minmax(0,1fr);min-height:0;overflow:hidden;padding-right:var(--e-3)}
.def-ln{padding-left:var(--e-3);color:var(--texto-3);opacity:.75;user-select:none;-webkit-user-select:none}
.def-sg{text-align:center;color:var(--texto);user-select:none;-webkit-user-select:none}
.def-li code{display:block;min-width:0;padding-left:calc(var(--n,0)*1ch + 2ch);text-indent:-2ch;white-space:pre-wrap;overflow-wrap:break-word}
.def-li code b{font-weight:700;color:var(--texto)}
.def-add{color:var(--texto)}
.def-add::before{content:"";position:absolute;inset:0;z-index:0;background:color-mix(in srgb,var(--texto) 5%,transparent);pointer-events:none}
.def-l>.def-li{position:relative;z-index:1}

/* a linha em risco: marca laranja à esquerda e fundo tingido, só enquanto o risco está aberto */
.def-alvo::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--marca);opacity:0;transition:opacity 400ms var(--curva-entrada)}
.def-alvo::before{transition:background-color 400ms var(--curva-entrada)}
:is([data-e="risco"],[data-e="sugestao"],[data-e="aplicando"]) .def-alvo::after{opacity:1}
:is([data-e="risco"],[data-e="sugestao"],[data-e="aplicando"]) .def-alvo::before{background:color-mix(in srgb,var(--marca) 14%,transparent)}
.def-pulso{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:var(--marca);transform:scaleX(0);pointer-events:none}
.mov [data-e="risco"] .def-pulso{animation:def-pulso 760ms var(--curva-tela) both}
@keyframes def-pulso{
  0%{transform:scaleX(0);transform-origin:0 50%}
  50%{transform:scaleX(1);transform-origin:0 50%}
  51%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}

/* antes do patch: as três linhas novas ainda não estão no diff */
.def-nova{transition:grid-template-rows 620ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--j,0)*90ms)}
[data-e] .def-nova{grid-template-rows:0fr;transition:none}
.def-nova::after{content:"";position:absolute;inset:0;z-index:0;background:color-mix(in srgb,var(--texto) 16%,transparent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.mov .def-entrou .def-nova::after{animation:def-realce 1100ms var(--curva-tela) both;animation-delay:calc(120ms + var(--j,0)*90ms)}
@keyframes def-realce{0%{transform:scaleX(0);opacity:1}45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* lendo: uma régua a 15° varre o diff duas vezes */
.def-regua{display:none;position:absolute;top:0;bottom:0;left:0;width:100%;z-index:3;pointer-events:none}
.def-regua::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--texto);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:0 100%}
.def-regua::after{content:"";position:absolute;right:100%;top:0;bottom:0;width:120px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--texto) 10%,transparent));transform:skewX(calc(-1*var(--inclinacao)));transform-origin:100% 100%}
.mov .def-vivo[data-e="lendo"] .def-regua{display:block;animation:def-regua 760ms var(--curva-tela) 2 both}
@keyframes def-regua{0%{transform:translate3d(-8%,0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate3d(104%,0,0);opacity:0}}

/* comentário do bot */
.def-coment{--def-g:var(--e-3);display:grid;padding:var(--e-4);border-top:1px solid var(--linha)}
.def-autor{display:flex;align-items:center;gap:var(--e-2);font:400 .9375rem/1 var(--f-sans);color:var(--texto)}
.def-avatar{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-right:2px;border-radius:var(--r-etiqueta);background:var(--texto);color:var(--fundo)}
.def-avatar svg{width:14px;height:auto}
.def-autor .etiqueta{height:20px;padding:0 6px;font-size:.8125rem}
.def-fala{position:relative;margin-top:var(--def-g)}
.def-texto{font:400 1rem/1.5 var(--f-sans);color:var(--texto);text-wrap:pretty;max-width:38em}
.def-lendo{display:none;position:absolute;left:0;top:0;align-items:baseline;gap:var(--e-2);font:400 .9375rem/1.5 var(--f-sans);color:var(--texto-3)}
[data-e="lendo"] .def-lendo{display:flex}
[data-e="lendo"] .def-texto{visibility:hidden}
/* digitação: o texto inteiro fica no lugar; a parte ainda não digitada é invisível */
.def-tx-b{opacity:0}
.def-tx-a.def-cur::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.14em;background:var(--texto)}

/* sugestão: visível antes do patch; depois recolhe (as linhas foram para o diff) */
.def-sug{display:grid;grid-template-rows:0fr;transition:grid-template-rows 620ms cubic-bezier(.16,1,.3,1),opacity 300ms var(--curva-entrada);opacity:0}
.def-sug-in{min-height:0;overflow:hidden}
.def-sug-in>:first-child{padding-top:var(--def-g)}
[data-e] .def-sug{grid-template-rows:1fr;opacity:1;transition:none}
:is([data-e="lendo"],[data-e="risco"]) .def-sug{visibility:hidden}
.def-sug-t{margin-bottom:var(--e-2);font:400 .8125rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.def-sug-cod{padding-block:var(--e-2);border:1px solid var(--linha);border-radius:var(--r-moldura);background:var(--sup-2);font:400 .8125rem/1.75 var(--f-mono);color:var(--texto)}
.def-sug-cod .def-li{grid-template-columns:1.9em minmax(0,1fr)}
.mov [data-e="sugestao"] .def-sug-t{animation:def-sobe 520ms cubic-bezier(.16,1,.3,1) both}
.mov [data-e="sugestao"] .def-sug-cod{animation:def-sobe 520ms cubic-bezier(.16,1,.3,1) 80ms both}
.mov [data-e="sugestao"] .def-sug-cod .def-li{animation:def-sobe 520ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(180ms + var(--j,0)*90ms)}
@keyframes def-sobe{from{opacity:0;transform:translate3d(-3px,10px,0)}to{opacity:1;transform:none}}

/* ação */
.def-acao{margin-top:var(--def-g);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-3);min-height:48px}
.def-feito{display:inline-flex;align-items:center;gap:var(--e-2);font:700 .9375rem/1.2 var(--f-sans);color:var(--texto)}
.def-feito svg{flex:none;width:16px;height:16px}
[data-e] .def-feito{display:none}
.def-aplicar{position:relative;overflow:hidden;min-width:11.5em;background:var(--texto);color:var(--fundo)}
.def-aplicar:hover{background:var(--c-sup-2)}
.def-pr:not([data-e]) .def-aplicar{display:none}
[data-e] .def-refazer{display:none}
/* antes de haver sugestão o botão já está lá, apagado (aria-disabled); ao aplicar, o rótulo "Aplicando" fica legível */
.def-aplicar{transition:opacity 400ms var(--curva-entrada),background-color var(--dur-micro) var(--curva-entrada)}
.def-aplicar[aria-disabled="true"]{opacity:.3}
.def-aplicar[aria-busy="true"]{opacity:1}
.def-refazer{gap:var(--e-2)}
.def-refazer .icone{transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.def-refazer:hover .icone{transform:rotate(-180deg)}
/* contagem: o botão se aplica sozinho quando a linha chega ao fim */
.def-conta{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--fundo) 55%,transparent);transform:scaleX(0);transform-origin:0 50%}
.mov .def-espera .def-conta{animation:def-conta var(--def-espera,5200ms) linear 900ms both}
@keyframes def-conta{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- itens ---------- */
.def-itens{display:grid;gap:0}
.def-itens>li{position:relative;padding:var(--e-4) 0;border-top:1px solid var(--linha)}
.def-itens>li:last-child{border-bottom:1px solid var(--linha)}
.def-itens p{margin-top:6px;font:400 clamp(1rem,1.3vw,1.125rem)/1.45 var(--f-sans);color:var(--texto-2);text-wrap:pretty}
.def-itens>li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--texto);transform:scaleX(0);transform-origin:0 50%;transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.def-itens>li.def-on::before{transform:scaleX(1)}
.mov .def-itens>li{transition:opacity 400ms var(--curva-entrada)}
.def-itens.def-tem-on>li:not(.def-on){opacity:.45}

@media (max-width:339px){
  .def-li{grid-template-columns:2.4em 1.1em minmax(0,1fr);padding-right:var(--e-2)}
}
@media (min-width:720px){
  .def-topo{flex-wrap:nowrap;padding:20px var(--e-6)}
  .def-nome{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--e-3);font-size:1.25rem}
  .def-num{font-size:.875rem}
  .def-arq-cab{padding:12px var(--e-6);font-size:.875rem}
  .def-diff{padding-block:var(--e-3);font-size:.9375rem}
  .def-li{grid-template-columns:3.4em 1.6em minmax(0,1fr);padding-right:var(--e-6)}
  .def-ln{padding-left:var(--e-6)}
  .def-li code{padding-left:calc(var(--n,0)*2ch + 2ch)}
  .def-coment{--def-g:var(--e-4);padding:var(--e-6)}
  .def-texto{font-size:1.0625rem}
  .def-sug-cod{font-size:.9375rem}
  .def-sug-cod .def-li{grid-template-columns:2.4em minmax(0,1fr)}
  .def-pr .moldura-nota{padding-inline:var(--e-6)}
  .def-itens{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--calha)}
  .def-itens>li,.def-itens>li:last-child{padding:20px var(--e-4) 0 0;border-bottom:0}
}
@media (min-width:1200px){
  .def-corpo{align-items:start}
  .def-fig{grid-column:1/span 8}
  .def-itens{grid-column:9/-1;grid-template-columns:1fr;margin-left:var(--e-6);margin-top:var(--e-2)}
  .def-itens>li,.def-itens>li:last-child{padding:var(--e-6) 0}
  .def-itens>li:last-child{border-bottom:1px solid var(--linha)}
}