/*忘记密码*/
.voltage-button {
    position: relative;
    bottom: 20px;
}

.voltage-button a {
    color: white;
    background: #0D1127;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 5rem;
    border: 5px solid #5978F3;
    font-size: 1.2rem;
    line-height: 1em;
    letter-spacing: 0.075em;
    transition: background 0.3s;
}

.voltage-button a:hover {
    cursor: pointer;
    background: #0F1C53;
}

.voltage-button a:hover + svg, .voltage-button a:hover + svg + .dots {
    opacity: 1;
}

.voltage-button svg {
    display: block;
    position: absolute;
    top: -0.75em;
    left: -0.25em;
    width: calc(100% + 0.5em);
    height: calc(100% + 1.5em);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    transition-delay: 0.1s;
}

.voltage-button svg path {
    stroke-dasharray: 100;
    filter: url("#glow");
}

.voltage-button svg path.line-1 {
    stroke: #f6de8d;
    stroke-dashoffset: 0;
    animation: spark-1 3s linear infinite;
}

.voltage-button svg path.line-2 {
    stroke: #6bfeff;
    stroke-dashoffset: 500;
    animation: spark-2 3s linear infinite;
}

.voltage-button .dots {
    opacity: 0;
    transition: opacity 0.3s;
    transition-delay: 0.4s;
}

.voltage-button .dots .dot {
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 100%;
    position: absolute;
    opacity: 0;
}

.voltage-button .dots .dot-1 {
    top: 0;
    left: 20%;
    animation: fly-up 3s linear infinite;
}

.voltage-button .dots .dot-2 {
    top: 0;
    left: 55%;
    animation: fly-up 3s linear infinite;
    animation-delay: 0.5s;
}

.voltage-button .dots .dot-3 {
    top: 0;
    left: 80%;
    animation: fly-up 3s linear infinite;
    animation-delay: 1s;
}

.voltage-button .dots .dot-4 {
    bottom: 0;
    left: 30%;
    animation: fly-down 3s linear infinite;
    animation-delay: 2.5s;
}

.voltage-button .dots .dot-5 {
    bottom: 0;
    left: 65%;
    animation: fly-down 3s linear infinite;
    animation-delay: 1.5s;
}

@keyframes spark-1 {
    to {
        stroke-dashoffset: -1000;
    }
}

@keyframes spark-2 {
    to {
        stroke-dashoffset: -500;
    }
}

@keyframes fly-up {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.2);
    }

    5% {
        opacity: 1;
        transform: translateY(-1.5rem) scale(0.4);
    }

    10%, 100% {
        opacity: 0;
        transform: translateY(-3rem) scale(0.2);
    }
}

@keyframes fly-down {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.2);
    }

    5% {
        opacity: 1;
        transform: translateY(1.5rem) scale(0.4);
    }

    10%, 100% {
        opacity: 0;
        transform: translateY(3rem) scale(0.2);
    }
}
/*背景*/
body {
    margin: 0;
    overflow: hidden;
    position: relative;
}
video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding: 20px;
}
/*登录部分界面*/
/* --- Root Variables for the component --- */
.glitch-form-wrapper {
    --bg-color: #0d0d0d;
    --primary-color: #00f2ea;
    --secondary-color: #a855f7;
    --text-color: #e5e5e5;
    --font-family: "Fira Code", Consolas, "Courier New", Courier, monospace;
    --glitch-anim-duration: 0.5s;
}

.glitch-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family);
    background-color: #050505;
}

/* --- Card Structure --- */
.glitch-card {
    background-color: var(--bg-color);
    width: 100%;
    max-width: 380px;
    border: 1px solid rgba(0, 242, 234, 0.2);
    box-shadow:
            0 0 20px rgba(0, 242, 234, 0.1),
            inset 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin: 1rem;
}

.card-body {
    padding: 1.5rem;
}

/* --- Form Elements --- */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-label {
    position: absolute;
    top: 0.75em;
    left: 0;
    font-size: 1rem;
    color: var(--primary-color);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-group input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(0, 242, 234, 0.3);
    padding: 0.75em 0;
    font-size: 1rem;
    color: var(--text-color);
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    border-color: var(--primary-color);
}

.form-group input:focus + .form-label,
.form-group input:not(:placeholder-shown) + .form-label {
    top: -1.2em;
    font-size: 0.8rem;
    opacity: 1;
}

.form-group input:focus + .form-label::before,
.form-group input:focus + .form-label::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
}

.form-group input:focus + .form-label::before {
    color: var(--secondary-color);
    animation: glitch-anim var(--glitch-anim-duration)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.form-group input:focus + .form-label::after {
    color: var(--primary-color);
    animation: glitch-anim var(--glitch-anim-duration)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
    }
    20% {
        transform: translate(-5px, 3px);
        clip-path: inset(50% 0 20% 0);
    }
    40% {
        transform: translate(3px, -2px);
        clip-path: inset(20% 0 60% 0);
    }
    60% {
        transform: translate(-4px, 2px);
        clip-path: inset(80% 0 5% 0);
    }
    80% {
        transform: translate(4px, -3px);
        clip-path: inset(30% 0 45% 0);
    }
    100% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
    }
}


/* --- Glitch Effect for Button --- */
.btn-text {
    position: relative;
    z-index: 1;
    transition: opacity 0.2s ease;
}

.btn-text {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .form-group input:focus + .form-label::before,
    .form-group input:focus + .form-label::after,
    .btn-text {
        opacity: 1;
    }
}


/*五彩鹿*/
@media screen and (max-width: 900px){
    .shadow {
        display: none;
    }    
}
.svg-hw {
    height: 250px;
    width: 250px;
    position: relative;
}
.path {
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 1;
}
@keyframes move7050 {
    0% {
        fill: #b40431;
    }
    10% {
        fill: orange;
        transform: translate(50px, 100px);
    }
    15% {
        fill: yellow;
        transform: translate(150px, 50px);
    }
    30% {
        fill: #110a29;
        transform: translate(0, 0);
    }
    100% {
        fill: #110a29;
    }
}

@keyframes move7062 {
    0% {
        fill: blue;
    }
    10% {
        fill: darkblue;
        transform: translate(-50px, -100px);
    }
    20% {
        fill: cyan;
        transform: translate(150px, -50px);
    }
    40% {
        fill: #291f6c;
        transform: translate(0, 0);
    }
    100% {
        fill: #291f6c;
    }
}

@keyframes move7064 {
    0% {
        fill: blue;
    }
    15% {
        fill: darkgreen;
        transform: translate(-150px, -200px);
    }
    25% {
        fill: green;
        transform: translate(-150px, -50px);
    }
    35% {
        fill: #520d4f;
        transform: translate(0, 0);
    }
    100% {
        fill: #520d4f;
    }
}

@keyframes move7065 {
    0% {
        fill: white;
    }
    13% {
        fill: yellow;
        transform: translate(-50px, -100px);
    }
    20% {
        fill: orange;
        transform: translate(50px, -50px);
    }
    30% {
        fill: #691751;
        transform: translate(0, 0);
    }
    100% {
        fill: #691751;
    }
}

