/* Eu sei que você tá vendo isso daqui pra procurar alguma pista, ou algo do tipo. Mas posso te garantir: não há nada aqui. 👁 */

@font-face {
    font-family: "MC Ten Lowercase Alt";
    src: url("mc-ten-lowercase-alt.ttf") format("truetype");
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "MC Ten Lowercase Alt", sans-serif;
    background: url("./background.png") no-repeat center center fixed;
    background-size: cover; 
    background-blend-mode: normal;
}

.glitch-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center; /* Centraliza o texto */
}

.glitch {
    position: relative;
    font-size: 5vw; /* Reduz o tamanho da fonte proporcional à largura da tela */
    font-weight: normal;
    color: #f4f4f4;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
        2px 2px 4px rgba(0, 0, 0, 1);
    animation: shift 4s ease-in-out infinite alternate;
    transform: skewX(0deg);
    z-index: 1;
}

@keyframes shift {

    0%,
    40%,
    44%,
    58%,
    61%,
    65%,
    69%,
    73%,
    100% {
        transform: skewX(0deg);
    }

    41% {
        transform: skewX(10deg);
    }

    42% {
        transform: skewX(-10deg);
    }

    59% {
        transform: skewX(40deg) skewY(10deg);
    }

    60% {
        transform: skewX(-40deg) skewY(-10deg);
    }

    63% {
        transform: skewX(10deg) skewY(-5deg);
    }

    70% {
        transform: skewX(-50deg) skewY(-20deg);
    }

    71% {
        transform: skewX(10deg) skewY(-10deg);
    }
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.4;
}

.final-content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 100vw; 
    height: 100vh; 
  }
  
  .final-image {
    max-width: 100%; 
    max-height: 100%; 
    transition: opacity 2s ease-in-out; 
    opacity: 0; 
    object-fit: contain; 
  }
  
  @media (max-width: 768px) {
    .final-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; 
    }
  }