/* 闪烁动画 */
@keyframes blink {

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

    50% {
        opacity: 0.35;
        transform: scale(1.08);
    }
}

/* 给触发的元素加这个类即可开始闪烁 */
.skill-blinking {
    animation: blink 0.5s ease-in-out 2;
    /* 0.35s × 4次 ≈ 1.4s */
}

@keyframes fadeUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-70px);
    }
}

.text-raiseup {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    color: #ff6b6b;
    z-index: 4;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 15px;
    animation: fadeUp 3s forwards;
}

@keyframes breathe-scale {

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

    50% {
        transform: scale(1.05);
    }
}

.btn-breathe {
    animation: breathe-scale 1.5s ease-in-out infinite;
    /* 确保从中心放大 */
    transform-origin: center;
}

@keyframes beat-once-anima {

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

    30% {
        transform: scale(1.2);
    }
}

.beat-once {
    animation: beat-once-anima 1.0s ease 1;
    transform-origin: center;
}

/* 注册一个整数类型的自定义属性 --num */
@property --num {
    syntax: '<integer>';
    /* 定义语法为整数 */
    initial-value: 0;
    /* 设置初始值 */
    inherits: false;
    /* 设定为不继承 */
}

.number-display {
    /* 将 --num 的值通过计数器显示出来 */
    counter-reset: num var(--num);
    /* 为 --num 属性添加过渡效果，时长2秒，缓动函数为ease-out */
    transition: --num 1s ease-out;
}

/* 使用伪元素显示计数器值 */
.number-display::before {
    content: counter(num);
}