/*
 * DBVYRO PROFILE EFFECTS PACK V17
 *
 * Effects apply to the public profile shell.
 * Does NOT modify YouTube iframe DOM.
 * Does NOT modify profile data.
 */

.profile-shell[class*="dbfx-"]{
    --dbfx-accent:#7657ff;
    --dbfx-secondary:#27dfff;
}


/* ----------------------------------------------------------
   Smooth effect transitions
---------------------------------------------------------- */

.profile-shell[class*="dbfx-"]
:is(
    h1,h2,h3,
    p,span,a,button,
    strong,small,
    .profile-header-card,
    .profile-posts,
    .profile-tabs
){
    transition:
        color .25s ease,
        text-shadow .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        filter .25s ease,
        transform .25s ease;
}


/* ==========================================================
   NEON
========================================================== */

.profile-shell.dbfx-neon
:is(
    h1,h2,h3,
    p,span,a,button,strong
){
    text-shadow:
        0 0 4px var(--dbfx-accent),
        0 0 10px var(--dbfx-accent),
        0 0 18px var(--dbfx-secondary);
}

.profile-shell.dbfx-neon
.profile-header-card,
.profile-shell.dbfx-neon
.profile-posts{
    border-color:
        var(--dbfx-accent) !important;

    box-shadow:
        0 0 12px var(--dbfx-accent),
        0 0 34px rgba(0,0,0,.45);
}


/* ==========================================================
   ELECTRIC
========================================================== */

.profile-shell.dbfx-electric
:is(
    h1,h2,h3,
    strong,
    .profile-handle
){
    text-shadow:
        -1px 0 var(--dbfx-secondary),
        1px 0 var(--dbfx-accent),
        0 0 10px var(--dbfx-secondary);
}

.profile-shell.dbfx-electric
.profile-header-card{
    box-shadow:
        0 0 8px var(--dbfx-secondary),
        0 0 20px var(--dbfx-accent);
}

.profile-shell.dbfx-electric
button{
    box-shadow:
        0 0 10px var(--dbfx-secondary);
}


/* ==========================================================
   FIRE
========================================================== */

