/* ============================================================================
   260827 — CARD "PROJETO EM CONSTRUÇÃO" (glitch + fragmentação)
   ----------------------------------------------------------------------------
   Alvo: cards da home sem case publicado. O JS (260827_card-wip.js) marca
   com .hs-card--wip todo .hs-card cujo link é "#" (ou inexistente) e injeta
   o overlay .hs-wip-fx com 3 fatias da própria imagem + véu + texto.
   Quando o card ganhar link real, o efeito some sozinho — sem manutenção.

   O card fica totalmente parado fora do hover. No hover, roda um ciclo de 2.4s:
     0–58%   repouso (card normal)
     58–64%  burst 1 — fatias da imagem saltam (steps duros, digital)
     66–72%  burst 2 — véu esbranquiçado sobe por baixo das fatias
     72–86%  estado "obras": imagem coberta, fragmentos por cima, texto
     86–100% resolve de volta ao normal
   ============================================================================ */

.hs-card--wip{
  --wip-veu:#EEF0F6;   /* esbranquiçado (mesmo gelo do modo claro)   */
  --wip-ink:#140A2D;   /* tinta do texto sobre o véu                 */
  --wip-acc:#EC0F7C;   /* magenta constante nos 3 modos              */
  --wip-ciclo:2.4s;
  --wip-inicio:-1.4s; /* entra direto no primeiro burst, sem espera no hover */
}
.hs-card--wip img{will-change:opacity}

/* overlay inteiro: não captura clique nem leitores de tela */
.hs-wip-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hs-wip-fx i{position:absolute;inset:0;display:block}

/* as 3 fatias usam a MESMA imagem do card (JS joga o src em --wip-img) */
.hs-wip-fx .s1,.hs-wip-fx .s2,.hs-wip-fx .s3{
  background-image:var(--wip-img);
  background-size:cover;
  background-position:center;
  opacity:0;
}

/* véu esbranquiçado: cobre a imagem na fase de "obras" */
.hs-wip-fx .veu{background:var(--wip-veu);opacity:0}

