/*
=====================================================
AETHER GLITCH
=====================================================

Shared visual implementation for event-driven Aether
fragmentation, interference, disintegration, and
reintegration.

Features own their timing and state choreography.
AetherGlitch owns the generated layers and effect
lifecycle used by these rules.
=====================================================
*/


/*
=====================================================
COLLECTION GLITCH KEYFRAMES
=====================================================
*/

@keyframes aether-collection-interference-jitter {

    0% {

        opacity:
            0;

        transform:
            translate3d(-10px, 0, 0)
            scaleX(1.02);

        clip-path:
            inset(0 0 88% 0);

        background-position:
            0 0,
            0 0,
            0 0,
            0 0;

    }

    8% {

        opacity:
            0.96;

        clip-path:
            inset(0 0 0 0);

    }

    18% {

        transform:
            translate3d(8px, -1px, 0)
            scaleX(0.985);

        clip-path:
            inset(5% 0 11% 0);

        background-position:
            31px 7px,
            -18px 4px,
            42px 0,
            0 0;

    }

    31% {

        opacity:
            0.72;

        transform:
            translate3d(-5px, 2px, 0)
            scaleX(1.015);

        clip-path:
            inset(0 4% 0 0);

        background-position:
            63px -11px,
            16px 9px,
            -27px 0,
            0 0;

    }

    46% {

        opacity:
            0.88;

        transform:
            translate3d(2px, 0, 0)
            scaleX(1.03);

        clip-path:
            inset(19% 0 4% 0);

        background-position:
            92px 12px,
            -31px -5px,
            13px 0,
            0 0;

    }

    64% {

        opacity:
            0.52;

        transform:
            translate3d(-2px, -1px, 0)
            scaleX(0.995);

        clip-path:
            inset(0 0 0 0);

        background-position:
            127px 4px,
            43px 11px,
            -57px 0,
            0 0;

    }

    82% {

        opacity:
            0.24;

        transform:
            translate3d(4px, 0, 0);

        clip-path:
            inset(2% 0 42% 0);

    }

    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0);

        clip-path:
            inset(0 0 100% 0);

    }

}


@keyframes aether-collection-interference-tear {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0);

        background-position:
            0 0,
            0 0;

    }

    10%,
    36% {

        opacity:
            0.9;

    }

    18% {

        transform:
            translate3d(
                var(
                    --aether-glitch-tear-x-1,
                    12px
                ),
                var(
                    --aether-glitch-tear-y,
                    0px
                ),
                0
            );

        clip-path:
            polygon(
                0 0,
                37% 0,
                45% 18%,
                100% 12%,
                100% 39%,
                72% 42%,
                83% 68%,
                41% 61%,
                31% 100%,
                0 100%,
                13% 66%,
                0 46%
            );

    }

    34% {

        transform:
            translate3d(
                var(
                    --aether-glitch-tear-x-2,
                    -9px
                ),
                calc(
                    var(
                        --aether-glitch-tear-y-inverse,
                        0px
                    )
                ),
                0
            );

        background-position:
            -70px 0,
            19px 4px;

        clip-path:
            polygon(
                0 11%,
                22% 0,
                55% 7%,
                100% 0,
                100% 24%,
                61% 33%,
                100% 58%,
                77% 100%,
                36% 91%,
                0 100%,
                0 73%,
                28% 52%
            );

    }

    58% {

        opacity:
            0.38;

        transform:
            translate3d(
                calc(
                    var(
                        --aether-glitch-tear-x-1-tail,
                        5px
                    )
                ),
                0,
                0
            );

    }

    78% {

        opacity:
            0.14;

    }

}


