/* left-content.css */

/* ====== 左侧主区整体 ====== */
.main-content {
  flex: 1;
  max-width: 840px;
  padding: 1.5rem 1.8rem;
  transition: all 0.3s ease;
}

/* ====== 主体布局间距（修复左右太宽） ====== */
.layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  padding-top: 20px;
  z-index: 1;
}

/* ====== 分类导航栏 ====== */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 0.8rem;
  margin-bottom: 1.8rem;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1),
              -6px -6px 12px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

body.dark-mode .category-nav {
  background: rgba(20,24,30,0.5); /* 半透明深色背景 */
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5),
              -6px -6px 12px rgba(255,255,255,0.05); /* 拟态阴影 */
  backdrop-filter: blur(10px); /* 玻璃虚化效果 */
  color: #e8eef8; /* 可选：文字颜色统一 */
}


.category-nav a {
  padding: 0.45rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

.category-nav a.active,
.category-nav a:hover {
  background: linear-gradient(135deg, #85ffbd, #fffb7d);
  color: #000;
}


/* ====== 文章卡片 ====== */
.post-card {
  display: flex;
  gap: 1.2rem;
  background: var(--card-bg, #fff);
  border-radius: 16px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1),
              -6px -6px 12px rgba(255, 255, 255, 0.15);
  padding: 1rem;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}

/* 左侧文章卡片暗色模式玻璃感 */
body.dark-mode .post-card {
  background: rgba(20,24,30,0.5); /* 半透明深色背景 */
  box-shadow: 6px 6px 12px rgba(0,0,0,0.5),
              -6px -6px 12px rgba(255,255,255,0.05);
  color: #e8eef8;
  backdrop-filter: blur(10px); /* 玻璃虚化效果 */
}

/* 鸿蒙轮播卡片暗色模式玻璃感 */
body.dark-mode .harmony-card {
  background: rgba(20,24,30,0.5);
  box-shadow: var(--shadow-1), var(--shadow-2);
  color: #e8eef8;
  backdrop-filter: blur(10px);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}

.post-cover img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

/* ====== 修复文章时间右对齐 ====== */
.post-content {
  flex: 1; /* 占满剩余空间 */
  display: flex;
  flex-direction: column;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #777;
  width: 100%;
}

.post-meta .category {
  flex-shrink: 0; /* 避免分类被压缩 */
}

.post-meta time {
  margin-left: auto;  /* 时间右对齐 */
  text-align: right;
  white-space: nowrap; /* 防止换行 */
}

/* ====== 文章标题与摘要 ====== */
.post-title {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.post-excerpt {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ====== 响应式调整 ====== */
@media (max-width: 768px) {
  .post-card {
    flex-direction: column;
  }

  .post-cover img {
    width: 100%;
    height: auto;
  }

  .post-meta {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .post-meta time {
    margin-left: 0;
    text-align: left;
  }
}





:root{
  --bg: #fbfbfd;
  --card-bg: rgba(255,255,255,0.9);
  --text: #0b1220;
  --muted: rgba(11,18,32,0.6);
  --glass: rgba(255,255,255,0.35);
  --accent-glow: rgba(120, 95, 255, 0.14);
  --shadow-1: 0 6px 20px rgba(10,14,25,0.12);
  --shadow-2: 0 12px 40px rgba(10,14,25,0.10);
  --card-radius: 20px;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b0f15;
    --card-bg: rgba(20,24,30,0.5);
    --text: #e8eef8;
    --muted: rgba(232,238,248,0.65);
    --glass: rgba(255,255,255,0.04);
    --accent-glow: rgba(120,95,255,0.12);
    --shadow-1: 0 10px 30px rgba(0,0,0,0.6);
    --shadow-2: 0 18px 60px rgba(0,0,0,0.5);
    --card-radius: 18px;
  }
}

/* 容器基础 */
.harmony-carousel {
  position: relative;
  width: 100%;
  height: 300px; /* 可按需调整高度 */
  margin: 1rem 0;
  perspective: 1400px;  /* 提供更真实的3D效果 */
  overflow: visible;
  background: linear-gradient(180deg, transparent, transparent);
}

/* 内层定位 */
.harmony-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  user-select: none;
}

/* 基本卡片样式（所有共用） */
/* ===== 修复卡片大小，防止溢出左侧内容区 ===== */
.harmony-card {
  position: absolute;
  top: 8px;
  left: 50%;

  /* 减小宽度到 40%，不会溢出左侧主内容区 */
  width: min(40%, 880px);
  max-width: 880px;

  /* 你手动改了 height，这里保留你的写法 */
  height: calc(85% - 16px);

  transform-origin: center center;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow-1), var(--shadow-2);
  transition: 
    transform .62s cubic-bezier(.22,.9,.3,1),
    opacity .5s ease,
    filter .5s ease,
    box-shadow .5s ease;
  will-change: transform, opacity, filter;
  display: flex;
  align-items: flex-end;
  color: var(--text);

  /* 让卡片能正常接收 pointer 事件，提高拖拽兼容 */
  pointer-events: auto;
  touch-action: none; 
}

/* 图片撑满 */
.harmony-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;

  /* 不要让图片拦截 pointerdown，否则无法拖动 */
  pointer-events: none;

  transform-origin: center;
}


/* 卡片信息遮罩（渐变） */
.harmony-card .info {
  position: relative;
  z-index: 6;
  width: 100%;
  padding: 18px 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  color: #fff;
}

/* 标题与摘要 */
.harmony-card .info h3{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  line-height: 1.1;
}
.harmony-card .info p{
  margin: 0;
  font-size: .85rem;
  color: rgba(255,255,255,0.9);
}

/* 光影浮层：在卡片上层添加柔和高光（鸿蒙风格） */
.harmony-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 30%, rgba(0,0,0,0.05));
  mix-blend-mode: overlay;
}

