/*
 * Polok Live Suite
 * Viewer Effects V3
 *
 * Socle CSS uniquement.
 * Les styles visuels seront ajoutés et testés
 * effet par effet à l’étape suivante.
 */

[class*="polok-v3-username-"],
[class*="polok-v3-message-"] {
    position: relative;
    display: inline-block;
    transform-origin: center;
}

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

/* =========================================================
   EFFETS COMMUNS AUX PSEUDOS ET AUX MESSAGES
   ========================================================= */

.polok-v3-username-glow-green,
.polok-v3-message-glow-green {
    color: #ffffff;
    text-shadow:
        0 0 3px #53fc18,
        0 0 7px #53fc18,
        0 0 14px #53fc18;
    animation: polok-v3-glow-green 1.5s ease-in-out infinite alternate;
}

.polok-v3-username-glow-purple,
.polok-v3-message-glow-purple {
    color: #ffffff;
    text-shadow:
        0 0 3px #b85cff,
        0 0 7px #a020f0,
        0 0 14px #7a00cc;
    animation: polok-v3-glow-purple 1.5s ease-in-out infinite alternate;
}

.polok-v3-username-neon-cyan,
.polok-v3-message-neon-cyan {
    color: #dfffff;
    text-shadow:
        0 0 2px #ffffff,
        0 0 6px #00ffff,
        0 0 12px #00d5ff,
        0 0 20px #00a6ff;
    animation: polok-v3-neon-cyan 1.25s ease-in-out infinite alternate;
}

.polok-v3-username-rainbow,
.polok-v3-message-rainbow {
    color: transparent !important;
    background-image: linear-gradient(
        90deg,
        #ff3333,
        #ff9f1a,
        #fff033,
        #53fc18,
        #20d9ff,
        #5d5dff,
        #d84dff,
        #ff3333
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: polok-v3-rainbow 2.5s linear infinite;
}

.polok-v3-username-fire,
.polok-v3-message-fire {
    color: #fff3b0;
    text-shadow:
        0 -1px 2px #ffffff,
        0 -3px 5px #ffd000,
        0 -6px 9px #ff7a00,
        0 -10px 16px #ff2200;
    animation: polok-v3-fire 0.55s ease-in-out infinite alternate;
}

.polok-v3-username-gold,
.polok-v3-message-gold {
    color: transparent !important;
    background-image: linear-gradient(
        110deg,
        #7a4e00 0%,
        #d89a00 18%,
        #fff4a3 38%,
        #ffffff 48%,
        #ffd52e 57%,
        #a96700 78%,
        #fff4a3 100%
    );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 4px rgba(255, 197, 38, 0.75));
    animation: polok-v3-gold 2.2s linear infinite;
}

.polok-v3-username-holographic,
.polok-v3-message-holographic {
    color: transparent !important;
    background-image: linear-gradient(
        110deg,
        #00f5ff,
        #7b61ff,
        #ff70d7,
        #ffffff,
        #70ffcf,
        #00f5ff
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 4px rgba(120, 220, 255, 0.65));
    animation: polok-v3-holographic 2s linear infinite;
}

.polok-v3-username-glitch,
.polok-v3-message-glitch {
    color: #ffffff;
    text-shadow:
        2px 0 #ff205e,
        -2px 0 #00f6ff;
    animation: polok-v3-glitch 0.65s steps(2, end) infinite;
}

.polok-v3-username-electric,
.polok-v3-message-electric {
    color: #f3fbff;
    text-shadow:
        0 0 3px #ffffff,
        0 0 7px #33aaff,
        0 0 13px #005dff;
    animation: polok-v3-electric 0.75s steps(2, end) infinite;
}

