/**
 * 日式留白 · 留白内容渐入 核心框架样式库
 * Japanese Zen Whitespace ("Ma" 間) & Staggered Content Fade-In Engine
 */

:root {
  --zen-space-xs: 8px;
  --zen-space-sm: 16px;
  --zen-space-md: 32px;
  --zen-space-lg: 64px;
  --zen-space-xl: 108px;
  --zen-space-2xl: 148px;
  
  --zen-font-serif: "Noto Serif SC", "Source Han Serif SC", "Hiragino Mincho ProN", serif;
  --zen-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --zen-font-mono: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;

  --zen-easing-natural: cubic-bezier(0.16, 1, 0.3, 1);
  --zen-easing-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 留白网格容器 */
.zen-container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}

.zen-container-narrow {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* 留白垂直呼吸区 (Negative Space Intervals) */
.zen-section {
  position: relative;
  padding-top: var(--zen-space-xl);
  padding-bottom: var(--zen-space-xl);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .zen-section {
    padding-top: var(--zen-space-lg);
    padding-bottom: var(--zen-space-lg);
  }
}

/* 日式微排印徽标与禅意微标签 (Vertical & Minimalist Labels) */
.zen-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 117, 140, 0.08);
  border: 1px solid rgba(255, 117, 140, 0.22);
  color: #ff9bb0;
  backdrop-filter: blur(8px);
  margin-bottom: var(--zen-space-sm);
}

.zen-vertical-label {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--zen-font-serif);
  font-size: 12px;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.4);
  user-select: none;
}

/* 留白标题排印 */
.zen-header {
  margin-bottom: var(--zen-space-lg);
}

.zen-header.text-center {
  text-align: center;
}

.zen-title {
  font-family: var(--zen-font-sans);
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  color: #ffffff;
}

.zen-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.8;
  color: rgba(230, 235, 245, 0.75);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* 留白极简分割线 */
.zen-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 117, 140, 0.25), transparent);
  border: none;
  margin: var(--zen-space-lg) 0;
}

/* ==========================================================================
   日式留白内容渐入动画系统 (Fade-In Scroll Transitions)
   ========================================================================== */
.zen-fade {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s var(--zen-easing-natural), transform 0.85s var(--zen-easing-natural);
  will-change: opacity, transform;
}

.zen-fade-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.85s var(--zen-easing-natural), transform 0.85s var(--zen-easing-natural);
  will-change: opacity, transform;
}

.zen-fade-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.85s var(--zen-easing-natural), transform 0.85s var(--zen-easing-natural);
  will-change: opacity, transform;
}

.zen-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.85s var(--zen-easing-natural), transform 0.85s var(--zen-easing-natural);
  will-change: opacity, transform;
}

/* 渐入完成激活状态 */
.zen-fade.is-revealed,
.zen-fade-left.is-revealed,
.zen-fade-right.is-revealed,
.zen-scale.is-revealed {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* 错落错峰渐入延迟类 (Staggered Delays) */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }
.delay-5 { transition-delay: 0.60s; }
.delay-6 { transition-delay: 0.72s; }

/* 减少动画偏好支持 (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  .zen-fade,
  .zen-fade-left,
  .zen-fade-right,
  .zen-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}