* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
}

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #fff;
    background-color: #1b1f24;
}

body::before {
    content: '';
    position: fixed;
    inset: -10px;
    background: url(../img/bg.jpg) no-repeat center top;
    background-size: cover;
    filter: blur(20px);
    z-index: -2;
}

#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 800ms ease;
    display: block;
}

#bg-canvas.ready {
    opacity: 1;
}

.wrap {
    position: relative;
    width: min(605px, 100% - 2rem);
    margin: 100px auto 0;
    text-align: center;
}

.wrap h1 {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 90px;
}

.wrap h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 45px;
    margin: 0 0 80px;
}

/* Aurora Glow effect */

:root {
    --aurora-gradient: linear-gradient(
        90deg,
        #00c9ff,
        #92fe9d,
        #fc00ff,
        #00dbde,
        #00c9ff
    );
    --aurora-duration: 8s;
}

@keyframes aurora-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

.wrap h1,
.wrap h2 {
    position: relative;
    display: inline-block;
    background-image: var(--aurora-gradient);
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: aurora-flow var(--aurora-duration) linear infinite;
}

.wrap h1::before,
.wrap h2::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: inherit;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(15px);
    opacity: 0.4;
    animation: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Общая переменная: один и тот же сдвиг градиента для всех иконок ряда. */
@property --aurora-x {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}

@keyframes aurora-row {
    from { --aurora-x: var(--aurora-span); }
    to   { --aurora-x: 0px; }
}

.social {
    --icon-size: 24px;
    --icon-gap: 50px;
    --icon-stride: calc(var(--icon-size) + var(--icon-gap));
    /* row_w = count * --icon-size + (count - 1) * --icon-gap; */
    --aurora-span: 936px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--icon-gap);
    margin: 0 0 70px;
    /* Анимация на родителе - все иконки читают её через inherit. */
    animation: aurora-row var(--aurora-duration) linear infinite;
}

.social a {
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: var(--aurora-gradient);
    background-size: var(--aurora-span) var(--icon-size);
    background-repeat: repeat-x;
    /* Сдвиг = (позиция иконки в ряду) + общий анимированный сдвиг. */
    background-position: calc(var(--aurora-x) - var(--i, 0) * var(--icon-stride)) 0;
    -webkit-mask: url(../img/icons.svg) no-repeat 0 0 / 192px var(--icon-size);
            mask: url(../img/icons.svg) no-repeat 0 0 / 192px var(--icon-size);
    filter: drop-shadow(0 0 6px rgba(0, 201, 255, 0.45));
    overflow: hidden;
    text-indent: -999em;
}

.social a:nth-of-type(1) { --i: 0; }
.social a:nth-of-type(2) { --i: 1; }
.social a:nth-of-type(3) { --i: 2; }
.social a:nth-of-type(4) { --i: 3; }
.social a:nth-of-type(5) { --i: 4; }
.social a:nth-of-type(6) { --i: 5; }
.social a:nth-of-type(7) { --i: 6; }
.social a:nth-of-type(8) { --i: 7; }

.social .streamix { -webkit-mask-position:    0 0; mask-position:    0 0; }
.social .minichat { -webkit-mask-position: -24px 0; mask-position: -24px 0; }
.social .vk       { -webkit-mask-position: -48px 0; mask-position: -48px 0; }
.social .discord  { -webkit-mask-position: -72px 0; mask-position: -72px 0; }
.social .steam    { -webkit-mask-position: -96px 0; mask-position: -96px 0; }
.social .telegram { -webkit-mask-position:-120px 0; mask-position:-120px 0; }
.social .github   { -webkit-mask-position:-144px 0; mask-position:-144px 0; }
.social .help     { -webkit-mask-position:-168px 0; mask-position:-168px 0; }

@media only screen and (max-width: 550px) {
    .wrap {
        margin: 50px auto 0;
    }

    .wrap h1 {
        margin: 0 0 50px;
    }

    .wrap h2 {
        font-size: 18px;
    }

    .social {
        --icon-gap: 24px;
    }
}