@keyframes aether-collection-interference-shard {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            rotate(0deg);

        clip-path:
            polygon(
                0 0,
                0 0,
                0 100%,
                0 100%
            );

    }

    9% {

        opacity:
            0.82;

        transform:
            translate3d(
                var(
                    --aether-glitch-slice-x-a,
                    -80px
                ),
                var(
                    --aether-glitch-slice-y-a,
                    18px
                ),
                0
            )
            rotate(
                var(
                    --aether-glitch-rotate-a,
                    -1.6deg
                )
            )
            scaleX(1.08);

        clip-path:
            polygon(
                0 4%,
                92% 0,
                100% 19%,
                8% 24%,
                0 39%,
                100% 31%,
                100% 49%,
                0 58%,
                14% 73%,
                100% 66%,
                100% 82%,
                4% 94%
            );

    }

    26% {

        opacity:
            0.96;

        transform:
            translate3d(
                var(
                    --aether-glitch-slice-x-b,
                    76px
                ),
                var(
                    --aether-glitch-slice-y-b,
                    -28px
                ),
                0
            )
            rotate(
                var(
                    --aether-glitch-rotate-b,
                    2.1deg
                )
            )
            skewX(-7deg)
            scaleY(1.04);

        clip-path:
            polygon(
                7% 0,
                100% 0,
                93% 15%,
                0 8%,
                0 28%,
                88% 22%,
                100% 41%,
                11% 48%,
                0 68%,
                100% 56%,
                91% 77%,
                0 89%
            );

    }

    43% {

        opacity:
            0.62;

        transform:
            translate3d(
                calc(
                    var(
                        --aether-glitch-slice-x-a-mid,
                        -80px
                    )
                ),
                calc(
                    var(
                        --aether-glitch-slice-y-b-mid,
                        -28px
                    )
                ),
                0
            )
            rotate(-0.4deg)
            skewY(5deg);

        clip-path:
            polygon(
                0 0,
                100% 9%,
                100% 22%,
                0 14%,
                0 46%,
                100% 35%,
                100% 52%,
                0 62%,
                0 100%,
                86% 90%,
                100% 100%,
                0 100%
            );

    }

    67% {

        opacity:
            0.34;

        transform:
            translate3d(
                calc(
                    var(
                        --aether-glitch-slice-x-b-end,
                        76px
                    )
                ),
                calc(
                    var(
                        --aether-glitch-slice-y-a-end,
                        18px
                    )
                ),
                0
            )
            scaleX(1.12);

    }

}


@keyframes aether-collection-interference-crosscut {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        clip-path:
            inset(0 100% 0 0);

    }

    12% {

        opacity:
            0.84;

        transform:
            translate3d(
                var(
                    --aether-glitch-x-a,
                    -64px
                ),
                var(
                    --aether-glitch-y-b,
                    24px
                ),
                0
            )
            scaleX(1.14)
            skewY(-5deg);

        clip-path:
            polygon(
                0 0,
                64% 0,
                100% 100%,
                31% 100%
            );

    }

    30% {

        opacity:
            0.74;

        transform:
            translate3d(
                var(
                    --aether-glitch-x-b,
                    58px
                ),
                var(
                    --aether-glitch-y-a,
                    -20px
                ),
                0
            )
            scaleY(1.12)
            skewX(6deg);

        clip-path:
            polygon(
                22% 0,
                100% 0,
                76% 100%,
                0 100%
            );

    }

    52% {

        opacity:
            0.46;

        transform:
            translate3d(
                calc(
                    var(
                        --aether-glitch-x-b,
                        -64px
                    )
                ),
                calc(
                    var(
                        --aether-glitch-y-a,
                        24px
                    )
                ),
                0
            )
            rotate(
                var(
                    --aether-glitch-rotate-b,
                    2deg
                )
            );

        clip-path:
            polygon(
                0 21%,
                100% 0,
                100% 35%,
                0 54%
            );

    }

    74% {

        opacity:
            0.22;

        transform:
            translate3d(
                0,
                calc(
                    var(
                        --aether-glitch-y-b,
                        -20px
                    )
                ),
                0
            )
            scaleX(1.04);

        clip-path:
            polygon(
                0 62%,
                100% 49%,
                100% 76%,
                0 86%
            );

    }

}


