/* ==========================================
   ОБЩИЙ КОМПОНЕНТ ЖИДКОГО НИКНЕЙМА
   ========================================== */

.sg-nick {
    --sg-dark: #07304c;
    --sg-mid: #087db5;
    --sg-light: #58d7ed;
    --sg-text: #f3fcff;
    --sg-spark: #b8f4ff;

    --sg-rise: -48px;
    --sg-phase: 0s;

    position: relative;
    display: inline-block;
    isolation: isolate;
    vertical-align: middle;

    box-sizing: border-box;
    max-width: 100%;
    padding: .24em .72em;

    color: var(--sg-text) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;

    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
}

/* Фон и частицы не перехватывают клики */
.sg-nick__liquid,
.sg-nick__particles,
.sg-nick__drop,
.sg-nick__pixel {
    pointer-events: none;
    user-select: none;
}

/* Только этот слой будет деформирован SVG-фильтром */
.sg-nick__liquid {
    position: absolute;
    inset: -2px -3px;
    z-index: 0;
    overflow: visible;
}

/* Основная поверхность жидкости */
.sg-nick__liquid::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 20% 20%,
            var(--sg-light),
            transparent 48%
        ),
        linear-gradient(
            115deg,
            var(--sg-dark) 0%,
            var(--sg-mid) 28%,
            var(--sg-light) 50%,
            var(--sg-mid) 72%,
            var(--sg-dark) 100%
        );

    background-size: 160% 180%, 250% 250%;

    border-radius: 12px 17px 10px 15px;

    animation:
        sgLiquidSurface 7s ease-in-out
        var(--sg-phase) infinite;
}

/* Блик внутри жидкости */
.sg-nick__liquid::after {
    content: "";
    position: absolute;
    inset: 1px;

    background: radial-gradient(
        ellipse at 30% 15%,
        rgba(255, 255, 255, .3),
        transparent 58%
    );

    border-radius: 14px 10px 16px 9px;

    animation:
        sgLiquidHighlight 5.5s ease-in-out
        var(--sg-phase) infinite;
}

/* Капли по бокам.
   Они входят в тот же деформируемый слой. */
.sg-nick__drop {
    --sg-direction: -1;

    position: absolute;
    left: -3px;
    top: 24%;

    display: block;
    width: 9px;
    height: 11px;

    background: var(--sg-mid);
    border-radius: 45% 55% 65% 35%;

    animation: sgLiquidDrop 4.6s ease-in-out infinite;
}

.sg-nick__drop:nth-child(2n) {
    --sg-direction: 1;
    left: auto;
    right: -3px;
}

.sg-nick__drop:nth-child(1) {
    animation-delay: -1.2s;
}

.sg-nick__drop:nth-child(2) {
    top: 58%;
    animation-delay: -3.1s;
}

.sg-nick__drop:nth-child(3) {
    top: 72%;
    width: 6px;
    height: 7px;
    animation-delay: -2.3s;
}

.sg-nick__drop:nth-child(4) {
    top: 12%;
    width: 7px;
    height: 8px;
    animation-delay: -.6s;
}

/* Текст НЕ проходит через фильтр */
.sg-nick__label {
    position: relative;
    z-index: 2;

    display: inline-block;
    max-width: 100%;

    color: inherit;
    overflow-wrap: anywhere;
}

/* ==========================================
   ПИКСЕЛЬНЫЕ ИСКРЫ
   ========================================== */

.sg-nick__particles {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    overflow: visible;
    color: var(--sg-spark);
}

.sg-nick__pixel {
    --sg-x: 50%;
    --sg-drift: 0px;
    --sg-time: 4s;
    --sg-delay: 0s;
    --sg-size: 3px;

    position: absolute;
    left: var(--sg-x);
    bottom: calc(100% - 2px);

    display: block;
    width: var(--sg-size);
    height: var(--sg-size);

    background: currentColor;
    border-radius: 0;
    box-shadow: 0 0 5px currentColor;

    opacity: 0;

    animation:
        sgPixelRise
        var(--sg-time)
        linear
        var(--sg-delay)
        infinite;
}

.sg-nick__pixel:nth-child(1) {
    --sg-x: 5%;
    --sg-drift: -12px;
    --sg-time: 4.8s;
    --sg-delay: -1.6s;
}

.sg-nick__pixel:nth-child(2) {
    --sg-x: 22%;
    --sg-drift: 8px;
    --sg-time: 3.7s;
    --sg-delay: -3.1s;
    --sg-size: 2px;
}

