/* ============================================================
 * 文章详情页正文美化
 * 移植自 hexo-theme-Fomalhaut/themes/butterfly/source/css/_custom/custom.css
 * 依赖：_config.butterfly.yml 的 beautify.enable: true（标题图标由主题输出）
 * 说明：作用域 #article-container（即文章正文 .post-content）
 * ============================================================ */

/* --- 1. 风车标题：H1-H6 图标旋转 + 分级配色 --- */

/* 旋转动画（风车） */
#article-container h1::before,
#article-container h2::before,
#article-container h3::before,
#article-container h4::before,
#article-container h5::before,
#article-container h6::before {
  -webkit-animation: post-ccc 4s linear infinite;
  animation: post-ccc 4s linear infinite;
}

@-webkit-keyframes post-ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}

@keyframes post-ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}

/* 分级配色（复刻 Fomalhaut） */
#article-container h1::before {
  color: #ef50a8;
}

#article-container h2::before {
  color: #fb7061;
}

#article-container h3::before {
  color: #ffbf00;
}

#article-container h4::before {
  color: #a9e000;
}

#article-container h5::before {
  color: #57c850;
}

#article-container h6::before {
  color: #5ec1e0;
}

/* hover：标题变主题色、图标加速旋转 */
#article-container h1:hover,
#article-container h2:hover,
#article-container h3:hover,
#article-container h4:hover,
#article-container h5:hover,
#article-container h6:hover {
  color: var(--default-bg-color) !important;
}

#article-container h1:hover::before,
#article-container h2:hover::before,
#article-container h3:hover::before,
#article-container h4:hover::before,
#article-container h5:hover::before,
#article-container h6:hover::before {
  color: var(--default-bg-color) !important;
  -webkit-animation: post-ccc 6s linear infinite;
  animation: post-ccc 6s linear infinite;
}

/* --- 2. 超链接卡片化 hover（参考 heo） --- */
#article-container a:not(.fancybox, .imgbox, .swf, .box, .pimgbox, .magnet_link, .gallery_link, .headerlink):hover {
  text-decoration: none;
  color: #fefefe;
  background: var(--text-bg-hover) !important;
  border-radius: 4px;
  box-shadow: 0 8px 12px -3px #4259ef23;
  padding: 2px;
  transition: all 0.3s ease-in-out;
}

/* --- 3. 代码框圆角 + 暗色模式边框 --- */
#article-container figure.highlight {
  border-radius: 10px;
}

[data-theme='dark'] #article-container figure.highlight {
  border: 0.5px solid #404040;
}

/* --- 4. 列表标记主题色 --- */
#article-container li::marker {
  color: var(--default-bg-color) !important;
}

/* --- 5. 引用块左边框主题色 --- */
#article-container blockquote {
  border-left: 3px solid var(--default-bg-color) !important;
}

/* --- 6. 时间线 / 标签页主题色 --- */
#article-container .timeline {
  border-left: 2px solid var(--default-bg-color);
}

#article-container .timeline .timeline-item:hover .item-circle::before {
  border-color: var(--default-bg-color);
}

#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle::before {
  border: 4px solid var(--default-bg-color);
}

#article-container .tabs > .nav-tabs > .tab.active button {
  border-top: 2px solid var(--default-bg-color) !important;
}

/* --- 7. B 站视频自适应容器 --- */
.aspect-ratio {
  position: relative;
  width: 90%;
  height: auto;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}