/* =========================================
   Theme: Final Cut (最终剪辑版)
   ========================================= */

/* --- 0. 必须的基础环境 (修复全黑问题) --- */
html {
  background: #000 !important; /* 兜底黑 */
}
body {
  background: transparent !important; /* 身体透明，让背景图透出来 */
  color: #fff !important;
}
/* 隐藏主题自带背景容器，防止打架 */
#web_bg { display: none !important; }
/* 隐藏所有白色遮罩 */
#page-header::before, #footer::before { display: none !important; }


/* --- 1. 首页开场 (Hero) --- */
.page-type-home #page-header {
  height: 100vh !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#site-title {
  font-size: 5rem !important;
  font-weight: 800;
  letter-spacing: -2px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.8);
  margin: 0;
  padding: 0;
  /* 初始不隐藏，由 JS 控制透明度，防止闪烁 */
}
#site-subtitle { display: none !important; }


/* --- 2. 个人信息：【横向传记布局】(The Bio) --- */
/* 
   设计思路：
   电脑端：左头像 | 右文字。中间一条发光线。
   像电影里的角色介绍卡，而不是“盒子”。
*/

.page-type-home #aside-content {
  width: 100% !important;
  max-width: 1000px; /* 宽一点 */
  margin: 0 auto !important;
  padding: 10vh 20px !important;
  
  /* 动画初始状态 */
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* JS 激活状态 */
.page-type-home #aside-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* 隐藏杂项 */
.page-type-home .card-widget:not(.card-info) { display: none !important; }
.page-type-home .sticky_layout { display: none !important; }

/* 重构卡片容器 */
.page-type-home .card-widget.card-info {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  
  /* 启用 Flex 布局实现横向排列 */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 60px; /* 头像和文字的间距 */
}

/* 2.1 左侧：头像 (Portal Style) */
html body #aside-content .avatar-img {
  width: 100px !important; height: 100px !important;
  border-radius: 50% !important; margin: 0 !important;
  border: 4px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 0 0 10px rgba(255,255,255,0.05);
  overflow: hidden !important; margin: auto !important;
  
  /* ！！！核心：杀掉所有动画！！！ */
  animation: none !important; 
  transform: none !important; 
  transition: transform 0.5s !important;
}

/* 内部图片也不许动 */
html body #aside-content .avatar-img img {
  animation: none !important;
  transform: none !important; 
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}

/* 鼠标悬停：只放大，不旋转 */
html body #aside-content .avatar-img:hover {
  transform: scale(1.05) !important;
  border-color: rgba(255,255,255,0.8) !important;
}

/* 流光特效 */
html body #aside-content .avatar-img::before {
  content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-25deg); pointer-events: none;
}
html body #aside-content .avatar-img:hover::before {
  animation: sheenFlash 0.7s;
}
@keyframes sheenFlash { 0% { left: -150%; } 100% { left: 150%; } }



/* 2.2 右侧：文字信息区 */
/* 我们需要用伪类或 CSS 选择器来控制文字对齐 */
.page-type-home .card-info-social-icons,
.page-type-home .author-info__description,
.page-type-home .author-info__name {
  text-align: left !important; /* 强制左对齐 */
}