@keyframes aether-collection-fragment-disintegrate {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        clip-path:
            var(
                --aether-fragment-clip,
                inset(
                    var(
                        --aether-fragment-top,
                        20%
                    )
                    var(
                        --aether-fragment-right,
                        20%
                    )
                    var(
                        --aether-fragment-bottom,
                        20%
                    )
                    var(
                        --aether-fragment-left,
                        20%
                    )
                )
            );

    }

    9% {

        opacity:
            var(
                --aether-fragment-opacity,
                0.8
            );

        transform:
            translate3d(
                calc(
                    var(
                        --aether-fragment-x-start,
                        80px
                    )
                ),
                calc(
                    var(
                        --aether-fragment-y-start,
                        36px
                    )
                ),
                0
            )
            scaleX(1.18);

    }

    24% {

        opacity:
            var(
                --aether-fragment-opacity,
                0.8
            );

        transform:
            translate3d(
                var(
                    --aether-fragment-x,
                    80px
                ),
                var(
                    --aether-fragment-y,
                    36px
                ),
                0
            )
            scale(
                var(
                    --aether-fragment-scale,
                    1.08
                )
            );

        filter:
            saturate(2.4)
            contrast(1.85)
            hue-rotate(
                var(
                    --aether-fragment-hue,
                    60deg
                )
            );

    }

    43% {

        opacity:
            calc(
                var(
                    --aether-fragment-opacity-mid,
                    0.8
                )
            );

        transform:
            translate3d(
                calc(
                    var(
                        --aether-fragment-x-mid,
                        80px
                    )
                ),
                calc(
                    var(
                        --aether-fragment-y-mid,
                        36px
                    )
                ),
                0
            )
            scaleX(1.26);

    }

    67% {

        opacity:
            calc(
                var(
                    --aether-fragment-opacity-end,
                    0.8
                )
            );

        transform:
            translate3d(
                calc(
                    var(
                        --aether-fragment-x-end,
                        80px
                    )
                ),
                calc(
                    var(
                        --aether-fragment-y-end,
                        36px
                    )
                ),
                0
            )
            scaleY(1.32)
            scaleX(0.92);

    }

}


@keyframes aether-collection-memory-flicker {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            saturate(1)
            contrast(1);

    }

    8% {

        opacity:
            0.38;

        transform:
            translate3d(
                var(
                    --aether-glitch-x-b,
                    40px
                ),
                var(
                    --aether-glitch-y-a,
                    -18px
                ),
                0
            )
            scaleX(1.07);

    }

    19% {

        opacity:
            0.7;

        transform:
            translate3d(
                var(
                    --aether-glitch-x-a,
                    -48px
                ),
                var(
                    --aether-glitch-y-b,
                    22px
                ),
                0
            )
            scale(
                var(
                    --aether-glitch-scale,
                    1.04
                )
            );

        filter:
            saturate(2.5)
            contrast(1.55)
            hue-rotate(
                var(
                    --aether-glitch-hue,
                    40deg
                )
            );

    }

    41% {

        opacity:
            0.26;

        transform:
            translate3d(
                var(
                    --aether-glitch-tear-x-2,
                    70px
                ),
                var(
                    --aether-glitch-tear-y-inverse,
                    -20px
                ),
                0
            )
            scaleY(1.08);

    }

    66% {

        opacity:
            0.12;

        transform:
            translate3d(
                var(
                    --aether-glitch-tear-x-1-tail,
                    24px
                ),
                var(
                    --aether-glitch-tear-y,
                    20px
                ),
                0
            );

    }

}


/*
=====================================================
COLLECTION GLITCH PRESENTATION
=====================================================
*/

.aether-menu-collection-detail-glitch-layer {

    position:
        absolute;

    inset:
        -18px;

    display:
        grid;

    gap:
        14px;

    opacity:
        0;

    transform:
        translate3d(0, 0, 0);

    transform-origin:
        var(
            --aether-fragment-origin,
            center
        );

    filter:
        saturate(1.5)
        contrast(1.22);

    mix-blend-mode:
        screen;

    overflow:
        hidden;

    will-change:
        transform,
        opacity,
        filter,
        clip-path;

}


.aether-menu-collection-detail-glitch-layer.is-primary {

    position:
        relative;

    inset:
        auto;

    mix-blend-mode:
        normal;

}


.aether-portrait-surface-glitch
.aether-menu-collection-detail-glitch-layer,
.aether-info-surface-glitch
.aether-menu-collection-detail-glitch-layer,
.aether-portrait-surface-glitch
.aether-menu-collection-detail-glitch-layer.is-primary,
.aether-info-surface-glitch
.aether-menu-collection-detail-glitch-layer.is-primary {

    position:
        absolute;

    inset:
        0;

    overflow:
        visible;

}


