/**
 * main.css
 * 主样式文件 - 导入组件样式并定义全局样式
 */

/* 优先导入重置和基础样式 */
@import 'reset.css';
@import 'fonts.css';

/* 导入组件样式 */
@import 'components/preloader.css'; /* 预加载器优先导入 */
@import 'animations.css';
@import 'true-focus.css';
@import 'components/navigation.css';
@import 'components/circular-layout.css';
@import 'components/button.css';
@import 'components/language-switch.css';
@import 'components/contact-page.css'; /* 联系页面样式 */

/* 根变量 */
:root {
  /* 主要颜色 - 使用reset.css中定义的变量 */
  --color-background: var(--black);
  --color-text: var(--white);
  --color-text-dim: rgba(255, 255, 255, 0.8);
  
  /* 过渡效果 */
  --transition-fast: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* 状态变量 */
  --header-opacity: 1;
  
  /* 字体权重 */
  --font-thin: 100;
  --font-light: 200;
  --font-bold: 700;
  --font-ultra: 900;
  
  /* 间距 */
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-xlarge: 4rem;
  --spacing-xxlarge: 8rem;
  
  /* 内边距变量 */
  --padding-xs: 0.5rem;
  --padding-s: 1rem;
  --padding-m: 1.5rem;
  --padding-l: 2rem;
}

/* 全局样式 */
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: #000000; /* 直接使用黑色值，确保背景是黑色 */
  color: var(--color-text);
  font-weight: var(--font-light);
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

body.loaded {
  opacity: 1;
  overflow-y: auto;
}

/* 页面淡入状态 */
body.page-visible {
  opacity: 1;
}

/* 页面跳转淡出 */
body.page-exit {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* 应用包装器 */
.app-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 视图组件 */
.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.view.active {
  opacity: 1;
  transform: scale(1);
}

/* 隐藏图片数据容器 */
.image-data {
  display: none;
}

/* 容器 */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--spacing-medium);
}

/* 超大标题 */
.mega-title {
  font-size: 12vw;
  font-weight: var(--font-ultra);
  line-height: 0.9;
  text-transform: uppercase;
}

/* 微小文本 */
.micro-text {
  font-size: 0.75rem;
  font-weight: var(--font-light);
  letter-spacing: 1px;
  max-width: 50ch;
}

/* 红色强调 */
.accent {
  color: var(--red);
}

/* 作品网格 - 更新为平铺布局 */
.works-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding-top: 120px; /* 为中间的导航留出空间 */
  padding-bottom: 50px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
}

.works-grid .work-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.work-item:hover img {
  transform: scale(1.05);
}

.work-number {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  pointer-events: none;
}

/* 关于页 */
.bio-container {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-xxlarge);
  margin-bottom: var(--spacing-xxlarge);
  align-items: flex-start;
}

.bio-text {
  width: 50%;
}

.bio-text-column {
  column-count: 2;
  column-gap: var(--spacing-large);
}

/* 联系页 */
.contact-info {
  margin-top: var(--spacing-xxlarge);
  margin-bottom: var(--spacing-xxlarge);
  text-align: center;
}

.contact-form {
  max-width: 500px;
  margin: 0 auto;
}

/* 媒体查询 */
@media (max-width: 1200px) {
  .works-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
    padding-top: 150px;
  }
  
  .bio-container {
    flex-direction: column;
  }
  
  .bio-text {
    width: 100%;
  }
  
  .bio-text-column {
    column-count: 1;
  }
}

@media (max-width: 480px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 180px;
  }
  
  .mega-title {
    font-size: 18vw;
  }
}