@keyframes move7066 {
    0% {
        fill: #688a08;
    }
    10% {
        fill: darkblue;
        transform: translate(-50px, 150px);
    }
    30% {
        fill: cyan;
        transform: translate(150px, -50px);
    }
    50% {
        fill: #8f335d;
        transform: translate(0, 0);
    }
    100% {
        fill: #8f335d;
    }
}

@keyframes move7067 {
    0% {
        fill: red;
    }
    5% {
        fill: #2e64fe;
        transform: translate(-100px, 150px);
    }
    15% {
        fill: cyan;
        transform: translate(150px, 250px);
    }
    25% {
        fill: #b90149;
        transform: translate(0, 0);
    }
    100% {
        fill: #b90149;
    }
}

@keyframes move7068 {
    0% {
        fill: #cc2efa;
    }
    10% {
        fill: #00ff80;
        transform: translate(-100px, 150px);
    }
    20% {
        fill: #fe9a2e;
        transform: translate(150px, 250px);
    }
    35% {
        fill: #a70c29;
        transform: translate(0, 0);
    }
    100% {
        fill: #a70c29;
    }
}

@keyframes move7069 {
    0% {
        fill: #00ff40;
    }
    10% {
        fill: #ac58fa;
        transform: translate(100px, 150px);
    }
    20% {
        fill: #f5a9bc;
        transform: translate(15px, 25px);
    }
    35% {
        fill: #8d004c;
        transform: translate(0, 0);
    }
    100% {
        fill: #8d004c;
    }
}

@keyframes move7070 {
    0% {
        fill: #4b8a08;
    }
    13% {
        fill: #81f7be;
        transform: translate(60px, 90px);
    }
    30% {
        fill: #df0174;
        transform: translate(15px, 25px);
    }
    35% {
        fill: #ad0f09;
        transform: translate(0, 0);
    }
    100% {
        fill: #ad0f09;
    }
}

@keyframes move7071 {
    0% {
        fill: #f78181;
    }
    20% {
        fill: #00ffbf;
        transform: translate(-80px, 80px);
    }
    35% {
        fill: #3a2f0b;
        transform: translate(15px, 50px);
    }
    45% {
        fill: #6e064e;
        transform: translate(0, 0);
    }
    100% {
        fill: #6e064e;
    }
}

@keyframes move7072 {
    0% {
        fill: #dba901;
    }
    12% {
        fill: #6e6e6e;
        transform: translate(150px, 0px);
    }
    20% {
        fill: #a9f5d0;
        transform: translate(55px, 55px);
    }
    25% {
        fill: #5c1561;
        transform: translate(0, 0);
    }
    100% {
        fill: #5c1561;
    }
}

@keyframes move7076 {
    0% {
        fill: #2efe2e;
    }
    5% {
        fill: #f5a9e1;
        transform: translate(-200px, 180px);
    }
    15% {
        fill: #7401df;
        transform: translate(35px, 25px);
    }
    20% {
        fill: #881754;
        transform: translate(0, 0);
    }
    100% {
        fill: #881754;
    }
}

@keyframes move7080 {
    0% {
        fill: #0b3b39;
    }
    18% {
        fill: #4b088a;
        transform: translate(-200px, 180px);
    }
    27% {
        fill: #a9d0f5;
        transform: translate(35px, 25px);
    }
    37% {
        fill: #a71d67;
        transform: translate(0, 0);
    }
    100% {
        fill: #a71d67;
    }
}

@keyframes move7081 {
    0% {
        fill: #f5a9bc;
    }
    18% {
        fill: #f2f5a9;
        transform: translate(130px, 130px);
    }
    27% {
        fill: #bca9f5;
        transform: translate(-35px, 25px);
    }
    37% {
        fill: #891754;
        transform: translate(0, 0);
    }
    100% {
        fill: #891754;
    }
}

@keyframes move7086 {
    0% {
        fill: #08298a;
    }
    8% {
        fill: #8181f7;
        transform: translate(330px, 130px);
    }
    18% {
        fill: #8181f7;
        transform: translate(-75px, -25px);
    }
    27% {
        fill: #a70b29;
        transform: translate(0, 0);
    }
    100% {
        fill: #a70b29;
    }
}

@keyframes move7088 {
    0% {
        fill: #fe2e64;
    }
    10% {
        fill: #610b21;
        transform: translate(170px, 30px);
    }
    28% {
        fill: #e6e6e6;
        transform: translate(100px, -250px);
    }
    40% {
        fill: #ed6708;
        transform: translate(0, 0);
    }
    100% {
        fill: #ed6708;
    }
}

@keyframes move7090 {
    0% {
        fill: #80ff00;
    }
    20% {
        fill: #d0fa58;
        transform: translate(190px, -70px);
    }
    30% {
        fill: #fa58f4;
        transform: translate(70px, -205px);
    }
    42% {
        fill: #f59c00;
        transform: translate(0, 0);
    }
    100% {
        fill: #f59c00;
    }
}

@keyframes move7091 {
    0% {
        fill: #fe9a2e;
    }
    11% {
        fill: #fe642e;
        transform: translate(50px, -70px);
    }
    22% {
        fill: #df0101;
        transform: translate(70px, -25px);
    }
    33% {
        fill: #e84133;
        transform: translate(0, 0);
    }
    100% {
        fill: #e84133;
    }
}

@keyframes move7092 {
    0% {
        fill: #088a68;
    }
    30% {
        fill: #58d3f7;
        transform: translate(50px, 80px);
    }
    40% {
        fill: #0431b4;
        transform: translate(-50px, 50px);
    }
    50% {
        fill: #eb5e57;
        transform: translate(0, 0);
    }
    100% {
        fill: #eb5e57;
    }
}

@keyframes move7094 {
    0% {
        fill: #cef6d8;
    }
    10% {
        fill: #82fa58;
        transform: translate(50px, 280px);
    }
    40% {
        fill: #e0e0f8;
        transform: translate(20px, 5px);
    }
    45% {
        fill: #e84133;
        transform: translate(0, 0);
    }
    100% {
        fill: #e84133;
    }
}

@keyframes move7096 {
    0% {
        fill: #fe2e2e;
    }
    15% {
        fill: #df7401;
        transform: translate(50px, -100px);
    }
    20% {
        fill: #d358f7;
        transform: translate(-20px, -50px);
    }
    25% {
        fill: #f9b233;
        transform: translate(0, 0);
    }
    100% {
        fill: #f9b233;
    }
}

@keyframes move7098 {
    0% {
        fill: #08298a;
    }
    5% {
        fill: #ff00bf;
        transform: translate(400px, -100px);
    }
    20% {
        fill: #f5a9f2;
        transform: translate(-20px, 80px);
    }
    30% {
        fill: #f18700;
        transform: translate(0, 0);
    }
    100% {
        fill: #f18700;
    }
}

@keyframes move7100 {
    0% {
        fill: #013adf;
    }
    15% {
        fill: #a9e2f3;
        transform: translate(40px, -100px);
    }
    25% {
        fill: #be81f7;
        transform: translate(90px, 80px);
    }
    32% {
        fill: #ffd500;
        transform: translate(0, 0);
    }
    100% {
        fill: #ffd500;
    }
}