/* 名字：巨大化 */
.page-type-home .author-info__name {
  font-size: 3.5rem !important;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px !important;
  /* 文字渐变填充 */
  background: linear-gradient(45deg, #fff, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 描述：加上左边框装饰 */
.page-type-home .author-info__description {
  font-size: 1.1rem !important;
  color: #ccc !important;
  line-height: 1.8;
  border-left: 2px solid #444;
  padding-left: 20px;
  margin-bottom: 30px !important;
}

/* 社交图标：左对齐 */
.page-type-home .card-info-social-icons {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 30px;
}
.page-type-home .social-icon {
  color: #fff !important; font-size: 1.5rem; 
}

/* 隐藏不需要的数据 */
.page-type-home .card-info-data, .page-type-home #card-info-btn { display: none !important; }


/* --- 3. 文章列表 (Z型流光) --- */
.page-type-home .recent-posts {
  width: 100% !important;
  padding: 0 40px;
}

.recent-post-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  
  /* 极简磨砂条设计 */
  background: linear-gradient(90deg, rgba(0,0,0,0.6), transparent) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  padding: 80px 0 !important;
  margin-bottom: 0 !important;
  
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
.recent-post-item.active {
  opacity: 1;
  transform: translateY(0);
}
.recent-post-item:nth-child(even) {
  flex-direction: row-reverse !important;
  background: linear-gradient(-90deg, rgba(0,0,0,0.6), transparent) !important;
}

.post_cover {
  width: 50% !important; height: 350px !important;
  object-fit: cover;
  filter: grayscale(100%);
  transition: 0.5s;
}
.recent-post-item:hover .post_cover {
  filter: grayscale(0%);
}

.recent-post-info { width: 45% !important; padding: 0 40px; }
.recent-post-item:nth-child(even) .recent-post-info { text-align: right; }
.article-title { font-size: 2rem !important; color: #fff !important; margin-bottom: 20px; }
.article-meta-wrap { display: none !important; }


/* --- 4. 移动端适配 (重点修复) --- */
@media screen and (max-width: 768px) {
  /* 4.1 标题适配 */
  #site-title { font-size: 3rem !important; }
  
  /* 4.2 个人信息适配：强制改为竖排 */
  .page-type-home .card-widget.card-info {
    flex-direction: column !important;
    gap: 30px;
    text-align: center !important;
  }
  .page-type-home .avatar-img {
    width: 140px !important; height: 140px !important;
    margin: 0 auto !important;
  }
  /* 手机上文字居中 */
  .page-type-home .card-info-social-icons,
  .page-type-home .author-info__description,
  .page-type-home .author-info__name {
    text-align: center !important;
    justify-content: center !important;
  }
  .page-type-home .author-info__description {
    border-left: none;
    border-top: 2px solid #444;
    padding-top: 20px;
    padding-left: 0;
  }

  /* 4.3 文章列表适配 */
  .page-type-home .recent-posts { padding: 0 20px; }
  .recent-post-item, .recent-post-item:nth-child(even) {
    flex-direction: column !important;
    background: rgba(0,0,0,0.5) !important; /* 手机上给点背景色防止看不清 */
    border-radius: 20px !important;
    padding: 40px 20px !important;
    margin-bottom: 40px !important;
    border: none !important;
  }
  .post_cover { width: 100% !important; height: 200px !important; margin-bottom: 20px; }
  .recent-post-info, .recent-post-item:nth-child(even) .recent-post-info {
    width: 100% !important; text-align: left !important; padding: 0;
  }
}









#footer {
  /* 变成完全透明，让网页的大背景图透出来 */
  background: transparent !important;
  
  /* 如果觉得透明看不清字，可以用下面这一行代替上面那行，加一点点黑色磨砂 */
  /* background: rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(5px); */

  /* 去除原本的阴影和边框 */
  box-shadow: none !important;
  border: none !important;
  margin-top: 0 !important; /* 去掉顶部的间距，紧贴内容 */
}

/* 2. 关键：去除那个讨厌的蓝色/灰色遮罩层 */
/* 很多时候那个蓝色其实是伪元素 ::before 搞的鬼 */
#footer::before {
  background: transparent !important;
  display: none !important; /* 彻底隐藏 */
}

/* 3. 美化页脚的文字 */
#footer-wrap {
  color: rgba(255, 255, 255, 0.4) !important; /* 很淡的灰色，不抢眼 */
  font-family: -apple-system, sans-serif !important;
  font-size: 0.8rem !important; /* 字号改小一点，精致 */
  letter-spacing: 1px; /* 字间距拉开 */
}

/* 4. 美化页脚里的链接 (比如 Copyright John Doe) */
#footer-wrap a {
  color: rgba(255, 255, 255, 0.6) !important; /* 比普通字稍亮一点 */
  text-decoration: none !important;
  transition: all 0.3s;
}

/* 鼠标放上去时变亮 */
#footer-wrap a:hover {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* 5. 隐藏一些不需要的页脚信息 (可选) */
/* 如果你想隐藏“框架 Hexo”和“主题 Butterfly”这些字，只留年份和作者，就把下面这行注释取消掉 */
 
.footer-separator, 
.framework-info { 
  display: none !important; 
}