/* 主容器 */
.main-container {
    margin-top: 50vh;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 50%;
    z-index: -3;
    transition: all 1s;
    opacity: 0;
}

/* 背景光晕 */
.bg-glow {
    position: absolute;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: rgba(123, 97, 255, 0.05);
    /* primary/5 */
    animation: glowFade 6s ease-in-out infinite;
}

/* 渐变环形光圈 */
.gradient-ring {
    position: relative;
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background: linear-gradient(130deg, #7b61ff, #2ee5f1);
    /* primary, secondary */
    box-shadow: 0 0 30px rgba(123, 97, 255, 0.6),
        0 0 60px rgba(46, 229, 241, 0.3);
    /* ring-glow */
    animation: pulse 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite,
        rotate 20s linear infinite;
    /* pulse-soft + rotate-gentle */
}

.gradient-ring::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    border-radius: 50%;
    background-color: #0f1123;
    /* dark */
}

/* 中间的Hi文字 */
.hi-text {
    position: absolute;
    color: white;
    font-size: 3rem;
    /* text-4xl */
    font-weight: 300;
    /* font-light */
    z-index: 10;
    /* z-10 */
    letter-spacing: 0.05em;
    /* tracking-wide */
}

/* 额外的光晕效果 */
.ring-1 {
    position: absolute;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    border: 1px solid rgba(123, 97, 255, 0.3);
    /* border-primary/30 */
    animation: pulse 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    /* pulse-soft */
    animation-delay: 0.5s;
    background: #4ee8eb;
}

.ring-2 {
    position: absolute;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    border: 1px solid rgba(46, 229, 241, 0.2);
    /* border-secondary/20 */
    animation: pulse 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    /* pulse-soft */
    animation-delay: 1s;
}

/* 动画关键帧 */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(123, 97, 255, 0.6),
            0 0 60px rgba(46, 229, 241, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(123, 97, 255, 0.8),
            0 0 80px rgba(46, 229, 241, 0.5);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes glowFade {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}