/* 打字删除效果样式 - 流光彩色字体 */
.text-capitalize {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Roboto, Arial, sans-serif;
    font-size: clamp(3rem, 3vw, 1.5rem);
    font-weight: 700;
    line-height: 1.8;
    margin: 1.25rem 0;
    min-height: 7rem;
    position: relative;
}

/* 保持原始.element样式 */
.element {
    position: relative;
    display: inline-block;
    min-height: 36px;
    /* 流光彩色字体 */
    background: linear-gradient(90deg, 
        #ff6b6b, #ff9e76, #ffd93d, #6bcf7f, 
        #4d96ff, #9d4edd, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 4s linear infinite;
}

/* 光标样式 */
.element::after {
    content: '|';
    position: absolute;
    right: -8px;
    top: 0;
    /* 彩色光标 */
    background: linear-gradient(90deg, #ff6b6b, #4d96ff, #6bcf7f);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: blink 1s infinite, shimmer 2s linear infinite;
    font-weight: 400;
}

/* 打字动画时的光标 */
.element.typing::after {
    animation: blink 0.8s infinite, shimmer 1.5s linear infinite;
}

/* 删除动画时的光标 */
.element.deleting::after {
    animation: blink 0.5s infinite, shimmer 1s linear infinite;
}

/* 暂停时的光标 */
.element.paused::after {
    animation: none;
    opacity: 1;
    /* 暂停时的固定颜色 */
    background: #6bcf7f;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 打字机文本容器 */
.typewriter-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
}

/* 当前显示行 */
.current-line {
    display: inline-block;
}

/* 流光彩色动画 */
@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 光标闪烁动画 */
@keyframes blink {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.3; 
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .text-capitalize {
        font-size: 1rem;
        min-height: 6rem;
    }
    
    .element::after {
        right: -6px;
        font-size: 0.9em;
    }
    
    .typewriter-text {
        white-space: normal;
        word-break: break-word;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 保持流光彩色，不改为深色 */
    .element {
        /* 流光彩色在深色模式下更显眼 */
        background: linear-gradient(90deg, 
            #ff6b6b, #ff9e76, #ffd93d, #6bcf7f, 
            #4d96ff, #9d4edd, #ff6b6b);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: shimmer 4s linear infinite;
    }
    
    .element::after {
        /* 保持彩色光标 */
        background: linear-gradient(90deg, #ff6b6b, #4d96ff, #6bcf7f);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    .element::after {
        animation: none !important;
        opacity: 0.7;
        background: #4d96ff;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    
    .element {
        animation: none !important;
        background: #4d96ff;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    
    .typewriter-text,
    .current-line {
        animation: none !important;
    }
}