/* 01b · PRODUTOS · rodada 4 · prefixo .prd
   Palco de borda a borda, metade preta e metade papel, separadas pelo corte de 15°.
   A composição acompanha o corte: Attack tem o texto no alto (onde o preto é largo) e a tela embaixo;
   Defense tem a tela no alto e o texto embaixo (onde o papel é largo).
   Estado final é o padrão; estados iniciais só sob .mov. */
.prd{padding-bottom:0;
  --prd-h:clamp(580px,44vw,660px);            /* altura do palco em duas colunas */
  --prd-lean:calc(var(--prd-h)*var(--tan15)); /* quanto o corte anda da cabeça ao pé */
  --prd-c:50%}                                /* onde o corte cruza o meio da altura */

.prd-palco{position:relative;isolation:isolate;background:var(--c-papel)}
.prd-chao{display:none}
.prd-grade{position:relative}

/* ---------- Texto ---------- */
.prd-rot{display:flex;align-items:center;gap:10px}
.prd-rot b{font-weight:400;color:var(--texto)}
.prd-rot i{flex:none;width:1px;height:12px;background:var(--texto-3);transform:skewX(calc(-1*var(--inclinacao)))}
.prd-nome{margin-top:var(--e-3);margin-left:-.04em;font:700 clamp(2.75rem,5.4vw,4.75rem)/1 var(--f-sans);letter-spacing:-.045em;color:var(--texto);white-space:nowrap}
.prd-frase{margin-top:var(--e-4);max-width:27em;font:400 var(--t-lead)/1.5 var(--f-sans);color:var(--texto-2);text-wrap:pretty}
.prd-link{display:inline-flex;align-items:center;gap:10px;margin-top:var(--e-6);padding-bottom:6px;font:700 1rem/1.2 var(--f-sans);color:var(--texto);
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size 420ms cubic-bezier(.16,1,.3,1)}
.prd-seta{display:inline-block;transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.prd-link:hover .prd-seta,.prd-link:focus-visible .prd-seta{transform:translate3d(6px,0,0)}
.prd-link:hover,.prd-link:focus-visible{background-size:100% 2px}

/* ---------- Telas ---------- */
.prd-tela{overflow:hidden;border:1px solid var(--linha);border-radius:var(--r-superficie);font-size:var(--t-pequeno);line-height:1.4;color:var(--texto-2)}
.prd-a .prd-tela{background:var(--c-sup-1);box-shadow:0 40px 80px -40px var(--c-preto)}
.prd-d .prd-tela{background:var(--c-branco);box-shadow:0 30px 60px -36px color-mix(in srgb,var(--c-preto) 30%,transparent)}
.prd-tela>p{display:flex;align-items:center;gap:12px;min-width:0;padding:0 var(--e-4)}
.prd-corta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prd-cab{min-height:48px;border-bottom:1px solid var(--linha)}
.prd-cab b{min-width:0;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texto)}
.prd-id{flex:none;font:400 var(--t-legenda)/1 var(--f-mono);letter-spacing:.04em;color:var(--texto-3)}
.prd-cod{min-height:40px;font:400 .8125rem/1.4 var(--f-mono);color:var(--texto)}
.prd-cod i{flex:none;width:1.5em;font-style:normal;text-align:right;color:var(--texto-3)}
.prd-cod .prd-corta{white-space:pre}
.prd-verbo{flex:none;color:var(--texto-3)}
.prd-res .prd-corta{font-family:var(--f-sans);font-size:var(--t-pequeno);color:var(--texto-2)}
.prd-tag{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--borda-controle);border-radius:var(--r-etiqueta);font:700 var(--t-legenda)/1 var(--f-sans);color:var(--texto);white-space:nowrap}
.prd-tag-l{border-color:var(--c-laranja);background:var(--c-laranja);color:var(--c-preto);font-family:var(--f-mono)}
.prd-a .prd-res{position:relative;margin-top:4px;min-height:48px;background:linear-gradient(90deg,color-mix(in srgb,var(--c-laranja) 20%,transparent),transparent 70%)}
.prd-a .prd-res::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-laranja)}
.prd-d .prd-cod{position:relative}
.prd-d .prd-risco{margin-top:6px;background:color-mix(in srgb,var(--c-laranja) 12%,transparent)}
.prd-d .prd-risco::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-laranja)}
.prd-d .prd-mais{background:var(--c-papel)}
.prd-pe{flex-wrap:wrap;gap:6px 20px!important;min-height:48px;margin-top:6px;padding-block:10px!important;border-top:1px solid var(--linha);font-size:var(--t-legenda);color:var(--texto-2)}
.prd-pe>span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.prd-pe>span::before{content:"";flex:none;width:9px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.prd-ok{height:28px;padding:0 10px;border-radius:var(--r-etiqueta);background:var(--c-preto);color:var(--c-branco);font-weight:700}

/* ---------- Empilhado (até 1099 px) ---------- */
.prd-grade{padding-inline:0;max-width:none}
.prd-p{--prd-b:36px;padding:clamp(40px,8vw,64px) var(--margem)}
.prd-p .prd-tela{margin-top:var(--e-8);max-width:560px}
.prd-d{display:flex;flex-direction:column;margin-top:calc(-1*var(--prd-b));padding-top:calc(clamp(40px,8vw,64px) + var(--prd-b));
  clip-path:polygon(0 var(--prd-b),58% var(--prd-b),calc(58% + var(--prd-b)*var(--tan15)) 0,100% 0,100% 100%,0 100%)}
.prd-a{padding-bottom:calc(clamp(40px,8vw,64px) + var(--prd-b))}
.prd-d .prd-txt{order:-1}

/* ---------- Duas colunas com o corte (1100 px em diante) ---------- */
@media (min-width:1100px){
  .prd-chao{display:block;position:absolute;inset:0;z-index:-1;background:var(--c-preto);
    clip-path:polygon(0 0,calc(var(--prd-c) + var(--prd-lean)/2) 0,calc(var(--prd-c) - var(--prd-lean)/2) 100%,0 100%);
    transition:clip-path 700ms cubic-bezier(.16,1,.3,1)}
  /* hachura de 15° que morre antes do corte */
  .prd-chao::after{content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(105deg,transparent 0 46px,color-mix(in srgb,var(--c-branco) 6%,transparent) 46px 47px);
    -webkit-mask-image:linear-gradient(90deg,transparent 18%,var(--c-preto) 50%);mask-image:linear-gradient(90deg,transparent 18%,var(--c-preto) 50%)}
  .prd-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:var(--prd-h);max-width:calc(var(--largura) + 2*var(--margem));padding-inline:var(--margem)}
  .prd-p{display:flex;flex-direction:column;justify-content:space-between;min-width:0;margin:0;padding:clamp(40px,4vw,56px) 0;background:none;clip-path:none;
    transition:opacity 500ms var(--curva-entrada)}
  .prd-d .prd-txt{order:0}
  .prd-p .prd-tela{margin-top:0;max-width:none}
  /* cada bloco se afasta do corte no ponto em que o corte está mais perto dele */
  .prd-a .prd-txt{margin-right:var(--e-12)}
  .prd-a .prd-tela{margin-right:calc(var(--prd-lean)/2 + var(--e-12))}
  .prd-d .prd-tela{margin-left:calc(var(--prd-lean)/2 + var(--e-12))}
  .prd-d .prd-txt{margin-left:var(--e-16)}
  /* com ponteiro ou foco: o corte cede para o lado escolhido e o outro recua */
  .mov .prd-palco[data-ativo="a"]{--prd-c:52.4%}
  .mov .prd-palco[data-ativo="d"]{--prd-c:47.6%}
  .mov .prd-palco[data-ativo="a"] .prd-d,.mov .prd-palco[data-ativo="d"] .prd-a{opacity:.62}
}

/* ---------- Entrada das telas ---------- */
.mov .prd-p:not(.na-vista) .prd-s,.mov .prd-p.prd-zera .prd-s{opacity:0;animation:none}
.mov .prd-p.na-vista .prd-s{animation:prd-s 700ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--t,0ms) + 350ms)}
.mov .prd-p.prd-ja .prd-s{animation-delay:var(--t,0ms)}
.mov .prd-p.na-vista .prd-tag-l,.mov .prd-p.na-vista .prd-ok{animation:prd-carimbo 460ms cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--tt,1000ms) + 350ms)}
.mov .prd-p.prd-ja .prd-tag-l,.mov .prd-p.prd-ja .prd-ok{animation-delay:var(--tt,1000ms)}
.mov .prd-p.prd-zera .prd-tag-l,.mov .prd-p.prd-zera .prd-ok{animation:none;opacity:0}
.prd-a{--tt:760ms}.prd-d{--tt:1300ms}
@keyframes prd-s{from{opacity:0;transform:translate3d(-10px,0,0)}}
@keyframes prd-carimbo{0%{opacity:0;transform:scale(1.5)}55%{opacity:1}100%{opacity:1;transform:scale(1)}}