/*!
  * Item: Kitzu
  * Description: Personal Portfolio Template
  * Author/Developer: Exill
  * Author/Developer URL: https://themeforest.net/user/exill
  * Version: v2.0.0
  * License: Themeforest Standard Licenses: https://themeforest.net/licenses
  */

/*----------- ADD YOUR CUSTOM CSS STYLES BELOW -----------*/


canvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9998;
	// background-color: #fff;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	
	&.snow {
		background-color: #aaa;
		opacity: 0.1;
	}
}

@mixin pseudo {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	content: " ";
}

@mixin fill {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;	
}

.screen-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.screen-wrapper {
	position: relative;
	width: 100%;
	height: 100%;	
	
	&:first-child {
		// opacity: 0;
	}
}

.vcr {
	// filter: blur(1px);
	opacity: 0.6
}
.video {
	filter: blur(1px);
	width: 100%;
	height: 100%;	
}
.image {
	width: 100%;
	height: auto;
	filter: blur(1.2px);
}
.vignette {
	background-image: url(../img/crt.png);
	@include fill;
		background-repeat: no-repeat;
		background-size: 100% 100%;	
	z-index: 10000;
}
.scanlines {
	@include fill;
	z-index: 9999;
	background: linear-gradient(
			transparentize($screen-background, 1) 50%,
			transparentize(darken($screen-background, 10), 0.75) 50%
		),
		linear-gradient(
			90deg,
			transparentize(#ff0000, 0.94),
			transparentize(#00ff00, 0.98),
			transparentize(#0000ff, 0.94)
		);
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
}

.wobblex {
	animation: wobblex 100ms infinite;
}

.wobbley {
	animation: wobbley 100ms infinite;
}

.glitch {
	animation: 5s ease 2000ms normal none infinite running glitch;
}

@keyframes wobblex {
	50% {
		transform: translateX(1px);
	}
	51% {
		transform: translateX(0);
	}
}
@keyframes wobbley {
	0% {
		transform: translateY(1px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes glitch {
	30% {
	}
	40% {
		opacity: 1;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
	41% {
		opacity: 0.8;
		transform: scale(1, 1.2);
		transform: skew(80deg, 0);
	}
	42% {
		opacity: 0.8;
		transform: scale(1, 1.2);
		transform: skew(-50deg, 0);
	}
	43% {
		opacity: 1;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
	65% {
	}
}

@keyframes glitch1 {
	0% {
		transform: translateX(0);
	}
	30% {
		transform: translateX(0);
	}
	31% {
		transform: translateX(10px);
	}
	32% {
		transform: translateX(0);
	}
	98% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(10px);
	}
}
.text span:nth-child(2) {
	animation: glitch2 1s infinite;
}
@keyframes glitch2 {
	0% {
		transform: translateX(0);
	}
	30% {
		transform: translateX(0);
	}
	31% {
		transform: translateX(-10px);
	}
	32% {
		transform: translateX(0);
	}
	98% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-10px);
	}
}

.overlay .text {
	animation: 5s ease 2000ms normal none infinite running glitch;
}

.on > .screen-wrapper {
	animation: 3000ms linear 0ms normal forwards 1 running on;
}
.off > .screen-wrapper {
	animation: 750ms
		cubic-bezier(0.230, 1.000, 0.320, 1.000)
		0ms
		normal
		forwards
		1
		running
		off;
}

@keyframes on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0);
		filter: brightness(4);
		opacity: 1;
	}
	3.5% {
		transform: scale(1, 0.8) translate3d(0, 100%, 0);
	}

	3.6% {
		transform: scale(1, 0.8) translate3d(0, -100%, 0);
		opacity: 1;
	}

	9% {
		transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		filter: brightness(4);
		opacity: 0;
	}

	11% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(0) brightness(0);
		opacity: 0;
	}

	100% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(1) brightness(1.2) saturate(1.3);
		opacity: 1;
	}
}

@keyframes off {
	0% {
		transform: scale(1, 1);
		filter: brightness(1);
	}
	40% {
		transform: scale(1, 0.005);
		filter: brightness(100);
	}
	70% {
		transform: scale(1, 0.005);
	}
	90% {
		transform: scale(0.005, 0.005);
	}
	100% {
		transform: scale(0, 0);
	}
}

.roller {
	position: relative;
	
	// &::after {
	// 	width: 100%;
	// 	height: 3px;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	background-color: rgba(0,0,0,0.2);
	// 	filter: blur(1px);
	// 	content: "";
	// 	animation: 1000ms linear 0ms forwards infinite roll;
	// }
	animation: 2000ms linear 0ms forwards infinite roll;
}

@keyframes roll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, -50%, 0);
	}	
}

.dg.ac {
	display:none;
}
@font-face {
    font-family: ItalicAna;
    src: url("fonts/ItalicAna.otf") format("opentype");
}