@keyframes move7101 {
    0% {
        fill: #0b0b3b;
    }
    5% {
        fill: #0000ff;
        transform: translate(-240px, -100px);
    }
    15% {
        fill: #9ff781;
        transform: translate(80px, 80px);
    }
    22% {
        fill: #fab334;
        transform: translate(0, 0);
    }
    100% {
        fill: #fab334;
    }
}

@keyframes move7102 {
    0% {
        fill: #ff0040;
    }
    15% {
        fill: #f7819f;
        transform: translate(-300px, -100px);
    }
    20% {
        fill: #2efef7;
        transform: translate(80px, 80px);
    }
    40% {
        fill: #dedc00;
        transform: translate(0, 0);
    }
    100% {
        fill: #dedc00;
    }
}

@keyframes move7104 {
    0% {
        fill: #ff0000;
    }
    5% {
        fill: #fa5858;
        transform: translate(-150px, -200px);
    }
    20% {
        fill: #f5da81;
        transform: translate(80px, 180px);
    }
    35% {
        fill: #f9b233;
        transform: translate(0, 0);
    }
    100% {
        fill: #f9b233;
    }
}

@keyframes move7105 {
    0% {
        fill: #088a08;
    }
    12% {
        fill: #fa5858;
        transform: translate(140px, 150px);
    }
    20% {
        fill: #58fa82;
        transform: translate(100px, 380px);
    }
    30% {
        fill: #ffd800;
        transform: translate(0, 0);
    }
    100% {
        fill: #ffd800;
    }
}
@keyframes move7106 {
    0% {
        fill: #58fa58;
    }
    18% {
        fill: #ffff00;
        transform: translate(170px, -100px);
    }
    25% {
        fill: #fa5858;
        transform: translate(100px, 80px);
    }
    35% {
        fill: #00975f;
        transform: translate(0, 0);
    }
    100% {
        fill: #00975f;
    }
}

@keyframes move7107 {
    0% {
        fill: #ceecf5;
    }
    13% {
        fill: #240b3b;
        transform: translate(0px, 180px);
    }
    23% {
        fill: #8a0829;
        transform: translate(100px, 80px);
    }
    28% {
        fill: #65b32e;
        transform: translate(0, 0);
    }
    100% {
        fill: #65b32e;
    }
}

@keyframes move7108 {
    0% {
        fill: #b43104;
    }
    20% {
        fill: #ffff00;
        transform: translate(0px, 80px);
    }
    25% {
        fill: #0a2a1b;
        transform: translate(10px, -35px);
    }
    28% {
        fill: #d3d800;
        transform: translate(0, 0);
    }
    100% {
        fill: #d3d800;
    }
}

@keyframes move7109 {
    0% {
        fill: #3b0b17;
    }
    11% {
        fill: #0a2a22;
        transform: translate(470px, 480px);
    }
    38% {
        fill: #58acfa;
        transform: translate(5px, -50px);
    }
    48% {
        fill: #ffed00;
        transform: translate(0, 0);
    }
    100% {
        fill: #ffed00;
    }
}

@keyframes move7110 {
    0% {
        fill: #ff0000;
    }
    20% {
        fill: #fa58d0;
        transform: translate(500px, 370px);
    }
    26% {
        fill: #00ff00;
        transform: translate(50px, 50px);
    }
    42% {
        fill: #00975f;
        transform: translate(0, 0);
    }
    100% {
        fill: #00975f;
    }
}

@keyframes move7111 {
    0% {
        fill: #fe9a2e;
    }
    5% {
        fill: #0b3b0b;
        transform: translate(-100px, -170px);
    }
    12% {
        fill: #0101df;
        transform: translate(120px, 150px);
    }
    17% {
        fill: #bccf00;
        transform: translate(0, 0);
    }
    100% {
        fill: #bccf00;
    }
}

@keyframes move7112 {
    0% {
        fill: #0a2229;
    }
    10% {
        fill: #181907;
        transform: translate(-260px, 70px);
    }
    22% {
        fill: #ff8000;
        transform: translate(20px, 150px);
    }
    32% {
        fill: #65b32f;
        transform: translate(0, 0);
    }
    100% {
        fill: #65b32f;
    }
}

@keyframes move7114 {
    0% {
        fill: #df3a01;
    }
    17% {
        fill: #00ff80;
        transform: translate(300px, 70px);
    }
    37% {
        fill: #81f781;
        transform: translate(200px, 150px);
    }
    43% {
        fill: #87bd25;
        transform: translate(0, 0);
    }
    100% {
        fill: #87bd25;
    }
}

@keyframes move7116 {
    0% {
        fill: #ff00ff;
    }
    22% {
        fill: #0000ff;
        transform: translate(500px, 7px);
    }
    30% {
        fill: #0b2161;
        transform: translate(20px, 15px);
    }
    33% {
        fill: #00758c;
        transform: translate(0, 0);
    }
    100% {
        fill: #00758c;
    }
}

@keyframes move7124 {
    0% {
        fill: #01df3a;
    }
    4% {
        fill: #8a0829;
        transform: translate(5px, -7px);
    }
    10% {
        fill: #8904b1;
        transform: translate(400px, 150px);
    }
    26% {
        fill: #3363ac;
        transform: translate(0, 0);
    }
    100% {
        fill: #3363ac;
    }
}

@keyframes move7126 {
    0% {
        fill: #01df3a;
    }
    8% {
        fill: #0174df;
        transform: translate(450px, 250px);
    }
    28% {
        fill: #0b3b17;
        transform: translate(-50px, 15px);
    }
    36% {
        fill: #009bac;
        transform: translate(0, 0);
    }
    100% {
        fill: #009bac;
    }
}

@keyframes move7128 {
    0% {
        fill: #9f81f7;
    }
    15% {
        fill: #81f7be;
        transform: translate(150px, -250px);
    }
    22% {
        fill: #ff0040;
        transform: translate(250px, 50px);
    }
    30% {
        fill: #27bdf0;
        transform: translate(0, 0);
    }
    100% {
        fill: #27bdf0;
    }
}

@keyframes move7129 {
    0% {
        fill: #00ffbf;
    }
    12% {
        fill: #ff4000;
        transform: translate(150px, -25px);
    }
    42% {
        fill: #0b3b17;
        transform: translate(50px, -150px);
    }
    50% {
        fill: #00676c;
        transform: translate(0, 0);
    }
    100% {
        fill: #00676c;
    }
}

@keyframes move7130 {
    0% {
        fill: #00ff80;
        transform: translate(-90px, 450px);
    }
    19% {
        fill: #f5a9d0;
        transform: translate(0px, -25px);
    }
    25% {
        fill: #be81f7;
        transform: translate(-50px, -35px);
    }
    30% {
        fill: #005e26;
        transform: translate(0, 0);
    }
    100% {
        fill: #005e26;
    }
}

@keyframes move7132 {
    0% {
        fill: #a9e2f3;
    }
    10% {
        fill: #5fb404;
        transform: translate(-200px, -100px);
    }
    15% {
        fill: #610b38;
        transform: translate(50px, 35px);
    }
    25% {
        fill: #008eab;
        transform: translate(0, 0);
    }
    100% {
        fill: #008eab;
    }
}

