/*
 * Polok Live Suite
 * Viewer Effects CSS V1.1
 */

.polok-viewer-effect-username-glow-green {
    position: relative;
    z-index: 2;

    display: inline-block;

    color: #ffffff !important;

    font-weight: 800;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #ffffff,
        0 0 6px #53fc18,
        0 0 12px #53fc18,
        0 0 20px #53fc18,
        0 0 30px rgba(83, 252, 24, 0.95);

    filter:
        drop-shadow(0 0 4px rgba(83, 252, 24, 1))
        drop-shadow(0 0 9px rgba(83, 252, 24, 0.9));

    animation:
        polok-username-glow-green-pulse
        1.5s ease-in-out infinite;
}

.polok-viewer-effect-username-glow-green::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: -6px;
    right: -6px;
    top: -3px;
    bottom: -3px;

    border-radius: 8px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(83, 252, 24, 0.28) 0%,
            rgba(83, 252, 24, 0.12) 48%,
            rgba(83, 252, 24, 0) 75%
        );

    filter: blur(4px);

    pointer-events: none;
}

@keyframes polok-username-glow-green-pulse {
    0%,
    100% {
        transform: scale(1);

        text-shadow:
            0 0 1px #ffffff,
            0 0 3px #ffffff,
            0 0 6px #53fc18,
            0 0 12px #53fc18,
            0 0 20px #53fc18;

        filter:
            drop-shadow(0 0 3px rgba(83, 252, 24, 0.9))
            drop-shadow(0 0 7px rgba(83, 252, 24, 0.75));
    }

    50% {
        transform: scale(1.035);

        text-shadow:
            0 0 2px #ffffff,
            0 0 5px #ffffff,
            0 0 9px #53fc18,
            0 0 18px #53fc18,
            0 0 30px #53fc18,
            0 0 42px rgba(83, 252, 24, 1);

        filter:
            drop-shadow(0 0 6px rgba(83, 252, 24, 1))
            drop-shadow(0 0 14px rgba(83, 252, 24, 0.95));
    }
}

html.polok-viewer-effects-disabled
.polok-viewer-effect-username-glow-green {
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html.polok-viewer-effects-disabled
.polok-viewer-effect-username-glow-green::before {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .polok-viewer-effect-username-glow-green {
        animation: none;
    }
}


/* =========================================================
   POLOK VIEWER EFFECTS LIBRARY V1
   ========================================================= */

/* Halo violet */

.polok-viewer-effect-username-glow-purple {
    display: inline-block;
    color: #ffffff !important;
    font-weight: 800;

    text-shadow:
        0 0 2px #ffffff,
        0 0 7px #b44cff,
        0 0 15px #8b2cff,
        0 0 26px #6f00ff;

    animation:
        polok-glow-purple
        1.6s ease-in-out infinite;
}

@keyframes polok-glow-purple {
    50% {
        filter:
            brightness(1.3)
            drop-shadow(0 0 9px #9b35ff);

        text-shadow:
            0 0 4px #ffffff,
            0 0 11px #c26bff,
            0 0 23px #8b2cff,
            0 0 38px #6f00ff;
    }
}


/* Néon cyan */

.polok-viewer-effect-username-neon-cyan {
    display: inline-block;
    color: #eaffff !important;
    font-weight: 800;

    text-shadow:
        0 0 2px #ffffff,
        0 0 6px #00ffff,
        0 0 13px #00d9ff,
        0 0 24px #00aaff;

    animation:
        polok-neon-cyan
        2s ease-in-out infinite;
}

@keyframes polok-neon-cyan {
    0%,
    100% {
        opacity: 1;
    }

    48% {
        opacity: 1;
    }

    50% {
        opacity: 0.72;
    }

    52% {
        opacity: 1;
    }
}


/* Arc-en-ciel */

.polok-viewer-effect-username-rainbow {
    display: inline-block;
    color: transparent !important;

    background:
        linear-gradient(
            90deg,
            #ff3b3b,
            #ffb13b,
            #fff13b,
            #53fc18,
            #00eaff,
            #4677ff,
            #c14cff,
            #ff3b9d,
            #ff3b3b
        );

    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;

    animation:
        polok-rainbow
        3s linear infinite;

    filter:
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}

@keyframes polok-rainbow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 300% 50%;
    }
}


/* Flamme */

