/* Sources:
http://aleclownes.com/2017/02/01/crt-display.html
https://codepen.io/lbebber/pen/XJRdrV
*/

@keyframes nudge-left {
	0% {
		transform: translateX(0px);
	}
	
	30% {
		transform: translateX(-0.25em);
	}
	
	100% {
		transform: translateX(0px);
	}
}
@keyframes nudge-right {
	0% {
		transform: translateX(0px);
	}
	
	30% {
		transform: translateX(0.25em);
	}
	
	100% {
		transform: translateX(0px);
	}
}
@keyframes nudge-up {
	0% {
		transform: translateY(0px);
	}
	
	30% {
		transform: translateY(-0.25em);
	}
	
	100% {
		transform: translateY(0px);
	}
}
@keyframes nudge-down {
	0% {
		transform: translateY(0px);
	}
	
	30% {
		transform: translateY(0.25em);
	}
	
	100% {
		transform: translateY(0px);
	}
}

@keyframes shake {
	0% {
		transform: translate(0px, 0px);
	}

    20% {
		transform: translate(3px, -1.5px);
	}
	
	40% {
		transform: translate(-1px, 1px);
	}

    60% {
		transform: translate(1px, 2px);
	}
	
    80% {
		transform: translate(4px, -1px);
	}

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

@keyframes pulse-main {
    0% {
        clip: rect(10px, 9999px, 4px, 0);
        transform: translateX(-10px);
    }
    10% {
        clip: rect(12px, 9999px, 4px, 0);
        transform: translateX(-14px);
    }
    20% {
        clip: rect(19px, 9999px, 4px, 0);
        transform: translateX(-14px);
    }
    30% {
        clip: rect(5px, 9999px, 8px, 0);
        transform: translateX(-5px);
    }
    40% {
        clip: rect(8px, 9999px, 7px, 0);
        transform: translateX(-13px);
    }
    50% {
        clip: rect(14px, 9999px, 17px, 0);
        transform: translateX(-11px);
    }
    60% {
        clip: rect(16px, 9999px, 18px, 0);
        transform: translateX(-12px);
    }
    70% {
        clip: rect(6px, 9999px, 5px, 0);
        transform: translateX(-12px);
    }
    80% {
        clip: rect(16px, 9999px, 13px, 0);
        transform: translateX(-6px);
    }
    90% {
        clip: rect(9px, 9999px, 12px, 0);
        transform: translateX(-17px);
    }
    100% {
        clip: rect(16px, 9999px, 6px, 0);
        transform: translateX(-19px);
    }
}
@keyframes pulse-after {
    0% {
        clip: rect(8px, 9999px, 10px, 0);
        transform: translateY(-100%) translateX(10px);
    }
    10% {
        clip: rect(1px, 9999px, 14px, 0);
        transform: translateY(-100%) translateX(14px);
    }
    20% {
        clip: rect(9px, 9999px, 10px, 0);
        transform: translateY(-100%) translateX(5px);
    }
    30% {
        clip: rect(16px, 9999px, 19px, 0);
        transform: translateY(-100%) translateX(2px);
    }
    40% {
        clip: rect(18px, 9999px, 17px, 0);
        transform: translateY(-100%) translateX(15px);
    }
    50% {
        clip: rect(15px, 9999px, 17px, 0);
        transform: translateY(-100%) translateX(11px);
    }
    60% {
        clip: rect(5px, 9999px, 5px, 0);
        transform: translateY(-100%) translateX(9px);
    }
    70% {
        clip: rect(5px, 9999px, 16px, 0);
        transform: translateY(-100%) translateX(7px);
    }
    80% {
        clip: rect(6px, 9999px, 4px, 0);
        transform: translateY(-100%) translateX(12px);
    }
    90% {
        clip: rect(14px, 9999px, 3px, 0);
        transform: translateY(-100%) translateX(7px);
        opacity: 1;
        display:inline-block;
    }
    100% {
        clip: rect(2px, 9999px, 18px, 0);
        transform: translateY(-100%) translateX(2px);
        opacity: 0;
        display: none;
    }
}
@keyframes flicker {
    0% {
        opacity: 0.27861;
    }
    5% {
        opacity: 0.34769;
    }
    10% {
        opacity: 0.23604;
    }
    15% {
        opacity: 0.20626;
    }
    20% {
        opacity: 0.28128;
    }
    25% {
        opacity: 0.23891;
    }
    30% {
        opacity: 0.25583;
    }
    35% {
        opacity: 0.27807;
    }
    40% {
        opacity: 0.26559;
    }
    45% {
        opacity: 0.24693;
    }
    50% {
        opacity: 0.26019;
    }
    55% {
        opacity: 0.08594;
    }
    60% {
        opacity: 0.20313;
    }
    65% {
        opacity: 0.21988;
    }
    70% {
        opacity: 0.23455;
    }
    75% {
        opacity: 0.37288;
    }
    80% {
        opacity: 0.21428;
    }
    85% {
        opacity: 0.20419;
    }
    90% {
        opacity: 0.2003;
    }
    95% {
        opacity: 0.36108;
    }
    100% {
        opacity: 0.24387;
    }
}
@keyframes textShadow {
    0% {
        text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.02), -0.4389924193300864px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    5% {
        text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.02), -2.7928974010788217px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    10% {
        text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.02), -0.02956275843481219px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    15% {
        text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.02), -0.40218538552878136px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    20% {
        text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.02), -3.4794037899852017px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    25% {
        text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.02), -1.6125630401149584px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    30% {
        text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.02), -0.7015590085143956px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    35% {
        text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.02), -3.896914047650351px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    40% {
        text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.02), -3.870905614848819px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    45% {
        text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.02), -2.231056963361899px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    50% {
        text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.02), -0.08084290417898504px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    55% {
        text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.02), -2.3758461067427543px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    60% {
        text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.02), -2.202193051050636px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    65% {
        text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.02), -2.8638780614874975px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    70% {
        text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.02), -0.48874025155497314px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    75% {
        text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.02), -1.8948491305757957px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    80% {
        text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.02), -0.0833037308038857px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    85% {
        text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.02), -0.09769827255241735px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    90% {
        text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.02), -3.443339761481782px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    95% {
        text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.02), -2.1841838852799786px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
    100% {
        text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.02), -2.6208764473832513px 0 1px rgba(255,0,80,0.01), 0 0 3px;
    }
}
@keyframes turn-on{
    0%{
        transform:scale(0.0001,0.0001) translate3d(0,-20%,0);
        -webkit-filter:brightness(50);
        filter:brightness(50);
    }
    10%{
        transform:scale(0.2,0.001) translate3d(0,0,0);
        -webkit-filter:brightness(100);
        filter:brightness(100);
    }
    20%{
        transform:scale(0.02,0.01) translate3d(0,0,0);
        -webkit-filter:brightness(100);
        filter:brightness(100);
    }
    40%{
        transform:scale(1.0,0.01) translate3d(0,0,0);
        -webkit-filter:brightness(100);
        filter:brightness(100);
    }
    96%{
        transform:scale(0.9,1) translate3d(0,0,0);
        -webkit-filter:brightness(1);
        filter:brightness(1);
        opacity:1;
    }
    100%{
        transform:scale(1,1) translate3d(0,0,0);
        -webkit-filter:brightness(1);
        filter:brightness(1);
        opacity:1;
    }
}
@-webkit-keyframes scanline {
  0% {
    transform: translate3d(0, 200000%, 0);
  }
}
@keyframes scanline {
  0% {
    transform: translate3d(0, 200000%, 0);
  }
}
@-webkit-keyframes scanlines {
  0% {
    background-position: 0 50%;
  }
}
@keyframes scanlines {
  0% {
    background-position: 0 50%;
  }
}

