/* =========================================================
   MAQUINA EM 3D — ela abre a pagina cortando e fica girando.
   ========================================================= */


/* =========================================================
   >>>>>  AJUSTE A MAQUINA AQUI. SO AQUI.  <<<<<

   Sao tres numeros por tamanho de tela. Mexer neles nao quebra
   nada: o JavaScript le a caixa que o CSS montou e coloca a
   maquina dentro dela. Nao precisa mexer em JavaScript nenhum.

   --mq-distancia  QUAO LONGE DA BORDA DIREITA ela fica.
                   MAIOR  = ela anda para a ESQUERDA (para o meio)
                   MENOR  = ela vai para a DIREITA (para a borda)

   --mq-altura     O TAMANHO dela.
                   MAIOR = maior. Ela e alta e fina, entao a
                   largura vem sozinha a partir da altura.

   --mq-topo       A ALTURA EM QUE ELA PARA na tela.
                   MENOR = mais para CIMA.  50% = meio exato.

   --mq-espaco     Quanto o TEXTO recua para nao passar por baixo
                   dela. So vale no celular e no tablet.
                   Se voce aumentar a altura ou diminuir a
                   distancia, aumente este numero junto — senao o
                   titulo entra por baixo da maquina.

   As unidades: vw = por cento da LARGURA da tela.
                vh = por cento da ALTURA da tela.
   Sao assim para o tamanho acompanhar o monitor de quem visita.
   ========================================================= */

:root{
  --mq-distancia: 27vw;
  --mq-altura:    70vh;
  --mq-topo:      41%;
  --mq-espaco:    0px;    /* no computador o texto nao precisa recuar */
}

/* ---- notebook e tablet deitado ---- */
@media (max-width:1100px){
  :root{
    --mq-distancia: 12vw;
    --mq-altura:    56vh;
    --mq-topo:      43%;
    --mq-espaco:    0px;
  }
}

/* ---- tablet em pe e celular grande ---- */
@media (max-width:820px){
  :root{
    --mq-distancia: 9vw;
    --mq-altura:    32vh;
    --mq-topo:      33%;
    --mq-espaco:    215px;
  }
}

/* ---- celular ---- */
@media (max-width:520px){
  :root{
    --mq-distancia: 10vw;
    --mq-altura:    28vh;
    --mq-topo:      30%;
    --mq-espaco:    172px;
  }
}

/* =========================================================
   Daqui para baixo e encanamento. Nao precisa mexer.
   ========================================================= */

/* A tela onde ela e desenhada cobre o hero inteiro, porque ela
   atravessa a tela toda cortando antes de ir para o canto. */
.cena3d{
  position:absolute;
  inset:0;
  z-index:5;              /* acima da capa (3) e do fio (4) */
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* A caixa invisivel que marca onde ela para. Ela nao aparece: existe
   para o CSS continuar mandando no posicionamento e o JavaScript so
   ler o retangulo. Os limites em px sao trava de seguranca para
   monitor gigante e celular minusculo; quem manda no dia a dia sao
   as variaveis la de cima. */
.girando{
  position:absolute;
  right:clamp(18px, var(--mq-distancia), 560px);
  top:var(--mq-topo);
  height:clamp(180px, var(--mq-altura), 760px);
  aspect-ratio:.56;       /* ela e alta e fina: a largura vem da altura */
  transform:translateY(-50%);
  visibility:hidden;      /* so a medida interessa */
  pointer-events:none;
}

/* o poste de barbeiro sairia em cima dela no celular */
@media (max-width:820px){
  .poste{ display:none; }
}

/* telas deitadas e baixas: nao sobra espaco para ela */
@media (max-height:520px) and (orientation:landscape){
  .girando{ display:none; }
  .cena3d{ display:none; }
}