/* 自定义样式 */

/* 速度表盘动画效果 */
.speed-container {
    position: relative;
    margin: 0 auto;
}

.speed-container::before,
.speed-container::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(14, 165, 233, 0.2), rgba(217, 70, 239, 0.2));
    z-index: -1;
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.speed-container::after {
    animation-delay: 0.5s;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.4;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

.speed-animation {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.95);
    }
}

/* 测试运行时的效果 */
.test-running #speed-gauge {
    transform: scale(1) !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 平滑过渡效果 */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* 炫酷的按钮悬停效果 */
#start-test:hover {
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.5), 0 0 30px rgba(217, 70, 239, 0.3);
}

/* 玻璃态背景效果 */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .glass {
    background: rgba(30, 41, 59, 0.1);
    border: 1px solid rgba(30, 41, 59, 0.1);
}

/* 表盘中心对齐和动画效果 */
.gauge-container {
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* 测试状态下的表盘移动效果，PC端向左偏移表盘宽度的一半 */
@media (min-width: 768px) {
    .test-active .gauge-container {
        transform: translateX(calc(-40% - 10px)) !important;
        margin-left: 0;
    }
}

/* 结果卡片动画效果 */
.result-card {
    will-change: transform, opacity;
}

/* 结果容器样式 */
.results-container {
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
}

.test-active .results-container {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* 移动设备适配 - 始终保持居中 */
@media (max-width: 767px) {
    .test-active .gauge-container {
        transform: translateY(0) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 250px;
    }
    
    .results-container {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin-top: 2rem;
        max-width: 100% !important;
    }
    
    /* 测试状态下，移动设备上不偏移，只改变结果容器位置 */
    .test-active .speed-container {
        margin-bottom: 1rem;
    }
}

/* 进度条动画 */
@keyframes progress {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#progress-bar {
    background-size: 200% 200%;
    animation: progress 2s linear infinite;
}

/* 历史记录项目动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-item {
    animation: fadeIn 0.3s ease-out forwards;
}

/* 移动设备优化 */
@media (max-width: 640px) {
    .speed-container {
        transform: scale(0.9);
    }
}

/* 结果卡片逐个显示动画 */
.result-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(20px);
    opacity: 0;
}

.test-active .result-card {
    transform: translateY(0);
    opacity: 1;
}

.test-active .result-card:nth-child(1) {
    transition-delay: 0.1s;
}

.test-active .result-card:nth-child(2) {
    transition-delay: 0.2s;
}

.test-active .result-card:nth-child(3) {
    transition-delay: 0.3s;
}

.test-active .result-card:nth-child(4) {
    transition-delay: 0.4s;
}

/* 速度表盘向左移动动画 */
@keyframes slideLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-40% - 10px));
    }
}

/* 确保表盘完全显示 */
#speed-gauge, .speed-container {
    transform-origin: center center;
}