/* 07 · INTEGRAÇÕES · prefixo .int-
   Cabeçalho curto e duas faixas de nomes grandes, de ponta a ponta, em sentidos opostos (kit .faixa).
   Entre os nomes, uma barra de 15°. Com ponteiro: os nomes ficam apagados e o que está sob o ponteiro
   acende (a faixa para, pelo kit). No toque: tudo aceso. Sem movimento: listas paradas em linhas. */

.int{--secao-y:clamp(3.5rem,6.6vw,6rem);overflow:hidden}

/* borda superior: fio em degrau de 15°, à direita, que anda com a rolagem */
.int-borda{--bd:clamp(24px,3.4vw,48px);--s:calc(86% - var(--p,1)*38%);--kb:calc(var(--bd)*var(--tan15));
  position:absolute;left:0;right:0;top:0;height:var(--bd);background:var(--borda-controle);pointer-events:none;
  clip-path:polygon(0 0,calc(var(--s) + var(--kb)) 0,var(--s) calc(100% - 1px),100% calc(100% - 1px),100% 100%,calc(var(--s) - 1px) 100%,calc(var(--s) + var(--kb) - 1px) 1px,0 1px)}

.int-corpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--calha);row-gap:var(--e-6)}
.int-rotulo,.int-texto{grid-column:1/-1;min-width:0}
.int-linha{margin-top:var(--e-6);max-width:36em;font:400 clamp(1rem,1.3vw,1.125rem)/1.5 var(--f-sans);color:var(--texto-2);text-wrap:pretty}

/* botão real de pausa das faixas (só existe com movimento) */
.int-pausa{position:relative;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:36px;min-width:112px;padding:0 14px;border:1px solid var(--borda-controle);border-radius:var(--r-controle);font:700 .8125rem/1 var(--f-sans);color:var(--texto);transition:background-color var(--dur-micro) var(--curva-entrada),border-color var(--dur-micro) var(--curva-entrada),color var(--dur-micro) var(--curva-entrada)}
.int-pausa::before{content:"";position:absolute;inset:-5px 0}
.int-pausa:hover{border-color:var(--texto)}
.int-pausa-ic{flex:none;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.int-pausado .int-pausa{background:var(--texto);border-color:var(--texto);color:var(--fundo)}
.int-pausado .int-pausa-ic{border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- faixas ---------- */
.int-faixas{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--linha)}
.int-faixa{--faixa-vao:0px;--faixa-dur:46s;border-bottom:1px solid var(--linha)}
.int-faixa.faixa-volta{--faixa-dur:54s}
.int-nomes>li{position:relative;flex:none;display:flex;align-items:center;gap:.42em;padding:.62em .95em .62em .7em;font:700 clamp(1.75rem,4.4vw,3.75rem)/1 var(--f-sans);letter-spacing:-.04em;color:var(--texto);white-space:nowrap;transition:opacity 500ms var(--curva-entrada)}
.int-nomes img{flex:none;width:.72em;height:.72em;filter:brightness(0) invert(1)}
/* barra de 15° entre os nomes */
.int-nomes>li::after{content:"";position:absolute;right:0;top:50%;width:2px;height:.9em;margin-top:-.45em;background:var(--borda-controle);transform:skewX(calc(-1*var(--inclinacao)))}
.mov-ponteiro .int-nomes>li{opacity:.34}
.mov-ponteiro .int-nomes>li:hover{opacity:1}
.mov-ponteiro .int-nomes>li:hover::after{background:var(--texto)}
/* parada: pelo botão, ou fora da janela */
.int-pausado .faixa-trilho,.int-fora .faixa-trilho{animation-play-state:paused}

/* sem movimento: listas paradas, alinhadas ao contêiner */
html:not(.mov) .int-faixas{padding-inline:var(--margem,20px);border-top:0}
html:not(.mov) .int-faixa{max-width:var(--largura);margin-inline:auto;border-top:1px solid var(--linha);border-bottom:0}
html:not(.mov) .int-nomes{min-width:0;width:100%}
html:not(.mov) .int-nomes>li{font-size:clamp(1.125rem,2.2vw,1.75rem);padding:.7em 1.1em .7em 0;margin-right:1.1em}
html:not(.mov) .int-nomes>li:last-child::after{display:none}

@media (min-width:1024px){
  .int-rotulo,.int-texto{grid-column:1/span 8}
  .int-pausa{grid-column:10/-1;grid-row:2;justify-self:end;align-self:end}
}