.timeline-bg { --timeline-wheel-speed: 1s; position: relative; height: 950px; background: var(--preto); overflow: hidden; padding: 80px 0; }
.timeline-bg::before { content: none; }
.timeline-bg .timeline-stage { position: relative; height: 100%; }
.timeline-bg .timeline { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.timeline-bg .timeline-titulo { margin: 0; font: 700 53.65px/1 garet; color: var(--branco); text-align: center; }
.timeline-bg .timeline-scene { position: relative; width: 100%; height: 780px; }
.timeline-bg .timeline-road-wrap { position: absolute; left: 50%; top: 58%; width: 100%; max-width: 100%; aspect-ratio: 672 / 60.34; transform: translate(-50%, -50%); z-index: 2; }
.timeline-bg .timeline-road-asset { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.timeline-bg .timeline-guide-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.timeline-bg .timeline-guide-path-bg { fill: none; stroke: transparent; stroke-width: 1; }
.timeline-bg .timeline-road-progress { fill: none; stroke: transparent; stroke-width: 1; }
.timeline-bg .timeline-guide-path { fill: none; stroke: transparent; stroke-width: 1; }
.timeline-bg .timeline-dust-layer { display: none; }
.timeline-bg .timeline-bike { --bike-path-offset: 0px; position: absolute; width: 84px; aspect-ratio: 1431 / 1230; z-index: 10; pointer-events: none; }
.timeline-bg .timeline-bike-tilt { position: relative; width: 100%; height: 100%; transform-origin: 50% 78%; }
.timeline-bg .timeline-bike-asset { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.timeline-bg .timeline-wheel { display: none; }
.timeline-bg .timeline-trail { display: none; }
.timeline-bg .timeline-marker { --marker-x: 50%; --marker-y-adjust: 0px; --copy-shift-x: -50%; --line-top-size: 80px; --line-bottom-size: 80px; --dot-size: 28px; --dot-border: 6px; position: absolute; width: 0; height: 0; z-index: 7; }
.timeline-bg .timeline-marker-dot { position: absolute; left: -20px; top: calc(var(--dot-size) / -2); width: var(--dot-size); height: var(--dot-size); border: var(--dot-border) solid var(--cor1); border-radius: 999px; background: transparent; transition: box-shadow .25s ease; }
.timeline-bg .timeline-marker-line { position: absolute; left: -1px; width: 2px; background: rgba(255, 255, 255, 0.35); }
.timeline-bg .timeline-marker.top .timeline-marker-line { top: calc(var(--line-top-size) * -1); height: var(--line-top-size); }
.timeline-bg .timeline-marker.bottom .timeline-marker-line { top: 0; height: var(--line-bottom-size); }
.timeline-bg .timeline-marker.top .timeline-marker-dot { top:-120px; }
.timeline-bg .timeline-marker.bottom .timeline-marker-dot { top: 80px; }
.timeline-bg .timeline-copy { position: absolute; left: 50%; width: 270px; transform: translateX(var(--copy-shift-x)); text-align: center; }
.timeline-bg .timeline-marker.top .timeline-copy { bottom: calc(var(--line-top-size) + var(--dot-size) + 18px); }
.timeline-bg .timeline-marker.bottom .timeline-copy { top: calc(var(--line-bottom-size) + var(--dot-size) + 18px); }
.timeline-bg .timeline-copy h3 { margin: 0 0 12px; font: 400 34px/1 akira; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px var(--cor1); text-transform: uppercase; white-space: nowrap; }
.timeline-bg .timeline-copy p { margin: 0; font: 15px/2 montserrat; color: var(--branco); }
.timeline-bg .timeline-marker-1 { --marker-x: 17.5%; --copy-shift-x: -50%; }
.timeline-bg .timeline-marker-2 { --marker-x: 33.8%; --copy-shift-x: -50%; }
.timeline-bg .timeline-marker-3 { --marker-x: 50%; --copy-shift-x: -50%; }
.timeline-bg .timeline-marker-4 { --marker-x: 65.8%; --copy-shift-x: -50%; }
.timeline-bg .timeline-marker-5 { --marker-x: 81.2%; --copy-shift-x: -57%; }
.timeline-bg .timeline-marker.active .timeline-marker-dot, .timeline-bg .timeline-marker.passed .timeline-marker-dot { animation: infinite animate-passed .5s alternate; }

@keyframes animate-passed {
  from {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    box-shadow: 0 0 10px 4px rgba(255, 211, 0, 0.22);
  }
}
.timeline-bg .timeline-marker.active .timeline-marker-line { background: rgba(255, 211, 0, 0.42); }
.timeline-bg .timeline-mobile { display: none; }

@media (max-width: 1250px) {
  .timeline-bg .timeline-scene { width: 100%; height: 760px; }
  .timeline-bg .timeline-road-wrap { width: 100%; }
  .timeline-bg .timeline-copy { width: 235px; }
  .timeline-bg .timeline-copy h3 { font-size: 30px; }
  .timeline-bg .timeline-marker-5 { --copy-shift-x: -56%; }
  .timeline-bg .timeline-copy h3 { font-size: 25px; }
  .timeline-bg .timeline-copy p { font-size: 13px; }

}

@media (max-width: 990px) {
  .timeline-scene { display: none; }
  .timeline-bg { height: auto; padding: 72px 0; }
  .timeline-bg .timeline { height: auto; }
  .timeline-bg .timeline-mobile { position: relative; display: grid; gap: 26px; width: min(100%, 700px); box-sizing: border-box; margin: 26px auto 0; padding-left: 36px; }
  .timeline-bg .timeline-mobile::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: rgba(255, 255, 255, 0.28); }
  .timeline-bg .timeline-mobile-item { position: relative; }
  .timeline-bg .timeline-mobile-dot { position: absolute; left: -36px; top: 7px; width: 22px; height: 22px; border: 5px solid var(--cor1); border-radius: 999px; background: var(--preto); box-sizing: border-box; }
  .timeline-bg .timeline-mobile-copy h3 { margin: 0 0 8px; font: 400 28px/1 akira; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px var(--cor1); text-transform: uppercase; }
  .timeline-bg .timeline-mobile-copy p { margin: 0; font: 14px/1.65 montserrat; color: var(--branco); }

}

@media (max-width: 640px) {
  .timeline-bg .timeline-titulo { font-size: 37px; }
  .timeline-bg .timeline-mobile { gap: 22px; margin-top: 22px; padding-left: 32px; }
  .timeline-bg .timeline-mobile::before { left: 10px; }
  .timeline-bg .timeline-mobile-dot { left: -32px; width: 20px; height: 20px; border-width: 4px; }
  .timeline-bg .timeline-mobile-copy h3 { font-size: 21px; }
  .timeline-bg .timeline-mobile-copy p { font-size: 12px; line-height: 1.55; }
  .timeline-bg .timeline-scene { width: 100%; height: 690px; margin-top: 18px; }
  .timeline-bg .timeline-road-wrap { width: 100%; top: 59%; }
  .timeline-bg .timeline-bike { width: 70px; }
  .timeline-bg .timeline-marker { --dot-size: 24px; --dot-border: 5px; }
  .timeline-bg .timeline-marker { --line-top-size: 96px; --line-bottom-size: 96px; }
  .timeline-bg .timeline-marker.top .timeline-copy { bottom: calc(var(--line-top-size) + var(--dot-size) + 12px); }
  .timeline-bg .timeline-marker.bottom .timeline-copy { top: calc(var(--line-bottom-size) + var(--dot-size) + 12px); }
  .timeline-bg .timeline-copy { width: min(180px, 42vw); }
  .timeline-bg .timeline-copy h3 { margin-bottom: 8px; font-size: 20px; }
  .timeline-bg .timeline-copy p { font-size: 11px; line-height: 1.45; }
  .timeline-bg .timeline-marker-1 { --copy-shift-x: -50%; }
  .timeline-bg .timeline-marker-2 { --copy-shift-x: -50%; }
  .timeline-bg .timeline-marker-3 { --copy-shift-x: -50%; }
  .timeline-bg .timeline-marker-4 { --copy-shift-x: -50%; }
  .timeline-bg .timeline-marker-5 { --copy-shift-x: -54%; }
}