/* ============================================================
   TIMELINE PARALELA — elemento-assinatura
   "Toninho × Cidade/Galeria": duas trilhas lado a lado,
   conectadas por ano, com revelação no scroll.
   Fallback estático completo em prefers-reduced-motion.
   ============================================================ */
.ptl{position:relative;max-width:var(--wrap);margin:0 auto;width:100%}

/* Cabeçalho das trilhas (sticky no topo enquanto rola) */
.ptl-head{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr 96px 1fr;
  background:var(--ink);padding:4.2rem 0 1.2rem;pointer-events:none;
  box-shadow:0 14px 20px -6px var(--ink);border-bottom:1px solid var(--line)}
.ptl-head .col{text-align:center}
.ptl-head .col.rock .t{color:var(--copper-lt)}
.ptl-head .col.city .t{color:var(--brass)}
.ptl-head .t{font-family:var(--font-display);font-size:clamp(1.05rem,2.4vw,1.6rem);font-weight:400;line-height:1.1}
.ptl-head .s{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-top:.4rem}
.ptl-head .spine{}

/* Espinha central */
.ptl-track{position:relative;padding:1rem 0 2rem}
.ptl-track::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
/* Linha de progresso que "cresce" com o scroll */
.ptl-progress{position:absolute;left:50%;top:0;width:1px;background:linear-gradient(var(--copper),var(--brass));
  transform:translateX(-50%);height:0;z-index:1;box-shadow:0 0 12px rgba(181,104,60,.5)}

/* Linha de um ano */
.ptl-row{display:grid;grid-template-columns:1fr 96px 1fr;align-items:stretch;position:relative;margin:0;min-height:120px}

/* Nó de ano (centro) */
.ptl-year{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;z-index:5;padding-top:.3rem}
.ptl-year .dot{width:13px;height:13px;border-radius:50%;background:var(--ink);border:1px solid var(--copper);position:relative;z-index:6;transition:transform .4s,background .4s,box-shadow .4s}
.ptl-row.in .ptl-year .dot{background:var(--copper);box-shadow:0 0 0 4px rgba(181,104,60,.18),0 0 16px rgba(181,104,60,.5)}
.ptl-year .yr{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;color:var(--copper-lt);margin-top:.7rem;
  writing-mode:horizontal-tb;white-space:nowrap;background:var(--ink);padding:.15rem .1rem}

/* Cartões de cada lado */
.ptl-card{padding:1.1rem 1.4rem 1.4rem;position:relative}
.ptl-card.rock{grid-column:1;text-align:right;border-right:1px solid transparent}
.ptl-card.city{grid-column:3;text-align:left}
.ptl-card .k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem;opacity:.85}
.ptl-card.rock .k{color:var(--copper-lt)}
.ptl-card.city .k{color:var(--brass)}
.ptl-card h5{font-family:var(--font-display);font-size:1.12rem;font-weight:400;line-height:1.2;margin-bottom:.4rem;color:var(--bone)}
.ptl-card p{font-size:.9rem;line-height:1.55;color:var(--bone-dim);font-weight:300}
.ptl-card.empty{opacity:0}
.ptl-card.empty .dash{font-family:var(--font-mono);color:var(--bone-dim);opacity:.4}
.ptl-card.empty{opacity:1}
.ptl-card.empty h5,.ptl-card.empty p{display:none}

/* Conectores horizontais do nó ao cartão */
.ptl-card.rock::after,.ptl-card.city::after{content:'';position:absolute;top:1.5rem;width:clamp(10px,3vw,34px);height:1px;background:var(--line)}
.ptl-card.rock::after{right:-1px;transform:translateX(48px)}
.ptl-card.city::after{left:-1px;transform:translateX(-48px)}

/* Reveal states (JS adiciona .in) */
.ptl-card{opacity:0;transform:translateY(22px)}
.ptl-card.rock{transform:translate(-18px,10px)}
.ptl-card.city{transform:translate(18px,10px)}
.ptl-row.in .ptl-card{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.ptl-row.in .ptl-card.city{transition-delay:.08s}

/* ---- Mobile: trilhas empilham numa coluna, rail à esquerda ---- */
@media(max-width:820px){
  .ptl-head{display:none}
  .ptl-track{padding-top:1.5rem}
  .ptl-track::before,.ptl-progress{left:9px}
  /* flex column: ano primeiro (order), depois as duas trilhas empilhadas */
  .ptl-row{display:flex;flex-direction:column;gap:.2rem;grid-template-columns:none;position:relative;
    padding-left:40px;margin-bottom:2.4rem;min-height:0}
  .ptl-year{order:-1;position:static;grid-column:auto;display:block;margin-bottom:.5rem}
  .ptl-year .dot{position:absolute;left:3px;top:6px;margin:0}
  .ptl-year .yr{display:inline-block;margin:0;background:transparent;padding:0}
  .ptl-card{opacity:0;transform:translateY(12px)}
  .ptl-card.rock,.ptl-card.city{display:block;grid-column:auto;text-align:left;padding:0 0 .3rem}
  .ptl-row.in .ptl-card{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
  .ptl-card.rock::after,.ptl-card.city::after{display:none}
  .ptl-card.empty{display:none}
}

/* Reduced motion: tudo visível, sem transform */
@media(prefers-reduced-motion:reduce){
  .ptl-card{opacity:1!important;transform:none!important}
  .ptl-progress{height:100%!important;background:var(--line)}
  .ptl-year .dot{background:var(--copper)}
}