@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Antonio:wght@100;200;300;400;500;600;700&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import "tailwindcss";

.debug {
  outline: 1px solid white;
  animation: debugAnimation .3s linear infinite alternate;
  background: linear-gradient(to right, #ffffff00, #0000003f);
  background-size: 200% 100%;
}

@keyframes debugAnimation {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

::selection {
  background: var(--color-red-600);
  color: #fff;
}

body {
  background-color: #100101;
}

:where(.text-xs, .text-sm, .text-base) {
  font-family: "Anonymous Pro", sans-serif;
}

:where(.text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl) {
  font-family: "Chakra Petch", sans-serif;
}


/*=============================================
=            Navbar            =
=============================================*/

.cta,
nav a {
  position: relative;
  overflow-y: clip;
}

.cta::before,
nav a::before {
  position: absolute;
  content: "";
  left: 25%;
  top: 0;
  width: 50%;
  height: 100%;
  background: white;
  filter: url(#rough-edges);
  z-index: -1;
  box-shadow: 0 0 20px 5px white;
  opacity: 0;
  transition: all .05s ease-in-out;
}

.cta:hover::before,
nav a:hover::before {
  opacity: 1;
  left: 0%;
  width: 100%;
}

/* The fixed Steam CTA */
.glow {
  box-shadow: 0 0 28px 0px var(--color-red-600);
}

/*=====  End of Navbar  ======*/




/*=============================================
=            Header            =
=============================================*/

.game-name {
  font-family: "Antonio", sans-serif;
  /* line-height: 170px; */
}

.antonio {
  font-family: "Antonio", sans-serif;
}

.game-name.red-room {
  position: relative;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-color: lightgray;
  background-image: url("/img/game-name-clip.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: url(#rough-edges);
}

.game-name.red-room::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.header-stroke-text,
.header-stroke-bottom-text {
  color: #000000;
  -webkit-text-stroke: 2px #1f1f1f;
  text-stroke: 2px #1f1f1f;
  white-space: nowrap;
  display: inline-block;
  line-height: 10vw;
  will-change: transform;
  /* transform-style: preserve-3d; */
  /* transform: rotateX(0deg) rotateY(20deg); */
}

.header-stroke-bottom-text {
  color: transparent;
  -webkit-text-stroke: .5px #eee;
  text-stroke: .5px #eee;
  transform: rotate(-3deg);
  opacity: .5;
}

a.cta::before {
  left: 0%;
  width: 100%;
  opacity: 1;
  background-color: white;
  filter: url(#rough-edges);
  z-index: -1;
  box-shadow: 0 0 20px 5px white;
  transition: all .05s ease-in-out;
}

a.cta:hover::before {
  background-color: var(--color-red-600);
  box-shadow: 0 0 20px 5px var(--color-red-600);
}

.hero-gradient-mix {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.00) 0%, #110101 100%);
}


/*=====  End of Header  ======*/


/*=============================================
=            Trailer            =
=============================================*/



/*=====  End of Trailer  ======*/


/*=============================================
=            About            =
=============================================*/

[class*="blur"] {
  -webkit-filter: blur(100px);
}

.polaroid {
  animation: cardTilt1 3s ease-in-out infinite alternate;
  transform-style: preserve-3d;
  transform: rotateY(9deg) rotateX(3deg) rotateZ(352deg) translateY(60px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

@keyframes cardTilt1 {
  0% {
    transform: rotateY(9deg) rotateX(3deg) rotateZ(352deg) translateY(60px);
  }

  100% {
    transform: rotateY(15deg) rotateX(3deg) rotateZ(352deg) translateY(0px);
  }
}

.polaroid::after {
  position: absolute;
  content: "";
  left: 40%;
  top: 0;
  width: 30%;
  height: 200%;
  rotate: 45deg;
  background-color: white;
  opacity: .1;
  animation: reflejo 3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes reflejo {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translate(-100px);
  }
}

/*=====  End of About  ======*/


/*=============================================
=            Countdown            =
=============================================*/

.countdown-number {
  text-shadow: 0 0 10px white;
}

/*=====  End of Countdown  ======*/


/*=============================================
=            Fixed CTA            =
=============================================*/

#FixedCTA {
  transition: translate .2s ease-in-out;
}

#FixedCTA.imOut {
  /* transform: translateX(120px); */
  translate: 160px;
}

#CTATextRing {
  animation: roundNround 50s linear both infinite;
}

@keyframes roundNround {
  from {
    rotate: 360deg;
  }

  to {
    rotate: 0deg
  }
}

/*=====  End of Fixed CTA  ======*/