/* 鼠标跟随爱心样式 */
.heart-cursor {
    position: fixed;
    pointer-events: none; /* 确保不会影响鼠标事件 */
    z-index: 9999;
    font-size: 20px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #ff6b8b;
    text-shadow: 0 0 5px rgba(255, 107, 139, 0.5);
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    -webkit-animation: pulse 1.5s infinite;
    -moz-animation: pulse 1.5s infinite;
    -o-animation: pulse 1.5s infinite;
    animation: pulse 1.5s infinite;
}

/* 点击爱心样式 */
.click-heart {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    font-size: 24px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #ff6b8b;
    -webkit-animation: heart-fly 1s ease-out forwards;
    -moz-animation: heart-fly 1s ease-out forwards;
    -o-animation: heart-fly 1s ease-out forwards;
    animation: heart-fly 1s ease-out forwards;
}

/* 彩花样式 */
.confetti {
    position: fixed;
    pointer-events: none;
    z-index: 9997;
    width: 8px;
    height: 8px;
    background-color: #ff6b8b;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* 爱心脉动动画 */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -moz-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -moz-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -ms-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -ms-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -o-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -o-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        -moz-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        -o-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        -moz-transform: translate(-50%, -50%) scale(1.2);
        -ms-transform: translate(-50%, -50%) scale(1.2);
        -o-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        -moz-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        -o-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 点击爱心飞舞动画 */
@-webkit-keyframes heart-fly {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.5);
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-moz-keyframes heart-fly {
    0% {
        -moz-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        -moz-transform: translate(-50%, -50%) scale(1.5);
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        -moz-transform: translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-ms-keyframes heart-fly {
    0% {
        -ms-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        -ms-transform: translate(-50%, -50%) scale(1.5);
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        -ms-transform: translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@-o-keyframes heart-fly {
    0% {
        -o-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        -o-transform: translate(-50%, -50%) scale(1.5);
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        -o-transform: translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes heart-fly {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        -moz-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        -o-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.5);
        -moz-transform: translate(-50%, -50%) scale(1.5);
        -ms-transform: translate(-50%, -50%) scale(1.5);
        -o-transform: translate(-50%, -50%) scale(1.5);
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(2);
        -moz-transform: translate(-50%, -50%) scale(2);
        -ms-transform: translate(-50%, -50%) scale(2);
        -o-transform: translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* 隐藏原始鼠标指针（改为默认指针，提高兼容性） */
body.heart-cursor-active {
    cursor: default;
}

/* IE 浏览器特定样式 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .heart-cursor, .click-heart, .confetti {
        display: none;
    }
    
    body.heart-cursor-active {
        cursor: auto;
    }
}

/* 针对不支持动画的浏览器的回退样式 */
@supports not (animation: name) {
    .heart-cursor, .click-heart, .confetti {
        display: none;
    }
    
    body.heart-cursor-active {
        cursor: auto;
    }
}