/* 标题故障效果 */
.glitch-title {
    font-size: 3rem;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-shadow: 0 0 5px var(--glow-color);
}

.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-title::before {
    left: 2px;
    text-shadow: -2px 0 var(--secondary-color);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-before 5s infinite linear alternate-reverse;
}

.glitch-title::after {
    left: -2px;
    text-shadow: 2px 0 var(--primary-color);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-after 5s infinite linear alternate-reverse;
}

@keyframes glitch-before {
    0% {
        clip: rect(29px, 450px, 39px, 0);
    }
    5% {
        clip: rect(70px, 450px, 89px, 0);
    }
    10% {
        clip: rect(32px, 450px, 7px, 0);
    }
    15% {
        clip: rect(79px, 450px, 30px, 0);
    }
    20% {
        clip: rect(3px, 450px, 23px, 0);
    }
    25% {
        clip: rect(42px, 450px, 73px, 0);
    }
    30% {
        clip: rect(35px, 450px, 3px, 0);
    }
    35% {
        clip: rect(17px, 450px, 46px, 0);
    }
    40% {
        clip: rect(37px, 450px, 46px, 0);
    }
    45% {
        clip: rect(81px, 450px, 62px, 0);
    }
    50% {
        clip: rect(6px, 450px, 33px, 0);
    }
    55% {
        clip: rect(90px, 450px, 21px, 0);
    }
    60% {
        clip: rect(87px, 450px, 12px, 0);
    }
    65% {
        clip: rect(4px, 450px, 27px, 0);
    }
    70% {
        clip: rect(63px, 450px, 95px, 0);
    }
    75% {
        clip: rect(24px, 450px, 85px, 0);
    }
    80% {
        clip: rect(39px, 450px, 44px, 0);
    }
    85% {
        clip: rect(57px, 450px, 37px, 0);
    }
    90% {
        clip: rect(17px, 450px, 49px, 0);
    }
    95% {
        clip: rect(36px, 450px, 87px, 0);
    }
    100% {
        clip: rect(12px, 450px, 1px, 0);
    }
}

@keyframes glitch-after {
    0% {
        clip: rect(61px, 450px, 92px, 0);
    }
    5% {
        clip: rect(37px, 450px, 10px, 0);
    }
    10% {
        clip: rect(25px, 450px, 41px, 0);
    }
    15% {
        clip: rect(75px, 450px, 5px, 0);
    }
    20% {
        clip: rect(81px, 450px, 31px, 0);
    }
    25% {
        clip: rect(7px, 450px, 40px, 0);
    }
    30% {
        clip: rect(70px, 450px, 93px, 0);
    }
    35% {
        clip: rect(54px, 450px, 63px, 0);
    }
    40% {
        clip: rect(19px, 450px, 49px, 0);
    }
    45% {
        clip: rect(15px, 450px, 79px, 0);
    }
    50% {
        clip: rect(63px, 450px, 29px, 0);
    }
    55% {
        clip: rect(47px, 450px, 41px, 0);
    }
    60% {
        clip: rect(34px, 450px, 51px, 0);
    }
    65% {
        clip: rect(36px, 450px, 21px, 0);
    }
    70% {
        clip: rect(9px, 450px, 59px, 0);
    }
    75% {
        clip: rect(56px, 450px, 70px, 0);
    }
    80% {
        clip: rect(72px, 450px, 31px, 0);
    }
    85% {
        clip: rect(90px, 450px, 38px, 0);
    }
    90% {
        clip: rect(32px, 450px, 3px, 0);
    }
    95% {
        clip: rect(80px, 450px, 83px, 0);
    }
    100% {
        clip: rect(65px, 450px, 23px, 0);
    }
}

/* 闪烁效果 */
.glitch-flicker, [style*="animation:flicker"], [style*="animation: flicker"] {
    animation: flicker 0.5s infinite alternate;
}

@keyframes flicker {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* 错位效果 */
.glitch-staggered {
    position: relative;
}

.glitch-staggered::before,
.glitch-staggered::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-staggered::before {
    left: 2px;
    color: var(--primary-color);
    animation: glitch-stagger-1 1.5s infinite;
}

.glitch-staggered::after {
    left: -2px;
    color: var(--secondary-color);
    animation: glitch-stagger-2 2s infinite;
}

@keyframes glitch-stagger-1 {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes glitch-stagger-2 {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(2px, -2px);
    }
    40% {
        transform: translate(2px, 2px);
    }
    60% {
        transform: translate(-2px, -2px);
    }
    80% {
        transform: translate(-2px, 2px);
    }
    100% {
        transform: translate(0);
    }
}

/* 切片效果 */
.glitch-sliced {
    position: relative;
    overflow: hidden;
}

.glitch-sliced::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    transform: translateX(-5px);
    animation: slice 2s infinite linear alternate;
}

@keyframes slice {
    0% {
        clip-path: inset(10% 0 90% 0);
    }
    10% {
        clip-path: inset(80% 0 10% 0);
    }
    20% {
        clip-path: inset(30% 0 60% 0);
    }
    30% {
        clip-path: inset(50% 0 40% 0);
    }
    40% {
        clip-path: inset(15% 0 75% 0);
    }
    50% {
        clip-path: inset(65% 0 25% 0);
    }
    60% {
        clip-path: inset(45% 0 55% 0);
    }
    70% {
        clip-path: inset(20% 0 70% 0);
    }
    80% {
        clip-path: inset(70% 0 20% 0);
    }
    90% {
        clip-path: inset(35% 0 55% 0);
    }
    100% {
        clip-path: inset(5% 0 85% 0);
    }
}

/* Zalgo文字组合效果 */
.zalgo-text {
    display: inline-block;
    position: relative;
}

/* 斜线效果 */
.diagonal-text {
    display: inline-block;
    position: relative;
    transform-origin: center;
}

.diagonal-text::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform-origin: center;
}

/* 通用样式，确保所有效果中的内联元素正确显示 */
.output-display span {
    display: inline-block;
}

/* 确保预览区域正确显示各种效果 */
#preview-discord, #preview-twitter, #preview-discord-msg {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-all;
}