/* Butterfly 主题顶部图片视差滚动优化 */

/* ========== 电脑端 - 启用视差效果 ========== */
@media screen and (min-width: 768px) {

  /* 所有页面的通用设置 */
  #page-header {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* 核心：启用视差滚动效果 */
    background-attachment: fixed !important;
    /* 添加过渡效果，让滚动更平滑 */
    transition: all 0.3s ease;
  }

  /* 归档页 */
  #archive #page-header {
    height: 800px !important;
  }

  /* 标签总览页 */
  #page.tags #page-header {
    height: 800px !important;
  }

  /* 分类总览页 */
  #page.categories #page-header {
    height: 800px !important;
  }

  /* 音乐页 */
  #page.music #page-header {
    height: 800px !important;
  }

  /* 视频页 */
  #page.movies #page-header {
    height: 800px !important;
  }

  /* 标签详情页 */
  #page.tag #page-header {
    height: 800px !important;
  }

  /* 分类详情页 */
  #page.category #page-header {
    height: 800px !important;
  }

  /* 文章详情页 */
  #post #page-header {
    height: 800px !important;
  }

  /* 关于页面 */
  #page.about #page-header {
    height: 800px !important;
  }

  /* ========== 文章页标题和元信息定位到左下角 ========== */
  #page-header.post-bg #post-info {
    position: absolute !important;
    top: auto !important;
    bottom: 50px !important;
    left: 40px !important;
    right: auto !important;
    width: auto !important;
    max-width: 80% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10 !important;
  }

  #page-header.post-bg #post-info > * {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    text-align: left !important;
  }

  #page-header.post-bg #post-info .post-title {
    text-align: left !important;
    font-size: 2.2em !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-header.post-bg #post-info #post-meta {
    text-align: left !important;
    font-size: 0.95em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-header.post-bg #post-info #post-meta .meta-firstline,
  #page-header.post-bg #post-info #post-meta .meta-secondline {
    display: inline-block !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

/* ========== 超大屏幕优化 ========== */
@media screen and (min-width: 1920px) {
  #page-header {
    background-size: cover !important;
    background-position: center 30% !important;
    background-attachment: fixed !important;
    min-height: 800px !important;
  }

  /* 超大屏幕调整文章标题位置 */
  #page-header.post-bg #post-info {
    bottom: 80px !important;
    left: 80px !important;
  }

  #page-header.post-bg #post-info .post-title {
    font-size: 2.5em !important;
  }
}

/* ========== 移动端 - 禁用视差（性能优化）========== */
@media screen and (max-width: 767px) {
  #page-header {
    height: auto !important;
    min-height: 300px !important;
    background-size: cover !important;
    background-position: center center !important;
    /* 移动端使用 scroll 而非 fixed，避免卡顿 */
    background-attachment: scroll !important;
  }

  /* 移动端文章标题和元信息也放在左下角 */
  #page-header.post-bg #post-info {
    position: absolute !important;
    top: auto !important;
    bottom: 20px !important;
    left: 15px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 30px) !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10 !important;
  }

  #page-header.post-bg #post-info > * {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    text-align: left !important;
  }

  #page-header.post-bg #post-info .post-title {
    text-align: left !important;
    font-size: 1.8em !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-header.post-bg #post-info #post-meta {
    text-align: left !important;
    font-size: 0.85em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-header.post-bg #post-info #post-meta .meta-firstline,
  #page-header.post-bg #post-info #post-meta .meta-secondline {
    display: block !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

/* ========== 调整遮罩层，确保文字清晰 ========== */
#page-header::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 100%
  ) !important;
}