/* TV SCREEN EFFECT */

.screen-wrapper {
    position: relative;
}

.screen-wrapper.center-wrap {
    margin: auto;
}

.screen-wrapper.right-wrap {
    float: right;
}

.screen-wrapper.left-wrap {
    float: left;
}

.screen-hover {
    display: flex;
    justify-content: center;
}

/* Glow */

.glow {
    width: var(--glow-width);
    height: var(--glow-height);
    border-radius: var(--screen-radius);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: noise .6s ease 0s infinite forwards;
}

.audio-glow {
    width: var(--glow-width);
    height: var(--glow-height);
    border-radius: var(--screen-radius);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: calc(var(--scalesize) / 12);
    box-shadow: 0 0 80px 5px var(--white);
}

/* Hover */

.screen-hover:hover .glow {
    transition: 0.3s;
    -webkit-transition: 0.8s;
    box-shadow: 0 0 80px 5px var(--red);
    animation: glowflicker 0.15s infinite;
    mix-blend-mode: soft-light;
}

.screen {
    transition: all 0.5s ease-in-out;
}

.screen-hover:hover .screen {
    transition: 1.5s;
    -webkit-transition: 1.5s;
    background-color: var(--white);
    filter: url(../svg/filters.svg#blur2);
}

.screen-hover:hover .screen figcaption h2 {
    transition: 3s;
    color: var(--red);
}

/* Screen 3D Transform */

/* Left */

.screen-hover.left {
    transition: all 1.5s ease-in-out;
    transform: perspective(75em) rotateY(38deg) rotateX(1deg);
}

.screen-hover.left:hover {
    transform: perspective(75em) rotateY(28deg) rotateX(6deg);
}

/* Right */

.screen-hover.right {
    transition: all 1.5s ease-in-out;
    transform: perspective(100em) rotateY(-38deg) rotateX(1deg);
}

.screen-hover.right:hover {
    transform: perspective(100em) rotateY(-28deg) rotateX(6deg);
}

/* Center */

.screen-hover.center {
    transition: all 1.5s ease-in-out;
    transform-origin: bottom;
    transform: perspective(40em) translateZ(-1vw) rotateY(0deg) rotateX(6deg);
}

.screen-hover.center:hover {
    transform-origin: bottom;
    transform: perspective(60em) translateZ(0vw) rotateY(0deg) rotateX(6deg);
}

/* Screen Definition */

.screen {
    display: flex;
    justify-content: center;
    width: var(--screen-widht);
    height: var(--screen-height);
    border: solid 3px var(--white);
    background-color: var(--darkgrey);
    border-radius: var(--screen-radius);
    position: relative;
    filter: url(../svg/filters.svg#blur1);
    animation: noise .6s ease 0s infinite forwards;
    margin: 0;
}

.screen figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    font-size: calc(var(--scalesize)*4*24px);
    font-family: Helvetica;
    text-transform: uppercase;
    font-weight: 800;
}

/* .screen figcaption h2 {
    transition: all 1.5s ease-in-out;
    text-align: center;
    text-transform: uppercase;
} */

/* Noise Distortion Filter Keyframe */

@keyframes noise {
    0% {
        filter: url(../svg/filters.svg#noise-0);
    }
    20% {
        filter: url(../svg/filters.svg#noise-1);
    }
    40% {
        filter: url(../svg/filters.svg#noise-2);
    }
    60% {
        filter: url(../svg/filters.svg#noise-3);
    }
    80% {
        filter: url(../svg/filters.svg#noise-4);
    }
}

/* Flicker Keyframes */

@keyframes glowflicker {
    0% {
        opacity: 0.087861;
    }
    5% {
        opacity: 0.124769;
    }
    10% {
        opacity: 0.083604;
    }
    15% {
        opacity: 0.260626;
    }
    20% {
        opacity: 0.048128;
    }
    25% {
        opacity: 0.223891;
    }
    30% {
        opacity: 0.225583;
    }
    35% {
        opacity: 0.227807;
    }
    40% {
        opacity: 0.086559;
    }
    45% {
        opacity: 0.224693;
    }
    50% {
        opacity: 0.266019;
    }
    55% {
        opacity: 0.22594;
    }
    60% {
        opacity: 0.080313;
    }
    65% {
        opacity: 0.281988;
    }
    70% {
        opacity: 0.403455;
    }
    75% {
        opacity: 0.247288;
    }
    80% {
        opacity: 0.22428;
    }
    85% {
        opacity: 0.280419;
    }
    90% {
        opacity: 0.28003;
    }
    95% {
        opacity: 0.126108;
    }
    100% {
        opacity: 0.08387;
    }
}

@keyframes flicker {
    0% {
        opacity: 0.27861;
    }
    5% {
        opacity: 0.34769;
    }
    10% {
        opacity: 0.23604;
    }
    15% {
        opacity: 0.90626;
    }
    20% {
        opacity: 0.18128;
    }
    25% {
        opacity: 0.83891;
    }
    30% {
        opacity: 0.65583;
    }
    35% {
        opacity: 0.67807;
    }
    40% {
        opacity: 0.26559;
    }
    45% {
        opacity: 0.84693;
    }
    50% {
        opacity: 0.96019;
    }
    55% {
        opacity: 0.08594;
    }
    60% {
        opacity: 0.20313;
    }
    65% {
        opacity: 0.71988;
    }
    70% {
        opacity: 0.53455;
    }
    75% {
        opacity: 0.37288;
    }
    80% {
        opacity: 0.71428;
    }
    85% {
        opacity: 0.70419;
    }
    90% {
        opacity: 0.7003;
    }
    95% {
        opacity: 0.36108;
    }
    100% {
        opacity: 0.24387;
    }
}

@keyframes textShadow {
    0% {
        text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    5% {
        text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5), -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    10% {
        text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5), -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    15% {
        text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5), -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    20% {
        text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5), -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    25% {
        text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5), -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    30% {
        text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5), -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    35% {
        text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5), -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    40% {
        text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5), -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    45% {
        text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5), -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    50% {
        text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5), -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    55% {
        text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5), -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    60% {
        text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5), -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    65% {
        text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5), -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    70% {
        text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5), -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    75% {
        text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5), -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    80% {
        text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5), -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    85% {
        text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5), -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    90% {
        text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5), -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    95% {
        text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5), -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
    100% {
        text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5), -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
}

/* CTR/VHS Line Effect */

.ctr {
    border-radius: calc(var(--screen-radius) + 0.5);
}

.crt::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
    border-radius: var(--screen-radius);
    width: 100%;
    height: 100%;
}

.crt::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    border-radius: var(--screen-radius);
    width: 100%;
    height: 100%;
}

.crt {
    animation: textShadow 1.6s infinite;
    border-radius: var(--screen-radius);
}