@charset "UTF-8";

/* 
 * 全局样式文件
 * 遵循极简主义，主要依赖 Tailwind CSS，此处仅补充字体与特定交互样式
 */

/* 字体设置：优先使用系统无衬线字体及苹方/思源黑体 */
body {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000; /* 默认黑色背景，防闪烁 */
    color: #fff;
    overflow-x: hidden; /* 防止水平滚动 */
}

/* 隐藏滚动条但保留滚动功能 (用于形意之韵页面) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 图片容器：用于悬停放大效果的基础裁剪 */
.img-wrapper {
    overflow: hidden;
    position: relative;
}

/* 图片过渡效果 */
.img-wrapper img {
    transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s ease;
    will-change: transform;
}

/* 遮罩层渐变 */
.overlay-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

/* 模态框过渡动画 */
.modal-backdrop {
    transition: opacity 0.4s ease;
}
.modal-content {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

/* 文字排版增强 */
.tracking-ultra {
    letter-spacing: 0.25em;
}

/* 加载状态 */
.loading-spinner {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-left-color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 页面切换淡入效果 */
.page-enter {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}