.sg-nick__pixel:nth-child(3) {
    --sg-x: 40%;
    --sg-drift: -7px;
    --sg-time: 5.2s;
    --sg-delay: -2.4s;
}

.sg-nick__pixel:nth-child(4) {
    --sg-x: 60%;
    --sg-drift: 10px;
    --sg-time: 4.4s;
    --sg-delay: -.7s;
    --sg-size: 2px;
}

.sg-nick__pixel:nth-child(5) {
    --sg-x: 78%;
    --sg-drift: -8px;
    --sg-time: 3.9s;
    --sg-delay: -2.8s;
}

.sg-nick__pixel:nth-child(6) {
    --sg-x: 95%;
    --sg-drift: 13px;
    --sg-time: 5s;
    --sg-delay: -4.1s;
}

/* ==========================================
   ПАЛИТРА
   ========================================== */

.sg-nick[data-nick-card="blue"] {
    --sg-dark: #052840;
    --sg-mid: #087bb0;
    --sg-light: #54d5ec;
    --sg-text: #f3fcff;
    --sg-spark: #b8f4ff;
}

.sg-nick[data-nick-card="red"] {
    --sg-dark: #430912;
    --sg-mid: #ac241d;
    --sg-light: #eb703c;
    --sg-text: #fff7ef;
    --sg-spark: #ffd39a;
}

.sg-nick[data-nick-card="purple"] {
    --sg-dark: #280c45;
    --sg-mid: #742da5;
    --sg-light: #be73e3;
    --sg-text: #fff5ff;
    --sg-spark: #efc5ff;
}

.sg-nick[data-nick-card="green"] {
    --sg-dark: #07351e;
    --sg-mid: #197548;
    --sg-light: #42b96d;
    --sg-text: #f1fff5;
    --sg-spark: #bdffd4;
}

.sg-nick[data-nick-card="black"] {
    --sg-dark: #030509;
    --sg-mid: #202936;
    --sg-light: #596981;
    --sg-text: #f4f7ff;
    --sg-spark: #d8e5ff;
}

.sg-nick[data-nick-card="white"] {
    --sg-dark: #d5ddf3;
    --sg-mid: #f0dff5;
    --sg-light: #ffffff;
    --sg-text: #232b40;
    --sg-spark: #c0d9ff;
}

/* ==========================================
   РАЗМЕРЫ ДЛЯ РАЗНЫХ МЕСТ САЙТА
   ========================================== */

/* Dashboard */
.profile-nick.sg-nick {
    --sg-rise: -55px;
}

/* Чат и топ: меньше вылет частиц */
.sg-nick.sg-nick--compact {
    --sg-rise: -26px;

    padding: .12em .65em;
    font-size: inherit;
}

/* Миниатюра в выборе цвета */
.sg-nick.sg-nick--preview {
    --sg-rise: -35px;

    width: 48px;
    height: 48px;
    padding: 0;
}

/* Не убираем индикатор клавиатурного фокуса у ссылок */
a.sg-nick:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 6px;
}

/* ==========================================
   АНИМАЦИИ
   ========================================== */

@keyframes sgLiquidSurface {
    0%, 100% {
        background-position: 0% 30%, 0% 50%;
        border-radius: 12px 17px 10px 15px;
        transform: scale(1, 1);
    }

    33% {
        background-position: 80% 65%, 65% 40%;
        border-radius: 18px 9px 17px 11px;
        transform: scale(1.025, .97);
    }

    66% {
        background-position: 25% 90%, 100% 60%;
        border-radius: 9px 16px 12px 19px;
        transform: scale(.99, 1.035);
    }
}

@keyframes sgLiquidHighlight {
    0%, 100% {
        opacity: .45;
        transform: translateX(-3%) scale(.98, 1);
    }

    50% {
        opacity: .8;
        transform: translateX(3%) scale(1.03, .94);
    }
}

@keyframes sgLiquidDrop {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(.65);
        opacity: .8;
    }

    35% {
        transform: translate3d(
            calc(var(--sg-direction) * 5px),
            2px,
            0
        ) scale(1.1, .8);

        opacity: 1;
    }

    72% {
        transform: translate3d(
            calc(var(--sg-direction) * 12px),
            5px,
            0
        ) scale(.4);

        opacity: 0;
    }
}

@keyframes sgPixelRise {
    0% {
        transform: translate3d(0, 2px, 0);
        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    65% {
        opacity: .65;
    }

    100% {
        transform: translate3d(
            var(--sg-drift),
            var(--sg-rise),
            0
        );

        opacity: 0;
    }
}