/* ═══════════════════════════════════════════════════════════
   LINHA DO TEMPO — componente reutilizável
   Usado por: linha-do-tempo.html (prévia) e a-voyzer-tech.html (site)
   Depende apenas dos tokens --black/--white/--amber/--brand.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ PALCO ═══════════ */
#tlStage{height:600vh;position:relative;padding:0}
.tl-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black)}

.tl-bg {
  position: absolute;
  inset: -6% -25vw;
  background: #0a0a0c center/cover no-repeat;
  opacity: .34;
  filter: saturate(.8) contrast(1.02) brightness(.92);
  will-change: transform;
}
#tlParticles{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 38%,rgba(7,7,8,.78) 100%),
    linear-gradient(90deg,rgba(7,7,8,.95),transparent 14%,transparent 86%,rgba(7,7,8,.95));
}

/* ─── título ─── */
.tl-head {
  position: absolute;
  top: clamp(3rem, 8vh, 6rem);
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 1.4rem;
  z-index: 5;
  pointer-events: none;
}
.tl-eyebrow{
  display:inline-block;font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brand);font-weight:600;margin-bottom:1rem;
}
.tl-head h1,.tl-head h2{
  font-weight:300;font-size:clamp(1.6rem,3.3vw,2.7rem);line-height:1.08;
  letter-spacing:-.01em;text-shadow:0 2px 40px rgba(0,0,0,.75);
}

/* ═══════════ TRILHA ═══════════ */
.tl-track{
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;
  padding:0 max(12vw,160px);
  will-change:transform;
}
.tl-line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
#tlPathGhost{stroke:#26262e;stroke-width:2}
#tlPath{stroke:var(--brand);stroke-width:2;filter:drop-shadow(0 0 10px rgba(254,80,0,.6))}

