/* Animações ilustradas das aulas de Git (escopo .git-anim) */
.git-anim {
  --surface: #101a29;
  --surface-2: #152235;
  --line: #273449;
  --fg: #edf3fb;
  --muted: #a6b3c6;
  --accent: #76b8ff;
  --accent-glow: rgba(118, 184, 255, .35);
  --ok: #39d98a;
  --warn: #f2c65d;
  --font-display: inherit;
  --font-mono: ui-monospace, Consolas, "Courier New", monospace;
  margin: 22px 0 28px;
  color: var(--fg);
}
.git-anim.git-anim-embedded {
  margin: 18px 0 8px;
}
/* Painel bare = mesmo fundo/borda dos tópicos (.topic-divider) */
.git-anim.git-anim-bare {
  padding: 18px 20px;
  border: 1px solid var(--line, #273449);
  border-radius: 14px;
  background: linear-gradient(120deg, #101a29, #0c131d);
}
.git-anim.git-anim-bare .stage {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.git-anim.git-anim-bare .ga-scene {
  display: block;
  width: 100%;
  margin: 0;
  height: auto;
}
.git-anim.git-anim-bare.git-anim-compact .ga-scene {
  width: min(100%, 720px);
  margin: 0 auto;
}
.git-anim.git-anim-bare.git-anim-compact-sm {
  margin-top: 36px;
  margin-bottom: 40px;
}
.git-anim.git-anim-bare.git-anim-compact-sm .ga-scene {
  width: min(100%, 780px);
  margin: 0 auto;
}
.git-anim.git-anim-bare.git-anim-compact-sm .cap {
  margin-top: 18px;
}
.git-anim.git-anim-bare .cap {
  position: static;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#git-anim-caos.git-anim,
#git-anim-diagrama.git-anim,
#git-anim-diferenca.git-anim,
#git-anim-identidade.git-anim,
#git-anim-init.git-anim,
#git-anim-fluxo.git-anim,
#git-anim-remoto.git-anim,
#git-anim-push.git-anim,
#git-anim-segundo.git-anim,
#git-anim-push-curto.git-anim,
#git-anim-pull.git-anim,
#git-anim-conflito.git-anim {
  margin-top: 28px;
  margin-bottom: 28px;
}
#git-anim-caos.git-anim .cap,
#git-anim-diagrama.git-anim .cap,
#git-anim-diferenca.git-anim .cap,
#git-anim-identidade.git-anim .cap,
#git-anim-init.git-anim .cap,
#git-anim-fluxo.git-anim .cap,
#git-anim-remoto.git-anim .cap,
#git-anim-push.git-anim .cap,
#git-anim-segundo.git-anim .cap,
#git-anim-push-curto.git-anim .cap,
#git-anim-pull.git-anim .cap,
#git-anim-conflito.git-anim .cap {
  margin-top: 18px;
}
#git-anim-mapa.git-anim {
  margin-top: 16px;
  margin-bottom: 16px;
}
#git-anim-mapa.git-anim .cap {
  margin-top: 8px;
}
.git-anim.git-anim-bare .cap .tip {
  border-color: transparent;
  background: transparent;
  padding: 8px 0 0;
}
.git-anim.git-anim-bare .prog { display: none; }
.git-anim.git-anim-static {
  margin-top: 20px;
  margin-bottom: 20px;
}
.git-anim.git-anim-static .git-figure-cap {
  margin: 10px 0 0;
  color: var(--t, #edf3fb);
  font: 16px/1.72 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.git-anim.git-anim-static .git-figure-cap strong {
  font-weight: 700;
}
.git-anim .ga-title {
  margin: 0 0 6px;
  font: 800 clamp(1.15rem, 2.4vw, 1.5rem)/1.3 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
}
.git-anim .ga-title span { color: var(--accent); }
.git-anim .ga-sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .94rem;
}
.git-anim .prog { max-width: 420px; height: 4px; margin: 0 auto 16px; background: #16213a; border-radius: 4px; overflow: hidden; }
.git-anim .prog span { display: block; width: 0; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.git-anim .stage { position: relative; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.git-anim #scene, .git-anim .ga-scene { display: block; width: 100%; height: auto; }
.git-anim .cap {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  padding: 14px 16px;
  background: rgba(6, 10, 19, .92);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.git-anim .cap,
.git-anim .cap p,
.git-anim .cap .tip,
.git-anim .cap .tip span,
.git-anim .cap tp,
.git-anim .cap tu,
.git-anim .cap tc {
  font: 16px/1.72 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
}
.git-anim .cap p { margin: 12px 0; color: var(--t, #edf3fb); }
.git-anim .cap p:first-child { margin-top: 0; }
.git-anim .cap p:last-child { margin-bottom: 0; }
.git-anim .cap strong { color: inherit; font-weight: 700; background: none; }
.git-anim .cap code.i { padding: 1px 6px; border-radius: 5px; background: rgba(118, 184, 255, .12); color: var(--b, #76b8ff); font: 600 .92em var(--font-mono); }
.git-anim .cap .tip { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid rgba(242, 198, 93, .3); border-radius: 10px; background: rgba(242, 198, 93, .08); color: var(--t, #edf3fb); }
.git-anim .cap .tip svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--y, #f2c65d); }
.git-anim .cap .tip span { color: inherit; }
.git-anim .cap .tip strong { color: inherit; background: none; }
.git-anim tu { visibility: hidden; }
.git-anim tc { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: text-bottom; }
.git-anim tc::after { content: ""; position: absolute; left: 1px; top: .05em; width: 2px; height: 1em; background: var(--accent); animation: ga-blink 1s steps(1) infinite; }
.git-anim .tm { margin-top: 14px; background: #050912; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.git-anim .tm.off { display: none; }
.git-anim .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 13px var(--font-mono); }
.git-anim .bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3858; }
.git-anim .bar span { margin: 0 auto; }
.git-anim .screen { min-height: 132px; padding: 14px; font: 600 15px/1.6 var(--font-mono); }
.git-anim .ps { color: var(--accent); }
.git-anim .caret { display: inline-block; width: 9px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--fg); animation: ga-blink 1s steps(1) infinite; }
.git-anim .ol { color: #a4b4d4; font: 400 14px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; animation: ga-lin .3s ease both; }
.git-anim .ol.dim { color: var(--muted); }
.git-anim .ol.warn { color: var(--warn); }
.git-anim .ol.ok { color: var(--ok); }
.git-anim .tt { overflow-wrap: anywhere; }
.git-anim .ctl, .git-anim .btn { display: none !important; }
@keyframes ga-blink { 50% { opacity: 0; } }
@keyframes ga-lin { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 979px) {
  .git-anim .cap { position: static; margin-top: 10px; }
  .git-anim .stage { padding: 10px 10px 12px; }
  .git-anim.git-anim-bare .stage { padding: 0; }
}
@media (max-width: 620px) {
  .git-anim.git-anim-bare { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .git-anim .caret, .git-anim tc::after { animation: none; }
  .git-anim .ol { animation: none; }
}