/* 卡片外围柔光 */
.harmony-card::after{
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 2;
  border-radius: calc(var(--card-radius) + 18px);
  background: radial-gradient(120px 40px at 20% 10%, var(--accent-glow), transparent 30%);
  opacity: 0.9;
  filter: blur(34px);
  transition: opacity .5s;
  pointer-events: none;
}

/* 非激活卡片透明化处理（超远处） */
.harmony-card.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 分层位置：center / left1 / right1 / left2 / right2 —— 通过JS添加类 */
.harmony-card.pos-center {
  transform: translateX(-50%) translateZ(120px) scale(1);
  opacity: 1;
  z-index: 50;
  filter: blur(0);
  box-shadow: 0 20px 60px rgba(10,12,30,0.28);
}
.harmony-card.pos-left1 {
  transform: translateX(calc(-50% - 160px)) translateZ(40px) rotateY(18deg) scale(0.86);
  opacity: .78;
  z-index: 40;
  filter: blur(2px);
}
.harmony-card.pos-right1 {
  transform: translateX(calc(-50% + 160px)) translateZ(40px) rotateY(-18deg) scale(0.86);
  opacity: .78;
  z-index: 40;
  filter: blur(2px);
}
.harmony-card.pos-left2 {
  transform: translateX(calc(-50% - 330px)) translateZ(-40px) rotateY(28deg) scale(0.72);
  opacity: .46;
  z-index: 30;
  filter: blur(6px);
}
.harmony-card.pos-right2 {
  transform: translateX(calc(-50% + 330px)) translateZ(-40px) rotateY(-28deg) scale(0.72);
  opacity: .46;
  z-index: 30;
  filter: blur(6px);
}

/* 点击时的手型提示 */
.harmony-card .tap-hint{
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 8;
  font-size: .8rem;
  background: rgba(0,0,0,0.28);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  opacity: .9;
  pointer-events: none;
}

/* 拖拽中样式（短暂提高性能） */
.harmony-card.dragging{
  transition: transform .12s linear;
  will-change: transform;
}

/* ====== 展开动画覆盖层（用于放大进入文章的系统级动画） ====== */
.harmony-overlay {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 2000;
  pointer-events: none;
}

/* clone-card 用于承载动画的 DOM */
.harmony-overlay .clone {
  position: absolute;
  border-radius: var(--card-radius);
  overflow: hidden;
  will-change: transform, width, height, left, top;
  background: var(--card-bg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  transition: transform .6s cubic-bezier(.22,.9,.3,1), width .45s ease, height .45s ease, left .45s ease, top .45s ease, border-radius .45s ease;
}

/* 展开后填充屏幕（视觉） */
.harmony-overlay.expanded .clone {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border-radius: 0 !important;
}

/* overlay 内容占位（可用于过渡加载） */
.harmony-overlay .clone .overlay-loading {
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  color: #fff; font-size:1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
  opacity: 0;
  transition: opacity .3s;
}
.harmony-overlay.expanded .clone .overlay-loading { opacity: 1; pointer-events:none; }

/* 响应式：窄屏时缩小侧边偏移 */
@media (max-width: 900px) {
  .harmony-card { width: 88%; left: 50%; }
  .harmony-card.pos-left1 { transform: translateX(calc(-50% - 110px)) translateZ(30px) rotateY(14deg) scale(0.88); }
  .harmony-card.pos-right1 { transform: translateX(calc(-50% + 110px)) translateZ(30px) rotateY(-14deg) scale(0.88); }
  .harmony-card.pos-left2 { transform: translateX(calc(-50% - 220px)) translateZ(-20px) rotateY(20deg) scale(0.78); }
  .harmony-card.pos-right2 { transform: translateX(calc(-50% + 220px)) translateZ(-20px) rotateY(-20deg) scale(0.78); }
}