/* texto */
.hs-wip-fx .msg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;font-weight:700;letter-spacing:2px;
  color:var(--wip-ink);
  text-align:center;padding:0 12px;
  opacity:0;
}
.hs-wip-fx .hs-wip-tag{position:relative;font-weight:700}
.hs-wip-fx .hs-wip-tag::before,.hs-wip-fx .hs-wip-tag::after{
  content:attr(data-t);position:absolute;left:0;top:0;width:100%;opacity:0;
}
.hs-wip-fx .hs-wip-tag::before{color:var(--wip-acc)}
.hs-wip-fx .hs-wip-tag::after{color:#5B14D2}

/* ── FATIA 1 · deslocamento horizontal duro ─────────────────────── */
@keyframes hsWipS1{
  0%,57%{opacity:0;clip-path:inset(50% 0 50% 0)}
  58%{opacity:1;clip-path:inset(12% 0 74% 0);transform:translateX(-12px)}
  59%{clip-path:inset(58% 0 28% 0);transform:translateX(14px)}
  60%{clip-path:inset(34% 0 52% 0);transform:translateX(-8px)}
  61%{opacity:0}
  66%{opacity:1;clip-path:inset(8% 0 80% 0);transform:translateX(16px)}
  67%{clip-path:inset(70% 0 16% 0);transform:translateX(-14px)}
  68%{clip-path:inset(44% 0 42% 0);transform:translateX(9px)}
  72%{clip-path:inset(20% 0 66% 0);transform:translateX(-6px)}
  78%{clip-path:inset(62% 0 24% 0);transform:translateX(5px)}
  84%{clip-path:inset(38% 0 48% 0);transform:translateX(-4px)}
  87%{opacity:1;clip-path:inset(50% 0 40% 0);transform:translateX(2px)}
  89%,100%{opacity:0;clip-path:inset(50% 0 50% 0);transform:none}
}

/* ── FATIA 2 · segunda camada, fora de fase, tingida de magenta ─── */
@keyframes hsWipS2{
  0%,58%{opacity:0;clip-path:inset(50% 0 50% 0)}
  59%{opacity:.85;clip-path:inset(66% 0 20% 0);transform:translateX(10px);filter:hue-rotate(-30deg) saturate(2)}
  60%{clip-path:inset(22% 0 68% 0);transform:translateX(-16px)}
  62%{clip-path:inset(48% 0 38% 0);transform:translateX(7px)}
  63%{opacity:0}
  67%{opacity:.85;clip-path:inset(16% 0 70% 0);transform:translateX(-10px);filter:hue-rotate(-30deg) saturate(2)}
  69%{clip-path:inset(54% 0 32% 0);transform:translateX(13px)}
  73%{clip-path:inset(30% 0 58% 0);transform:translateX(-5px)}
  80%{clip-path:inset(74% 0 12% 0);transform:translateX(6px)}
  85%{clip-path:inset(26% 0 62% 0);transform:translateX(-3px)}
  88%,100%{opacity:0;clip-path:inset(50% 0 50% 0);transform:none;filter:none}
}

/* ── FATIA 3 · bloco vertical curto (a "quebra" grossa) ─────────── */
@keyframes hsWipS3{
  0%,66%{opacity:0;clip-path:inset(50% 0 50% 0)}
  68%{opacity:1;clip-path:inset(0 0 62% 0);transform:translate(-8px,4px)}
  70%{clip-path:inset(64% 0 0 0);transform:translate(10px,-5px)}
  74%{clip-path:inset(40% 0 34% 0);transform:translate(-6px,2px)}
  82%{clip-path:inset(10% 0 76% 0);transform:translate(4px,-2px)}
  86%{opacity:.6;clip-path:inset(56% 0 30% 0);transform:none}
  89%,100%{opacity:0;clip-path:inset(50% 0 50% 0);transform:none}
}

/* ── VÉU esbranquiçado — sobe rápido, segura, some (ease, não steps) */
@keyframes hsWipVeu{
  0%,64%{opacity:0}
  68%{opacity:.55}
  72%{opacity:.92}
  76%,86%{opacity:.88}
  90%,100%{opacity:0}
}

/* ── IMAGEM original — apaga atrás do véu, volta no fim ─────────── */
@keyframes hsWipImg{
  0%,63%{opacity:1;filter:none}
  68%{opacity:.45}
  72%,86%{opacity:.28;filter:grayscale(.6) brightness(1.25)}
  91%,100%{opacity:1;filter:none}
}

/* ── TEXTO — entra com o véu, pisca, sai ────────────────────────── */
@keyframes hsWipMsg{
  0%,71%{opacity:0}
  72%{opacity:1}
  73.5%{opacity:.25}
  74.5%{opacity:1}
  81%{opacity:1}
  82%{opacity:.3}
  83%,87%{opacity:1}
  89%,100%{opacity:0}
}
@keyframes hsWipMsgB{ /* sombra magenta rasgando pra esquerda */
  0%,71%{opacity:0}
  72%{opacity:.8;transform:translate(-3px,1px);clip-path:inset(0 0 52% 0)}
  76%{transform:translate(-2px,1px);clip-path:inset(48% 0 0 0)}
  82%{opacity:.8;transform:translate(-1px,0);clip-path:inset(20% 0 30% 0)}
  87%,100%{opacity:0}
}
@keyframes hsWipMsgA{ /* sombra roxa rasgando pra direita */
  0%,71%{opacity:0}
  73%{opacity:.8;transform:translate(3px,-1px);clip-path:inset(55% 0 0 0)}
  78%{transform:translate(2px,-1px);clip-path:inset(0 0 45% 0)}
  84%{opacity:.8;transform:translate(1px,0);clip-path:inset(35% 0 20% 0)}
  87%,100%{opacity:0}
}

/* ── liga tudo SOMENTE no clique (classe .hs-wip-active via JS) ─── */
.hs-card--wip.hs-wip-active .hs-wip-fx .s1{animation:hsWipS1 var(--wip-ciclo) steps(1,end) var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active .hs-wip-fx .s2{animation:hsWipS2 var(--wip-ciclo) steps(1,end) var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active .hs-wip-fx .s3{animation:hsWipS3 var(--wip-ciclo) steps(1,end) var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active .hs-wip-fx .veu{animation:hsWipVeu var(--wip-ciclo) ease-in-out var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active > a > img,
.hs-card--wip.hs-wip-active > img{animation:hsWipImg var(--wip-ciclo) ease-in-out var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active .hs-wip-fx .msg{animation:hsWipMsg var(--wip-ciclo) steps(1,end) var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active .hs-wip-fx .hs-wip-tag::before{animation:hsWipMsgB var(--wip-ciclo) steps(1,end) var(--wip-inicio) 1}
.hs-card--wip.hs-wip-active .hs-wip-fx .hs-wip-tag::after{animation:hsWipMsgA var(--wip-ciclo) steps(1,end) var(--wip-inicio) 1}

/* acessibilidade: sem loop — estado estático de "em construção" */
@media (prefers-reduced-motion: reduce){
  .hs-card--wip.hs-wip-active .hs-wip-fx *,
  .hs-card--wip.hs-wip-active > a > img,
  .hs-card--wip.hs-wip-active > img{animation:none !important}
  .hs-card--wip.hs-wip-active > a > img,
  .hs-card--wip.hs-wip-active > img{opacity:.35;filter:grayscale(.6) brightness(1.25)}
  .hs-card--wip.hs-wip-active .hs-wip-fx .veu{opacity:.85}
  .hs-card--wip.hs-wip-active .hs-wip-fx .msg{opacity:1}
}