/* 自定义 Tailwind 字体 */
body {
    font-family: 'Noto Sans SC', sans-serif;
    color: #334155; /* slate-700 */
}
/* 仅在非触摸设备上隐藏默认光标 */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: none;
    }
    /* 可交互元素也隐藏默认光标 */
    a, button, .interactive-card {
        cursor: none;
    }
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: #1e293b; /* slate-800 */
}
/* 动态渐变文字 */
.animated-gradient {
    background-image: linear-gradient(90deg, #f59e0b, #0f766e, #f59e0b);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-flow 5s linear infinite;
}
@keyframes gradient-flow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 简单的 GSAP 动画起始状态 */
.animate-up {
    opacity: 0;
    visibility: hidden; /* 初始时不仅透明，而且完全不可见、不可交互 */
    transform: translateY(40px);
    will-change: opacity, transform; /* 告诉浏览器这个元素即将有动画，提前优化 */
}

/* ===== 最终设计：自定义光标 (“自适应反相环”) ===== */
.cursor-ring {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    opacity: 0; /* 默认隐藏，由 JS 激活 */
    
    /* 核心：反相模式 + 默认圆环 */
    width: 30px;
    height: 30px;
    border: 2px solid white; /* 在 "difference" 模式下, "white" 会自动反相 */
    background-color: transparent;
    mix-blend-mode: difference; /* 关键：保证在所有背景上都可见 */
    
    /* 平滑变形过渡 */
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                border 0.3s ease,
                opacity 0.3s ease;
}

/* 光标悬停状态：变形为实心圆点 */
.cursor-ring.hovered {
    width: 10px; /* 缩小为实心点 */
    height: 10px;
    background-color: white; /* 填充颜色 (也会被反相) */
    border-width: 0px; /* 移除边框 */
}