.aether-portrait-surface-glitch
.aether-menu-collection-detail-glitch-layer.is-primary,
.aether-info-surface-glitch
.aether-menu-collection-detail-glitch-layer.is-primary {

    mix-blend-mode:
        normal;

}


.aether-menu-collection-detail-glitch-layer.is-split-a {

    color:
        rgba(255, 62, 78, 0.94);

    filter:
        saturate(2.4)
        contrast(1.55)
        hue-rotate(
            var(
                --aether-glitch-hue,
                24deg
            )
        );

}


.aether-menu-collection-detail-glitch-layer.is-split-b {

    color:
        rgba(64, 255, 214, 0.9);

    filter:
        saturate(1.9)
        contrast(1.7)
        hue-rotate(
            calc(
                var(
                    --aether-glitch-hue-inverse,
                    24deg
                )
            )
        );

    mix-blend-mode:
        lighten;

}


.aether-menu-collection-detail-glitch-layer.is-slice-a {

    color:
        rgba(255, 244, 72, 0.86);

    filter:
        saturate(2.8)
        contrast(1.85)
        hue-rotate(112deg);

    mix-blend-mode:
        screen;

}


.aether-menu-collection-detail-glitch-layer.is-slice-b {

    color:
        rgba(255, 255, 255, 0.72);

    filter:
        saturate(0.62)
        contrast(2.2)
        brightness(1.28);

    mix-blend-mode:
        difference;

}


.aether-menu-collection-detail-glitch-layer.is-fragment {

    color:
        rgba(255, 255, 255, 0.92);

    filter:
        saturate(2.05)
        contrast(1.72)
        hue-rotate(
            var(
                --aether-fragment-hue,
                60deg
            )
        );

    mix-blend-mode:
        var(
            --aether-fragment-blend,
            screen
        );

}


.aether-menu-collection-detail-glitch-layer.is-fragment.is-channel-red {

    color:
        rgba(255, 42, 82, 0.96);

    filter:
        saturate(3)
        contrast(1.85)
        hue-rotate(-24deg);

    mix-blend-mode:
        screen;

}


.aether-menu-collection-detail-glitch-layer.is-fragment.is-channel-cyan {

    color:
        rgba(52, 255, 228, 0.94);

    filter:
        saturate(2.8)
        contrast(1.75)
        hue-rotate(112deg);

    mix-blend-mode:
        lighten;

}


.aether-menu-collection-detail-glitch-layer.is-fragment.is-channel-yellow {

    color:
        rgba(255, 238, 64, 0.9);

    filter:
        saturate(3.2)
        contrast(1.65)
        hue-rotate(42deg);

    mix-blend-mode:
        color-dodge;

}


.aether-menu-collection-detail-glitch-layer.is-fragment.is-channel-white {

    color:
        rgba(255, 255, 255, 0.76);

    filter:
        saturate(0.35)
        contrast(2.4)
        brightness(1.22);

    mix-blend-mode:
        difference;

}


