/*==============================================================================================
                                      FONTES
================================================================================================*/


@font-face {
  font-family: "f1";
  src: url('fonts/a2.ttf');
}

@font-face {
  font-family: "f2";
  src: url('fonts/a3.otf');
}



/*=============================================================================
                              header
==============================================================================*/

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  z-index: 99;
  
  width: 100%;
  height: 80PX;
  background-color: rgb(0, 0, 0);
  box-shadow: 2px 0px 12px rgba(0, 0, 0, 0.604);
}

HEADER H1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: rgb(255, 255, 255);
  font-size: 35PX;
}

header a{
  display: flex;
  justify-content: space-around;

  height: 40%;
  width: 40%;
}


/*==============================================================================================
                                      FOOTER
================================================================================================*/


footer{
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 100%;
  height: 300PX;
  background-color: rgb(0, 0, 0);
}

/*=========================================================================================
                                     MAIN
==========================================================================================*/

main{
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  

  width: 100%;
  height: 320VH;
  background: #a99fe3;
  background: linear-gradient(167deg, rgba(146, 227, 240, 0.525) 0%, rgb(50, 100, 157) 28%, rgb(8, 0, 18) 67%);
}

/*=========================================================================================
                                     TEXTOS 
==========================================================================================*/

#porcento{
  color: rgb(0, 255, 132);
  text-shadow: -1px 1px 1px rgba(6, 6, 6, 0.33);
}

#txt1 {

  position: absolute;
  text-align: center;
  
  width: 500px;
  height: 80px;

  top: 4.8%;
  left: 1%;
  z-index: 2;
  
  font-family: 'f1';
  font-size: 44px;
  line-height: 1.9;

  color: rgb(255, 255, 255);
  text-shadow: -1px 2px 1px rgba(0, 0, 0, 0.525);
}

#txt2{
  position: absolute;
  text-align: center;

  width: 500px;
  height: 80px;

  font-family: 'f1';
  font-size: 45px;

  top: 32%;
  left: 10%;
  z-index: 2;
  text-shadow: -1px 2px 1px rgba(0, 0, 0, 0.5);
}

a {
  font-size: 22px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: rgb(255, 208, 0);
  text-shadow: -1px 1px 1px rgb(0, 0, 0);
}

.txtft3, h1, h2{
  color: blanchedalmond;
  text-shadow: -1px 2px 1px rgba(0, 0, 0, 0.089);

}

#yt{
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
}

#txt3{

  position: absolute;
  text-align: center;

  width: 800px;
  height: 80px;

  
  font-size: 45px;

  bottom: 28%;
  z-index: 2;
  text-shadow: -1px 2px 1px rgba(0, 0, 0, 0.5);
  
}

/*=========================================================================================
                                     FOTOS 
==========================================================================================*/

.fotos{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  border-radius: 22px;
  background-color: rgba(0, 0, 0, 0.241);
  box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.53);

}

 #ft2 img, #ft3 #i4, #ft4 img:not(.botao){
  height: 100%;
  object-fit: contain;
  box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.463);
  
}

#ft1 {
  display: flex;
  align-items: center;
  gap: 2;
  padding: 1%;

  height: 400px;
  width: 440px;

  top: 9%;
  left: 3%;
}


.imgs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* o par que estiver com o mouse em cima (magens1 ou magens2) toma
   prioridade total de z-index sobre o outro par e sobre o overlay de blur */
.imgs.pair-hover{
  z-index: 2500;
}

#magens1{
  height: 95%;
}
#magens2{
  height: 95%;
}


.imagens{
  position: absolute;
  height: 100%;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.559);

  cursor: pointer;
  transition:
    top 1.5s cubic-bezier(.22,.9,.32,1),
    left 1.5s cubic-bezier(.22,.9,.32,1),
    right 1.5s cubic-bezier(.22,.9,.32,1),
    bottom 1.5s cubic-bezier(.22,.9,.32,1),
    transform 1.2s cubic-bezier(.22,.9,.32,1),
    filter 1.2s ease,
    opacity 1.2s ease,
    box-shadow 1.2s ease,
    z-index 0s;
  will-change: transform, top, left, right, bottom, filter;
}

