/* =====================================================================
   17. AFFORDANCE NO DESKTOP
   Tudo que é clicável reage de um jeito que só coisa clicável reage.
   Só com mouse; loops só com .anima-ok; reduced-motion zera tudo (seção 14).
   ===================================================================== */
/* 17.1 D1 · Botão principal: tinta corre por dentro, sombra vinho, magnetismo */
@media (hover: hover) and (pointer: fine){
  .btn-primario{ position: relative; isolation: isolate; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background-color .15s; }
  .btn-primario::before{ content: ""; position: absolute; inset: -1.5px; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.7,0,.2,1); }
  .btn-primario:hover{ background: var(--wine); box-shadow: 6px 6px 0 var(--wine); transform: translate(calc(var(--mx, 0px) - 1px), calc(var(--my, 0px) - 1px)); }
  .btn-primario:hover::before{ transform: scaleX(1); transform-origin: left center; }
  .btn-primario:active{ box-shadow: 2px 2px 0 var(--wine); transform: translate(calc(var(--mx, 0px) + 2px), calc(var(--my, 0px) + 2px)); }
}

/* 17.2 D2 · Botão secundário: hachura de gravura sobe por dentro */
@media (hover: hover) and (pointer: fine){
  .btn:not(.btn-primario){ position: relative; isolation: isolate; overflow: hidden; transition: box-shadow .25s ease, transform .15s; }
  .btn:not(.btn-primario)::before{
    content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .4s cubic-bezier(.7,0,.2,1);
    background: repeating-linear-gradient(-45deg, rgba(21,19,15,.13) 0 1.5px, transparent 1.5px 6px), var(--paper-light);
  }
  .btn-claro::before{ background: repeating-linear-gradient(-45deg, rgba(242,232,210,.2) 0 1.5px, transparent 1.5px 6px), rgba(242,232,210,.07) !important; }
  .btn:not(.btn-primario):not([disabled]):hover{ background: transparent; box-shadow: 3px 3px 0 currentColor; }
  .btn:not(.btn-primario):not([disabled]):hover::before{ transform: none; }
}

/* 17.3 D3 · Link com seta: o sublinhado sai pela direita e volta pela esquerda; a seta cutuca */
@media (hover: hover) and (pointer: fine){
  .link-seta:hover{ animation: sublinha .55s cubic-bezier(.7,0,.2,1); }
  .anima-ok .link-seta:hover::after{ animation: cutuca .8s ease-in-out infinite; }
}
@keyframes sublinha{
  0%{ background-size: 100% 1.5px; background-position: 100% calc(50% + .95em); }
  45%{ background-size: 0 1.5px; background-position: 100% calc(50% + .95em); }
  46%{ background-size: 0 1.5px; background-position: 0 calc(50% + .95em); }
  100%{ background-size: 100% 1.5px; background-position: 0 calc(50% + .95em); }
}
@keyframes cutuca{ 50%{ transform: translateX(5px); } }

