/* Vinhetas do Bloco 2. A pose estática é o padrão; o JS anima por cima. */

/* P1 funil */
.vig[data-vig="funil"] svg { overflow: visible; }
.funnel-shape polygon { fill: var(--bg-raised); stroke: var(--line-strong); stroke-width: 1.25; stroke-linejoin: round; }
.funnel-labels line { stroke: var(--line-strong); stroke-dasharray: 2 3; }
.funnel-labels text { font: 500 11px var(--font-body); fill: var(--ink-3); }
.d-ok { fill: var(--accent); }
.d-leak { fill: var(--danger); }
.pose .d-leak { opacity: .75; }
.q-ring { fill: var(--danger-soft); stroke: var(--danger); stroke-width: 1.5; }
.q-mark { font: 650 18px var(--font-body); fill: var(--danger); }
.vig.is-live .pose { display: none; }

/* P2 banimento */
.ban { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1rem;
  background: color-mix(in oklab, var(--bg-sunken) 96%, transparent); border-top: 1px solid var(--danger); color: var(--ink); }
.ban svg { width: 2rem; height: 2rem; fill: none; stroke: var(--danger); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ban b { font-size: .875rem; max-width: 14rem; line-height: 1.3; }
.vig[data-vig="ban"] .chat-track { opacity: .1; }

/* P3 bot em loop: pose estática = fim do track; vivo = track duplicado rolando */
.vig[data-vig="loop"] .chat-body { -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.vig[data-vig="loop"].is-live .chat-body { justify-content: flex-start; }
.loop-ico { color: var(--danger); transform-origin: center; }

/* P4 silêncio */
.vig[data-vig="silencio"] .chat-track { opacity: .3; }
.clock { position: absolute; inset: .7rem 0 auto 0; z-index: 3; display: grid; justify-items: center; gap: .3rem; }
.clock svg { width: 5.25rem; height: 5.25rem; }
.c-face { fill: var(--bg-raised); stroke: var(--line-strong); stroke-width: 2; }
.c-marks path { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.h-hour, .h-min { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 40px 40px; }
.h-min { stroke: var(--danger); stroke-width: 2.2; transform: rotate(200deg); }
.h-hour { transform: rotate(70deg); }
.c-pin { fill: var(--ink); }
.clock b { font-size: .8125rem; color: var(--danger); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- vinhetas com imagem real (cartões 2 e 4) ----------
   A caixa cinza mantém o mesmo tamanho das outras (aspect-ratio 5/4).
   Dentro: o balão no topo, a imagem preenchendo o resto. */
.vig-img { display: grid; grid-template-rows: auto 1fr; gap: var(--s-3); padding: clamp(.9rem, 2vw, 1.4rem); overflow: hidden; }
.vig-img .vig-tag { position: static; justify-self: start; align-self: start; }
.vig-img-el {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius-s);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-slow) ease;
}
.vig-img.has-img .vig-img-el { opacity: 1; }