/* posição "A" (era o antigo #img1) */
.imagens.slot-a{
  right: 14%;
  left: auto;
  top: 1.5%;
  bottom: auto;
  z-index: 1;
}

/* posição "B" - sempre a que fica à frente por padrão */
.imagens.slot-b{
  left: 14%;
  right: auto;
  bottom: 1.5%;
  top: auto;
  z-index: 2;
}

/* ao passar o mouse no par: as DUAS imagens vêm pra frente da tela.
   a que está no slot "b" (frente) fica 100% nítida, a do slot "a" (trás)
   recebe um blur visível pra não atrapalhar a leitura da que está na frente */
.imgs.pair-hover .imagens.slot-b{
  transform: scale(1.55);
  z-index: 2001;
  filter: none !important;
  opacity: 1;
  box-shadow: -6px 10px 22px rgba(0, 0, 0, 0.7);
}

.imgs.pair-hover .imagens.slot-a{
  transform: scale(1.3);
  z-index: 2000;
  filter: blur(0.8px);
  opacity: 0.85;
  box-shadow: -6px 10px 18px rgba(0, 0, 0, 0.6);
}

/* libera o corte do container pai (#ft1) enquanto o hover estiver ativo,
   permitindo que as imagens realmente extrapolem os limites da div */
#ft1.no-clip{
  overflow: visible;
}

/* overlay de desfoque do fundo da tela inteira */
#pageBlurOverlay{
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(0, 0, 0, 0);
  transition: backdrop-filter 0.45s ease, background 0.45s ease, -webkit-backdrop-filter 0.45s ease;
}

#pageBlurOverlay.active{
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.28);
}




#ft2{
  padding: 1%;
  height: 400px;
  width: 460px;

  top: 6%;
  right: 3%;
  gap: 10px;

  text-align: center;
}


/* efeito de lupa dentro do ft2 */
#ft2{
  position: absolute; /* garante que seja o container de referência do .lens */
}

#ft2.lens-active > img,
#ft2.lens-active > #yt{
  filter: blur(1.5px);
}

/* libera o corte do container enquanto a lupa estiver ativa,
   permitindo que ela vaze pra fora dos limites do #ft2 */
#ft2.lens-active{
  overflow: visible;
}

.lens{
  position: fixed;
  display: none;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;

  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 18px rgba(0, 0, 0, 0.65),
    inset 0 0 12px rgba(0, 0, 0, 0.35);

  background-repeat: no-repeat;
}

#ft3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1%;
  height: 600px;
  width: 80%;

  top: 38%;
  left: 10%;
  gap: 20px;
}

.txtft3{
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;

  height: 100%;
}

#i3 {
  height: 85%;
}


#ft4 {
  display: block;
  position: absolute;
  overflow: hidden;
  padding: 1%;

  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 480px;
  bottom: 2%;

  
  background: linear-gradient(167deg, rgba(202, 200, 227, 0.200) 0%, rgba(117, 92, 184, 0.200) 50%, rgb(0, 0, 0) 100%);
  border-radius: 6px;
  box-shadow: -4px 4px 6px rgba(0, 0, 0, 0.912);
}

#ft4 img:not(.botao){
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: auto;
  max-height: 98%;
  max-width: 60%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s cubic-bezier(.22,.9,.32,1), filter 0.6s ease, opacity 0.6s ease;
}

/* setas de troca de foto (ft1 e ft4) - usam a MESMA classe .botao do vídeo,
   então tamanho, hover e clique ficam idênticos aos botões de vídeo.
   ficam escondidas no desktop, só aparecem no celular (ver media query) */
.foto-botao{
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
}
#btnPrevFoto{ left: 2%; }
#btnNextFoto{ right: 2%; }
#btnPrevFoto1{ left: 2%; }
#btnNextFoto1{ right: 2%; }