/* 17.4 D4 · Relações: a linha avança, nasce um filete vinho, a seta estica */
.rel-seta{ display: inline-block; transform-origin: left center; transition: transform .25s ease, margin .25s ease; }
@media (hover: hover) and (pointer: fine){
  .rel-cab{ position: relative; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
  .rel-cab::before{ content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; background: var(--wine); transform: scaleY(0); transition: transform .25s ease; }
  .rel-cab:hover{ transform: translateX(10px); }
  .rel-cab:hover::before{ transform: scaleY(1); }
  .rel-cab:hover .rel-seta{ transform: scaleX(1.7); margin-right: .75em; }
  a.rel-cab::after{
    content: "Abrir relação →"; position: absolute; right: 12px; bottom: 12px; pointer-events: none;
    font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wine);
    opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s ease;
  }
  a.rel-cab:hover::after{ opacity: 1; transform: none; }
  details.rel > .rel-cab::after{ transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
  details.rel > .rel-cab:hover::after{ transform: rotate(90deg) scale(1.3); }
}

/* 17.5 D5 · Linha de dossiê e item fora da toga: o código do arquivo avança ao passar o mouse */
@media (hover: hover) and (pointer: fine){
  .indice a .ind-num{ transition: transform .2s ease, color .2s ease; }
  .indice a:hover .ind-num{ transform: translateX(4px); color: var(--wine); }
  .fora-lista a{ transition: padding-left .2s ease; }
  .fora-lista a:hover{ padding-left: 8px; }
}

/* 17.6 D6 · Índice de dossiês: o número anda e o título ganha seta */
@media (hover: hover) and (pointer: fine){
  .ind-num{ transition: transform .2s ease, color .2s ease; }
  .indice a:hover .ind-num{ transform: translateX(5px); color: var(--wine); }
  .indice a:hover .ind-titulo::after{ content: " →"; color: var(--wine); }
}

/* 17.7 D7 · Prévia do mapa: moldura de cantos se fecha, o grafo aproxima, surge a chamada */
.mini-cta{ display: none; }
@media (hover: hover) and (pointer: fine){
  .mini-palco::before{ content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none; border: 1px solid var(--arcane-gold); background: var(--cantos); opacity: 0; transform: scale(1.04); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
  .mini-palco:hover::before{ opacity: 1; transform: none; }
  .mini-palco svg{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .mini-palco:hover svg{ transform: scale(1.035); }
  .mini-cta{
    display: inline-flex; gap: 8px; position: absolute; right: 14px; bottom: 12px; z-index: 3; pointer-events: none;
    background: var(--ink); color: var(--paper-light); box-shadow: 4px 4px 0 var(--wine); padding: 8px 12px;
    font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
  }
  .mini-cta b{ color: var(--arcane-gold); display: inline-block; }
  .mini-palco:hover .mini-cta{ opacity: 1; transform: none; }
  .mini-palco.sincronia .mini-cta{ opacity: 0; }
  .anima-ok .mini-palco:hover .mini-cta b{ animation: cutuca .8s ease-in-out infinite; }
}

/* 17.8 D8 · Carta: o canto inferior direito levanta como papel */
.carta-dobra{ position: absolute; right: 0; bottom: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
@media (hover: hover) and (pointer: fine){
  .carta-dobra{
    background: linear-gradient(to top left, transparent 50%, rgba(21,19,15,.22) 50%, var(--stone) 53%, var(--paper-light) 78%, var(--paper) 100%);
    filter: drop-shadow(-2px -2px 3px rgba(21,19,15,.3)); transition: width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1);
  }
  .carta:hover .carta-dobra, .carta:focus-visible .carta-dobra{ width: 38px; height: 38px; }
  .capa-carta:has(.carta:hover) #dica-carta, .capa-carta:has(.carta:focus-visible) #dica-carta{ color: var(--wine); }
}

/* 17.9 D9 · Painel da edição: o número sobe e ganha seta dourada */
@media (hover: hover) and (pointer: fine){
  .terminal a.tk b{ display: inline-block; transition: transform .2s ease; }
  .terminal a.tk::after{ content: "→"; color: var(--arcane-gold); display: inline-block; max-width: 0; margin-left: -8px; overflow: hidden; transition: max-width .25s ease, margin .25s ease; }
  .terminal a.tk:hover b{ transform: translateY(-2px); }
  .terminal a.tk:hover::after{ max-width: 1.2em; margin-left: 0; }
}

/* 17.10 D10 · Menu: o sublinhado nasce do centro */
@media (hover: hover) and (pointer: fine){
  .nav-desk a{ position: relative; }
  .nav-desk a:hover, .nav-desk a[aria-current="page"], .nav-desk a.no-trecho{ text-decoration: none; }
  .nav-desk a::after{ content: ""; position: absolute; left: 13px; right: 13px; bottom: 13px; height: 2px; background: var(--wine); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .nav-desk a:hover::after, .nav-desk a[aria-current="page"]::after, .nav-desk a.no-trecho::after{ transform: scaleX(1); }
  .nav-desk a.no-trecho::after{ height: 3px; }
}

/* 17.11 D11 · Traços do "Como ler": reportado e contestado marcham; confirmado e sob apuração se desenham. É a legenda, não um dado. */
@media (hover: hover) and (pointer: fine){
  .anima-ok button.traco:hover .am-reportado{ animation: marcha-rep .6s linear infinite; }
  .anima-ok button.traco:hover .am-contestado{ animation: marcha-con .5s linear infinite; }
  button.traco:hover .am-confirmado, button.traco:hover .am-sob-apuracao{ stroke-dasharray: 40; animation: desenha .5s ease both; }
}
@keyframes marcha-rep{ to{ stroke-dashoffset: -8; } }
@keyframes marcha-con{ to{ stroke-dashoffset: -4.6; } }
@keyframes desenha{ from{ stroke-dashoffset: 40; } to{ stroke-dashoffset: 0; } }

/* 17.12 D12 · Chips, nomes, passos do guia, canais e nós do grafo levantam */
@media (hover: hover) and (pointer: fine){
  .chip span, .ent-chips a, .guia-passo, .canais a{ transition: transform .15s ease, box-shadow .15s ease; }
  .chip:hover span, .ent-chips a:hover, .guia-passo:hover, .canais a:hover{ transform: translateY(-1px); box-shadow: 3px 3px 0 var(--ink); }
  .no .forma{ transform-box: fill-box; transform-origin: center; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
  .no:hover .forma{ transform: scale(1.22); }
  .anima-ok .pista:hover .pista-seta{ animation: pista-desce .35s ease-in-out infinite alternate; }
}