@charset "UTF-8";
/* CSS Document */

.comingsoon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
	z-index: 200;
	width: 50%;
	height: 50%;
	background-image: url( '../ui/comingsoon.svg' );
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: none;
	
  }

#tape {
    position: fixed;
    top: 0;
    left: 0;
    
	z-index: 200;
	width: 100%;
	height: 100%;
	background-image: url( '../ui/ducttape.png' );
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: none;
	pointer-events:none;
  }

.hide-overflow{
	overflow: hidden;
}



#active-snl48{
position: fixed;
width:100px;
pointer-events:none;
animation: rotate-snl48 3s linear infinite; 
}

#active-pv{
position: fixed;
width:100px;
pointer-events:none;
z-index:1;

}


@keyframes rotate-snl48 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#active-jh{
position: fixed;
width:100px;
pointer-events:none;
mix-blend-mode: multiply;
animation: rotate-jh 6s linear infinite; 
}

@keyframes rotate-jh {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}


#active-serif{
position: fixed;	
width:1000px;
animation: rotate-serif 6s linear infinite; 
z-index: -3;
pointer-events:none;
	mix-blend-mode: screen;
}

#active-serif-2{
position: fixed;	
width:1000px;
animation: rotate-serif 5s linear infinite; 
z-index: -3;
pointer-events:none;
mix-blend-mode: screen;
	
}

@keyframes rotate-serif {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#active-wonka{
position: fixed;	
width:50px;
z-index:1;
pointer-events:none;
}

#active-404{
position: fixed;	
width:600px;
height: 600px;
z-index:1;
pointer-events:none;
}

  .error {
    position: absolute;
    width: 200px;
    height: 200px;
    
    border-radius: 50%;
	background-image: url('../ui/404.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }

  



#active-bball{
position: fixed;
width:100px;
pointer-events:none;
	
animation: ball-bounce .3s infinite cubic-bezier(0,1,.5,1) alternate;


}
@keyframes ball-bounce {
    0% {
      transform: translateY(0)rotate(30deg);
		
    }
    100% {
      transform: translateY(-100px) rotate(0deg);
		
    }
  }

@keyframes cheerskew {
    0% {
      transform: skew(0deg, 0deg);
		
    }
    100% {
      transform: skew(0deg, -12deg);
		
    }
  }

@keyframes cheerunskew {
    0% {
      transform: skew(0deg, -12deg);
		
    }
    100% {
      transform: skew(0deg, 0deg);
		
    }
  }

@keyframes cheerskewInv {
    0% {
      transform: skew(0deg, 0deg);
		
    }
    100% {
      transform: skew(0deg, 12deg);
		
    }
  }

@keyframes cheerunskewInv {
    0% {
      transform: skew(0deg, 12deg);
		
    }
    100% {
      transform: skew(0deg, 0deg);
		
    }
  }

@keyframes emphasis{
    0% {
      transform: scale(1);
		
    }
    100% {
      transform: scale(1.5);
		
    }
  }

.hover-tomorrow:hover {
	animation: tomorrowGradient 10s infinite linear;
	
}

@keyframes tomorrowGradient {
	
	 0% {
      background-color: var(--color-light);
    }
    10% {
      background: linear-gradient(#EFEEEA, #68C4E4, #FFF5DA);
    }
    20% {
      background: linear-gradient(#68C4E4, #FFF5DA, #FCA15B);
    }
	 30% {
     background: linear-gradient(#FFF5DA, #FCA15B, #ED303A);
    }
	40% {
      background: linear-gradient(#FCA15B, #ED303A);
    }
	60% {
      background: #ED303A;
    }
	75% {
      background: linear-gradient(#ED303A, #EFEEEA);
    }
	100% {
      background: #EFEEEA;
    }
  }


.bgvideo {
 position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
	z-index: -100;
	display:none;
}


.inverted {
	filter: invert(100);
}


.draggable {
     
      position: fixed;
      cursor: move;
	  z-index:200;
	  user-select: none;
	  
    }
#sticker-1{
	 width: 100px;
      height: 100px;
	  border-radius: 50%;
		/*background-image: url('../img/prj/wonka/wonka-monogram-2023.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;*/
      background-color: var(--color-orange);
	  border:1px solid var(--color-primary);
	box-shadow: 0px 0px;
	transition: box-shadow .15s ease, scale .15s ease;
	
	
}

#sticker-1:hover {
	box-shadow: 1.5px 1.5px;
	scale: 1.05;
}


#sticker-2{
	 width: 100px;
      height: 100px;
	  border-radius: 20px;
      background-color: var(--color-yellow);
	  border:1px solid var(--color-primary);
	box-shadow: 0px 0px;
	transition: box-shadow .15s ease, scale .15s ease;
	
	
}

#sticker-2:hover {
	box-shadow: 1.5px 1.5px;
	scale: 1.05;
}

.sticker-hide{
	display:none;
}