/* TEN — Linha do tempo horizontal (tipográfica, sem scroll) — escopado em .ten-tl */
/* Base 100% visível/estática (funciona sem JS, ex.: canvas do editor). A animação de entrada
   só arma quando o script adiciona .js na seção — e nunca em prefers-reduced-motion. */
.ten-tl{--ink:#0A1F33;--blue:#005EB8;--blue-soft:#6BB0EE;--muted:#B9C6D4;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',-apple-system,sans-serif;position:relative;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,rgba(0,94,184,.18),transparent 60%),linear-gradient(180deg,#00060f,#00101f 55%,#00060f);color:#fff;padding:6rem 0;font-family:var(--sans)}
.ten-tl *{box-sizing:border-box}
.ten-tl .tlx-wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* cabeçalho */
.ten-tl .tlx-head{max-width:720px;margin:0 0 3rem}
.ten-tl .tlx-kicker{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 .8rem}
.ten-tl .tlx-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;letter-spacing:-.01em;margin:0;color:#fff}
.ten-tl .tlx-title em{font-style:normal;color:var(--blue-soft)}
.ten-tl .tlx-lead{font-size:1.02rem;line-height:1.6;color:var(--muted);margin:.9rem 0 0;max-width:560px}

/* trilha — todos os marcos cabem na tela (sem scroll) */
.ten-tl .tlx-track{position:relative}
.ten-tl .tlx-rail{display:flex;gap:2.8rem}
.ten-tl .tlx-line{position:absolute;left:0;right:0;top:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(107,176,238,0),rgba(0,94,184,.85) 5%,#6BB0EE 50%,rgba(0,94,184,.85) 95%,rgba(107,176,238,0))}

/* marco tipográfico (sem caixa) */
.ten-tl .tlx-item{flex:1 1 0;min-width:0}
.ten-tl .tlx-node{position:relative;height:26px;display:flex;align-items:center;margin-bottom:.9rem}
.ten-tl .tlx-dot{width:11px;height:11px;margin-left:2px;border-radius:50%;background:#9fd0ff;box-shadow:0 0 0 4px rgba(107,176,238,.14),0 0 14px rgba(107,176,238,.5);transition:box-shadow .4s,background .4s}
.ten-tl .tlx-year{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;letter-spacing:-.01em;color:var(--blue-soft);opacity:.55;margin:0 0 .65rem;transition:opacity .4s}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .ten-tl .tlx-year{background:linear-gradient(180deg,#fff 5%,#6BB0EE 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.ten-tl .tlx-h{font-family:var(--sans);font-weight:600;font-size:.95rem;line-height:1.35;color:#fff;margin:0 0 .4rem}
.ten-tl .tlx-t{font-size:.8rem;line-height:1.6;color:var(--muted);margin:0}

/* hover acende o marco */
.ten-tl .tlx-item:hover .tlx-year{opacity:1}
.ten-tl .tlx-item:hover .tlx-dot{background:#fff;box-shadow:0 0 0 5px rgba(107,176,238,.22),0 0 22px rgba(107,176,238,.95)}

/* animação de entrada — só com JS ativo e sem reduced-motion */
@media(prefers-reduced-motion:no-preference){
  .ten-tl.js .tlx-line{transform:scaleX(0);transform-origin:left center;transition:transform 1.3s cubic-bezier(.16,1,.3,1) .1s}
  .ten-tl.js.is-in .tlx-line{transform:none}
  .ten-tl.js .tlx-item{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.16,1,.3,1) var(--d,0s)}
  .ten-tl.js.is-in .tlx-item{opacity:1;transform:none}
  .ten-tl.js .tlx-dot{transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .25s),box-shadow .4s,background .4s}
  .ten-tl.js.is-in .tlx-dot{transform:scale(1)}
  .ten-tl.js.is-done .tlx-item,.ten-tl.js.is-done .tlx-dot{transition-delay:0s}
  .ten-tl.js.is-done .tlx-item:hover{transform:translateY(-5px)}
}

/* mobile: trilho vertical compacto (6 colunas não cabem) */
@media(max-width:760px){
  .ten-tl{padding:4.5rem 0}
  .ten-tl .tlx-head{margin-bottom:2.4rem}
  .ten-tl .tlx-rail{display:block}
  .ten-tl .tlx-line{left:4.5px;right:auto;top:4px;bottom:4px;width:2px;height:auto;background:linear-gradient(180deg,rgba(107,176,238,0),rgba(0,94,184,.85) 5%,#6BB0EE 50%,rgba(0,94,184,.85) 95%,rgba(107,176,238,0))}
  .ten-tl .tlx-item{position:relative;padding-left:2.1rem;margin-bottom:2.2rem}
  .ten-tl .tlx-item:last-child{margin-bottom:0}
  .ten-tl .tlx-node{position:absolute;left:0;top:2px;height:auto;margin:0}
  .ten-tl .tlx-dot{margin-left:0}
  .ten-tl .tlx-year{font-size:1.8rem}
  .ten-tl .tlx-h{font-size:1rem}
  .ten-tl .tlx-t{font-size:.86rem}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .ten-tl.js .tlx-line{transform:scaleY(0);transform-origin:center top}
  .ten-tl.js.is-in .tlx-line{transform:none}
  .ten-tl.js .tlx-item{transform:translateY(18px)}
  .ten-tl.js.is-in .tlx-item{transform:none}
}