@keyframes move7134 {
    0% {
        fill: #ff0000;
    }
    15% {
        fill: #f78181;
        transform: translate(120px, -170px);
    }
    20% {
        fill: #81f7be;
        transform: translate(150px, 35px);
    }
    25% {
        fill: #007c84;
        transform: translate(0, 0);
    }
    100% {
        fill: #007c84;
    }
}

@keyframes move7135 {
    0% {
        fill: #ffff00;
    }
    10% {
        fill: #084b8a;
        transform: translate(100px, 70px);
    }
    25% {
        fill: #31b404;
        transform: translate(0px, -200px);
    }
    40% {
        fill: #00975f;
        transform: translate(0, 0);
    }
    100% {
        fill: #00975f;
    }
}

@keyframes move7136 {
    0% {
        fill: #0404b4;
    }
    5% {
        fill: #2efef7;
        transform: translate(10px, -70px);
    }
    10% {
        fill: #8904b1;
        transform: translate(-40px, 200px);
    }
    20% {
        fill: #008eaa;
        transform: translate(0, 0);
    }
    100% {
        fill: #008eaa;
    }
}

@keyframes move7137 {
    0% {
        fill: #f5a9bc;
    }
    15% {
        fill: #2efe2e;
        transform: translate(300px, 0px);
    }
    23% {
        fill: #b40404;
        transform: translate(-40px, 200px);
    }
    40% {
        fill: #007d83;
        transform: translate(0, 0);
    }
    100% {
        fill: #007d83;
    }
}

@keyframes move7138 {
    0% {
        fill: #08088a;
    }
    17% {
        fill: #088a29;
        transform: translate(-250px, 20px);
    }
    27% {
        fill: #ffff00;
        transform: translate(-40px, -200px);
    }
    37% {
        fill: #005f50;
        transform: translate(0, 0);
    }
    100% {
        fill: #005f50;
    }
}

@keyframes move7140 {
    0% {
        fill: #0b610b;
    }
    12% {
        fill: #04b4ae;
        transform: translate(-20px, 300px);
    }
    27% {
        fill: #04b4ae;
        transform: translate(50px, -20px);
    }
    37% {
        fill: #831f82;
        transform: translate(0, 0);
    }
    100% {
        fill: #831f82;
    }
}

@keyframes move7142 {
    0% {
        fill: #f2f5a9;
    }
    19% {
        fill: #610b21;
        transform: translate(-20px, -60px);
    }
    35% {
        fill: #0080ff;
        transform: translate(350px, 220px);
    }
    40% {
        fill: #201351;
        transform: translate(0, 0);
    }
    100% {
        fill: #201351;
    }
}

@keyframes move7144 {
    0% {
        fill: #0000ff;
    }
    9% {
        fill: #ff00bf;
        transform: translate(210px, 460px);
    }
    12% {
        fill: #ff0040;
        transform: translate(350px, 220px);
    }
    27% {
        fill: #291e6b;
        transform: translate(0, 0);
    }
    100% {
        fill: #291e6b;
    }
}

@keyframes move7146 {
    0% {
        fill: #df013a;
    }
    19% {
        fill: #2efe2e;
        transform: translate(20px, -200px);
    }
    28% {
        fill: #df0101;
        transform: translate(350px, 520px);
    }
    50% {
        fill: #551661;
        transform: translate(0, 0);
    }
    100% {
        fill: #551661;
    }
}

@keyframes move7148 {
    0% {
        fill: #01dfa5;
    }
    5% {
        fill: #220a29;
        transform: translate(200px, -20px);
    }
    10% {
        fill: #0b3b17;
        transform: translate(35px, 52px);
    }
    15% {
        fill: #e60064;
        transform: translate(0, 0);
    }
    100% {
        fill: #e60064;
    }
}

@keyframes move7149 {
    0% {
        fill: #a5df00;
    }
    8% {
        fill: #0b2161;
        transform: translate(-40px, 400px);
    }
    18% {
        fill: #80ff00;
        transform: translate(-35px, 150px);
    }
    25% {
        fill: #8f055f;
        transform: translate(0, 0);
    }
    100% {
        fill: #8f055f;
    }
}

@keyframes move7150 {
    0% {
        fill: #81f79f;
    }
    15% {
        fill: #610b21;
        transform: translate(-40px, 40px);
    }
    21% {
        fill: #088a85;
        transform: translate(-105px, 250px);
    }
    30% {
        fill: #a61d67;
        transform: translate(0, 0);
    }
    100% {
        fill: #a61d67;
    }
}

@keyframes move7152 {
    0% {
        fill: #f781be;
    }
    19% {
        fill: #5f4c0b;
        transform: translate(-40px, 40px);
    }
    31% {
        fill: #2efe2e;
        transform: translate(-40px, -60px);
    }
    46% {
        fill: #e50068;
        transform: translate(0, 0);
    }
    100% {
        fill: #e50068;
    }
}

@keyframes move7154 {
    0% {
        fill: #0a1b2a;
    }
    13% {
        fill: #a9d0f5;
        transform: translate(-20px, 40px);
    }
    27% {
        fill: #01dfa5;
        transform: translate(340px, 260px);
    }
    31% {
        fill: #832082;
        transform: translate(0, 0);
    }
    100% {
        fill: #832082;
    }
}

@keyframes move7156 {
    0% {
        fill: #80ff00;
    }
    10% {
        fill: #ffbf00;
        transform: translate(400px, 0px);
    }
    17% {
        fill: #ff4000;
        transform: translate(340px, 200px);
    }
    22% {
        fill: #832082;
        transform: translate(0, 0);
    }
    100% {
        fill: #832082;
    }
}

@keyframes move7158 {
    0% {
        fill: #40ff00;
    }
    15% {
        fill: #a9f5e1;
        transform: translate(-100px, -20px);
    }
    30% {
        fill: #2a0a12;
        transform: translate(40px, 20px);
    }
    40% {
        fill: #ba024a;
        transform: translate(0, 0);
    }
    100% {
        fill: #ba024a;
    }
}

@keyframes move7160 {
    0% {
        fill: #81f79f;
    }
    18% {
        fill: #2e2efe;
        transform: translate(60px, -20px);
    }
    28% {
        fill: #f7fe2e;
        transform: translate(40px, -90px);
    }
    32% {
        fill: #8e0435;
        transform: translate(0, 0);
    }
    100% {
        fill: #8e0435;
    }
}

@keyframes move7162 {
    0% {
        fill: #f5a9bc;
    }
    10% {
        fill: #38610b;
        transform: translate(-60px, -20px);
    }
    20% {
        fill: #0b243b;
        transform: translate(150px, 190px);
    }
    25% {
        fill: #e6006d;
        transform: translate(0, 0);
    }
    100% {
        fill: #e6006d;
    }
}

@keyframes move7164 {
    0% {
        fill: #0101df;
    }
    5% {
        fill: #00ffff;
        transform: translate(20px, -20px);
    }
    10% {
        fill: #ac58fa;
        transform: translate(-50px, 0px);
    }
    20% {
        fill: #190314;
        transform: translate(0, 0);
    }
    100% {
        fill: #190314;
    }
}