.aether-menu-collection-detail-glitch::before,
.aether-menu-collection-detail-glitch::after {

    content:
        "";

    position:
        absolute;

    inset:
        -28px;

    z-index:
        30;

    opacity:
        0;

    pointer-events:
        none;

    display:
        none;

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch-layer.is-primary {

    animation:
        aether-collection-memory-flicker
        var(
            --aether-glitch-duration,
            520ms
        )
        steps(3, end)
        both;

    opacity:
        0.38;

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch-layer.is-split-a {

    animation:
        aether-collection-interference-tear
        var(
            --aether-glitch-duration,
            520ms
        )
        steps(2, end)
        both;

    transform:
        translate3d(
            var(
                --aether-glitch-x-a,
                -14px
            ),
            var(
                --aether-glitch-y-a,
                2px
            ),
            0
        );

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch-layer.is-split-b {

    animation:
        aether-collection-interference-tear
        calc(
            var(
                --aether-glitch-duration,
                520ms
            )
        )
        steps(2, end)
        both;

    transform:
        translate3d(
            var(
                --aether-glitch-x-b,
                12px
            ),
            var(
                --aether-glitch-y-b,
                -2px
            ),
            0
        )
        scaleX(
            var(
                --aether-glitch-scale,
                1.025
            )
        );

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch-layer.is-slice-a {

    animation:
        aether-collection-interference-shard
        calc(
            var(
                --aether-glitch-duration,
                520ms
            )
        )
        steps(4, end)
        both;

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch-layer.is-slice-b {

    animation:
        aether-collection-interference-crosscut
        calc(
            var(
                --aether-glitch-duration,
                520ms
            )
        )
        steps(3, end)
        both;

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch-layer.is-fragment {

    animation:
        aether-collection-fragment-disintegrate
        calc(
            var(
                --aether-glitch-duration,
                520ms
            )
        )
        steps(3, end)
        var(
            --aether-fragment-delay,
            0ms
        )
        both;

}


.aether-menu-collection-detail-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-primary,
.aether-menu-collection-detail-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-fragment,
.aether-portrait-surface-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-primary,
.aether-portrait-surface-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-fragment {

    animation-direction:
        reverse;

}


.aether-menu-collection-detail-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-primary,
.aether-portrait-surface-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-primary {

    opacity:
        0.52;

}


.aether-menu-collection-detail-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-fragment,
.aether-portrait-surface-glitch.is-reintegrating
.aether-menu-collection-detail-glitch-layer.is-fragment {

    animation-timing-function:
        steps(4, end);

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch::before {

    background:

        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.22) 0,
            rgba(255, 255, 255, 0.22) 1px,
            transparent 1px,
            transparent 3px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.24
            )
            0,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.24
            )
            1px,
            transparent 1px,
            transparent 5px
        ),

        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 16px,
            rgba(255, 255, 255, 0.26) 16px,
            rgba(255, 255, 255, 0.26) 17px,
            transparent 18px,
            transparent 30px
        ),

        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 19px,
            rgba(255, 0, 76, 0.24) 19px,
            rgba(0, 255, 230, 0.20) 20px,
            transparent 22px,
            transparent 42px
        );

    mix-blend-mode:
        screen;

    animation:
        aether-collection-interference-jitter
        var(
            --aether-glitch-duration,
            520ms
        )
        steps(4, end)
        both;

}


.is-aether-surface-interference
.aether-menu-collection-detail-glitch::after {

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 12px,
            rgba(255, 255, 255, 0.42) 12px,
            rgba(255, 255, 255, 0.42) 13px,
            rgba(0, 0, 0, 0.50) 14px,
            transparent 18px
        ),

        linear-gradient(
            90deg,
            rgba(255, 0, 64, 0.34),
            transparent 17%,
            rgba(0, 255, 224, 0.32) 50%,
            transparent 70%,
            rgba(255, 245, 0, 0.24)
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 17px,
            rgba(255, 255, 255, 0.30) 17px,
            rgba(255, 255, 255, 0.30) 19px,
            transparent 19px,
            transparent 37px
        ),

        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 23px,
            rgba(255, 255, 255, 0.22) 23px,
            transparent 26px,
            transparent 48px
        );

    mix-blend-mode:
        color-dodge;

    animation:
        aether-collection-interference-tear
        var(
            --aether-glitch-duration,
            520ms
        )
        steps(2, end)
        both;

}


.aether-menu-collection-detail-glitch.is-variant-2
.aether-menu-collection-detail-glitch-layer.is-primary {

    mix-blend-mode:
        screen;

}


.aether-menu-collection-detail-glitch.is-variant-2
.aether-menu-collection-detail-glitch-layer.is-split-a,
.aether-menu-collection-detail-glitch.is-variant-4
.aether-menu-collection-detail-glitch-layer.is-split-b {

    animation-direction:
        reverse;

}


.aether-menu-collection-detail-glitch.is-variant-3
.aether-menu-collection-detail-glitch-layer.is-primary {

    filter:
        saturate(0.72)
        contrast(1.9)
        hue-rotate(72deg);

    mix-blend-mode:
        color-dodge;

}


.aether-menu-collection-detail-glitch.is-variant-4
.aether-menu-collection-detail-glitch-layer.is-split-a {

    mix-blend-mode:
        difference;

}


.aether-menu-collection-detail-glitch.is-variant-5
.aether-menu-collection-detail-glitch-layer.is-slice-a {

    animation-direction:
        reverse;

    mix-blend-mode:
        color-dodge;

}


