/* ytb-vivo.css — sistema de movimento partilhado da YTB (living platform).
   Tokens = conjunto vivo das páginas (não usar global.css, que é órfão e diverge).
   Regra: dourado SÓ em marcos; verde para atividade; tudo desliga com prefers-reduced-motion. */

:root{
  --vivo-bg:#080C08; --vivo-bg2:#0F1410; --vivo-bg3:#161D17;
  --vivo-border:#1F2520; --vivo-border2:#2A322B;
  --vivo-text:#ECEFEA; --vivo-slate:#9AA39A; --vivo-muted:#6B756C;
  --vivo-gold:#D4AF37; --vivo-up:#00D46A;
}

/* ── Marca unificada (substitui os badges quadrados "YT" antigos, cada
   página tinha o seu próprio estilo de logótipo) ── */
.ytb-logo{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:inherit;cursor:pointer}
.ytb-logo b{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:20px;letter-spacing:.4px;color:var(--vivo-text)}
.ytb-logo span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--vivo-muted)}

/* ── Transições entre páginas (cross-document, zero JS; no-op sem suporte) ── */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:vivo-vt-out .18s ease both }
::view-transition-new(root){ animation:vivo-vt-in .18s ease both }
@keyframes vivo-vt-out{ to{ opacity:0 } }
@keyframes vivo-vt-in{ from{ opacity:0 } }

/* ── Reveal ao entrar no viewport (JS: YTBVivo.revelar) ── */
.vivo-reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease var(--vivo-d,0s), transform .6s cubic-bezier(.22,.9,.32,1) var(--vivo-d,0s) }
.vivo-reveal.in{ opacity:1; transform:none }

/* ── Iluminação: módulo ativo brilha suavemente (verde = atividade) ── */
.vivo-glow{ animation:vivo-glow 2.6s ease-in-out infinite; border-color:rgba(0,212,106,.45)!important }
@keyframes vivo-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,212,106,0) }
  50%{ box-shadow:0 0 14px 1px rgba(0,212,106,.28) }
}

/* ── Marco: flash dourado one-shot (usar só em conquistas importantes) ── */
.vivo-marco{ animation:vivo-marco 1.6s ease-out 1 }
@keyframes vivo-marco{
  0%{ box-shadow:0 0 0 0 rgba(212,175,55,.55) }
  60%{ box-shadow:0 0 22px 4px rgba(212,175,55,.30) }
  100%{ box-shadow:0 0 0 0 rgba(212,175,55,0) }
}
.vivo-marco-txt{ color:var(--vivo-gold)!important }

/* ── Jornada (YTBVivo.jornada) ── */
.vivo-jornada{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 2px 2px; margin-bottom:14px }
.vivo-jornada::-webkit-scrollbar{ display:none }
.vivo-jornada svg{ display:block; min-width:560px; width:100% }
.vivo-jn-line{ stroke:var(--vivo-border2); stroke-width:2 }
.vivo-jn-line-done{ stroke:var(--vivo-up); stroke-width:2; transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .15s }
.vivo-jn-dot{ fill:var(--vivo-bg3); stroke:var(--vivo-border2); stroke-width:1.5 }
.vivo-jn-dot.done{ fill:var(--vivo-up); stroke:var(--vivo-up) }
.vivo-jn-dot.atual{ fill:var(--vivo-bg); stroke:var(--vivo-gold); stroke-width:2 }
.vivo-jn-halo{ fill:none; stroke:var(--vivo-gold); stroke-width:1.5; opacity:.7; transform-origin:center; transform-box:fill-box; animation:vivo-halo 2.2s ease-out infinite }
@keyframes vivo-halo{ 0%{ transform:scale(.6); opacity:.7 } 80%,100%{ transform:scale(1.9); opacity:0 } }
.vivo-jn-lbl{ font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; font-weight:700; fill:var(--vivo-muted) }
.vivo-jn-lbl.done{ fill:var(--vivo-slate) }
.vivo-jn-lbl.atual{ fill:var(--vivo-gold) }

/* ── Ligações causa-efeito (YTBVivo.ligar) ── */
.vivo-liga-svg{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:1 }
.vivo-liga{ fill:none; stroke:rgba(0,212,106,.35); stroke-width:1.5; stroke-dasharray:5 6; animation:vivo-liga-flui 1.4s linear infinite }
@keyframes vivo-liga-flui{ to{ stroke-dashoffset:-22 } }

/* ── Canvas de partículas (só homepage; decorativo) ── */
.vivo-canvas{ position:absolute; inset:0; pointer-events:none; z-index:0 }

/* ── Timeline viva: acento dourado nas rows de marco ── */
.vivo-tl-marco{ border-left:2px solid var(--vivo-gold); padding-left:10px }

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
  .vivo-reveal{ opacity:1; transform:none; transition:none }
  .vivo-glow,.vivo-marco,.vivo-jn-halo,.vivo-liga{ animation:none }
  .vivo-jn-line-done{ transition:none }
  .vivo-canvas{ display:none }
}