/* Mútua Associação de Caminhoneiros : profundidade do hero
   ===========================================================================
   TESE
   Ao mover o cursor sobre o hero, o caminhão se descola do pôr do sol e o
   ponto de luz quente acompanha a mão, porque quem dirige à noite reconhece
   essa relação antes de ler qualquer frase: o que está perto anda mais que o
   que está longe, e o farol é o que decide o que se enxerga.

   ARQUITETURA
   A foto é um quadro só. Ela foi partida em duas camadas ao longo da linha do
   horizonte, geradas fora do navegador:

     img/hero-ceu.webp    céu real em cima, continuação lisa embaixo   (28 KB)
     img/hero-terra.webp  estrada, mato e caminhão, com alfa            (77 KB)

   As duas são iguais à foto base quando paradas. Deslocadas em taxas
   diferentes, viram profundidade real, e não um efeito por cima.

   ONDE ISSO EXISTE
   Só aqui: tela de 901px para cima, cursor de verdade e nenhuma preferência
   por movimento reduzido. Este arquivo inteiro está dentro dessa @media, e o
   `<link>` no HTML repete a condição, então em celular ele nem é aplicado.
   As duas imagens de camada são criadas pelo JS: no celular não existe
   requisição, não existe byte.

   O QUE NÃO ESTÁ AQUI
   Nada em laço. Tudo que se mexe aqui é resposta a um movimento do cursor.
   Mouse parado, página parada.
   =========================================================================== */

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

  /* A foto base ganha a mesma folga das camadas para que a troca seja
     invisível: sem isto, o instante em que as camadas entram apareceria
     como um salto de 4% no enquadramento. */
  .hero__foto img{ scale:1.045 }

  /* As duas camadas são inseridas pelo JS dentro de .hero__foto, que já
     recorta. Herdadas do mesmo enquadramento da foto base, com a mesma
     folga, elas se sobrepõem pixel a pixel quando o cursor está no centro. */
  .hero__ceu,
  .hero__terra{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:66% 58%;
    scale:1.045;
    opacity:0; pointer-events:none;
    transition:opacity .4s linear;
  }
  .hero[data-profundidade="pronto"] .hero__ceu,
  .hero[data-profundidade="pronto"] .hero__terra{ opacity:1 }

  /* Luz quente que acompanha o cursor. Não é um brilho decorativo: é a
     mesma cor do sol que já está na foto, e ela vive ABAIXO do véu, então
     a sombra do texto continua na frente dela, como deve ser. */
  .hero__farol{
    position:absolute; top:0; left:0;
    width:760px; height:760px; margin:-380px 0 0 -380px;
    pointer-events:none; opacity:0;
    mix-blend-mode:screen;
    background:radial-gradient(circle at 50% 50%,
      rgba(217,182,92,.30) 0%,
      rgba(211,166,84,.16) 26%,
      rgba(180,132,54,.06) 52%,
      rgba(180,132,54,0) 72%);
    transition:opacity .35s var(--saida,ease-out);
  }
  .hero[data-farol="on"] .hero__farol{ opacity:1 }

  /* Marcação de pista no encontro do hero com a faixa de credencial.
     Não é adesivo de estrada colado no canto: é a linha que separa os dois
     blocos, com o ritmo de traço e vão da sinalização de rodovia (1 para 2).
     Ela desliza com o cursor, como o asfalto desliza quando você anda. */
  .hero__faixa{
    position:absolute; left:0; right:0; bottom:0; height:2px;
    overflow:hidden; pointer-events:none; z-index:3;
  }
  .hero__faixa i{
    position:absolute; top:0; height:100%;
    left:-90px; right:-90px;
    background:repeating-linear-gradient(to right,
      rgba(131,112,40,.62) 0px, rgba(131,112,40,.62) 30px,
      rgba(131,112,40,0)  30px, rgba(131,112,40,0)  90px);
  }

  /* will-change entra quando o cursor entra e sai quando ele sai. Camada de
     composição permanente em imagem grande custa memória de GPU à toa. */
  .hero[data-farol="on"] .hero__ceu,
  .hero[data-farol="on"] .hero__terra,
  .hero[data-farol="on"] .hero__int{ will-change:transform }
}