/* =============================================================================
 *  TIMELINE — MODO "MATERIAIS E LUZ"   (a-empresa.html?tl=css3d)
 * =============================================================================
 *  Sobriedade corporativa. SEM WebGL, SEM personagem 3D, SEM partícula.
 *  A profundidade vem de: perspectiva CONTIDA, vidro, sombra real e elevação.
 *  O foguete continua um ÍCONE pequeno (como no 2D) — não um modelo.
 *  Linguagem de página de produto, não de jogo.
 *  Único JS (tl-3d.js): move o ponto de fuga com o mouse (--mx/--my). 0 KB de Three.js.
 * ========================================================================== */

/* cena com perspectiva DISCRETA; o ponto de fuga acompanha o mouse de leve */
.tl2-mode-css3d .tl2-stage{
  perspective: 1700px;
  perspective-origin: calc(50% + var(--mx,0) * 4%) calc(50% + var(--my,0) * 3%);
  transition: perspective-origin .3s ease-out;
}
.tl2-mode-css3d .tl2-track{ transform-style: preserve-3d; }

/* PROFUNDIDADE CONTIDA: o que você lê fica à frente; o distante recua de leve e
   se vira sutilmente pro eixo do foguete (--dx com sinal). Valores pequenos de
   propósito — sem "efeito", só uma sensação de espaço. SEM desfoque. */
.tl2-mode-css3d .tl2-step{
  transform: translateX(-50%)
             translateZ(calc(var(--d,1) * -66px))
             rotateY(calc(var(--dx,0) * -8deg));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease);
}
.tl2-mode-css3d .tl2-card{ transform-style: preserve-3d; }

/* ELEVAÇÃO REAL da placa do logo: sombra de contato curta + sombra projetada longa
   e macia (a placa parece pousada acima do card, com luz vindo de cima). */
.tl2-mode-css3d .tl2-logo{
  transform: translateZ(30px);
  border-color: rgba(11,61,44,.10);
  box-shadow:
    0 1px 2px rgba(11,61,44,.14),
    0 10px 18px -10px rgba(11,61,44,.30),
    0 30px 48px -26px rgba(11,61,44,.28);
}
.tl2-mode-css3d .tl2-step:hover .tl2-logo{
  transform: translateZ(46px) translateY(-3px);
  box-shadow:
    0 1px 2px rgba(11,61,44,.16),
    0 16px 26px -12px rgba(11,61,44,.34),
    0 44px 64px -32px rgba(11,61,44,.30);
}
.tl2-mode-css3d .tl2-year{ transform: translateZ(16px); }
.tl2-mode-css3d .tl2-dot { transform: translateZ(18px); }
.tl2-mode-css3d .tl2-step.lit .tl2-dot{ transform: translateZ(18px) scale(1.18); }

/* ---- LINHA = TRILHO DE VIDRO (o material, não um efeito) --------------------
   Cilindro de vidro: brilho especular no topo, corpo translúcido, sombra interna
   embaixo e uma sombra de contato macia sob o trilho. */
.tl2-mode-css3d .tl2-line{
  height: 11px; border-radius: 11px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.75) 0%,
      rgba(210,223,214,.55) 22%,
      rgba(160,180,168,.32) 55%,
      rgba(11,61,44,.14) 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -3px 5px rgba(11,61,44,.16),
    0 8px 16px -10px rgba(11,61,44,.4);
  backdrop-filter: blur(1px);
}
/* ÁGUA/LUZ VERDE que enche o trilho — líquido envidraçado, brilho no topo,
   menisco brilhante na ponta. Glow suave (não neon). */
.tl2-mode-css3d .tl2-fill{
  border-radius: 11px;
  background:
    linear-gradient(180deg,
      rgba(234,255,200,.95) 0%,
      var(--lima-soft) 20%,
      var(--lima) 55%,
      #3E5A15 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.85),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 0 14px rgba(114,159,40,.55),
    0 0 30px rgba(169,207,91,.32);
}
.tl2-mode-css3d .tl2-fill::after{        /* menisco: reflexo vivo na ponta do líquido */
  width: 34px; height: 34px;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(214,255,158,.5) 34%, rgba(169,207,91,0) 72%);
}

/* FOGUETE = a mesma CÁPSULA do 2D, só com a elevação do modo "materiais e luz":
   sombra de contato curta + projetada macia, como a placa do logo. Sem glow lima
   por cima — aqui o brilho já vem da cabeça de luz da trilha, atrás dela.
   (Era um glifo verde-escuro de 24px: virava borrão e cobria o marco de 2026.
    Ver o comentário longo em empresa.css.) */
.tl2-mode-css3d .tl2-rocket{
  box-shadow:
    0 0 0 5px rgba(255,255,255,.92),
    0 2px 3px rgba(11,61,44,.16),
    0 12px 22px -10px rgba(11,61,44,.42);
}
.tl2-mode-css3d .tl2-rocket i{ color: var(--lima-ink); }

/* fundo com um leve deslocamento em profundidade (parallax discreto) */
.tl2-mode-css3d .tl2-stage::before{
  transform: translate3d(calc(var(--mx,0) * -9px), calc(var(--my,0) * -6px), 0);
  transition: transform .35s ease-out;
}

@media (prefers-reduced-motion: reduce){
  .tl2-mode-css3d .tl2-step{ transform: translateX(-50%); }
  .tl2-mode-css3d .tl2-stage{ perspective: none; }
}