@keyframes move7165 {
    0% {
        fill: #00ff00;
    }
    15% {
        fill: #58acfa;
        transform: translate(200px, -20px);
    }
    30% {
        fill: #faac58;
        transform: translate(-150px, 200px);
    }
    40% {
        fill: #7a1469;
        transform: translate(0, 0);
    }
    100% {
        fill: #7a1469;
    }
}

@keyframes move7168 {
    0% {
        fill: #00ff00;
    }
    5% {
        fill: #e1f5a9;
        transform: translate(-100px, -50px);
    }
    20% {
        fill: #819ff7;
        transform: translate(50px, 50px);
    }
    25% {
        fill: #a71d67;
        transform: translate(0, 0);
    }
    100% {
        fill: #a71d67;
    }
}

@keyframes move7170 {
    0% {
        fill: #0b610b;
    }
    18% {
        fill: #81f79f;
        transform: translate(-100px, 20px);
    }
    25% {
        fill: #2e2efe;
        transform: translate(-150px, -100px);
    }
    35% {
        fill: #e50071;
        transform: translate(0, 0);
    }
    100% {
        fill: #e50071;
    }
}

@keyframes move7172 {
    0% {
        fill: #848484;
    }
    8% {
        fill: #fe2e64;
        transform: translate(-100px, 20px);
    }
    14% {
        fill: #acfa58;
        transform: translate(-10px, 200px);
    }
    18% {
        fill: #831f82;
        transform: translate(0, 0);
    }
    100% {
        fill: #831f82;
    }
}

@keyframes move7174 {
    0% {
        fill: #0b614b;
    }
    18% {
        fill: #e2a9f3;
        transform: translate(-100px, 50px);
    }
    24% {
        fill: #40ff00;
        transform: translate(410px, -100px);
    }
    30% {
        fill: #96105b;
        transform: translate(0, 0);
    }
    100% {
        fill: #96105b;
    }
}

@keyframes move7176 {
    0% {
        fill: #01df74;
    }
    12% {
        fill: #ff0000;
        transform: translate(120px, 10px);
    }
    20% {
        fill: #d8f781;
        transform: translate(-50px, -50px);
    }
    34% {
        fill: #7a1369;
        transform: translate(0, 0);
    }
    100% {
        fill: #7a1369;
    }
}

@keyframes move7178 {
    0% {
        fill: #00ffbf;
    }
    15% {
        fill: #f4fa58;
        transform: translate(20px, 80px);
    }
    20% {
        fill: #0040ff;
        transform: translate(350px, -50px);
    }
    28% {
        fill: #691751;
        transform: translate(0, 0);
    }
    100% {
        fill: #691751;
    }
}

/*@keyframes move7178 {
  0%   {fill: #380B61;}
  18%  {fill: #00FF40;transform: translate(-220px,80px);}
  20%  {fill: #F4FA58;transform: translate(-150px,-50px)}
  35% {fill: #7a1469;transform: translate(0,0);}
 100% {fill: #7a1469;}
}*/

@keyframes move7180 {
    0% {
        fill: #fa5882;
    }
    11% {
        fill: #01a9db;
        transform: translate(-20px, 80px);
    }
    25% {
        fill: #3104b4;
        transform: translate(150px, 500px);
    }
    32% {
        fill: #bf087f;
        transform: translate(0, 0);
    }
    100% {
        fill: #bf087f;
    }
}

@keyframes move7182 {
    0% {
        fill: #ac58fa;
    }
    8% {
        fill: #084b8a;
        transform: translate(150px, 80px);
    }
    25% {
        fill: #bef781;
        transform: translate(400px, 300px);
    }
    42% {
        fill: #e60072;
        transform: translate(0, 0);
    }
    100% {
        fill: #e60072;
    }
}

@keyframes move7184 {
    0% {
        fill: #40ff00;
    }
    5% {
        fill: #a9d0f5;
        transform: translate(50px, 280px);
    }
    15% {
        fill: #3b0b2e;
        transform: translate(-50px, -20px);
    }
    25% {
        fill: #7d2183;
        transform: translate(0, 0);
    }
    100% {
        fill: #7d2183;
    }
}

@keyframes move7188 {
    0% {
        fill: #81f7d8;
    }
    6% {
        fill: #610b5e;
        transform: translate(50px, 30px);
    }
    22% {
        fill: #2efe9a;
        transform: translate(-200px, -50px);
    }
    30% {
        fill: #a61008;
        transform: translate(0, 0);
    }
    100% {
        fill: #a61008;
    }
}

@keyframes move7189 {
    0% {
        fill: #d8d8d8;
    }
    6% {
        fill: #013adf;
        transform: translate(0px, -230px);
    }
    20% {
        fill: #0b3b2e;
        transform: translate(100px, -150px);
    }
    45% {
        fill: #d10a10;
        transform: translate(0, 0);
    }
    100% {
        fill: #d10a10;
    }
}

@keyframes move7190 {
    0% {
        fill: #f5a9f2;
    }
    9% {
        fill: #40ff00;
        transform: translate(-50px, 210px);
    }
    15% {
        fill: #ffff00;
        transform: translate(400px, 230px);
    }
    22% {
        fill: #e50046;
        transform: translate(0, 0);
    }
    100% {
        fill: #e50046;
    }
}

@keyframes move7192 {
    0% {
        fill: #088a08;
    }
    5% {
        fill: #00ffbf;
        transform: translate(250px, 0px);
    }
    17% {
        fill: #ff4000;
        transform: translate(40px, 30px);
    }
    32% {
        fill: #a60b29;
        transform: translate(0, 0);
    }
    100% {
        fill: #a60b29;
    }
}

@keyframes move7193 {
    0% {
        fill: #fe9a2e;
    }
    25% {
        fill: #01df01;
        transform: translate(150px, -90px);
    }
    30% {
        fill: #3b0b2e;
        transform: translate(40px, 90px);
    }
    38% {
        fill: #b70e0b;
        transform: translate(0, 0);
    }
    100% {
        fill: #b70e0b;
    }
}

@keyframes move7194 {
    0% {
        fill: #01dfd7;
    }
    20% {
        fill: #0b610b;
        transform: translate(150px, -190px);
    }
    32% {
        fill: #da81f5;
        transform: translate(40px, -90px);
    }
    37% {
        fill: #0d2e39;
        transform: translate(0, 0);
    }
    100% {
        fill: #0d2e39;
    }
}

@keyframes move7195 {
    0% {
        fill: #01dfd7;
    }
    10% {
        fill: #8258fa;
        transform: translate(-100px, 190px);
    }
    15% {
        fill: #ff0000;
        transform: translate(-150px, -90px);
    }
    20% {
        fill: #a70a2d;
        transform: translate(0, 0);
    }
    100% {
        fill: #a70a2d;
    }
}

@keyframes move7196 {
    0% {
        fill: #5f4c0b;
    }
    7% {
        fill: #6a0888;
        transform: translate(-200px, 0px);
    }
    25% {
        fill: #f2f5a9;
        transform: translate(150px, 190px);
    }
    42% {
        fill: #b90149;
        transform: translate(0, 0);
    }
    100% {
        fill: #b90149;
    }
}

