/* =============================================================================
 *  TIMELINE — MODO "WEBGL"   (a-empresa.html?tl=webgl)
 * =============================================================================
 *  Cena 3D real (js/tl-3d.js) renderizada ATRÁS dos cards: foguete modelado em 3D
 *  com chama e rastro de partículas, trilha como tubo de luz volumétrico, marcos
 *  com feixe de luz, poeira luminosa em profundidade.
 *  Os cards continuam HTML — links, teclado e SEO PRESERVADOS. Eles só ganham
 *  perspectiva/profundidade pra parecerem parte da cena.
 *  Se o WebGL falhar, a classe .is-gl não entra e a timeline 2D continua no ar.
 * ========================================================================== */

.tl2-mode-webgl .tl2-gl{
  position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none;
}

/* com a cena 3D no ar, a linha/foguete/brilho do DOM saem (viraram 3D) */
.tl2-mode-webgl.is-gl .tl2-line,
.tl2-mode-webgl.is-gl .tl2-rocket{ opacity: 0; }
.tl2-mode-webgl.is-gl .tl2-stage::before{ display: none; }

/* ---- OS CARDS TAMBÉM SÃO 3D --------------------------------------------------
   A trilha inteira inclina junto com a cena (--tl-tilt, escrito pelo tl-3d.js), e
   cada marco VIRA DE FRENTE pro foguete (--dx: negativo à esquerda, positivo à
   direita) formando um arco. Sem isso os cards ficavam chapados boiando sobre o 3D.
   ⚠ SEM desfoque: a profundidade vem de escala (perspectiva) + rotação + sombra. */
.tl2-mode-webgl .tl2-stage{
  perspective: 1250px;
  perspective-origin: calc(50% + var(--mx,0) * 6%) calc(50% + var(--my,0) * 4%);
  transition: perspective-origin .25s ease-out;
}
.tl2-mode-webgl .tl2-track{ transform-style: preserve-3d; }   /* o rotateX vem do JS via --tl-tilt */

.tl2-mode-webgl .tl2-step{
  transform: translateX(-50%)
             translateZ(calc(var(--d,1) * -230px))
             rotateY(calc(var(--dx,0) * -21deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
}
.tl2-mode-webgl .tl2-card{ filter: none; transform-style: preserve-3d; }

/* LOGO com espessura: as sombras empilhadas simulam a lateral da placa */
.tl2-mode-webgl .tl2-logo{
  transform: translateZ(44px);
  box-shadow:
    0 2px 0 rgba(11,61,44,.16), 0 4px 0 rgba(11,61,44,.11), 0 6px 0 rgba(11,61,44,.07),
    0 26px 40px -18px rgba(11,61,44,.5), 0 60px 80px -40px rgba(11,61,44,.35);
}
.tl2-mode-webgl .tl2-step:hover .tl2-logo{ transform: translateZ(66px) translateY(-4px); }
.tl2-mode-webgl .tl2-year{ transform: translateZ(26px); text-shadow: 0 2px 6px rgba(11,61,44,.18); }
.tl2-mode-webgl .tl2-desc{ transform: translateZ(10px); }
/* o ponto do marco vira só um núcleo — o brilho quem faz é o feixe 3D */
.tl2-mode-webgl.is-gl .tl2-dot{ transform: translateZ(24px); box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.tl2-mode-webgl.is-gl .tl2-step.lit .tl2-dot{ transform: translateZ(24px) scale(1.15); }

@media (prefers-reduced-motion: reduce){
  .tl2-mode-webgl .tl2-step{ transform: translateX(-50%); }
  .tl2-mode-webgl .tl2-card{ filter: none; }
}