/* 02 · COMO FUNCIONA · prefixo .cmf
   Quatro passos, quatro numerais. Entre as colunas, um fio de 1 px a 15°.
   Aqui também mora a marca de capítulo (.cap e .cap-tag), usada nas seções 02 a 05 (Attack) e 05b (Defense).
   Movimento: cada <li data-prog="entra"> recebe --p do kit; daqui sai --q (0 → 1, com atraso por passo),
   que preenche o numeral vazado por um corte de 15°, desenha o traço e acende o texto.
   Laranja só como evento: o fio na frente do corte enquanto o numeral enche, e o numeral sob o ponteiro. */
.cmf{--secao-y:clamp(3.5rem,6.6vw,6rem);--cmf-b:clamp(36px,4.6vw,64px);--q:1;
  /* borda superior: degrau com espelho a 15° (o lado esquerdo começa mais baixo); o hero aparece no vão.
     borda inferior: sobra a altura do degrau da seção 03, que sobe por cima */
  padding-top:var(--secao-y);padding-bottom:calc(var(--secao-y) + var(--cmf-b));}
.cmf .secao-cab{margin-bottom:clamp(32px,4vw,56px)}
.cmf.tx-hachura::before{background-image:repeating-linear-gradient(105deg,transparent 0 46px,color-mix(in srgb,var(--texto) 7%,transparent) 46px 47px);
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,var(--c-preto));mask-image:linear-gradient(100deg,transparent 30%,var(--c-preto))}

.cmf-passo{position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--e-4);align-items:start;padding-block:var(--e-6)}
.cmf-passo:first-child{padding-top:0}
/* o fio entre passos: deitado no celular, a 15° no desktop */
.cmf-passo+.cmf-passo::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha);transform-origin:0 50%}

/* numeral: contorno + cópia cheia (::after, texto vindo de data-n) revelada por um corte de 15° */
.cmf-n{position:relative;display:block;width:fit-content;font:700 3.5rem/.86 var(--f-sans);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--texto)}
.cmf-n::after{content:attr(data-n);position:absolute;left:0;top:0;color:var(--texto);-webkit-text-stroke:1.5px var(--texto);transition:color 260ms var(--curva-entrada),-webkit-text-stroke-color 260ms var(--curva-entrada)}
.cmf-n::before{content:"";position:absolute;inset:-6% 0;border-left:3px solid var(--marca);opacity:0;pointer-events:none}
.cmf-passo p{margin-top:var(--e-2);max-width:21em;font-size:1.0625rem;line-height:1.5;color:var(--texto-2)}
.cmf-nota{margin-top:var(--e-8);font-size:var(--t-pequeno);line-height:1.5;color:var(--texto-3)}