@keyframes move7197 {
    0% {
        fill: #a9bcf5;
    }
    15% {
        fill: #01df01;
        transform: translate(-180px, 40px);
    }
    25% {
        fill: #b404ae;
        transform: translate(40px, -40px);
    }
    35% {
        fill: #7b1c4e;
        transform: translate(0, 0);
    }
    100% {
        fill: #7b1c4e;
    }
}

@keyframes move7198 {
    0% {
        fill: #610b21;
    }
    10% {
        fill: #fa5858;
        transform: translate(-130px, 240px);
    }
    20% {
        fill: #00ff00;
        transform: translate(140px, -140px);
    }
    50% {
        fill: #8d236e;
        transform: translate(0, 0);
    }
    100% {
        fill: #8d236e;
    }
}

@keyframes move7200 {
    0% {
        fill: #f5a9d0;
    }
    9% {
        fill: #00ffff;
        transform: translate(-30px, 40px);
    }
    20% {
        fill: #bdbdbd;
        transform: translate(90px, 110px);
    }
    25% {
        fill: #0d2e3a;
        transform: translate(0, 0);
    }
    100% {
        fill: #0d2e3a;
    }
}

@keyframes move7202 {
    0% {
        fill: #0040ff;
    }
    15% {
        fill: #ff0040;
        transform: translate(100px, 100px);
    }
    25% {
        fill: #bcf5a9;
        transform: translate(130px, -40px);
    }
    35% {
        fill: #351251;
        transform: translate(0, 0);
    }
    100% {
        fill: #351251;
    }
}

@keyframes move7206 {
    0% {
        fill: #00ffff;
    }
    13% {
        fill: #8000ff;
        transform: translate(90px, -300px);
    }
    23% {
        fill: #a9d0f5;
        transform: translate(30px, 40px);
    }
    28% {
        fill: #662e3d;
        transform: translate(0, 0);
    }
    100% {
        fill: #662e3d;
    }
}

@keyframes move7214 {
    0% {
        fill: #585858;
    }
    10% {
        fill: #ffff00;
        transform: translate(-200px, -30px);
    }
    20% {
        fill: #2efec8;
        transform: translate(30px, -140px);
    }
    25% {
        fill: #003952;
        transform: translate(0, 0);
    }
    100% {
        fill: #003952;
    }
}

@keyframes move7215 {
    0% {
        fill: #ffff00;
    }
    16% {
        fill: #fa5882;
        transform: translate(-80px, -90px);
    }
    25% {
        fill: #ced8f6;
        transform: translate(100px, 0px);
    }
    50% {
        fill: #8d1530;
        transform: translate(0, 0);
    }
    100% {
        fill: #8d1530;
    }
}

@keyframes move7216 {
    0% {
        fill: #40ff00;
    }
    8% {
        fill: #2e2efe;
        transform: translate(60px, 30px);
    }
    12% {
        fill: #df3a01;
        transform: translate(100px, -100px);
    }
    20% {
        fill: #5a1c44;
        transform: translate(0, 0);
    }
    100% {
        fill: #5a1c44;
    }
}

@keyframes move7218 {
    0% {
        fill: #00ffff;
    }
    10% {
        fill: #ff0000;
        transform: translate(0px, -150px);
    }
    26% {
        fill: #a9f5a9;
        transform: translate(150px, -100px);
    }
    30% {
        fill: #881069;
        transform: translate(0, 0);
    }
    100% {
        fill: #881069;
    }
}

@keyframes move7219 {
    0% {
        fill: #ff0040;
    }
    20% {
        fill: #2e2efe;
        transform: translate(-250px, -150px);
    }
    25% {
        fill: #848484;
        transform: translate(-150px, -100px);
    }
    35% {
        fill: #003869;
        transform: translate(0, 0);
    }
    100% {
        fill: #003869;
    }
}

@keyframes move7222 {
    0% {
        fill: #2efef7;
    }
    17% {
        fill: #04b404;
        transform: translate(-250px, 170px);
    }
    22% {
        fill: #f5a9bc;
        transform: translate(-50px, -30px);
    }
    30% {
        fill: #004c79;
        transform: translate(0, 0);
    }
    100% {
        fill: #004c79;
    }
}

@keyframes move7224 {
    0% {
        fill: #a9f5f2;
    }
    5% {
        fill: #b40404;
        transform: translate(-150px, -200px);
    }
    25% {
        fill: #ff8000;
        transform: translate(50px, 50px);
    }
    35% {
        fill: #213a8f;
        transform: translate(0, 0);
    }
    100% {
        fill: #213a8f;
    }
}

@keyframes move7225 {
    0% {
        fill: #8258fa;
    }
    13% {
        fill: #819ff7;
        transform: translate(-150px, 90px);
    }
    28% {
        fill: #01df01;
        transform: translate(200px, 50px);
    }
    38% {
        fill: #00628a;
        transform: translate(0, 0);
    }
    100% {
        fill: #00628a;
    }
}

@keyframes move7226 {
    0% {
        fill: #58faf4;
    }
    10% {
        fill: #d7df01;
        transform: translate(90px, 30px);
    }
    35% {
        fill: #04b404;
        transform: translate(100px, -150px);
    }
    45% {
        fill: #005681;
        transform: translate(0, 0);
    }
    100% {
        fill: #005681;
    }
}

@keyframes move7228 {
    0% {
        fill: #fe2ef7;
    }
    8% {
        fill: #5fb404;
        transform: translate(-90px, 40px);
    }
    17% {
        fill: #0a2a29;
        transform: translate(-150px, -90px);
    }
    22% {
        fill: #00628a;
        transform: translate(0, 0);
    }
    100% {
        fill: #00628a;
    }
}

@keyframes move7230 {
    0% {
        fill: #fe2e2e;
    }
    12% {
        fill: #f7fe2e;
        transform: translate(-290px, -240px);
    }
    22% {
        fill: #f6cee3;
        transform: translate(-150px, 10px);
    }
    32% {
        fill: #0082b9;
        transform: translate(0, 0);
    }
    100% {
        fill: #0082b9;
    }
}
@keyframes move7231 {
    0% {
        fill: #ff0040;
    }
    15% {
        fill: #2efe9a;
        transform: translate(-290px, -40px);
    }
    30% {
        fill: #ffff00;
        transform: translate(-70px, 40px);
    }
    40% {
        fill: #00b1eb;
        transform: translate(0, 0);
    }
    100% {
        fill: #00b1eb;
    }
}

@keyframes move7232 {
    0% {
        fill: #ff0000;
    }
    5% {
        fill: #9ff781;
        transform: translate(90px, -90px);
    }
    15% {
        fill: #fa58f4;
        transform: translate(70px, 40px);
    }
    20% {
        fill: #008eaa;
        transform: translate(0, 0);
    }
    100% {
        fill: #008eaa;
    }
}

