/* 📖 sections/mechanism.css — Cap. 3: O mecanismo — como o Hubit funciona */

.mechanism {
  background: var(--color-bg-base);
  position: relative;
}

.mechanism::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(125,169,212,0.2), transparent);
}

/* ─── Diagrama central ─── */

.mechanism__diagram {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) 0;
}

/* Anel de integrações */
.mechanism__ring {
  position: relative;
  width: 340px;
  height: 340px;
}

@media (min-width: 768px) {
  .mechanism__ring {
    width: 460px;
    height: 460px;
  }
}

/* Hub central */
.mechanism__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: var(--radius-2xl);
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-lg);
  z-index: 2;
  animation: signalPulse 3s ease-in-out infinite;
}

.mechanism__hub svg {
  width: 48px;
  height: 48px;
  color: var(--color-bg-base);
}

/* Nó de integração */
.mechanism__node {
  position: absolute;
  transform: translate(-50%, -50%);
}

.mechanism__node-inner {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-raised);
  border: var(--border-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  cursor: default;
  position: relative;
}

.mechanism__node-inner:hover {
  border-color: rgba(125, 169, 212, 0.3);
  transform: scale(1.1);
  box-shadow: var(--shadow-glow);
}

.mechanism__node-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* SVG de linhas de conexão */
.mechanism__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mechanism__line {
  stroke: var(--color-primary-300);
  stroke-width: 1;
  stroke-opacity: 0.25;
  fill: none;
  stroke-dasharray: 4 4;
}

/* ─── Lista de funcionalidades ─── */

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

.mechanism__feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-bg-raised);
  border: var(--border-muted);
  border-radius: var(--radius-xl);
  transition: var(--transition-base);
}

.mechanism__feature:hover {
  border-color: rgba(125, 169, 212, 0.20);
  transform: translateX(4px);
}

.mechanism__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.mechanism__feature-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.mechanism__feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Detalhe técnico no rodapé de cada feature (aparece menor, sutil) */
.mechanism__feature-tech {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}