.polok-viewer-effect-username-fire {
    display: inline-block;
    color: transparent !important;

    background:
        linear-gradient(
            0deg,
            #ff2500 0%,
            #ff6800 38%,
            #ffd000 68%,
            #fffbd1 100%
        );

    background-size: 100% 180%;
    background-clip: text;
    -webkit-background-clip: text;

    text-shadow:
        0 0 8px rgba(255, 60, 0, 0.8),
        0 0 17px rgba(255, 125, 0, 0.65);

    animation:
        polok-fire
        1.1s ease-in-out infinite alternate;
}

@keyframes polok-fire {
    from {
        background-position: 50% 100%;
        filter: brightness(1);
    }

    to {
        background-position: 50% 10%;
        filter:
            brightness(1.35)
            drop-shadow(0 -3px 7px rgba(255, 80, 0, 0.8));
    }
}


/* Or brillant */

.polok-viewer-effect-username-gold {
    display: inline-block;
    color: transparent !important;

    background:
        linear-gradient(
            110deg,
            #7d5100 0%,
            #ffbf00 25%,
            #fff6a0 42%,
            #ffffff 50%,
            #ffe05c 58%,
            #d78b00 78%,
            #fff09a 100%
        );

    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;

    text-shadow:
        0 0 7px rgba(255, 196, 0, 0.7);

    animation:
        polok-gold-shine
        2.8s linear infinite;
}

@keyframes polok-gold-shine {
    from {
        background-position: 160% 50%;
    }

    to {
        background-position: -100% 50%;
    }
}


/* Holographique */

.polok-viewer-effect-username-holographic {
    display: inline-block;
    color: transparent !important;

    background:
        linear-gradient(
            115deg,
            #7fffff,
            #ff9de6,
            #fff7a1,
            #a7ffb5,
            #9bb7ff,
            #e3a5ff,
            #7fffff
        );

    background-size: 320% 320%;
    background-clip: text;
    -webkit-background-clip: text;

    animation:
        polok-holographic
        3.5s ease infinite;

    filter:
        drop-shadow(0 0 5px rgba(175, 235, 255, 0.75));
}

@keyframes polok-holographic {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Glitch */

.polok-viewer-effect-username-glitch {
    display: inline-block;
    color: #ffffff !important;

    text-shadow:
        -2px 0 #ff0055,
        2px 0 #00eaff;

    animation:
        polok-glitch
        900ms steps(2, end) infinite;
}

@keyframes polok-glitch {
    0%,
    100% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-1px, 1px);
        text-shadow:
            3px 0 #ff0055,
            -3px 0 #00eaff;
    }

    22% {
        transform: translate(2px, -1px);
    }

    55% {
        transform: translate(0, 0);
    }

    57% {
        transform: skewX(-6deg);
    }

    60% {
        transform: skewX(0);
    }
}


/* Électrique */

.polok-viewer-effect-username-electric {
    display: inline-block;
    color: #f4ffff !important;

    text-shadow:
        0 0 3px #ffffff,
        0 0 8px #1adfff,
        0 0 16px #0077ff,
        0 0 27px #0048ff;

    animation:
        polok-electric
        750ms steps(2, end) infinite;
}

@keyframes polok-electric {
    0%,
    100% {
        filter: brightness(1);
    }

    35% {
        filter:
            brightness(1.45)
            drop-shadow(1px 0 6px #00eaff);
    }

    38% {
        filter: brightness(0.8);
    }

    42% {
        filter:
            brightness(1.7)
            drop-shadow(-1px 0 9px #ffffff);
    }
}


/* Ombre sombre */

.polok-viewer-effect-username-dark-shadow {
    display: inline-block;
    color: #e9dcff !important;

    text-shadow:
        2px 2px 0 #12001d,
        4px 4px 2px rgba(0, 0, 0, 0.95),
        0 0 8px #7000a8,
        0 0 17px rgba(68, 0, 100, 0.9);

    animation:
        polok-dark-shadow
        2.2s ease-in-out infinite;
}

@keyframes polok-dark-shadow {
    50% {
        transform: translateY(-1px);

        text-shadow:
            2px 3px 0 #12001d,
            5px 6px 3px rgba(0, 0, 0, 0.95),
            0 0 13px #9d1ae8,
            0 0 27px rgba(72, 0, 110, 0.9);
    }
}


/* Désactivation globale */

html.polok-viewer-effects-disabled
[class*="polok-viewer-effect-username-"] {
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}