/**
 * animations.css
 *
 * Animations for use across the site.
 *
 * References:
 *   Static TV Screen: https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/
 *   Blinking Text: https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3
 */

/* Animation play states */

.pauseAnimation {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* Tipsy Beer */

.tipsyBeerAnimation {
    -webkit-animation: tipsyBeerKeyframes 4s linear 1s infinite alternate;
    -moz-animation: tipsyBeerKeyframes 4s linear 1s infinite alternate;
    animation: tipsyBeerKeyframes 4s linear 1s infinite alternate;
}

@-moz-keyframes tipsyBeerKeyframes { 
    50% { 
        -moz-transform: rotate(5deg); 
    } 
    100% { 
        -moz-transform: rotate(-5deg); 
    } 
}

@-webkit-keyframes tipsyBeerKeyframes { 
    50% { 
        -webkit-transform: rotate(5deg); 
    } 
    100% { 
        -webkit-transform: rotate(-5deg); 
    } 
}

@keyframes tipsyBeerKeyframes { 
    50% { 
        -webkit-transform: rotate(5deg); 
        transform:rotate(5deg); 
    } 
    100% { 
        -webkit-transform: rotate(-5deg); 
        transform:rotate(-5deg); 
    } 
}

/* Left Transition */

.leftTransitionInAnimation {
    -webkit-animation: leftTransitionInKeyframes 3s linear;
    -moz-animation: leftTransitionInKeyframes 3s linear;
    animation: leftTransitionInKeyframes 3s linear;
}

@keyframes leftTransitionInKeyframes {
    0% {
        left: 100%;
    }
    100% {
        left: 0%;
    }
}

/* Right Transition */

.rightTransitionOutAnimation {
    -webkit-animation: rightTransitionOutKeyframes 3s linear;
    -moz-animation: rightTransitionOutKeyframes 3s linear;
    animation: rightTransitionOutKeyframes 3s linear;
}

@keyframes rightTransitionOutKeyframes {
    0% {
        right: 0%;
    }
    100% {
        right: 100%;
    }
}

/* Fade Out */

.fadeOutAnimation {
    -webkit-animation: fadeOutKeyframes 3s linear;
    -moz-animation: fadeOutKeyframes 3s linear;
    animation: fadeOutKeyframes 3s linear;
    animation-fill-mode: forwards;
}

@keyframes fadeOutKeyframes {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

.fadeOutFastAnimation {
    -webkit-animation: fadeOutFastKeyframes 0.5s ease-out;
    -moz-animation: fadeOutFastKeyframes 0.5s ease-out;
    animation: fadeOutFastKeyframes 0.5s ease-out;
    animation-fill-mode: forwards;
}

@keyframes fadeOutFastKeyframes {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

.popOutAnimation {
    opacity: 0% !important;
}

/* Fade In */

.fadeInAnimation {
    -webkit-animation: fadeInKeyframes 3s linear;
    -moz-animation: fadeInKeyframes 3s linear;
    animation: fadeInKeyframes 3s linear;
    animation-fill-mode: forwards;
}

@keyframes fadeInKeyframes {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.fadeInFastAnimation {
    -webkit-animation: fadeInFastKeyframes 0.5s ease-out;
    -moz-animation: fadeInFastKeyframes 0.5s ease-out;
    animation: fadeInFastKeyframes 0.5s ease-out;
    animation-fill-mode: forwards;
}

@keyframes fadeInFastKeyframes {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.popInAnimation {
    opacity: 100% !important;
}

.poweron {
    color: #ffBB00;
    transition: all 0.5s;
    animation: flicker 1s ease-in-out 1 alternate, neon 1.5s ease-in-out infinite alternate;
    animation-delay: 0s, 1s;
}

.powered {
    color: #ffBB00;
    transition: all 0.5s;
    animation: neon 1.5s ease-in-out infinite alternate;
    animation-delay: 0s;
}

@keyframes neon {
    from {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #ffdd00,
            0 0 15px #ffdd00,
            0 0 17.5px #ffdd00,
            0 0 20px #ffdd00,
            0 0 22.5px #ffdd00;
    }

    to {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #fff,
            0 0 12.5px #fff,
            0 0 15px #ffee00,
            0 0 17.5px #ffee00,
            0 0 20px #ffee00;
    }
}

@keyframes flicker {
    0% {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #B6FF00,
            0 0 17.5px #B6FF00,
            0 0 20px #B6FF00,
            0 0 25px #B6FF00,
            0 0 37.5px #B6FF00;
    }

    2% {
        text-shadow: none;
    }

    8% {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #B6FF00,
            0 0 17.5px #B6FF00,
            0 0 20px #B6FF00,
            0 0 25px #B6FF00,
            0 0 37.5px #B6FF00;
    }

    10% {
        text-shadow: none;
    }

    20% {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #B6FF00,
            0 0 17.5px #B6FF00,
            0 0 20px #B6FF00,
            0 0 25px #B6FF00,
            0 0 37.5px #B6FF00;
    }

    22% {
        text-shadow: none;
    }

    24% {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #B6FF00,
            0 0 17.5px #B6FF00,
            0 0 20px #B6FF00,
            0 0 25px #B6FF00,
            0 0 37.5px #B6FF00;
    }

    28% {
        text-shadow: none;
    }

    32% {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #B6FF00,
            0 0 17.5px #B6FF00,
            0 0 20px #B6FF00,
            0 0 25px #B6FF00,
            0 0 37.5px #B6FF00;
    }

    34% {
        text-shadow: none;
    }

    36% {
        text-shadow: none;
    }

    42% {
        text-shadow: none;
    }

    100% {
        text-shadow:
            0 0 2.5px #fff,
            0 0 5px #fff,
            0 0 7.5px #fff,
            0 0 10px #B6FF00,
            0 0 17.5px #B6FF00,
            0 0 20px #B6FF00,
            0 0 25px #B6FF00,
            0 0 37.5px #B6FF00;
    }
}

/* Static TV */

.tvstatic {
    background:
        repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 75% 0/2500px 2500px,
        repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
    background-blend-mode: difference;
    animation: tv-static-animation .2s infinite alternate;
}

@keyframes tv-static-animation {
    100% {
        background-position: 50% 0, 60% 50%;
    }
}

/*
 * (pointer:none), (pointer:coarse) exists on mobile devices.
 * Reference: https://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used
 */
@media (pointer:none), (pointer:coarse) {
    .tvstatic {
        min-height: 100%;
        background: repeating-conic-gradient(#000 0 .5%,#0000 0 1%);
        background-blend-mode: initial;
        animation: none;
        background-repeat: no-repeat;
    }
}

/* Blinker */

.blinker {
    animation: blinker-animation 1.5s linear infinite;
}

@keyframes blinker-animation {
    0% {
        opacity: 100;
    }

    84% {
        opacity: 100;
    }

    85% {
        opacity: 0;
    }
}

/*
 * Ticker
 *
 * References:
 *   https://codepen.io/lewismcarey/pen/GJZVoG
 *   https://css-tricks.com/css-keyframe-animation-delay-iterations/
 */

/*
 * The ticker animation shows the screen scrolling. Note that the scrolling
 * starts at 50% and ends at 100% to give half the time of scrolling the
 * normal content with no ticker.
 */
@-webkit-keyframes ticker {
    0%, 49% {
        visibility: hidden;
        opacity: 0%;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    50% {
        visibility: visible;
        opacity: 100%;
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes ticker {
    0%, 49% {
        visibility: hidden;
        opacity: 0%;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    50% {
        visibility: visible;
        opacity: 100%;
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

/*
 * The ticker-wrap animation shows/hides ticker on the screen. It has
 * a similar timing ruleset as the ticker animation.
 */
 @-webkit-keyframes ticker-wrap {
    0%, 49% {
        visibility: hidden;
        opacity: 0%;
    }

    50%, 100% {
        visibility: visible;
        opacity: 100%;
    }
}

@keyframes ticker-wrap {
    0%, 49% {
      visibility: hidden;
      opacity: 0%;
    }

    50%, 100% {
        visibility: visible;
        opacity: 100%;
    }
}

.ticker-wrap {
    position: fixed;
    bottom: 1vh;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(0, 0, 0, 0.3);
    padding-left: 100%;
    box-sizing: content-box;
    z-index: 5;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker-wrap;
    animation-name: ticker-wrap;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
}

.ticker-wrap .ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
}

.ticker-wrap .ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: white;
}