/* ========================================
   自定义样式 - 从 index.html 提取
   用于修复子页面样式缺失问题
   ======================================== */

/* 网格背景 */
.grid-bg {
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* 玻璃态效果 */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 旋转动画 */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-rotate-slow {
    animation: rotate-slow 60s linear infinite;
}

/* 加载/滚动动画初始状态 */
.reveal-on-load {
    transition: all 1s ease-out;
}

.reveal-on-scroll {
    transition: all 0.8s ease-out;
}

/* Shimmer 动画 */
@keyframes shimmer {
    0% { transform: translateX(-200%); }
    100% { transform: translateX(200%); }
}

/* 慢速弹跳动画 */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* 呼吸辉光动画 */
@keyframes breathe-glow {
    0%, 100% { box-shadow: 0 0 60px rgba(6,182,212,0.15); }
    50% { box-shadow: 0 0 120px rgba(6,182,212,0.35); }
}

.breathe-glow {
    animation: breathe-glow 4s ease-in-out infinite;
}

/* 文本截断 */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 浮动动画 */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ===== 仪表盘动画 ===== */
@keyframes gaugeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes gaugeRotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
@keyframes gaugeRotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes gaugeRadar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =============================================
   移动端适配补丁 - 预编译 CSS 缺失的响应式类
   ============================================= */

/* --- 基础类（无断点） --- */
.pt-24 { padding-top: 6rem; }

/* --- sm: 断点 (≥640px) --- */
@media (min-width: 640px) {
    /* Padding */
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:p-8 { padding: 2rem; }
    .sm\:pt-24 { padding-top: 6rem; }
    .sm\:pt-28 { padding-top: 7rem; }
    .sm\:pt-32 { padding-top: 8rem; }
    .sm\:pb-12 { padding-bottom: 3rem; }
    .sm\:pb-16 { padding-bottom: 4rem; }
    .sm\:pb-20 { padding-bottom: 5rem; }
    .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }

    /* Margin */
    .sm\:mb-4 { margin-bottom: 1rem; }
    .sm\:mb-6 { margin-bottom: 1.5rem; }
    .sm\:mb-8 { margin-bottom: 2rem; }
    .sm\:mb-10 { margin-bottom: 2.5rem; }
    .sm\:mb-12 { margin-bottom: 3rem; }
    .sm\:mb-16 { margin-bottom: 4rem; }
    .sm\:mt-4 { margin-top: 1rem; }
    .sm\:mr-3 { margin-right: 0.75rem; }

    /* Width & Height */
    .sm\:w-7 { width: 1.75rem; }
    .sm\:w-10 { width: 2.5rem; }
    .sm\:w-14 { width: 3.5rem; }
    .sm\:w-16 { width: 4rem; }
    .sm\:w-72 { width: 18rem; }
    .sm\:h-7 { height: 1.75rem; }
    .sm\:h-10 { height: 2.5rem; }
    .sm\:h-14 { height: 3.5rem; }
    .sm\:h-16 { height: 4rem; }
    .sm\:h-80 { height: 20rem; }

    /* Typography */
    .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

    /* Layout */
    .sm\:gap-4 { gap: 1rem; }
    .sm\:gap-8 { gap: 2rem; }
    .sm\:rounded-2xl { border-radius: 1rem; }
    .sm\:items-center { align-items: center; }
}

/* --- md: 断点 (≥768px) --- */
@media (min-width: 768px) {
    .md\:w-96 { width: 24rem; }
}

/* --- lg: 断点 (≥1024px) --- */
@media (min-width: 1024px) {
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:text-5xl { font-size: 3rem; line-height: 1; }
    .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; }
}