/* static/css/pages/ip-quality.css */
/* 作用：IP质量检测页面专属样式 */
/* 原因：为不支持的服务提供斑马纹视觉区分 */
/* 相关：views/ip-info.html, static/js/pages/ip-quality.js */

/* 不支持服务斑马纹覆盖层 */
.ip-quality-card.blocked {
    position: relative;
}

.ip-quality-card.blocked::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(var(--light-border-color-rgb, 148, 163, 184), 0.15) 0,
        rgba(var(--light-border-color-rgb, 148, 163, 184), 0.15) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.6;
    z-index: 1;
}

/* 暗色模式 */
:root.dark .ip-quality-card.blocked::before {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(var(--dark-border-color-rgb, 71, 85, 105), 0.15) 0,
        rgba(var(--dark-border-color-rgb, 71, 85, 105), 0.15) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* 热门服务预览卡片设计 */
.featured-service-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: transparent !important; /* 移除多余背景，复用父容器毛玻璃 */
    border: 1px solid transparent !important;
}

.featured-service-card:hover {
    transform: translateY(-5px) scale(1.1);
    z-index: 10;
}

/* 状态光晕 */
.featured-service-card:not(.blocked):hover {
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.3));
}

.featured-service-card.blocked:hover {
    filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.2));
}

/* 入场动画 */
@keyframes fadeInUpStagger {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.featured-service-card {
    animation: fadeInUpStagger 0.4s ease-out forwards;
    opacity: 0;
}

/* 生成 10 个延迟量 */
.featured-service-card:nth-child(1) { animation-delay: 0.05s; }
.featured-service-card:nth-child(2) { animation-delay: 0.1s; }
.featured-service-card:nth-child(3) { animation-delay: 0.15s; }
.featured-service-card:nth-child(4) { animation-delay: 0.2s; }
.featured-service-card:nth-child(5) { animation-delay: 0.25s; }
.featured-service-card:nth-child(6) { animation-delay: 0.3s; }
.featured-service-card:nth-child(7) { animation-delay: 0.35s; }
.featured-service-card:nth-child(8) { animation-delay: 0.4s; }
.featured-service-card:nth-child(9) { animation-delay: 0.45s; }
.featured-service-card:nth-child(10) { animation-delay: 0.5s; }