@keyframes move7233 {
    0% {
        fill: #d0a9f5;
    }
    13% {
        fill: #01df3a;
        transform: translate(-130px, 20px);
    }
    22% {
        fill: #ff4000;
        transform: translate(70px, -40px);
    }
    33% {
        fill: #351251;
        transform: translate(0, 0);
    }
    100% {
        fill: #351251;
    }
}

@keyframes move7234 {
    0% {
        fill: #2a0a22;
    }
    10% {
        fill: #0b610b;
        transform: translate(-300px, -150px);
    }
    25% {
        fill: #d0fa58;
        transform: translate(100px, -150px);
    }
    40% {
        fill: #291f6c;
        transform: translate(0, 0);
    }
    100% {
        fill: #291f6c;
    }
}

@keyframes move7235 {
    0% {
        fill: #4b8a08;
    }
    8% {
        fill: #cef6f5;
        transform: translate(150px, -250px);
    }
    20% {
        fill: #b40404;
        transform: translate(180px, 100px);
    }
    25% {
        fill: #312784;
        transform: translate(0, 0);
    }
    100% {
        fill: #312784;
    }
}

@keyframes move7236 {
    0% {
        fill: #240b3b;
    }
    20% {
        fill: #f3f781;
        transform: translate(-300px, 50px);
    }
    33% {
        fill: #f6cece;
        transform: translate(-180px, -100px);
    }
    38% {
        fill: #00609c;
        transform: translate(0, 0);
    }
    100% {
        fill: #00609c;
    }
}

@keyframes move7237 {
    0% {
        fill: #00ff00;
    }
    9% {
        fill: #ff00ff;
        transform: translate(-20px, -250px);
    }
    25% {
        fill: #ff0040;
        transform: translate(-40px, -60px);
    }
    32% {
        fill: #0082b9;
        transform: translate(0, 0);
    }
    100% {
        fill: #0082b9;
    }
}

@keyframes move7238 {
    0% {
        fill: #ac58fa;
    }
    8% {
        fill: #04b4ae;
        transform: translate(-170px, -150px);
    }
    22% {
        fill: #f3f781;
        transform: translate(30px, -60px);
    }
    45% {
        fill: #00ace9;
        transform: translate(0, 0);
    }
    100% {
        fill: #00ace9;
    }
}