@media (min-width:900px){
  .cmf-passos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-12)}
  .cmf-passo{display:block;padding:0 var(--e-6) 0 0}
  .cmf-passo+.cmf-passo{padding-left:clamp(32px,3.4vw,52px)}
  .cmf-passo:nth-child(3){padding-left:0}
  .cmf-passo:nth-child(3)::before{display:none}
  /* o traço: gira em torno do próprio centro, então avança no alto e recua embaixo */
  .cmf-passo+.cmf-passo::before{right:auto;bottom:0;width:1px;height:auto;background:var(--borda-controle);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:50% 50%}
  .cmf-n{font-size:clamp(5.5rem,8vw,7rem);-webkit-text-stroke-width:2px}
  .cmf-n::after{-webkit-text-stroke-width:2px}
  .cmf-passo .t-h3{margin-top:var(--e-6)}
  .cmf-passo p{font-size:1.125rem}
  .cmf-nota{margin-top:var(--e-12)}
}
@media (min-width:1100px){
  .cmf-passos{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
  .cmf-passo:nth-child(3){padding-left:clamp(32px,3.4vw,52px)}
  .cmf-passo:nth-child(3)::before{display:block}
  .cmf-passo .t-h3{font-size:clamp(1.375rem,1.9vw,1.75rem)}
  .cmf-passo{padding-right:var(--e-8)}
}

/* ---------- com a rolagem (só com o kit ativo) ---------- */
.mov .cmf-passo{--q:clamp(0,calc((var(--p,0) - .28 - var(--i,0)*.1)*5),1)}
.mov .cmf-n::after{clip-path:polygon(0 -10%,calc(var(--q)*140%) -10%,calc(var(--q)*140% - 34%) 110%,0 110%);transition:clip-path 220ms linear,color 260ms var(--curva-entrada),-webkit-text-stroke-color 260ms var(--curva-entrada)}
.mov .cmf-n::before{opacity:calc(min(var(--q),1 - var(--q))*14);transform:translate3d(calc(var(--q)*140% - 17%),0,0) skewX(calc(-1*var(--inclinacao)));transition:transform 220ms linear,opacity 220ms linear}
.mov .cmf-passo .t-h3,.mov .cmf-passo p{opacity:calc(.22 + var(--q)*.78);transform:translate3d(0,calc((1 - var(--q))*16px),0);transition:opacity 220ms linear,transform 220ms linear}
.mov .cmf-passo p{transform:translate3d(0,calc((1 - var(--q))*26px),0)}
.mov .cmf-passo+.cmf-passo::before{transform:scaleX(var(--q));transition:transform 220ms linear}
@media (min-width:900px){
  .mov .cmf-passo+.cmf-passo::before{transform:skewX(calc(-1*var(--inclinacao)));clip-path:inset(0 -2px calc((1 - var(--q))*100%) -2px);transition:clip-path 220ms linear}
}

/* ---------- com o ponteiro: o passo sob o cursor fica, os outros apagam ---------- */
@media (hover:hover) and (pointer:fine){
  .cmf-passo{transition:opacity 320ms var(--curva-entrada)}
  .cmf-passos:hover .cmf-passo:not(:hover){opacity:.3}
  .cmf-n{transition:transform 520ms cubic-bezier(.16,1,.3,1)}
  .cmf-passo:hover .cmf-n{transform:translate3d(8px,0,0)}
  .cmf-passo:hover .cmf-n::after{color:var(--marca);-webkit-text-stroke-color:var(--marca)}
}

/* a âncora antiga (#como-funciona) cai no topo do capítulo */
.cmf-ancora{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}

/* ---------- MARCA DE CAPÍTULO (.cap) · um produto, um capítulo ----------
   <p class="cap" data-vista><b class="cap-nome">Hify Attack</b><span class="cap-para">para…</span><span class="cap-n">Produto 1 de 2</span></p>
   Aba cheia com o lado direito cortado a 15°, na cor do texto da seção (preta no claro, branca no escuro).
   .cap-tag é a versão pequena, dentro do rótulo das outras seções do mesmo capítulo. */
.cap{--cap-h:48px;--cap-k:calc(var(--cap-h)*var(--tan15));display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-4);margin-bottom:var(--e-6);
  font:400 var(--t-rotulo)/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.cap-nome{display:inline-flex;align-items:center;height:var(--cap-h);padding:0 calc(var(--e-4) + var(--cap-k)) 0 var(--e-4);background:var(--texto);color:var(--fundo);
  font:700 1.25rem/1 var(--f-sans);letter-spacing:-.03em;text-transform:none;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--cap-k)) 100%,0 100%)}
.cap-para{color:var(--texto);margin-left:calc(-1*var(--e-2))}
.cap-n{margin-left:auto}
.cap-tag{display:inline-block;margin-left:var(--e-2);padding:1px 7px;border:1px solid var(--borda-controle);border-radius:var(--r-etiqueta);white-space:nowrap}
@media (max-width:519px){.cap-n{display:none}.cap-para{flex:1 1 100%;margin-left:0}}
@media (min-width:900px){
  .cap{--cap-h:60px;margin-bottom:var(--e-8)}
  .cap-nome{padding-left:var(--e-6);padding-right:calc(var(--e-6) + var(--cap-k));font-size:1.625rem}
  .secao-cab>.rotulo>.cap-tag{display:table;margin:var(--e-3) 0 0}
}
/* a aba abre pelo corte de 15°; o resto assenta depois */
.mov .cap[data-vista] .cap-nome{clip-path:polygon(0 0,0 0,calc(0px - var(--cap-k)) 100%,0 100%);transition:clip-path 900ms var(--curva-tela)}
.mov .cap[data-vista].na-vista .cap-nome{clip-path:polygon(0 0,100% 0,calc(100% - var(--cap-k)) 100%,0 100%)}
.mov .cap[data-vista] :is(.cap-para,.cap-n){opacity:0;transform:translate3d(-8px,0,0);transition:opacity 600ms cubic-bezier(.16,1,.3,1) 420ms,transform 800ms cubic-bezier(.16,1,.3,1) 420ms}
.mov .cap[data-vista] .cap-n{transition-delay:520ms}
.mov .cap[data-vista].na-vista :is(.cap-para,.cap-n){opacity:1;transform:none}