/* ============================================
   Caleb 个人网站 - 主样式文件
   基于《Her》电影风格的设计系统
   ============================================ */

/* CSS 变量定义 */
:root {
  /* 色彩系统 - 清晨霞光 */
  --color-morning-primary: #FFF5F5;
  --color-morning-secondary: #FFE4E1;
  --color-morning-accent: #FFDAB9;
  
  /* 色彩系统 - 夕阳余晖 */
  --color-sunset-primary: #FFD4A3;
  --color-sunset-secondary: #E6B8D4;
  --color-sunset-accent: #FFD700;
  
  /* 色彩系统 - 黄昏时刻 */
  --color-dusk-primary: #FF8C69;
  --color-dusk-secondary: #C77B9D;
  --color-dusk-accent: #4A5C8C;
  
  /* 色彩系统 - 深夜星空 */
  --color-night-primary: #2D1B4E;
  --color-night-secondary: #1A2840;
  --color-night-accent: #E8E8F0;
  
  /* 功能性色彩 */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-tertiary: rgba(255, 255, 255, 0.45);
  --text-disabled: rgba(255, 255, 255, 0.25);
  --border-color: rgba(255, 255, 255, 0.1);
  --hover-accent: rgba(255, 138, 105, 0.8);
  --hover-accent-solid: #FF8A69;
  
  /* 间距系统 (8px 基础单位) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  
  /* 圆角系统 */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  
  /* 字体系统 */
  --font-sans: 'Inter', 'Noto Sans SC', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  
  /* 字号层级 */
  --text-h1: 72px;
  --text-h2: 48px;
  --text-h3: 32px;
  --text-h4: 24px;
  --text-body-l: 18px;
  --text-body-m: 16px;
  --text-caption: 14px;
  --text-label: 12px;
  
  /* 动画时间 */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  
  /* 缓动函数 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  
  /* 布局尺寸 */
  --sidebar-width: 88px;
  --nav-dots-width: 60px;
}

/* 重置样式 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background: var(--color-night-primary);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent; /* 让场景背景可见 */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   双层景深背景系统 - "呼吸的空间"
   相机景深诗意切换效果
   （现已整合到场景系统中）
   ============================================ */
.depth-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-layer {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 远景聚焦层 - 窗外树木天空清晰 */
.bg-layer-far {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* 近景聚焦层 - 室内窗帘细节清晰 */
.bg-layer-near {
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* 景深切换状态 - 鼠标在Tab丝带上时 */
.depth-background.depth-far .bg-layer-far {
  opacity: 1;
}

.depth-background.depth-far .bg-layer-near {
  opacity: 0;
}

/* 背景层 - 用于非Home/About页面 */
.background-layer {
  position: fixed;
  inset: 0;
  z-index: -1; /* 放在底层 */
  overflow: hidden;
  transition: opacity 0.6s ease;
}

/* Home页和About页时隐藏渐变背景，显示场景背景 */
.background-layer.home-active {
  opacity: 0;
  pointer-events: none;
}

.gradient-mesh {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, var(--color-morning-primary) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--color-morning-accent) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--color-morning-secondary) 0%, transparent 70%),
    linear-gradient(135deg, var(--color-night-primary) 0%, var(--color-dusk-accent) 50%, var(--color-sunset-primary) 100%);
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.film-grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 主容器布局 */
.app-container {
  display: flex;
  min-height: 100vh;
  position: relative;
  background: transparent; /* 确保背景透明 */
}

/* 主内容区域 - 动态缩放设计 */
.main-content {
  flex: 1;
  margin-left: 38vw; /* 配合40%的Tab栏，留一点重叠 */
  margin-right: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  scroll-snap-type: y mandatory;
  /* 动态缩放 */
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: right center;
  background: transparent; /* 确保背景透明 */
}

/* Works页面时，主内容区域不阻挡点击，让背景文件夹可交互 */
.main-content.passthrough {
  pointer-events: none;
}

/* 当侧边栏悬浮时，主内容轻微缩小（仅在宽版模式） */
.sidebar:not(.narrow):hover ~ .main-content,
.app-container:has(.sidebar:not(.narrow):hover) .main-content {
  margin-left: 43vw;
  transform: scale(0.96);
  opacity: 0.85;
}

/* 当主内容悬浮时，主内容放大，侧边栏收缩（仅在宽版模式） */
.app-container:has(.sidebar:not(.narrow)) .main-content:hover {
  transform: scale(1.02);
  margin-left: 32vw;
}

/* ============================================
   窄版Tab栏时的主内容区域适配 (1/15宽度)
   ============================================ */
.app-container:has(.sidebar.narrow) .main-content {
  margin-left: 6.67vw;
  min-margin-left: 80px;
}

/* 窄版时禁止悬浮变化 */
.app-container:has(.sidebar.narrow:hover) .main-content {
  margin-left: 6.67vw;
}

/* 配合主内容悬浮时的侧边栏效果（通过JS控制） */
.sidebar.shrink {
  width: 32vw;
  opacity: 0.7;
}

/* 页面区块 */
.page-section {
  min-height: 100vh;
  padding: var(--space-xl);
  padding-left: var(--space-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
  scroll-snap-align: start;
}

.page-section.active {
  opacity: 1;
  transform: translateY(0);
}

/* 区块容器 */
.section-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 区块标题 */
.section-title {
  font-size: var(--text-h2);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2xl);
  color: var(--text-primary);
}

/* 二级导航 */
.sub-nav {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.sub-nav-item {
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-body-m);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
}

.sub-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.sub-nav-item.active {
  background: rgba(255, 138, 105, 0.2);
  border-color: rgba(255, 138, 105, 0.4);
  color: var(--text-primary);
}

/* 子区块 */
.subsection {
  display: none;
  animation: fadeIn var(--duration-slow) var(--ease-standard);
}

.subsection.active {
  display: block;
}

.subsection-title {
  font-size: var(--text-h4);
  font-weight: 400;
  margin-bottom: var(--space-xl);
  color: var(--text-secondary);
}

/* 标签 */
.tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* 链接样式 */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-standard);
}

a:hover {
  color: var(--hover-accent-solid);
}

/* 按钮基础样式 */
button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--hover-accent-solid);
  outline-offset: 4px;
}

/* 图片样式 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 选择文本样式 */
::selection {
  background: rgba(255, 138, 105, 0.3);
  color: var(--text-primary);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 基础动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}