/* =========================================================
   SOBRE MIM — texto, habilidades, terminal e experiências
   JS: js/sobre.js (texto que acende letra por letra)
   ========================================================= */

#about { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.about-text p { color: var(--gray); line-height: 1.8; font-size: 1rem; margin-bottom: 1.25rem; }
.about-text p strong { color: var(--cream); font-weight: 600; }

/* texto que acende letra por letra ao rolar */
.reveal-text .w { display: inline-block; white-space: nowrap; }
.reveal-text .c { opacity: .2; }

/* habilidades */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2rem; }
.skill-chip {
  background: var(--mid); border: 1px solid var(--border);
  border-radius: 0.5rem; padding: 0.6rem 1rem;
  font-size: 0.8rem; font-family: var(--mono); color: var(--gray);
  display: flex; align-items: center; gap: 0.5rem;
}
.skill-chip::before { content: '—'; color: var(--accent); }

/* coluna da direita */
.about-right { position: relative; }

/* terminal que digita (whoami / skills / uptime) */
.about-visual {
  background: #0b0c0f; border: 1px solid var(--border); border-radius: 1rem;
  overflow: hidden; margin-bottom: 1rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.av-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.av-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3d45; }
.av-bar i:nth-child(1) { background: #e5a963; }
.av-bar span { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: #8A897F; }
.av-body { padding: 1rem 1.25rem 1.25rem; font-family: var(--mono); font-size: .82rem; line-height: 1.9; color: #F5F0E8; }
.av-body p { margin: 0; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.av-body p b { color: #e5a963; font-weight: 500; }
.av-body p.o { color: #5fe0d8; }
.about-visual.visible .av-body p { animation: ill-type .7s steps(28) var(--d, 0s) forwards; }
.av-caret { display: inline-block; width: .55em; height: 1em; vertical-align: -.15em; background: #e5a963; animation: ill-blink 1s linear infinite; }

/* experiências */
.exp-card {
  background: var(--mid); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 1.75rem 2rem; margin-bottom: 1rem;
  transition: border-color .2s ease, transform .2s var(--ease-out);
}
.exp-card:hover { border-color: var(--accent); transform: translateX(6px); }
.exp-year { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.exp-role { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.exp-company { font-size: 0.85rem; color: var(--gray); }

@media (max-width: 900px) {
  #about { grid-template-columns: 1fr; gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-text .c { opacity: 1 !important; }
  .av-caret { animation: none !important; opacity: 1 !important; }
  .av-body p { clip-path: none; }
}