@layer utilities {

    .color-bar {
        position: absolute;
        width: 20%;
        height: 100vh;
        transform-origin: top left;
        z-index: -1000;
        position: fixed;


        transform: translateY(-100%) rotate(0deg);
        animation: slide 1.5s ease forwards;
    }
    .LinkNoAmi{animation-direction: reverse;}
    .bar-1 {
        background-color: #5bcffa; /* 蓝色 */
        animation-delay: 0.1s;
    }
    .bar-2 {
        background-color: #f5abb9; /* 粉色 */
        animation-delay: 0.2s;
        left: 20%;
    }
    .bar-3 {
        background-color: white; /* 绿色 */
        animation-delay: 0.3s;
        left: 40%;
    }
    .bar-4 {
        background-color: #f5abb9; /* 琥珀色 */
        animation-delay: 0.4s;
        left: 60%;
    }
    .bar-5 {
        background-color: #5bcffa; /* 紫色 */
        animation-delay: 0.5s;
        left: 80%;
    }
    @keyframes slide {
        from {transform: translateY(-100%) rotate(0deg);}
        to {transform: translateY(0) rotate(0deg);}
    }


    .main {
        opacity: 0;
        animation: fadeIn 1s ease-out forwards;
        animation-delay: 1.4s; /* 等待色条动画结束 */

        min-height: 100vh;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to {
            opacity: 1;
        }
    }
}