#path7050 {
    animation-name: move7050;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7062 {
    animation-name: move7062;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7064 {
    animation-name: move7064;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7065 {
    animation-name: move7065;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7066 {
    animation-name: move7066;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7067 {
    animation-name: move7067;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7068 {
    animation-name: move7068;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7069 {
    animation-name: move7069;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7070 {
    animation-name: move7070;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7071 {
    animation-name: move7071;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7072 {
    animation-name: move7072;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7076 {
    animation-name: move7076;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7080 {
    animation-name: move7080;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7081 {
    animation-name: move7081;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7086 {
    animation-name: move7086;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7088 {
    animation-name: move7088;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7090 {
    animation-name: move7090;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7091 {
    animation-name: move7091;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7092 {
    animation-name: move7092;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7094 {
    animation-name: move7094;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7096 {
    animation-name: move7096;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7098 {
    animation-name: move7098;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7100 {
    animation-name: move7100;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7101 {
    animation-name: move7101;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7102 {
    animation-name: move7102;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7104 {
    animation-name: move7104;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7105 {
    animation-name: move7105;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7106 {
    animation-name: move7106;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7107 {
    animation-name: move7107;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7108 {
    animation-name: move7108;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7109 {
    animation-name: move7109;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7110 {
    animation-name: move7110;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7111 {
    animation-name: move7111;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7112 {
    animation-name: move7112;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7114 {
    animation-name: move7114;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7116 {
    animation-name: move7116;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7124 {
    animation-name: move7124;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7126 {
    animation-name: move7126;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7128 {
    animation-name: move7128;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7129 {
    animation-name: move7129;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7130 {
    animation-name: move7130;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7132 {
    animation-name: move7132;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7134 {
    animation-name: move7134;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7135 {
    animation-name: move7135;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7136 {
    animation-name: move7136;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7137 {
    animation-name: move7137;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7138 {
    animation-name: move7138;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7140 {
    animation-name: move7140;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7142 {
    animation-name: move7142;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7144 {
    animation-name: move7144;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7146 {
    animation-name: move7146;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7148 {
    animation-name: move7148;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7149 {
    animation-name: move7149;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7150 {
    animation-name: move7150;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7152 {
    animation-name: move7152;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7154 {
    animation-name: move7154;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7156 {
    animation-name: move7156;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7158 {
    animation-name: move7158;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7160 {
    animation-name: move7160;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7162 {
    animation-name: move7162;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7164 {
    animation-name: move7164;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7165 {
    animation-name: move7165;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7168 {
    animation-name: move7168;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7170 {
    animation-name: move7170;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7172 {
    animation-name: move7172;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7174 {
    animation-name: move7174;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7176 {
    animation-name: move7176;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7178 {
    animation-name: move7178;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7180 {
    animation-name: move7180;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7182 {
    animation-name: move7182;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7184 {
    animation-name: move7184;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7188 {
    animation-name: move7188;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7189 {
    animation-name: move7189;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7190 {
    animation-name: move7190;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7192 {
    animation-name: move7192;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7193 {
    animation-name: move7193;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7194 {
    animation-name: move7194;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7195 {
    animation-name: move7195;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7196 {
    animation-name: move7196;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7197 {
    animation-name: move7197;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7198 {
    animation-name: move7198;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7200 {
    animation-name: move7200;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7202 {
    animation-name: move7202;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7206 {
    animation-name: move7206;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7214 {
    animation-name: move7214;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7215 {
    animation-name: move7215;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7216 {
    animation-name: move7216;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7218 {
    animation-name: move7218;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7219 {
    animation-name: move7219;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7222 {
    animation-name: move7222;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7224 {
    animation-name: move7224;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7225 {
    animation-name: move7225;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7226 {
    animation-name: move7226;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7228 {
    animation-name: move7228;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7230 {
    animation-name: move7230;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7231 {
    animation-name: move7231;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7232 {
    animation-name: move7232;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7233 {
    animation-name: move7233;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7234 {
    animation-name: move7234;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7235 {
    animation-name: move7235;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7236 {
    animation-name: move7236;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7237 {
    animation-name: move7237;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

#path7238 {
    animation-name: move7238;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}
/*立即登录*/
.button {
    --white: #ffe7ff;
    --purple-100: #f4b1fd;
    --purple-200: #d190ff;
    --purple-300: #c389f2;
    --purple-400: #8e26e2;
    --purple-500: #5e2b83;
    --radius: 18px;

    border-radius: var(--radius);
    outline: none;
    cursor: pointer;
    font-size: 23px;
    font-family: Arial;
    background: transparent;
    letter-spacing: -1px;
    border: 0;
    position: relative;
    width: 320px;
    height: 40px;
    transform: rotate(360deg) skewX(4deg);
}

.bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    filter: blur(1px);
}
.bg::before,
.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(var(--radius) * 1.1);
    background: var(--purple-500);
}
.bg::before {
    filter: blur(5px);
    transition: all 0.3s ease;
    box-shadow:
            -7px 6px 0 0 rgb(115 75 155 / 40%),
            -14px 12px 0 0 rgb(115 75 155 / 30%),
            -21px 18px 4px 0 rgb(115 75 155 / 25%),
            -28px 24px 8px 0 rgb(115 75 155 / 15%),
            -35px 30px 12px 0 rgb(115 75 155 / 12%),
            -42px 36px 16px 0 rgb(115 75 155 / 8%),
            -56px 42px 20px 0 rgb(115 75 155 / 5%);
}

.wrap {
    border-radius: inherit;
    overflow: hidden;
    height: 100%;
    transform: translate(6px, -6px);
    padding: 3px;
    background: linear-gradient(
            to bottom,
            var(--purple-100) 0%,
            var(--purple-400) 100%
    );
    position: relative;
    transition: all 0.3s ease;
}

.outline {
    position: absolute;
    overflow: hidden;
    inset: 0;
    opacity: 0;
    outline: none;
    border-radius: inherit;
    transition: all 0.4s ease;
}
.outline::before {
    content: "";
    position: absolute;
    inset: 2px;
    width: 120px;
    height: 300px;
    margin: auto;
    background: linear-gradient(
            to right,
            transparent 0%,
            white 50%,
            transparent 100%
    );
    animation: spin 3s linear infinite;
    animation-play-state: paused;
}

.content {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    height: 100%;
    gap: 16px;
    border-radius: calc(var(--radius) * 0.85);
    font-weight: 600;
    transition: all 0.3s ease;
    background: linear-gradient(
            to bottom,
            var(--purple-300) 0%,
            var(--purple-400) 100%
    );
    box-shadow:
            inset -2px 12px 11px -5px var(--purple-200),
            inset 1px -3px 11px 0px rgb(0 0 0 / 35%);
}
.content::before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 10;
    width: 80%;
    top: 45%;
    bottom: 35%;
    opacity: 0.7;
    margin: auto;
    background: linear-gradient(to bottom, transparent, var(--purple-400));
    filter: brightness(1.3) blur(5px);
}

.char {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char span {
    display: block;
    color: transparent;
    position: relative;
}
.char span:nth-child(5) {
    margin-left: 5px;
}
.char.state-1 span:nth-child(5) {
    margin-right: -3px;
}
.char.state-1 span {
    animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s);
}
.char.state-1 span::before,
.char span::after {
    content: attr(data-label);
    position: absolute;
    color: var(--white);
    text-shadow: -1px 1px 2px var(--purple-500);
    left: 0;
}
.char span::before {
    opacity: 0;
    transform: translateY(-100%);
}
.char.state-2 {
    position: absolute;
    left: 80px;
}
.char.state-2 span::after {
    opacity: 1;
}

.icon {
    animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards;
    z-index: 10;
}
.icon div,
.icon div::before,
.icon div::after {
    height: 3px;
    border-radius: 1px;
    background-color: var(--white);
}
.icon div::before,
.icon div::after {
    content: "";
    position: absolute;
    right: 0;
    transform-origin: center right;
    width: 14px;
    border-radius: 15px;
    transition: all 0.3s ease;
}
.icon div {
    position: relative;
    width: 24px;
    box-shadow: -2px 2px 5px var(--purple-400);
    transform: scale(0.9);
    background: linear-gradient(to bottom, var(--white), var(--purple-100));
    animation: swingArrow 1s ease-in-out infinite;
    animation-play-state: paused;
}
.icon div::before {
    transform: rotate(44deg);
    top: 1px;
    box-shadow: 1px -2px 3px -1px var(--purple-400);
    animation: rotateArrowLine 1s linear infinite;
    animation-play-state: paused;
}
.icon div::after {
    bottom: 1px;
    transform: rotate(316deg);
    box-shadow: -2px 2px 3px 0 var(--purple-400);
    background: linear-gradient(200deg, var(--white), var(--purple-100));
    animation: rotateArrowLine2 1s linear infinite;
    animation-play-state: paused;
}

.path {
    position: absolute;
    z-index: 12;
    bottom: 0;
    left: 0;
    right: 0;
    stroke-dasharray: 150 480;
    stroke-dashoffset: 150;
    pointer-events: none;
}

.splash {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    stroke-dasharray: 60 60;
    stroke-dashoffset: 60;
    transform: translate(-17%, -31%);
    stroke: var(--purple-300);
}

/** STATES */

.button:hover .words {
    opacity: 1;
}
.button:hover .words span {
    animation-play-state: running;
}

.button:hover .char.state-1 span::before {
    animation: charAppear 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .char.state-1 span::after {
    opacity: 1;
    animation: charDisappear 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .wrap {
    transform: translate(8px, -8px);
}

.button:hover .outline {
    opacity: 1;
}

.button:hover .outline::before,
.button:hover .icon div::before,
.button:hover .icon div::after,
.button:hover .icon div {
    animation-play-state: running;
}

.button:active .bg::before {
    filter: blur(5px);
    opacity: 0.7;
    box-shadow:
            -7px 6px 0 0 rgb(115 75 155 / 40%),
            -14px 12px 0 0 rgb(115 75 155 / 25%),
            -21px 18px 4px 0 rgb(115 75 155 / 15%);
}
.button:active .content {
    box-shadow:
            inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),
            inset 0px -3px 8px 0px var(--purple-200);
}

.button:active .words,
.button:active .outline {
    opacity: 0;
}

.button:active .wrap {
    transform: translate(3px, -3px);
}

.button:active .splash {
    animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s;
}

.button:focus .path {
    animation: path 1.6s ease forwards 0.2s;
}

.button:focus .icon {
    animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards;
}

.char.state-2 span::after,
.button:focus .char.state-1 span {
    animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s);
}

.button:focus .char.state-2 span::after {
    animation: charAppear 1s ease backwards calc(var(--i) * 0.03s);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes charAppear {
    0% {
        transform: translateY(50%);
        opacity: 0;
        filter: blur(20px);
    }
    20% {
        transform: translateY(70%);
        opacity: 1;
    }
    50% {
        transform: translateY(-15%);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes charDisappear {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-70%);
        opacity: 0;
        filter: blur(3px);
    }
}

@keyframes arrow {
    0% {
        opacity: 1;
    }
    50% {
        transform: translateX(60px);
        opacity: 0;
    }
    51% {
        transform: translateX(-200px);
        opacity: 0;
    }
    100% {
        transform: translateX(-128px);
        opacity: 1;
    }
}

@keyframes swingArrow {
    50% {
        transform: translateX(5px) scale(0.9);
    }
}

@keyframes rotateArrowLine {
    50% {
        transform: rotate(30deg);
    }
    80% {
        transform: rotate(55deg);
    }
}

@keyframes rotateArrowLine2 {
    50% {
        transform: rotate(330deg);
    }
    80% {
        transform: rotate(300deg);
    }
}

@keyframes resetArrow {
    0% {
        transform: translateX(-128px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes path {
    from {
        stroke: white;
    }
    to {
        stroke-dashoffset: -480;
        stroke: #f9c6fe;
    }
}

@keyframes splash {
    to {
        stroke-dasharray: 2 60;
        stroke-dashoffset: -60;
    }
}