.crt::after, .crt::before, .scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
    top: 1vmin;
    right: 1vmin;
    bottom: 1vmin;
    left: 1vmin;
    border-radius: 2vmin;
}

.crt::after {
    background: rgba(18, 16, 16, 0.2);
    opacity: 1;
    z-index: 2;
    animation: flicker 0.15s infinite;
    transform: inherit;
}
.crt::before {
    background: repeating-linear-gradient(var(--bg_h), rgba(0,0,0,0) 0.325vmin, var(--bg_h) 0.65vmin);
    opacity: 0.25;
    margin: 0px;
    padding: 0px;
    transform: inherit;
    overflow-x: hidden;
}

.scanlines:before {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  z-index: 51;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0.75;
  -webkit-animation: scanline 6s linear infinite;
          animation: scanline 6s linear infinite;
}
.scanlines:after {
  z-index: 50;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0) 51%);
  background-size: 100% 4px;
  -webkit-animation: scanlines 1s steps(60) infinite;
          animation: scanlines 1s steps(60) infinite;
}

.scanlines, .crt {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.nudge-up {
	animation: nudge-up 0.3s ease-out;
}
.nudge-right {
	animation: nudge-right 0.3s ease-out;
}
.nudge-down {
	animation: nudge-down 0.3s ease-out;
}
.nudge-left {
	animation: nudge-left 0.3s ease-out;
}

.flicker  {
	animation: flicker 0.3s ease-out;
}