/* 向下箭头提示样式 */
.scroll-down-hint {
    position: fixed;
    bottom: 40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 999;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: none;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    width: auto;
    max-width: 90%;
    padding: 0;
    box-sizing: border-box;
}

.scroll-hint-arrow {
    font-size: clamp(24px, 8vw, 32px);
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 10px rgba(19,165,221,0.7);
    margin-bottom: -5px;
}

.scroll-hint-text {
    font-size: clamp(12px, 4vw, 14px);
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 5px rgba(19,165,221,0.7);
    margin-top: 0;
}

/* 返回顶部按钮样式 */
.scroll-top-hint {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    display: none;
    pointer-events: none;
    background: rgba(19, 165, 221, 0.5);
    width: clamp(36px, 10vw, 40px);
    height: clamp(36px, 10vw, 40px);
    border-radius: 50%;
    text-align: center;
    line-height: clamp(36px, 10vw, 40px);
    font-size: clamp(20px, 6vw, 24px);
    color: white;
    box-shadow: 0 0 10px rgba(19, 165, 221, 0.5);
    backdrop-filter: blur(5px);
}

.scroll-top-hint::after {
    content: "↑";
}

@-webkit-keyframes bounce {
    0%, 100% { 
        -webkit-transform: translateY(0) translateX(-50%); 
        transform: translateY(0) translateX(-50%); 
    }
    50% { 
        -webkit-transform: translateY(-10px) translateX(-50%); 
        transform: translateY(-10px) translateX(-50%); 
    }
}

@keyframes bounce {
    0%, 100% { 
        -webkit-transform: translateY(0) translateX(-50%); 
        transform: translateY(0) translateX(-50%); 
    }
    50% { 
        -webkit-transform: translateY(-10px) translateX(-50%); 
        transform: translateY(-10px) translateX(-50%); 
    }
}

/* 移动端样式调整 - 向上箭头向下移动60px */
@media (hover: none) {
    /* 向下箭头在移动端保持60px位置 */
    .scroll-down-hint {
        bottom: 60px;
    }
    
    /* 向上箭头在移动端向下移动60px (原20px + 60px = 80px) */
    .scroll-top-hint {
        bottom: 80px;
    }
    
    /* 触摸反馈效果 */
    .scroll-down-hint:active {
        transform: translateX(-50%) scale(0.95);
        opacity: 0.6 !important;
    }
    .scroll-top-hint:active {
        transform: scale(0.95);
        opacity: 0.6 !important;
    }
}