.aether-menu-collection-detail-glitch.is-variant-5
.aether-menu-collection-detail-glitch-layer.is-slice-b {

    filter:
        saturate(2.4)
        contrast(1.4)
        hue-rotate(-98deg);

}


.aether-menu-collection-detail-glitch.is-variant-6
.aether-menu-collection-detail-glitch-layer.is-split-a,
.aether-menu-collection-detail-glitch.is-variant-6
.aether-menu-collection-detail-glitch-layer.is-slice-b {

    mix-blend-mode:
        exclusion;

}


.aether-menu-collection-detail-glitch.is-variant-6::after {

    animation-direction:
        reverse;

}




/*
=====================================================
ENTITY PORTRAIT GLITCH PRESENTATION
=====================================================
*/

.aether-entity-portrait-glitch-layer {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    opacity:
        0;

    transform:
        translate3d(0, 0, 0);

    transform-origin:
        var(
            --aether-fragment-origin,
            center
        );

    filter:
        saturate(1.6)
        contrast(1.26);

    mix-blend-mode:
        screen;

    overflow:
        hidden;

    will-change:
        transform,
        opacity,
        filter,
        clip-path;

}


.aether-entity-portrait-glitch-layer.is-primary {

    mix-blend-mode:
        screen;

}


.aether-entity-portrait-glitch-layer.is-fragment {

    filter:
        saturate(2.1)
        contrast(1.7)
        hue-rotate(
            var(
                --aether-fragment-hue,
                60deg
            )
        );

    mix-blend-mode:
        var(
            --aether-fragment-blend,
            screen
        );

}


.aether-entity-portrait-glitch-layer.is-fragment.is-channel-red {

    color:
        rgba(255, 42, 82, 0.96);

    mix-blend-mode:
        screen;

}


.aether-entity-portrait-glitch-layer.is-fragment.is-channel-cyan {

    color:
        rgba(52, 255, 228, 0.94);

    mix-blend-mode:
        lighten;

}


.aether-entity-portrait-glitch-layer.is-fragment.is-channel-yellow {

    color:
        rgba(255, 238, 64, 0.9);

    mix-blend-mode:
        color-dodge;

}


.aether-entity-portrait-glitch-layer.is-fragment.is-channel-white {

    color:
        rgba(255, 255, 255, 0.76);

    mix-blend-mode:
        difference;

}


.aether-portrait-surface.is-reintegrating
.aether-portrait-surface-visual {

    animation:
        aether-entity-portrait-reintegrate
        var(
            --aether-glitch-duration,
            360ms
        )
        steps(4, end)
        both;

}


.aether-portrait-surface.is-disintegrating
.aether-portrait-surface-visual {

    animation:
        aether-entity-portrait-disintegrate
        var(
            --aether-glitch-duration,
            240ms
        )
        steps(3, end)
        both;

}


.aether-portrait-surface.is-reintegrating
.aether-entity-portrait-glitch-layer.is-primary,
.aether-portrait-surface.is-disintegrating
.aether-entity-portrait-glitch-layer.is-primary {

    animation:
        aether-entity-portrait-glitch-flicker
        var(
            --aether-glitch-duration,
            360ms
        )
        steps(3, end)
        both;

    opacity:
        0.46;

}


.aether-portrait-surface.is-reintegrating
.aether-entity-portrait-glitch-layer.is-fragment,
.aether-portrait-surface.is-disintegrating
.aether-entity-portrait-glitch-layer.is-fragment {

    animation:
        aether-entity-portrait-fragment
        var(
            --aether-glitch-duration,
            360ms
        )
        steps(3, end)
        var(
            --aether-fragment-delay,
            0ms
        )
        both;

}


.aether-portrait-surface-glitch.is-reintegrating
.aether-entity-portrait-glitch-layer.is-primary,
.aether-portrait-surface-glitch.is-reintegrating
.aether-entity-portrait-glitch-layer.is-fragment {

    animation-direction:
        reverse;

}