/* ─── nó ─── */
.tl-node {
  position: relative;
  flex: none;
  width: clamp(320px, 34vw, 520px);
  height: 38vh;
  margin-top: 32vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.tl-node.is-up{transform:translateY(-3.5vh)}
.tl-node.is-down{transform:translateY(3.5vh)}
/* marca atual ganha mais respiro (logo largo) */
.tl-node.is-current{width:clamp(360px,42vw,640px)}

/* anel + ano */
.tl-ring{
  position:relative;flex:none;
  width:clamp(66px,5.6vw,86px);aspect-ratio:1;
  border-radius:50%;
  border:2px solid #2f2f38;
  background:radial-gradient(circle at 50% 45%,rgba(20,20,23,.92),rgba(7,7,8,.92));
  display:flex;align-items:center;justify-content:center;
  transition:border-color .6s,box-shadow .6s,transform .6s cubic-bezier(.19,1,.22,1);
}
.tl-year{
  font-weight:500;font-size:clamp(.82rem,1.15vw,1rem);letter-spacing:.1em;
  color:#6f6a63;transition:color .6s,text-shadow .6s;
}
.tl-node.is-on .tl-ring{
  border-color:var(--brand);transform:scale(1.06);
  box-shadow:0 0 0 1px rgba(254,80,0,.25),0 0 28px rgba(254,80,0,.42),0 0 70px rgba(254,80,0,.22),inset 0 0 26px rgba(254,80,0,.14);
}
.tl-node.is-on .tl-year{color:var(--white);text-shadow:0 0 18px rgba(254,80,0,.55)}
.tl-node.is-current.is-on .tl-ring{border-color:var(--amber);box-shadow:0 0 0 1px rgba(232,163,61,.3),0 0 34px rgba(232,163,61,.5),0 0 90px rgba(232,163,61,.26)}

/* haste */
.tl-stem{
  position:relative;width:2px;flex:1;min-height:3vh;
  background:linear-gradient(#2f2f38,#2f2f38);
  transform-origin:top center;transform:scaleY(0);
  transition:transform .7s cubic-bezier(.19,1,.22,1),background .6s;
}
.tl-node.is-on .tl-stem{transform:scaleY(1);background:linear-gradient(var(--brand),rgba(254,80,0,.15))}
.tl-dot{
  position:absolute;left:50%;bottom:-5px;translate:-50% 0;
  width:11px;height:11px;border-radius:50%;background:#2f2f38;
  transition:background .6s,box-shadow .6s;
}
.tl-node.is-on .tl-dot{background:var(--brand);box-shadow:0 0 16px rgba(254,80,0,.85)}

/* logo */
.tl-logo{
  flex:none;min-height:clamp(110px,13vh,150px);width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1.4rem 1.4rem 0;
  opacity:0;transform:translateY(22px) scale(.94);
  transition:opacity .8s,transform .8s cubic-bezier(.19,1,.22,1);
}
.tl-node.is-on .tl-logo{opacity:1;transform:none}
/* logos já tratados para fundo escuro — cores de marca preservadas */
.tl-logo img{
  max-height:clamp(68px,7.8vw,106px);max-width:88%;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.75));
  opacity:.96;transition:opacity .6s;
}
.tl-node.is-current .tl-logo img{opacity:1}
/* wordmark de reserva (usado quando não há arquivo de logo) */
.tl-logo img + .tl-mark{display:none}
.tl-mark{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.tl-mark b{
  font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:.04em;line-height:1.05;
  color:var(--white);text-transform:none;text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.tl-mark b em{color:var(--brand);font-style:normal}
.tl-mark small{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white-dim);
}
[data-year="2005"] .tl-mark b{color:#8fc0ee}
[data-year="2012"] .tl-mark b em,[data-year="2015"] .tl-mark b em{color:var(--amber)}

/* ═══════════ PROGRESSO / DICA / AUTO ═══════════ */
.tl-progress{
  position:absolute;left:max(8vw,120px);right:max(8vw,120px);bottom:8.5vh;
  height:1px;background:#23232a;z-index:6;
}
.tl-progress i{display:block;height:100%;width:0;background:var(--brand);box-shadow:0 0 12px rgba(254,80,0,.8)}
.tl-hint{
  position:absolute;left:0;right:0;bottom:4vh;text-align:center;z-index:6;
  font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;color:var(--white-dim);
  display:flex;align-items:center;justify-content:center;gap:.9rem;transition:opacity .5s;
}
.tl-hint span{width:52px;height:1px;background:#33333c;position:relative;overflow:hidden}
.tl-hint span::after{
  content:"";position:absolute;top:0;left:-50%;width:50%;height:100%;background:var(--brand);
  animation:tlHint 2.2s ease-in-out infinite;
}
@keyframes tlHint{to{left:110%}}
.tl-hint.is-off{opacity:0}

.tl-auto{
  position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:4vh;z-index:7;
  background:rgba(8,9,12,.55);backdrop-filter:blur(6px);
  border:1px solid #33333c;color:var(--white);
  font-family:inherit;font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:.75em 1.5em;border-radius:2em;cursor:pointer;
  transition:border-color .35s,color .35s,background .35s;
}
.tl-auto:hover,.tl-auto.is-playing{border-color:var(--brand);color:var(--brand)}

/* ═══════════════════════════════════════════════════════════
   VARIANTE EMBUTIDA NO SITE (.is-embed)
   Percurso mais curto e bordas suaves para virar uma seção.
   ═══════════════════════════════════════════════════════════ */
#tlStage.is-embed{height:420vh}
.is-embed .tl-sticky{
  height:100vh;
  border-top:1px solid #1b1b21;border-bottom:1px solid #1b1b21;
}
.is-embed .tl-bg{opacity:.26}
.is-embed .tl-head {
  top: clamp(3.5rem, 9vh, 6.5rem);
}
.is-embed .tl-vignette{
  background:
    radial-gradient(ellipse at center,transparent 42%,rgba(7,7,8,.72) 100%),
    linear-gradient(90deg,rgba(7,7,8,.92),transparent 12%,transparent 88%,rgba(7,7,8,.92)),
    linear-gradient(rgba(7,7,8,.85),transparent 22%,transparent 80%,rgba(7,7,8,.9));
}

/* ═══════════ MOBILE — timeline vertical ═══════════ */
@media (max-width:820px){
  #tlStage,#tlStage.is-embed{height:auto}
  .tl-sticky{position:relative;height:auto;padding:clamp(7rem,20vh,10rem) 1.2rem 4rem}
  .is-embed .tl-sticky{padding:clamp(4rem,10vh,6rem) 1.2rem 3.5rem;height:auto}
  .tl-bg{position:fixed;inset:0;opacity:.32}
  .is-embed .tl-bg{position:absolute;inset:0;opacity:.2}
  #tlParticles,.tl-vignette{position:fixed}
  .is-embed #tlParticles,.is-embed .tl-vignette{position:absolute}
  .tl-head{position:relative;top:auto;margin-bottom:3.5rem}
  .tl-line,.tl-progress,.tl-hint,.tl-auto{display:none}
  .tl-track{
    position:relative;flex-direction:column;height:auto;padding:0;
    transform:none!important;align-items:center;
  }
  .tl-node,.tl-node.is-down,.tl-node.is-up,.tl-node.is-current{
    width:100%;max-width:400px;height:auto;padding-top:0;
    margin-top:0;transform:none;
    flex-direction:row;align-items:center;gap:1.2rem;
    padding-bottom:2.6rem;
  }
  .tl-ring{width:60px}
  .tl-stem{display:none}
  .tl-logo{
    padding:0;min-height:0;align-items:flex-start;text-align:left;flex:1;
    transform:translateX(16px) scale(.96);
  }
  .tl-node.is-on .tl-logo{transform:none}
  .tl-mark{align-items:flex-start;text-align:left}
  .tl-mark b{font-size:1.5rem}
  .tl-logo img{max-height:62px;max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .tl-hint span::after{animation:none}
  .tl-ring,.tl-stem,.tl-logo{transition:none}
}