.profile-shell.dbfx-fire
:is(
    h1,h2,h3,
    strong,
    .profile-handle
){
    background:
        linear-gradient(
            180deg,
            #fff6a8 0%,
            #ffb000 30%,
            #ff4b16 65%,
            #e30000 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;

    text-shadow:
        0 0 14px rgba(255,88,0,.35);
}

.profile-shell.dbfx-fire
.profile-header-card,
.profile-shell.dbfx-fire
.profile-posts{
    box-shadow:
        0 0 12px rgba(255,84,0,.65),
        0 0 28px rgba(255,0,0,.20);
}


/* ==========================================================
   ICE
========================================================== */

.profile-shell.dbfx-ice
:is(
    h1,h2,h3,
    p,span,a,strong
){
    text-shadow:
        0 0 5px #d8fbff,
        0 0 12px #55dfff,
        0 0 22px #207cff;
}

.profile-shell.dbfx-ice
.profile-header-card,
.profile-shell.dbfx-ice
.profile-posts{
    border-color:#8aeaff !important;

    box-shadow:
        inset 0 0 14px rgba(105,230,255,.14),
        0 0 18px rgba(53,181,255,.35);
}


/* ==========================================================
   GOLD
========================================================== */

.profile-shell.dbfx-gold
:is(
    h1,h2,h3,
    strong,
    .profile-handle
){
    background:
        linear-gradient(
            120deg,
            #fff6bf 0%,
            #f6d365 25%,
            #d7a414 48%,
            #fff2a6 70%,
            #ad7900 100%
        );

    background-size:200% auto;

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent !important;

    animation:
        dbfxGoldMove 3.5s linear infinite;
}

.profile-shell.dbfx-gold
.profile-header-card{
    box-shadow:
        0 0 14px rgba(255,205,65,.46);
}

@keyframes dbfxGoldMove{
    to{
        background-position:200% center;
    }
}


/* ==========================================================
   RAINBOW
========================================================== */

.profile-shell.dbfx-rainbow
:is(
    h1,h2,h3,
    strong,
    .profile-handle
){
    background:
        linear-gradient(
            90deg,
            #ff3b3b,
            #ffbd33,
            #36ef70,
            #32d9ff,
            #775cff,
            #ff39c8,
            #ff3b3b
        );

    background-size:300% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent !important;

    animation:
        dbfxRainbow 4s linear infinite;
}

.profile-shell.dbfx-rainbow
.profile-header-card{
    animation:
        dbfxRainbowCard 5s linear infinite;
}

@keyframes dbfxRainbow{
    to{
        background-position:300% center;
    }
}

@keyframes dbfxRainbowCard{
    0%{
        box-shadow:0 0 16px #ff3b3b;
    }

    25%{
        box-shadow:0 0 16px #36ef70;
    }

    50%{
        box-shadow:0 0 16px #32d9ff;
    }

    75%{
        box-shadow:0 0 16px #b65cff;
    }

    100%{
        box-shadow:0 0 16px #ff3b3b;
    }
}


/* ==========================================================
   CYBER
========================================================== */

.profile-shell.dbfx-cyber
:is(
    h1,h2,h3,strong
){
    letter-spacing:.04em;

    text-shadow:
        2px 0 0 var(--dbfx-accent),
        -2px 0 0 var(--dbfx-secondary);
}

.profile-shell.dbfx-cyber
.profile-header-card,
.profile-shell.dbfx-cyber
.profile-posts{
    border:
        1px solid var(--dbfx-accent) !important;

    box-shadow:
        inset 0 0 16px rgba(0,0,0,.60),
        0 0 12px var(--dbfx-secondary);
}


/* ==========================================================
   HOLOGRAM
========================================================== */

.profile-shell.dbfx-hologram
:is(
    h1,h2,h3,
    p,span,strong
){
    animation:
        dbfxHologramText 4s linear infinite;

    text-shadow:
        0 0 8px var(--dbfx-secondary);
}

.profile-shell.dbfx-hologram
.profile-header-card{
    animation:
        dbfxHologramCard 5s linear infinite;
}

@keyframes dbfxHologramText{
    0%{
        filter:hue-rotate(0deg);
    }

    100%{
        filter:hue-rotate(360deg);
    }
}

@keyframes dbfxHologramCard{
    0%{
        box-shadow:
            0 0 10px var(--dbfx-accent);
    }

    50%{
        box-shadow:
            0 0 26px var(--dbfx-secondary);
    }

    100%{
        box-shadow:
            0 0 10px var(--dbfx-accent);
    }
}


/* ==========================================================
   OUTLINE
========================================================== */

.profile-shell.dbfx-outline
:is(
    h1,h2,h3,
    .profile-handle
){
    color:
        transparent !important;

    -webkit-text-stroke:
        1px var(--dbfx-accent);

    text-shadow:
        0 0 8px var(--dbfx-secondary);
}

.profile-shell.dbfx-outline
button{
    border:
        1px solid var(--dbfx-accent) !important;
}


/* ==========================================================
   DEEP SHADOW
========================================================== */

.profile-shell.dbfx-shadow
:is(
    h1,h2,h3,
    p,span,a,strong,button
){
    text-shadow:
        2px 3px 2px rgba(0,0,0,.95),
        0 5px 12px rgba(0,0,0,.70);
}

.profile-shell.dbfx-shadow
.profile-header-card,
.profile-shell.dbfx-shadow
.profile-posts{
    box-shadow:
        0 18px 42px rgba(0,0,0,.68);
}


/* ==========================================================
   PULSE
========================================================== */

.profile-shell.dbfx-pulse
:is(
    h1,h2,h3,strong
){
    animation:
        dbfxPulseText 1.8s ease-in-out infinite;
}

.profile-shell.dbfx-pulse
.profile-header-card{
    animation:
        dbfxPulseCard 2.2s ease-in-out infinite;
}

@keyframes dbfxPulseText{
    0%,100%{
        text-shadow:
            0 0 4px var(--dbfx-accent);
    }

    50%{
        text-shadow:
            0 0 8px var(--dbfx-accent),
            0 0 18px var(--dbfx-secondary),
            0 0 30px var(--dbfx-accent);
    }
}

@keyframes dbfxPulseCard{
    0%,100%{
        box-shadow:
            0 0 8px var(--dbfx-accent);
    }

    50%{
        box-shadow:
            0 0 24px var(--dbfx-secondary);
    }
}


/* ==========================================================
   AURORA
========================================================== */

.profile-shell.dbfx-aurora
:is(
    h1,h2,h3,
    strong,
    .profile-handle
){
    background:
        linear-gradient(
            90deg,
            var(--dbfx-accent),
            #35ffc8,
            var(--dbfx-secondary),
            #ce5cff,
            var(--dbfx-accent)
        );

    background-size:
        300% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    color:
        transparent !important;

    animation:
        dbfxAuroraText 5s ease infinite;
}

.profile-shell.dbfx-aurora
.profile-header-card,
.profile-shell.dbfx-aurora
.profile-posts{
    box-shadow:
        0 0 20px var(--dbfx-accent),
        inset 0 0 16px rgba(39,223,255,.08);
}

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

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

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


/* ==========================================================
   BUTTON / TAB enhancements shared by premium effects
========================================================== */

.profile-shell
:is(
    .dbfx-neon,
    .dbfx-electric,
    .dbfx-fire,
    .dbfx-ice,
    .dbfx-gold,
    .dbfx-rainbow,
    .dbfx-cyber,
    .dbfx-hologram,
    .dbfx-outline,
    .dbfx-shadow,
    .dbfx-pulse,
    .dbfx-aurora
){
    position:relative;
}


/*
 * Never animate/filter embedded media.
 */
.profile-shell[class*="dbfx-"]
iframe,
.profile-shell[class*="dbfx-"]
video,
.profile-shell[class*="dbfx-"]
img{
    text-shadow:none !important;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    .profile-shell[class*="dbfx-"] *{
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;
    }
}