/* hero-kanban.css — funil Kanban do hero em DOM/CSS + transform3d.
   Substitui o render WebGL (Three.js) por elementos HTML reais.
   Tema dark (hero). Tudo scoped em .site-hero-kanban / .hk-. */

/* titles-font-family do CRM (variables.css) para os cabeçalhos das colunas */
@font-face {
  font-family: "Futura Bk";
  src: url("../fonts/FuturaBook.ttf") format("truetype");
  font-display: swap;
}

/* fonte manuscrita (à caneta) para as anotações dos post-its */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat.ttf") format("truetype");
  font-display: swap;
}

.site-hero-kanban .hk-viewport {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% 42%;
  pointer-events: none;
}

/* ---- parede inicial: tela repleta de post-its manuscritos (estado anterior) ---- */
.site-hero-kanban .hk-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.site-hero-kanban .hk-wall-note {
  position: absolute;
  width: 78px;
  height: 78px;
  box-sizing: border-box;
  padding: 7px 8px 0;
  border-radius: 3px 3px 3px 9px;
  box-shadow: 0 5px 11px rgba(0, 0, 0, .28);
  font-family: "Caveat", "Segoe Script", cursive;
  color: #23262b;
  overflow: hidden;
  backface-visibility: hidden;
  contain: layout paint style;
  will-change: transform;
}

.site-hero-kanban .hk-wall-note.is-absorbing {
  opacity: 1;
}

.site-hero-kanban .hk-wall-note b {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-hero-kanban .hk-wall-note span {
  display: block;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.05;
  opacity: .78;
  margin-top: 1px;
}

/* wrapper do kanban. A posição já nasce no estado final; a montagem fica por
   conta dos headers/cards enquanto a parede de post-its desmonta. */
.site-hero-kanban .hk-shift {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: center;
  transform: translate(12%, -1%) scale(1.08);
}

#hero.hero-kanban-front .site-hero-kanban .hk-shift {
  transform: translate(12%, -1%) scale(1.08);
}

.site-hero-kanban .hk-board {
  position: absolute;
  left: 50%;
  top: 11.8%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- coluna (header + count + well), escala na entrada ---- */
.site-hero-kanban .hk-col {
  position: absolute;
  transform-origin: top center;
  will-change: transform;
}

.site-hero-kanban .hk-head {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 0 14px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Futura Bk", sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(2, 12, 24, .28);
}

.site-hero-kanban .hk-head-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-hero-kanban .hk-gear {
  opacity: .8;
  margin-left: 8px;
  flex: 0 0 auto;
}

.site-hero-kanban .hk-count {
  position: absolute;
  left: 2px;
  color: #8a97b0;
  white-space: nowrap;
}

.site-hero-kanban .hk-well {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}

.site-hero-kanban .hk-col.is-lit .hk-head {
  animation: hkFinalHeadGlow 1.35s ease-out both;
}

.site-hero-kanban .hk-col.is-lit .hk-count {
  animation: hkFinalTextGlow 1.35s ease-out both;
}

.site-hero-kanban .hk-col.is-lit .hk-well {
  animation: hkFinalWellGlow 1.35s ease-out both;
}

@keyframes hkFinalHeadGlow {
  0% {
    filter: brightness(1);
    box-shadow: 0 6px 16px rgba(2, 12, 24, .28);
  }

  24% {
    filter: brightness(1.45) saturate(1.2);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .56),
      0 0 28px rgba(79, 195, 247, .78),
      0 14px 34px rgba(47, 111, 209, .42);
  }

  100% {
    filter: brightness(1);
    box-shadow: 0 6px 16px rgba(2, 12, 24, .28);
  }
}

@keyframes hkFinalTextGlow {
  0%,
  100% {
    color: #8a97b0;
    text-shadow: none;
  }

  24% {
    color: #d7ebff;
    text-shadow: 0 0 16px rgba(79, 195, 247, .7);
  }
}

@keyframes hkFinalWellGlow {
  0%,
  100% {
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
  }

  24% {
    background: rgba(79, 195, 247, .13);
    box-shadow:
      inset 0 0 0 1px rgba(155, 214, 255, .22),
      0 0 40px rgba(47, 111, 209, .28);
  }
}

/* ---- grupo de card (post-it na entrada, card no fim) ---- */
.site-hero-kanban .hk-grp {
  position: absolute;
}

.site-hero-kanban .hk-post {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 4px 4px 4px 9px;
  box-shadow: 0 8px 18px rgba(2, 12, 24, .34);
  overflow: hidden;
}

/* canto dobrado da nota */
.site-hero-kanban .hk-post::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 0 11px 11px;
  border-style: solid;
  border-color: transparent transparent rgba(2, 12, 24, .22) transparent;
}

.site-hero-kanban .hk-note {
  padding: 8px 8px 0;
  color: #1b2b45;
  font-family: "Caveat", "Segoe Script", cursive;
  text-align: left;
}

.site-hero-kanban .hk-note-l1 {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-hero-kanban .hk-note-l2 {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.1;
  opacity: .82;
  margin-top: 1px;
}

.site-hero-kanban .hk-card {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 14px;
  background: #17233a;
  border: 1px solid #26334e;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(2, 12, 24, .32);
  font-family: 'Sora', 'Segoe UI', ui-sans-serif, sans-serif;
  color: #dbe4f2;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  gap: 8px;
}

.site-hero-kanban .hk-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--accent, #2f6fd1);
}

.site-hero-kanban .hk-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-hero-kanban .hk-ava {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #2f6fd1);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.site-hero-kanban .hk-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-hero-kanban .hk-id {
  flex: 1 1 auto;
  min-width: 0;
}

.site-hero-kanban .hk-name {
  font-weight: 600;
  font-size: 14px;
  color: #e8eefa;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-hero-kanban .hk-serie {
  font-weight: 600;
  font-size: 12px;
  color: #2f6fd1;
  line-height: 1.2;
}

.site-hero-kanban .hk-plus {
  flex: 0 0 auto;
  align-self: flex-start;
  background: #26334e;
  color: #9fb0cc;
  font-weight: 600;
  font-size: 11px;
  border-radius: 10px;
  padding: 3px 8px;
}

.site-hero-kanban .hk-check {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 14px;
  height: 14px;
  border: 2px solid #41506e;
  border-radius: 50%;
  margin-left: 2px;
}

.site-hero-kanban .hk-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: auto;
}

.site-hero-kanban .hk-lab {
  color: #8a97b0;
  font-size: 10px;
  line-height: 1.3;
}

.site-hero-kanban .hk-val {
  color: #dbe4f2;
  font-size: 11px;
  line-height: 1.25;
  margin-bottom: 2px;
}

/* ---- dust ambiente atrás ---- */
.site-hero-kanban .hk-dust {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 6px;
  will-change: transform, opacity;
}