/* 📖 sections/hero.css — Seção hero: cópia à esquerda + narrativa+kanban à direita
   ⚠️  Alterar? Depende de hero.js para construção e controle do kanban */

/* ─────────────────────────────────────────
   WRAPPER PRINCIPAL
   ───────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-24);
  background: var(--gradient-hero);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Glow atmosférico no fundo */
.hero::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 0;
  width: 55%;
  height: 75%;
  background: radial-gradient(ellipse, rgba(125,169,212,0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ─────────────────────────────────────────
   LAYOUT SPLIT
   ───────────────────────────────────────── */

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: var(--z-raised);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-10);
    align-items: center;
  }
}

/* ─────────────────────────────────────────
   CÓPIA — LADO ESQUERDO
   ───────────────────────────────────────── */

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-subtle);
  border: var(--border-accent);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  width: fit-content;
  animation: fadeInDown 0.8s cubic-bezier(0,0,0.2,1) 0.2s both;
}

.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse 2s ease-in-out infinite;
}

.hero__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  animation: fadeInUp 0.8s cubic-bezier(0,0,0.2,1) 0.3s both;
}

@media (min-width: 768px) {
  .hero__title { font-size: var(--text-5xl); }
}

@media (min-width: 1280px) {
  .hero__title { font-size: var(--text-6xl); }
}

.hero__title mark {
  background: none;
  color: var(--color-accent);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 480px;
  animation: fadeInUp 0.8s cubic-bezier(0,0,0.2,1) 0.4s both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  animation: fadeInUp 0.8s cubic-bezier(0,0,0.2,1) 0.5s both;
}

.hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: fadeInUp 0.8s cubic-bezier(0,0,0.2,1) 0.6s both;
}

.hero__avatars { display: flex; }

.hero__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-overlay);
  border: 2px solid var(--color-bg-base);
  overflow: hidden;
  margin-left: -8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__avatar:first-child { margin-left: 0; }

.hero__social-text {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.hero__social-text strong {
  display: block;
  color: var(--color-text-primary);
}

/* ─────────────────────────────────────────
   LADO DIREITO — narrativa + kanban
   ───────────────────────────────────────── */

.hero__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: fadeIn 0.8s cubic-bezier(0,0,0.2,1) 0.4s both;
}

/* ─── Narrativa (texto acima do kanban) ─── */

.hero__narrative {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  background: rgba(125,169,212,0.05);
  border: 1px solid rgba(125,169,212,0.15);
  border-radius: var(--radius-lg);
  min-height: 88px;  /* evita layout shift ao trocar frases */
}

.hero__narrative-step {
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity 0.3s ease;
}

.hero__narrative-step::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  opacity: 0.5;
}

.hero__narrative-text {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
  transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0,0,0.2,1);
}

.hero__narrative--changing .hero__narrative-text,
.hero__narrative--changing .hero__narrative-step {
  opacity: 0;
  transform: translateY(-5px);
}

.hero__narrative--incoming .hero__narrative-text,
.hero__narrative--incoming .hero__narrative-step {
  opacity: 0;
  transform: translateY(5px);
}

@media (min-width: 768px) {
  .hero__narrative { min-height: 96px; }
  .hero__narrative-text { font-size: 15px; }
}

@media (min-width: 1280px) {
  .hero__narrative { min-height: 100px; padding: var(--space-4) var(--space-6); }
  .hero__narrative-text { font-size: 16px; }
}

/* ─────────────────────────────────────────
   STAGE — kanban animado
   ───────────────────────────────────────── */

.hero__stage {
  position: relative;
  width: 100%;
  min-height: 340px;
  border-radius: var(--radius-2xl);
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(125,169,212,0.06),
    0 0 60px rgba(125,169,212,0.10);
  display: flex;
  flex-direction: column;
  /* Container query para escalar o conteúdo interno */
  container-type: inline-size;
  container-name: stage;
}

@media (min-width: 768px) {
  .hero__stage { min-height: 380px; }
}