/*=========================================================================================
                                     VIDEOS 
==========================================================================================*/


.videos {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;

  height: 500px;
  width: 430px;

  top: 5%;
}

#vd1 {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 500PX;
  width: 286PX;
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.463);

}

.botao {
  height: 66px;
  width: 58px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), filter 0.25s ease;
}

.botao:hover{
  transform: scale(1.22);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
}

.botao:active,
.botao.clicked{
  transform: scale(0.8);
  transition: transform 0.12s ease;
}

#vd1{
  transition: opacity 0.25s ease;
}

#vd1.trocando{
  opacity: 0.15;
}

.videos video {
  height: 96%;
  width: 96%;
  border-radius: 4px;
}


/*=========================================================================================
                                     REVEAL (entrada tipo loading)
==========================================================================================*/

.reveal-child{
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  filter: blur(10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,.9,.32,1), filter 0.45s ease;
}

.reveal-target.in-view .reveal-child,
.reveal-child.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* versão sem transform, usada no carrossel do ft4 (que já é controlado via JS) */
.reveal-fade{
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.reveal-target.in-view .reveal-fade,
.reveal-fade.in-view{
  opacity: 1;
  filter: blur(0);
}

/*=========================================================================================
                                     Responsivo 
==========================================================================================*/

/*-----------------------------------------------------------------------------------------
  TABLET (mantém o layout horizontal do desktop, só encolhe tudo pra caber na tela)
------------------------------------------------------------------------------------------*/
@media (min-width: 901px) and (max-width: 1200px) {
  body{ zoom: 0.8; }
}

@media (min-width: 769px) and (max-width: 900px) {
  body{ zoom: 0.62; }
}

/*-----------------------------------------------------------------------------------------
  CELULAR (layout vertical, um bloco por tela, com rolagem)
  A ordem visual é controlada via "order" no flex do <main>, sem mudar o HTML:
  txt1 -> ft1 -> video -> ft2 -> txt2 -> ft3 -> txt3 -> ft4
------------------------------------------------------------------------------------------*/
@media (max-width: 768px){

  html, body{
    overflow-x: hidden;
  }

  header{
    height: 60px;
  }

  header a{
    height: 34px;
    width: 34px;
  }

  main{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    overflow: visible;
    padding-top: 60px; /* espaço do header fixo */
  }

  /* ---- ordem dos blocos ---- */
  #txt1{ order: 1; }
  #ft1{  order: 2; }
  .videos{ order: 3; }
  #ft2{  order: 4; }
  #txt2{ order: 5; }
  #ft3{  order: 6; }
  #txt3{ order: 7; }
  #ft4{  order: 8; }

  /* ---- textos: fluxo normal, não ocupam a tela inteira ---- */
  #txt1, #txt2, #txt3{
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: 92%;
    height: auto;
    font-size: 26px;
    line-height: 1.4;
    margin: 26px auto;
    text-align: center;
    z-index: 2;
  }

  /* ---- FT1: só 1 par de slots, foto ocupando o máximo do espaço, sem zoom, estático ---- */
  #ft1{
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: 100vh;
    padding: 1%;
  }

  /* esconde o segundo par de imagens, sobra só o #magens1 */
  #ft1 .imgs:not(#magens1){
    display: none;
  }

  #magens1{
    height: 90%;
    width: 78%;
    margin: 0 auto;
  }

  #ft1 .imagens{
    height: auto;
    width: auto;
    max-width: 92%;
    max-height: 92%; /* garante que a foto inteira caiba sem cortar, mesmo com o overflow:hidden do container */
    touch-action: manipulation; /* sem double-tap zoom nas fotos */

    /* base sempre igual pras duas fotos - o "empilhamento" diagonal entre
       elas passa a vir só do transform (translate) logo abaixo. Antes a
       troca de slot alternava entre um valor fixo (ex: top:1%) e "auto"
       (ex: top:auto) no MESMO eixo, e CSS não anima de/para "auto" -
       resultado: a foto pulava direto pro lugar em vez de deslizar. Como
       transform SEMPRE anima, movendo a base fixa com translate resolve. */
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
  }

  #ft1 .imagens.slot-a{ transform: translate(-50%, -50%) translate(6%, -6%); }
  #ft1 .imagens.slot-b{ transform: translate(-50%, -50%) translate(-6%, 6%); }

  /* setas de troca do ft1 - mesma posição/estilo usados no ft4 (relativas à
     div inteira #ft1, não ao box de 78% do #magens1) */
  #ft1 .foto-botao{ z-index: 70; }

  /* sem zoom no celular: fica estático mesmo trocando os slots */
  .imgs.pair-hover .imagens.slot-a,
  .imgs.pair-hover .imagens.slot-b{
    transform: none !important;
    filter: none !important;
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.559) !important;
  }

  #pageBlurOverlay{ display: none; }

  /* ---- VIDEO: ocupa a tela inteira, vídeo com padding de 1% ---- */
  .videos{
    position: relative;
    top: auto;
    width: 100%;
    height: 100vh;
    padding: 1%;
  }

  #vd1{
    width: 78%;
    height: 90%;
  }

  .botao{
    height: 42px;
    width: 36px;
  }

  /* ---- FT2: foto grande (tamanho parecido com o vídeo), texto maior embaixo.
     Como tem texto, o bloco pode esticar além de 1 tela (min-height), diferente
     do ft1/ft4 que são só imagem e ficam presos a exatamente 100vh ---- */
  #ft2{
    position: relative;
    top: auto; right: auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 2% 1%;
    gap: 14px;
  }

  /* largura/altura em "max", com width/height em auto: o box do <img> passa a
     acompanhar a proporção real da foto (em vez de ficar esticado num
     retângulo fixo 78%x76vh). Isso também resolve o bug da sombra: como
     box-shadow segue o RETÂNGULO do elemento e não o conteúdo visível do
     object-fit, um box desproporcional fazia a sombra "flutuar" longe da
     foto. Com o box do tamanho certo, a sombra volta a colar nela. */
  #ft2 img{
    max-height: 84vh;
    max-width: 97%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  #yt{
    height: auto;
    gap: 14px;
    padding-bottom: 10px;
  }

  #yt h2{ font-size: 19px; line-height: 1.55; }
  #yt a{ font-size: 19px; }

  /* lupa é efeito de mouse, não faz sentido no toque - some por completo,
     inclusive o blur que ela ativa na imagem (nada de zoom/lupa no celular) */
  .lens{ display: none !important; }
  #ft2.lens-active > img,
  #ft2.lens-active > #yt{
    filter: none !important;
  }

  /* ---- FT3: 2 prints bem coladas (2-3px de afastamento), grandes (tamanho
     parecido com o vídeo), texto maior embaixo. Bloco também pode esticar
     além de 1 tela por causa do texto ---- */
  #ft3{
    position: relative;
    top: auto; left: auto;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 4% 1%;
    gap: 0;
  }

  #ft3 img{
    width: calc(49% - 1.5px);
    height: 74vh;
    object-fit: contain;
    order: 1;
    margin: 0 1.5px; /* soma ~3px de afastamento entre as duas fotos */
  }

  #ft3 .txtft3{
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 22px;
  }

  #ft3 .txtft3 h1{ font-size: 23px; line-height: 1.4; }
  #ft3 .txtft3 h2{ font-size: 17px; line-height: 1.6; }

  /* ---- FT4: mesmo carrossel em pirâmide, com setas de troca ---- */
  #ft4{
    position: relative;
    bottom: auto;
    width: 100%;
    height: 100vh;
    padding: 1%;
  }

  /* sem redeclarar altura/largura aqui: herda exatamente o tamanho
     do .botao mobile ali em cima, igual às setas do vídeo */
  .foto-botao{
    display: block;
  }

  /* foto central com a mesma largura proporcional do conteúdo do vídeo (78%) */
  #ft4 img:not(.botao){
    max-width: 78%;
  }

  footer{
    height: 160px;
  }
}