/**
 * style.css - 项目自定义样式
 * 包含 Tailwind 未覆盖的自定义组件样式
 */

/* ========== 主题色变量 ========== */
/* Tailwind config 中 primary / accent 引用的根变量 */
/* 格式：空格分隔 RGB，供 rgb(var(...) / <alpha>) 语法使用 */
:root {
    /* Primary: Rose 色系 — 血色玫瑰 */
    --c-primary-50:  255 241 242;
    --c-primary-100: 255 228 230;
    --c-primary-200: 254 205 211;
    --c-primary-300: 253 164 175;
    --c-primary-400: 251 113 133;
    --c-primary-500: 244 63 94;
    --c-primary-600: 225 29 72;
    --c-primary-700: 190 18 60;

    /* Accent: Pink 色系 — 致命温柔 */
    --c-accent-50:  253 242 248;
    --c-accent-100: 252 231 243;
    --c-accent-400: 244 114 182;
    --c-accent-500: 236 72 153;
    --c-accent-600: 219 39 119;
}

/* ========== 全局字体渲染优化 ========== */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
}

/* ========== 基础组件 ========== */

/* 玻璃卡片效果 - 伪元素隔离版（避免 backdrop-filter 导致文字模糊） */
.glass-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    isolation: isolate;
}

/* 背景层：独立伪元素承载 backdrop-filter，与文字内容分层渲染 */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
}

.dark .glass-card::before {
    background: rgba(23, 23, 23, 0.85);
}

.dark .glass-card {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.dark .glass-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* 小型玻璃效果 - 伪元素隔离版 */
.mini-glass {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75rem;
    isolation: isolate;
}

.mini-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
    transition: background 0.2s ease;
}

.dark .mini-glass::before {
    background: rgba(38, 38, 38, 0.6);
}

.dark .mini-glass {
    border-color: rgba(255, 255, 255, 0.05);
}

/* ========== 背景效果 ========== */

/* 噪点背景 */
.noise-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.dark .noise-bg {
    opacity: 0.02;
}

/* 流动色块背景 - 性能优化版：静态渐变替代动画 */
.bg-blob {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
    contain: layout paint;
    backface-visibility: hidden;
    /* 关键优化：禁用动画，使用静态位置 */
    animation: none !important;
}

.dark .bg-blob {
    opacity: 0.25;
}

/* ========== 按钮样式 ========== */

/* 操作按钮 */
.btn-action {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.btn-action:hover {
    transform: translateY(-2px);
}

.btn-action:active {
    transform: translateY(0);
}

/* ========== 滚动条样式 - 完全隐藏 ========== */

.scroller {
    scrollbar-width: none;  /* Firefox */
}

.scroller::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
}

/* ========== 动画 ========== */

/* 淡入动画 */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease forwards;
}

/* 脉冲慢速动画 */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

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

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

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

/* ========== 响应式优化 ========== */

/* 检测用户偏好减少动画 */
@media (prefers-reduced-motion: reduce) {
    .bg-blob {
        animation: none !important;
        display: none;  /* 直接隐藏最彻底 */
    }
}

@media (max-width: 768px) {
    .glass-card {
        border-radius: 1rem;
    }
    
    .bg-blob {
        width: 200px;
        height: 200px;
        filter: blur(60px);
        animation: none !important;  /* 移动端禁用 */
    }
}

/* ========== 性能优化 ========== */

/* 仅对纯视觉背景元素启用 GPU 加速（文字容器禁止使用，会导致子像素模糊） */
.bg-blob {
    will-change: transform;
    transform: translateZ(0);
}

/* 减少重绘 */
.noise-bg {
    contain: strict;
}

/* ========== 动画优化 - 保留可感知动画 ========== */

/* 仅禁用背景消耗型动画 */
.animate-blob,
.animate-float {
    animation: none !important;
}

/* 背景色块完全静态化（用户无法感知其动画） */
.bg-blob {
    transform: none !important;
    transition: none !important;
}

/* 保留用户可感知的动画 - 但降低性能消耗 */

/* 状态指示器 - 禁用循环动画，改为静态 */
.animate-ping {
    animation: none !important;
    opacity: 0.6 !important;
}

/* 心跳动画 - 降低频率 */
.animate-pulse {
    animation-duration: 3s !important;  /* 从默认2s降低到3s */
}

/* 旋转动画 - 保持用于加载状态 */
.animate-spin {
    animation-duration: 1s !important;
}

/* 淡入动画 - 保留但加速 */
.animate-fade-in {
    animation-duration: 0.2s !important;
}

/* 自定义慢动画 - 保留但加速 */
.animate-pulse-slow {
    animation-duration: 4s !important;  /* 从3s加速到4s */
}

.animate-bounce-slow {
    animation-duration: 3s !important;  /* 从2s加速到3s */
}

/* ========== 滚动提示效果 ========== */

/* 滚动容器包装 - 底部渐变遮罩 */
.scroll-fade-wrapper {
    position: relative;
}

.scroll-fade-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to top, rgb(var(--card-bg, 255 255 255) / 0.95), transparent);
    pointer-events: none;
    border-radius: 0 0 1rem 1rem;
    opacity: 1;
    transition: opacity 0.3s;
}

.dark .scroll-fade-wrapper::after {
    background: linear-gradient(to top, rgb(23 23 23 / 0.95), transparent);
}