/* 定义CSS变量，方便统一修改 */
:root {
  --trans-light: rgba(255, 255, 255, 0.6); /* 白天模式带透明度的背景色 */
  --trans-dark: rgba(25, 25, 25, 0.0); /* 夜间模式带透明度的背景色 */
  --border-style: 1px solid rgb(169, 169, 169); /* 边框样式 */
  --backdrop-filter: blur(15px) saturate(150%); /* 背景过滤器，实现亚克力效果 */
}

/* 鼠标样式 */
#cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  /* 这里改变跟随的底色 */
  background: rgb(57, 197, 187);
  border-radius: 8px;
  opacity: 0.25;
  z-index: 10086;
  pointer-events: none;
  transition: 0.2s ease-in-out;
  transition-property: background, opacity, transform;
}
  
#cursor.hidden {
  opacity: 0;
}
  
#cursor.hover {
  opacity: 0.1;
  transform: scale(2.5);
  -webkit-transform: scale(2.5);
  -moz-transform: scale(2.5);
  -ms-transform: scale(2.5);
  -o-transform: scale(2.5);
}
  
#cursor.active {
  opacity: 0.5;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
}

/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
/* #page-header {
  background: transparent !important;
} */

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
/* #page-header::before {
  background: transparent !important;
} */

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
/* [data-theme="dark"] #page-header::before {
  background: transparent !important;
} */

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: 'ZZZ';
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(/font/zzz.ttf);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}

/* 导航栏魔改 */
/* 一级菜单居中 */
#nav .menus_items {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 子菜单横向展示 */
#nav .menus_items .menus_item:hover .menus_item_child {
  display: flex !important;
}

/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(5) .menus_item_child {
  left: -38px;
}

/* 黑夜霓虹灯 */
/* 夜间模式菜单栏发光字 */
[data-theme="dark"] #nav .site-page,
[data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a {
  text-shadow: 0 0 2px rgb(179, 71, 241) !important;
}

/* 手机端适配 */
[data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
  text-shadow: 0 0 2px rgb(179, 71, 241) !important;
}

/* Butterfly 个人卡片：从左下到右上自然流动的渐变 */
:root{
  --card-pink: #FFADF7;
  --card-green: #B1FF96;
  --card-anim-duration: 15s; /* 更长的动画时间使流动更自然 */
  --card-text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

html[data-theme="dark"]{
  --card-pink: #203a43;
  --card-green: #2c5364;
  --card-anim-duration: 15s;
}

#aside-content .card-widget.card-info{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  
  /* 使用多层渐变创造更丰富的效果 */
  background: 
    linear-gradient(135deg, var(--card-pink), transparent 70%),
    linear-gradient(225deg, var(--card-green), transparent 70%),
    linear-gradient(315deg, var(--card-pink), transparent 70%),
    linear-gradient(45deg, var(--card-green), transparent 70%);
  
  background-size: 400% 400%;
  animation: cardFlow var(--card-anim-duration) ease-in-out infinite;
  
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  will-change: background-position;
}

/* 柔光层提升质感 */
#aside-content .card-widget.card-info::before{
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at left bottom, rgba(255,255,255,.4) 0%, transparent 60%),
    radial-gradient(ellipse at right top, rgba(255,255,255,.2) 0%, transparent 40%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* 悬停微动效 */
#aside-content .card-widget.card-info:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

/* 卡片内文字样式 */
#aside-content .card-widget.card-info,
#aside-content .card-widget.card-info a,
#aside-content .card-widget.card-info .author-info__name,
#aside-content .card-widget.card-info .author-name,
#aside-content .card-widget.card-info .info,
#aside-content .card-widget.card-info .item-headline{
  color: #fff !important;
  text-shadow: var(--card-text-shadow);
}

/* 头像样式 */
/* #aside-content .card-widget.card-info .avatar-img img,
#aside-content .card-widget.card-info .avatar-img,
#aside-content .card-widget.card-info .author-avatar img,
#aside-content .card-widget.card-info .author-avatar{
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
} */

