@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;600&display=swap');


/* --------------------------- */
/* RESET */
/* --------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  width: 100%;
  height: 100%;
}


body {
  overflow: hidden;
  background: black;
  color: white;
  font-family: "Inter", sans-serif;
}



/* --------------------------- */
/* INTRO */
/* --------------------------- */

.intro {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #000;
}



/* --------------------------- */
/* FUNDO */
/* --------------------------- */

.background {
  position: absolute;
  inset: 0;

  background:

    radial-gradient(
      circle at 50% 55%,
      rgba(120, 0, 0, 0.55),
      transparent 35%
    ),

    radial-gradient(
      circle at 20% 30%,
      rgba(80, 0, 0, 0.25),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #0b0000 0%,
      #160000 45%,
      #000000 100%
    );

  animation: backgroundPulse 5s ease-in-out infinite alternate;
}


@keyframes backgroundPulse {

  from {
    filter: brightness(.65);
    transform: scale(1);
  }

  to {
    filter: brightness(1);
    transform: scale(1.03);
  }

}



/* --------------------------- */
/* NEBLINA */
/* --------------------------- */

.fog {
  position: absolute;

  width: 120%;
  height: 45%;

  left: -10%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.08),
      rgba(255,255,255,0) 65%
    );

  filter: blur(40px);

  opacity: .35;

  pointer-events: none;
}


.fog-1 {
  bottom: -10%;

  animation: fogMove1 12s ease-in-out infinite alternate;
}


.fog-2 {
  top: 15%;

  opacity: .12;

  animation: fogMove2 15s ease-in-out infinite alternate;
}


@keyframes fogMove1 {

  from {
    transform: translateX(-5%);
  }

  to {
    transform: translateX(8%);
  }

}


@keyframes fogMove2 {

  from {
    transform: translateX(6%);
  }

  to {
    transform: translateX(-8%);
  }

}



/* --------------------------- */
/* BALÃO */
/* --------------------------- */

.airship {

  position: absolute;

  z-index: 4;

  width: min(1150px, 90vw);

  top: 42%;
  left: -120%;

  transform:
    translateY(-50%)
    scale(.3)
    rotate(-3deg);

  transform-origin: center;

  filter:

    drop-shadow(
      0 0 15px
      rgba(255, 0, 0, .15)
    )

    drop-shadow(
      0 0 45px
      rgba(255, 0, 0, .08)
    );

  animation:
    airshipFly 7s cubic-bezier(.18,.64,.35,1) forwards,
    airshipFloat 1.8s ease-in-out infinite alternate;

}


@keyframes airshipFly {

  0% {

    left: -95%;

    top: 42%;

    transform:
      translateY(-50%)
      scale(.28)
      rotate(-4deg);

    filter:
      blur(3px)
      brightness(.4);

  }


  20% {

    transform:
      translateY(-54%)
      scale(.55)
      rotate(-2deg);

    filter:
      blur(1px)
      brightness(.65);

  }


  42% {

    left: 8%;

    top: 46%;

    transform:
      translateY(-50%)
      scale(.95)
      rotate(0deg);

    filter:
      blur(0)
      brightness(.9);

  }


  58% {

    left: 18%;

    transform:
      translateY(-51%)
      scale(1.18)
      rotate(1deg);

    filter:
      brightness(1.15)
      drop-shadow(
        0 0 45px
        rgba(255, 0, 0, .25)
      );

  }


  72% {

    left: 45%;

    transform:
      translateY(-47%)
      scale(1.35)
      rotate(2deg);

    filter:
      brightness(.85);

  }


  100% {

    left: 135%;

    top: 36%;

    transform:
      translateY(-50%)
      scale(1.75)
      rotate(4deg);

    filter:
      blur(6px)
      brightness(.4);

  }

}



@keyframes airshipFloat {

  from {

    margin-top: -7px;

  }


  to {

    margin-top: 7px;

  }

}



/* --------------------------- */
/* FLASH */
/* --------------------------- */