@keyframes aether-entity-portrait-reintegrate {

    0% {

        opacity:
            0;

        transform:
            translate3d(0, 18px, 0)
            scale(0.93);

        filter:
            saturate(2.2)
            contrast(1.7)
            blur(7px);

    }

    28% {

        opacity:
            0.38;

        transform:
            translate3d(-12px, -6px, 0)
            scaleX(1.08);

    }

    58% {

        opacity:
            0.88;

        transform:
            translate3d(7px, 3px, 0)
            scaleY(1.04);

        filter:
            saturate(1.45)
            contrast(1.28)
            blur(1px);

    }

    100% {

        opacity:
            1;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            saturate(1)
            contrast(1);

    }

}


@keyframes aether-entity-portrait-glitch-flicker {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            saturate(1)
            contrast(1);

    }

    12% {

        opacity:
            0.42;

        transform:
            translate3d(
                var(
                    --aether-glitch-x-b,
                    40px
                ),
                var(
                    --aether-glitch-y-a,
                    -18px
                ),
                0
            )
            scaleX(1.08);

    }

    34% {

        opacity:
            0.78;

        transform:
            translate3d(
                var(
                    --aether-glitch-x-a,
                    -48px
                ),
                var(
                    --aether-glitch-y-b,
                    22px
                ),
                0
            )
            scale(
                var(
                    --aether-glitch-scale,
                    1.04
                )
            );

        filter:
            saturate(2.5)
            contrast(1.55)
            hue-rotate(
                var(
                    --aether-glitch-hue,
                    40deg
                )
            );

    }

    68% {

        opacity:
            0.18;

        transform:
            translate3d(
                var(
                    --aether-glitch-tear-x-1-tail,
                    24px
                ),
                var(
                    --aether-glitch-tear-y,
                    20px
                ),
                0
            )
            scaleY(1.12);

    }

}


@keyframes aether-entity-portrait-fragment {

    0%,
    100% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        clip-path:
            var(
                --aether-fragment-clip,
                inset(
                    var(
                        --aether-fragment-top,
                        20%
                    )
                    var(
                        --aether-fragment-right,
                        20%
                    )
                    var(
                        --aether-fragment-bottom,
                        20%
                    )
                    var(
                        --aether-fragment-left,
                        20%
                    )
                )
            );

    }

    12% {

        opacity:
            var(
                --aether-fragment-opacity,
                0.8
            );

        transform:
            translate3d(
                var(
                    --aether-fragment-x-start,
                    80px
                ),
                var(
                    --aether-fragment-y-start,
                    36px
                ),
                0
            )
            scaleX(1.2);

    }

    32% {

        opacity:
            var(
                --aether-fragment-opacity,
                0.8
            );

        transform:
            translate3d(
                var(
                    --aether-fragment-x,
                    80px
                ),
                var(
                    --aether-fragment-y,
                    36px
                ),
                0
            )
            scale(
                var(
                    --aether-fragment-scale,
                    1.08
                )
            );

        filter:
            saturate(2.4)
            contrast(1.85)
            hue-rotate(
                var(
                    --aether-fragment-hue,
                    60deg
                )
            );

    }

    58% {

        opacity:
            var(
                --aether-fragment-opacity-mid,
                0.72
            );

        transform:
            translate3d(
                var(
                    --aether-fragment-x-mid,
                    80px
                ),
                var(
                    --aether-fragment-y-mid,
                    36px
                ),
                0
            )
            scaleX(1.3);

    }

    78% {

        opacity:
            var(
                --aether-fragment-opacity-end,
                0.28
            );

        transform:
            translate3d(
                var(
                    --aether-fragment-x-end,
                    80px
                ),
                var(
                    --aether-fragment-y-end,
                    36px
                ),
                0
            )
            scaleY(1.32)
            scaleX(0.92);

    }

}


@keyframes aether-entity-portrait-disintegrate {

    0% {

        opacity:
            1;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            saturate(1)
            contrast(1);

    }

    42% {

        opacity:
            0.72;

        transform:
            translate3d(14px, -6px, 0)
            scaleX(1.07);

        filter:
            saturate(1.8)
            contrast(1.42)
            blur(1px);

    }

    100% {

        opacity:
            0;

        transform:
            translate3d(-8px, 18px, 0)
            scale(0.94);

        filter:
            saturate(2.2)
            contrast(1.7)
            blur(7px);

    }

}