@media (min-width: 1024px) {
  .hero__stage {
    min-height: 0;
    height: clamp(320px, 42vh, 480px);
  }
}

/* ─────────────────────────────────────────
   APP BAR (barra de janela no topo)
   ───────────────────────────────────────── */

.hs-bar {
  height: 36px;
  flex-shrink: 0;
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  position: relative;
  z-index: 5;
}

.hs-traffic {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hs-traffic-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hs-bar-title {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: #8b949e;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  user-select: none;
}

.hs-bar-logo {
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.hs-bar-logo img { display: block; }

@container stage (min-width: 600px) {
  .hs-bar       { height: 38px; }
  .hs-bar-title { font-size: 11.5px; }
}

/* ─────────────────────────────────────────
   NOTIFICAÇÃO TELEGRAM (flutuante)
   ───────────────────────────────────────── */

.hs-tg-notif {
  position: absolute;
  top: 44px;
  right: 10px;
  background: #1c2128;
  border: 1px solid rgba(88,166,255,0.2);
  border-radius: 10px;
  padding: 8px 10px 8px 8px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  max-width: 190px;
  z-index: 20;
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  transition: opacity 0.35s cubic-bezier(0,0,0.2,1),
              transform 0.4s cubic-bezier(0.34,1.3,0.64,1);
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.hs-tg-notif.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hs-tg-icon { font-size: 15px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.hs-tg-content { flex: 1; min-width: 0; }

.hs-tg-title {
  font-size: 9px;
  font-weight: 700;
  color: #58a6ff;
  margin-bottom: 2px;
  font-family: var(--font-sans);
}

.hs-tg-msg {
  font-size: 9.5px;
  color: #c9d1d9;
  line-height: 1.35;
  font-family: var(--font-sans);
  white-space: pre-line;
}

@container stage (min-width: 600px) {
  .hs-tg-notif { max-width: 210px; right: 14px; top: 46px; }
  .hs-tg-title { font-size: 10px; }
  .hs-tg-msg   { font-size: 10.5px; }
}

/* ─────────────────────────────────────────
   KANBAN BOARD
   ───────────────────────────────────────── */

.hs-board {
  flex: 1;
  min-height: 0;           /* ← crítico: permite shrink em flex */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  overflow: hidden;
}

@container stage (min-width: 500px) {
  .hs-board { gap: 8px; padding: 10px; }
}

@container stage (min-width: 800px) {
  .hs-board { gap: 10px; padding: 12px; }
}

/* ─── Coluna ─── */

.hs-col {
  background: rgba(255,255,255,0.025);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  min-height: 0;           /* ← crítico: permite shrink */
}

.hs-col-head {
  padding: 6px 8px;
  border-bottom: 2px solid var(--col-color, #58a6ff);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.hs-col-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--col-color, #58a6ff);
  flex-shrink: 0;
}

.hs-col-name {
  font-size: 9.5px;
  font-weight: 700;
  color: #e6edf3;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
}

.hs-col-count {
  font-size: 9px;
  color: #8b949e;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  padding: 1px 5px;
  font-family: var(--font-sans);
  flex-shrink: 0;
}

.hs-col-body {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;           /* ← crítico: não expande o pai */
  overflow: hidden;        /* ← cards extras ficam escondidos, sem resize */
}

@container stage (min-width: 500px) {
  .hs-col-head  { padding: 7px 9px; }
  .hs-col-name  { font-size: 10.5px; }
  .hs-col-count { font-size: 9.5px; }
  .hs-col-dot   { width: 8px; height: 8px; }
  .hs-col-body  { padding: 6px; gap: 5px; }
}

@container stage (min-width: 800px) {
  .hs-col-head  { padding: 9px 11px; }
  .hs-col-name  { font-size: 12px; }
  .hs-col-count { font-size: 11px; padding: 2px 7px; }
  .hs-col-dot   { width: 9px; height: 9px; }
  .hs-col-body  { padding: 7px; gap: 6px; }
}

/* ─── Cards ─── */

.hs-card {
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 7px 8px;
  flex-shrink: 0;
}

.hs-card--bg  { opacity: 0.4; }

.hs-card--live {
  opacity: 1;
  border-color: rgba(125,169,212,0.35);
  box-shadow: 0 2px 12px rgba(125,169,212,0.12), 0 0 0 1px rgba(125,169,212,0.08);
}

.hs-card--sent {
  border-color: rgba(63,185,80,0.4) !important;
  box-shadow: 0 2px 16px rgba(63,185,80,0.18), 0 0 0 1px rgba(63,185,80,0.10) !important;
}

.hs-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  gap: 4px;
}

.hs-card-id {
  font-size: 8.5px;
  font-weight: 700;
  color: #7da9d4;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.hs-card-time {
  font-size: 8px;
  color: #484f58;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.hs-card-prod {
  font-size: 10px;
  color: #e6edf3;
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.3;
  font-family: var(--font-sans);
}

.hs-card--bg .hs-card-prod {
  font-size: 9px;
  color: #8b949e;
}

.hs-card-price {
  font-size: 9px;
  color: #8b949e;
  margin-bottom: 4px;
  font-family: var(--font-sans);
}

.hs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

@container stage (min-width: 500px) {
  .hs-card       { padding: 8px 9px; }
  .hs-card-id    { font-size: 9.5px; }
  .hs-card-prod  { font-size: 11px; }
  .hs-card-price { font-size: 10px; }
  .hs-card-time  { font-size: 9px; }
}

@container stage (min-width: 800px) {
  .hs-card         { padding: 10px 11px; border-radius: 8px; }
  .hs-card-id      { font-size: 10.5px; }
  .hs-card-prod    { font-size: 12.5px; margin-bottom: 4px; }
  .hs-card-price   { font-size: 11px; }
  .hs-card-time    { font-size: 10px; }
  .hs-card-tags    { gap: 4px; }
}

/* ─── Badges de evidência ─── */

.hs-badge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  opacity: 0;
  transform: scale(0.5) translateY(4px);
  transition:
    opacity 0.25s ease-out,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-sans);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.hs-badge.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.hs-badge--nf      { background: rgba(88,166,255,0.18);  color: #58a6ff; border: 1px solid rgba(88,166,255,0.28); }
.hs-badge--etiqueta{ background: rgba(251,191,36,0.18);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.28); }
.hs-badge--prova   { background: rgba(167,139,250,0.18); color: #a78bfa; border: 1px solid rgba(167,139,250,0.28); }
.hs-badge--enviado { background: rgba(63,185,80,0.18);   color: #3fb950; border: 1px solid rgba(63,185,80,0.28); }

@container stage (min-width: 500px) {
  .hs-badge { font-size: 9.5px; padding: 2px 7px; }
}

@container stage (min-width: 800px) {
  .hs-badge { font-size: 10.5px; padding: 3px 8px; }
}

/* ─── Transição FLIP ─── */

.hs-card--moving {
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 10;
  position: relative;
}

/* ─── Entrada do card ─── */

@keyframes hs-card-drop {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.93); }
  65%  { transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hs-card--entering {
  animation: hs-card-drop 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* ─── Pulse enviado ─── */

@keyframes hs-sent-pulse {
  0%   { box-shadow: 0 2px 16px rgba(63,185,80,0.18), 0 0 0 0   rgba(63,185,80,0.4); }
  70%  { box-shadow: 0 2px 16px rgba(63,185,80,0.18), 0 0 0 10px rgba(63,185,80,0); }
  100% { box-shadow: 0 2px 16px rgba(63,185,80,0.18), 0 0 0 0   rgba(63,185,80,0); }
}

.hs-card--sent { animation: hs-sent-pulse 1.2s ease-out; }

/* ─── Fade out ─── */

.hs-card--fading {
  transition: opacity 0.5s ease, transform 0.5s ease !important;
  opacity: 0 !important;
  transform: scale(0.94) !important;
}