.flash {

  position: absolute;

  inset: 0;

  z-index: 8;

  pointer-events: none;

  background: white;

  opacity: 0;

}


.flash.active {

  animation: flashAnimation .48s ease-out;

}


@keyframes flashAnimation {

  0% {
    opacity: 0;
  }

  15% {
    opacity: .95;
  }

  30% {
    opacity: .15;
  }

  45% {
    opacity: .7;
  }

  100% {
    opacity: 0;
  }

}



/* --------------------------- */
/* TELA FINAL */
/* --------------------------- */

.final-screen {

  position: absolute;

  inset: 0;

  z-index: 6;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  opacity: 0;

  transform: scale(.96);

  pointer-events: none;

}


.final-screen.show {

  animation: finalReveal 1.8s ease forwards;

  pointer-events: auto;

}


@keyframes finalReveal {

  from {

    opacity: 0;

    transform: scale(.96);

    filter: blur(8px);

  }

  to {

    opacity: 1;

    transform: scale(1);

    filter: blur(0);

  }

}



/* --------------------------- */
/* TEXTOS */
/* --------------------------- */

.small-title {

  font-size: 11px;

  letter-spacing: 9px;

  margin-bottom: 8px;

  opacity: .55;

}


.final-screen h1 {

  font-family: "Archivo Black", sans-serif;

  font-size: clamp(
    52px,
    11vw,
    170px
  );

  line-height: .9;

  letter-spacing: -3px;

  text-transform: uppercase;

  color: #d40000;

  text-shadow:
    0 0 20px rgba(255, 0, 0, .25);

}


.subtitle {

  margin-top: 18px;

  font-size: 11px;

  letter-spacing: 8px;

  opacity: .55;

}



/* --------------------------- */
/* BOTÃO */
/* --------------------------- */

.enter-button {

  position: relative;

  margin-top: 45px;

  padding:
    15px
    42px;

  border:
    1px solid
    rgba(255,255,255,.55);

  color: white;

  text-decoration: none;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 5px;

  overflow: hidden;

  transition:
    color .35s ease,
    border-color .35s ease,
    transform .35s ease;

}


.enter-button::before {

  content: "";

  position: absolute;

  inset: 0;

  background: white;

  transform:
    translateX(-101%);

  transition:
    transform .35s ease;

  z-index: -1;

}


.enter-button:hover {

  color: black;

  border-color: white;

  transform:
    translateY(-2px);

}


.enter-button:hover::before {

  transform:
    translateX(0);

}



/* --------------------------- */
/* GRÃO */
/* --------------------------- */

.grain {

  position: absolute;

  inset: -50%;

  z-index: 20;

  pointer-events: none;

  opacity: .07;

  background-image:

    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E"
    );

  animation:
    grainMovement .17s steps(2)
    infinite;

}


@keyframes grainMovement {

  0% {
    transform:
      translate(0,0);
  }

  25% {
    transform:
      translate(-3%,2%);
  }

  50% {
    transform:
      translate(2%,-4%);
  }

  75% {
    transform:
      translate(4%,4%);
  }

  100% {
    transform:
      translate(-2%,-3%);
  }

}



/* --------------------------- */
/* CELULAR */
/* --------------------------- */

@media (max-width: 768px) {

  .airship {

    width: 145vw;

  }


  @keyframes airshipFly {

    0% {

      left: -160%;

      transform:
        translateY(-50%)
        scale(.3)
        rotate(-4deg);

    }


    45% {

      left: -25%;

      transform:
        translateY(-50%)
        scale(.8);

    }


    65% {

      left: -10%;

      transform:
        translateY(-50%)
        scale(1.05);

    }


    100% {

      left: 145%;

      transform:
        translateY(-45%)
        scale(1.5)
        rotate(4deg);

    }

  }


  .small-title {

    letter-spacing: 5px;

  }


  .subtitle {

    letter-spacing: 5px;

  }

}