/* 关键帧动画 - 更复杂的流动效果 */
@keyframes cardFlow{
  0% {
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
  }
  25% {
    background-position: 50% 50%, 50% 50%, 100% 0%, 0% 100%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 50% 50%, 50% 50%;
  }
  75% {
    background-position: 50% 50%, 100% 0%, 0% 100%, 50% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
  }
}

/* 添加一个额外的伪元素来增强流动感 */
#aside-content .card-widget.card-info::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    transparent 0%, 
    rgba(255,255,255,.1) 50%, 
    transparent 100%);
  animation: shineEffect calc(var(--card-anim-duration) * 2) ease-in-out infinite;
  pointer-events: none;
}

@keyframes shineEffect{
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* 页面样式调节 */
/* 通过CSS样式调节各个页面透明度、模糊度(亚克力效果)、圆角、边框样式等 */

/* 首页文章卡片样式 */
#recent-posts > .recent-post-item {
  background: var(--trans-light); /* 使用白天模式透明背景 */
  /* backdrop-filter: var(--backdrop-filter); /* 应用背景过滤器 */
  border-radius: 25px; /* 圆角大小 */
  border: var(--border-style); /* 边框样式 */
}

/* 首页侧栏卡片样式 */
#aside-content .card-widget {
  background: var(--trans-light); /* 使用白天模式透明背景 */
  /* backdrop-filter: var(--backdrop-filter); /* 应用背景过滤器 */
  border-radius: 18px; /* 圆角大小 */
  border: var(--border-style); /* 边框样式 */
}

/* 文章页、归档页、普通页面样式 */
div#post,
div#page,
div#archive {
  background: var(--trans-light); /* 使用白天模式透明背景 */
  /* backdrop-filter: var(--backdrop-filter); /* 应用背景过滤器 */
  border: var(--border-style); /* 边框样式 */
  border-radius: 20px; /* 圆角大小 */
}

/* 导航栏样式 */
#page-header .nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75); /* 导航栏背景色 */
  backdrop-filter: var(--backdrop-filter); /* 应用背景过滤器 */
}

/* 夜间模式导航栏样式 */
[data-theme="dark"] #page-header .nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important; /* 深色背景 */
}

/* 夜间模式遮罩 - 为各种元素应用夜间模式背景 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark); /* 使用夜间模式透明背景 */
}

/* 夜间模式页脚遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}

/* 阅读模式样式 - 侧栏卡片 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important; /* 柔和的绿色背景 */
}

/* 阅读模式样式 - 文章页面 */
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important; /* 柔和的绿色背景 */
}

/* 夜间模式下的阅读模式 - 侧栏卡片 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important; /* 深色背景 */
  color: #ffffff; /* 白色文字 */
}

/* 夜间模式下的阅读模式 - 文章页面 */
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important; /* 深色背景 */
  color: #ffffff; /* 白色文字 */
}

/* 菜单栏图标大小 */
svg.menu_icon {
  width: 1.28em;
  height: 1.28em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 社交图标大小 */
svg.social_icon {
  width: 1.28em;
  height: 1.28em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}

/* 控制风车转动方向 -1turn 为逆时针转动,1turn 为顺时针转动,相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}

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

/* 设置风车颜色 */
#content-inner .layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}

#content-inner .layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}

#content-inner .layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}

#content-inner .layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}

#content-inner .layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}

#content-inner .layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}

/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner .layout h1:hover, #content-inner .layout h2:hover, #content-inner .layout h3:hover, #content-inner .layout h4:hover, #content-inner .layout h5:hover, #content-inner .layout h6:hover {
  color: var(--theme-color);
}

#content-inner .layout h1:hover::before, #content-inner .layout h2:hover::before, #content-inner .layout h3:hover::before, #content-inner .layout h4:hover::before, #content-inner .layout h5:hover::before, #content-inner .layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

/* 加载条图像 */
.loading-img {
  background: url(https://avatars.githubusercontent.com/u/133108771?s=400&u=c8b7fd1b4107d2a1220665a3e4388c7eb0c2be29&v=4) no-repeat center center;
  background-size: cover;
}

/* 雪花特效 */
[data-theme="light"] #snow {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 雪花黑夜模式不显示 */
[data-theme="dark"] #snow {
  display: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-color);
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-moz-selection {
  color: #fff;
  background-color: var(--theme-color);
}