/* 预设动效 */

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.pulse-dot {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 10%) scale(1.05); }
    100% { transform: translate(-5%, -5%) scale(0.95); }
}

/* Scroll Reveal Base */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* 按钮高光流转 */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* ---------------- Hero 骨架图步骤动画 ---------------- */
.anim-step {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}
.anim-step.active {
    opacity: 1;
    transform: translateY(0);
}
.anim-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--accent-primary);
    width: 0;
}
.anim-typing.active {
    animation: typing 2s steps(40, end) forwards, blink-caret .75s step-end infinite;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink-caret {
    from, straight { border-color: transparent }
    50% { border-color: var(--accent-primary) }
}
.pulse-bg {
    animation: pulseBg 2s infinite;
}
@keyframes pulseBg {
    0% { background-color: rgba(59, 130, 246, 0.05); }
    50% { background-color: rgba(59, 130, 246, 0.15); }
    100% { background-color: rgba(59, 130, 246, 0.05); }
}