/* Mútua Associação de Caminhoneiros : seletor de veículo em 3D
   ===========================================================================
   TESE
   Ao girar o veículo, a pessoa reconhece o próprio caminhão pela silhueta e
   pela contagem de eixos, porque é assim que caminhoneiro identifica veículo
   na vida real, e não pelo nome numa lista suspensa.

   COMO ISTO CONVIVE COM O FORMULÁRIO
   O <select> continua sendo o controle de verdade: visível, com rótulo,
   navegável por teclado, e é dele que a mensagem do WhatsApp lê o valor.
   O 3D entra ACIMA dele como visor: mostra o que está escolhido, gira com o
   cursor e tem duas setas que trocam a escolha. Se o WebGL falhar, se o
   three.js não chegar ou se o JS morrer, o formulário fica exatamente como
   está hoje. Nada aqui é pré-requisito de nada.

   ONDE ISTO EXISTE
   Tela de 901px para cima, cursor de verdade, sem preferência por movimento
   reduzido. O `<link>` no HTML repete a condição, e o three.js só é baixado
   quando a seção da simulação chega perto da tela. No celular não há
   requisição de three.js, não há canvas, não há nada.
   =========================================================================== */

@media (min-width:901px) and (hover:hover) and (pointer:fine)
   and (prefers-reduced-motion:no-preference){

  .veic3d{
    position:relative;
    margin:0 0 14px;
    height:250px;
    border-radius:14px;
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 74% 18%, rgba(131,112,40,.16) 0%, rgba(131,112,40,0) 58%),
      linear-gradient(to bottom, #16291F 0%, #132420 62%, #101D19 100%);
    border:1px solid rgba(255,255,255,.09);
    opacity:0;
    transition:opacity .45s linear;
  }
  .veic3d[data-estado="pronto"]{ opacity:1 }

  .veic3d__tela{ display:block; width:100%; height:100%; cursor:grab }
  .veic3d[data-arrasto="sim"] .veic3d__tela{ cursor:grabbing }

  /* nome do que está na tela. aria-hidden porque o <select> logo abaixo já
     anuncia a mesma informação, e ninguém precisa ouvir duas vezes */
  .veic3d__nome{
    position:absolute; left:16px; bottom:12px; margin:0;
    font-size:var(--t-nota,.9375rem); font-weight:700; color:#fff;
    letter-spacing:.01em; text-shadow:0 1px 8px rgba(7,14,11,.75);
    pointer-events:none;
  }
  .veic3d__dica{
    position:absolute; right:16px; bottom:12px; margin:0;
    font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.62);
    text-shadow:0 1px 8px rgba(7,14,11,.75);
    pointer-events:none;
  }

  .veic3d__seta{
    position:absolute; top:50%; margin-top:-21px;
    width:42px; height:42px; padding:0;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.30);
    border-radius:50%;
    background:rgba(10,19,16,.42);
    color:#fff; font-size:1.4rem; line-height:1;
    cursor:pointer;
    transition:background-color .16s ease-out, border-color .16s ease-out;
  }
  .veic3d__seta:hover{ background:rgba(131,112,40,.72); border-color:rgba(217,182,92,.8) }
  .veic3d__seta:focus-visible{ outline:3px solid var(--ouro-luz,#D9B65C); outline-offset:2px }
  .veic3d__seta--ant{ left:12px }
  .veic3d__seta--prox{ right:12px }
}