.btn-cut {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);
    transition: transform 0.2s ease;
}

.btn-cut-reverse {
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
}


.card-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}


.card-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--card-border);
    transform: translate(8px, 8px);
    z-index: -1;
    border: 2px solid var(--card-border);
    opacity: 0.1;
    pointer-events: none;
}

.dark-mode .card-wrapper::after, .dark .card-wrapper::after {
    opacity: 0.3;
}

.pro-wrapper::after {
    background-color: var(--pro-accent) !important;
    opacity: 0.2 !important;
}

.card-wrapper:hover .hardcore-card {
    transform: translate(-4px, -4px);
}

.card-wrapper:hover::after {
    transform: translate(12px, 12px);
}



.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition:
            opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
            transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes gradient-x {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-x {
    background-size: 200% auto;
    animation: gradient-x 3s linear infinite;
}

/* 新增：Glitch（故障）横向电流动画效果 */
@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 1px); }
    100% { clip-path: inset(30% 0 50% 0); transform: translate(1px, -1px); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
    20% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 2px); }
    40% { clip-path: inset(70% 0 10% 0); transform: translate(2px, -2px); }
    60% { clip-path: inset(20% 0 50% 0); transform: translate(-1px, 1px); }
    80% { clip-path: inset(50% 0 30% 0); transform: translate(1px, -1px); }
    100% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 1px); }
}

.glitch-char {
    display: inline-block;
    position: relative;
}

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

.glitch-char::before {
    left: 2px;
    text-shadow: -2px 0 var(--accent-blue);
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch-char::after {
    left: -2px;
    text-shadow: 2px 0 var(--pro-accent);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* 只有当前悬停的具体字母触发电流动画 */
.glitch-char:hover::before,
.glitch-char:hover::after {
    opacity: 1;
}

/* 蓝色文本专属故障颜色 */
.text-blue-500 .glitch-char::before {
    text-shadow: -2px 0 var(--text-main);
}
.text-blue-500 .glitch-char::after {
    text-shadow: 2px 0 var(--bg-color);
}