.polok-v3-username-dark-shadow,
.polok-v3-message-dark-shadow {
    color: #d9d9e3;
    text-shadow:
        2px 2px 2px #000000,
        4px 4px 5px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(115, 70, 180, 0.8);
    animation: polok-v3-dark-shadow 1.8s ease-in-out infinite alternate;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes polok-v3-glow-green {
    from {
        filter: brightness(0.9);
        text-shadow:
            0 0 2px #53fc18,
            0 0 5px #53fc18,
            0 0 9px #53fc18;
    }

    to {
        filter: brightness(1.2);
        text-shadow:
            0 0 4px #ffffff,
            0 0 9px #53fc18,
            0 0 18px #53fc18;
    }
}

@keyframes polok-v3-glow-purple {
    from {
        filter: brightness(0.9);
    }

    to {
        filter: brightness(1.25);
        text-shadow:
            0 0 4px #ffffff,
            0 0 10px #b85cff,
            0 0 19px #7a00cc;
    }
}

@keyframes polok-v3-neon-cyan {
    from {
        filter: brightness(0.95);
    }

    to {
        filter: brightness(1.3);
    }
}

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

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

@keyframes polok-v3-fire {
    0% {
        transform: translateY(0);
        filter: brightness(0.95);
    }

    100% {
        transform: translateY(-1px);
        filter: brightness(1.25);
    }
}

@keyframes polok-v3-gold {
    from {
        background-position: 250% 50%;
    }

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

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

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

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

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

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

    97% {
        transform: translate(-1px, 0);
    }
}

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

    86% {
        filter: brightness(1.6);
        transform: translateX(-1px);
    }

    90% {
        filter: brightness(0.85);
    }

    94% {
        filter: brightness(1.8);
        transform: translateX(1px);
    }
}

@keyframes polok-v3-dark-shadow {
    from {
        filter: brightness(0.8);
    }

    to {
        filter: brightness(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    [class*="polok-v3-username-"],
    [class*="polok-v3-message-"] {
        animation: none !important;
    }
}

/* =========================================================
   COMPATIBILITÉ MOBLIN / WKWEBVIEW
   Rainbow et Fire sans background-clip, filter ni transform
   ========================================================= */

.polok-v3-username-rainbow,
.polok-v3-message-rainbow {
    color: #ff3b30 !important;
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    animation:
        polok-v3-rainbow-moblin
        2.4s
        linear
        infinite !important;
}

.polok-v3-username-fire,
.polok-v3-message-fire {
    color: #fff2a8 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    transform: none !important;
    animation:
        polok-v3-fire-moblin
        0.7s
        steps(2, end)
        infinite !important;
}

@keyframes polok-v3-rainbow-moblin {
    0% {
        color: #ff3b30;
        text-shadow:
            0 0 3px #ff3b30,
            0 0 8px #ff3b30;
    }

    16% {
        color: #ff9500;
        text-shadow:
            0 0 3px #ff9500,
            0 0 8px #ff9500;
    }

    32% {
        color: #ffe600;
        text-shadow:
            0 0 3px #ffe600,
            0 0 8px #ffe600;
    }

    48% {
        color: #53fc18;
        text-shadow:
            0 0 3px #53fc18,
            0 0 8px #53fc18;
    }

    64% {
        color: #00d9ff;
        text-shadow:
            0 0 3px #00d9ff,
            0 0 8px #00d9ff;
    }

    80% {
        color: #8c52ff;
        text-shadow:
            0 0 3px #8c52ff,
            0 0 8px #8c52ff;
    }

    100% {
        color: #ff3bd4;
        text-shadow:
            0 0 3px #ff3bd4,
            0 0 8px #ff3bd4;
    }
}

@keyframes polok-v3-fire-moblin {
    0%,
    100% {
        color: #fff6b0;
        text-shadow:
            0 -1px 2px #ffffff,
            0 -3px 4px #ffe600,
            0 -6px 7px #ff9500,
            0 -9px 12px #ff3b00;
    }

    35% {
        color: #ffd45c;
        text-shadow:
            1px -1px 2px #ffffff,
            -1px -4px 5px #ffd000,
            1px -7px 9px #ff6a00,
            0 -11px 15px #e82000;
    }

    70% {
        color: #fff0a0;
        text-shadow:
            -1px -2px 3px #ffffff,
            1px -5px 6px #ffcc00,
            -1px -8px 10px #ff5200,
            1px -12px 17px #d90000;
    }
}