/* 首页头图加载 */
.pl-container {
  width: 100%;
  height: 100%;
  z-index: -2;
  position: fixed;
  overflow: hidden;
  will-change: transform; /* 添加性能优化 */
  animation: blur-to-clear 2s cubic-bezier(.62,.21,.25,1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62,.21,.25,1) 0s 1 both;
}
.pl-img {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s;
}

@keyframes blur-to-clear {
  0% {
    filter: blur(50px);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(1.5) translateZ(0);
    opacity: 0;
  }
  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.pl-visible {
  opacity: 1;
}

.pl-blur {
 /* 小图锯齿多，增加高斯模糊 */
  filter: blur(50px);
}

/* 页脚透明 */
#footer {
  background: transparent !important;
}

/* 头图透明 */
#page-header {
  background: transparent !important;
}
/* 底部透明 */
#footer-bar{
  background: transparent !important;
}

/* 更多透明 */
#category-bar{
  background: transparent !important;
  border: 2px dashed;
  border-image: linear-gradient(135deg, rgba(255,0,0,0.5), rgba(0,255,0,0.5), rgba(0,0,255,0.5));
  border-image-slice: 1;
}

#footer-animal {
  position: relative;
  width: 100%;
}

#footer-animal .animal-wall {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 36px;
  max-width: none;
  background: #bcb0a4 url(https://p.qjqq.cn/cover/202410191400532.png/color) repeat center;
  background-size: auto 100%;
  box-shadow: 0 4px 7px rgba(0,0,0,.15);
}

@media screen and (max-width: 1023px) {
  #footer-animal .animal-wall {
      height:4vw
  }
}

#footer-animal img.animal {
  position: relative;
  max-width: min(974px,100vw);
  margin: 0 auto;
  display: block;
}

/* 卡片美化样式 */
.card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(255,0,0,0.8), rgba(0,255,0,0.8), rgba(0,0,255,0.8));
  border-image-slice: 1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 24px;
  margin-bottom: 24px;
}

.card:hover {
  transform: translateY(-10px) rotate3d(1, 1, 0, 15deg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
  border-image: linear-gradient(135deg, rgba(255,0,0,1), rgba(0,255,0,1), rgba(0,0,255,1));
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--anzhiyu-fontcolor);
}

.card-content {
  line-height: 1.6;
  color: var(--anzhiyu-fontcolor);
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  background: linear-gradient(90deg, var(--anzhiyu-fontcolor), #666);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: all 0.4s ease;
}

.text-glow {
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6;
  }
}

#footer-bar {
  margin-top: 0 !important;
}

/* 日历卡片样式 */
.card-widget.calendar {
  position: relative;
  min-height: 400px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(255,0,0,0.8), rgba(0,255,0,0.8), rgba(0,0,255,0.8));
  border-image-slice: 1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 18px;
  margin-bottom: 24px;
  overflow: visible !important;
}

/* 修复日历内容显示问题 */
.card-widget.calendar .item-headline {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--anzhiyu-fontcolor);
  text-align: center;
  position: relative;
  z-index: 10;
}

.card-widget.calendar .item-headline i {
  margin-right: 8px;
  color: #4169e1;
}

/* 确保日历容器正确显示 */
.calendar-container {
  display: flex !important;
  width: 100% !important;
  height: calc(100% - 40px) !important;
  position: relative !important;
  z-index: 5;
}

/* Remove duplicate styles for calendar-solar/lunar */
/* Delete these duplicate declarations completely */
#calendar-solar, #calendar-lunar {
  margin: 2px 0 !important; /* 减小垂直间距 */
  padding: 6px 5px !important;
}

/* --- Comprehensive Calendar Layout Fix --- */
/* Remove all duplicate style declarations and fix spacing */

/* Reset conflicting styles for calendar elements */
#calendar-area-left {
  width: 42% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* Align from top */
  align-items: center !important;
  padding: 40px 5px !important; /* Significantly increase padding */
  position: relative !important;
  z-index: 6;
  gap: 40px !important; /* Much larger gap to prevent overlap during animation */
}

/* Optimize date display */
#calendar-date {
  margin: 0 !important;
  padding: 10px 20px !important; /* Larger padding */
  font-size: 36px !important; /* Slightly smaller font */
  font-weight: 600 !important;
  color: #4169e1 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  min-width: 100px !important;
  text-align: center !important;
}

/* Optimize solar date display */
#calendar-solar {
  margin: 0 !important;
  padding: 15px !important; /* Larger padding */
  width: 85% !important;
  min-height: 60px !important; /* Taller to fit content */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  border-radius: 10px !important;
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.8 !important;
}

/* Optimize solar date text */
#calendar-solar span {
  display: inline-block !important;
  margin: 3px !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  background: rgba(65, 105, 225, 0.15) !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

/* Adjust floating animation to be more subtle */
#calendar-date, #calendar-solar {
  animation: float-element-subtle 5s ease-in-out infinite alternate !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  perspective: 800px !important;
}

/* Different timing for second element */
#calendar-solar {
  animation-delay: 2s !important;
  animation-duration: 6s !important;
}

/* More subtle floating animation */
@keyframes float-element-subtle {
  0% {
    transform: translateY(0) rotate3d(1, 1, 0, 0deg);
  }
  100% {
    transform: translateY(-8px) rotate3d(1, 1, 0, 2deg);
  }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  #calendar-area-left {
    padding: 30px 3px !important;
    gap: 30px !important;
  }
  
  #calendar-date {
    font-size: 32px !important;
    padding: 8px 15px !important;
  }
  
  #calendar-solar {
    min-height: 50px !important;
    padding: 10px !important;
    width: 90% !important;
  }
  
  #calendar-solar span {
    font-size: 0.8rem !important;
    padding: 2px 4px !important;
    margin: 2px !important;
  }
}

/* 调整星期显示间距 */
#calendar-solar, #calendar-lunar {
  margin: 2px 0 !important; /* 减小垂直间距 */
  padding: 6px 5px !important;
}

/* --- Lunar Calendar & Related Information --- */
/* This completely hides the lunar calendar section and any related elements */
#calendar-lunar,
.lunar-info,
[id*="lunar-"],
[class*="lunar-"],
#calendar-main [data-lunar],
.calendar-d span.lunar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  z-index: -999 !important;
  opacity: 0 !important;
}

/* Adjust spacing to compensate for hidden lunar elements */
#calendar-solar {
  margin-bottom: 8px !important; /* Increase bottom margin to fill the gap */
}

#calendar-area-left {
  justify-content: space-around !important; /* Better vertical spacing distribution */
}

/* --- 重新添加日历主体样式 --- */
#calendar-main {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  gap: 3px !important;
  position: relative !important;
  z-index: 7 !important;
  padding: 5px !important;
}

/* 日历行 */
#calendar-main .calendar-rh,
#calendar-main .calendar-r0,
#calendar-main .calendar-r1,
#calendar-main .calendar-r2,
#calendar-main .calendar-r3,
#calendar-main .calendar-r4,
#calendar-main .calendar-r5 {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 4px !important;
  position: relative !important;
  z-index: 8 !important;
}

/* 日历头部行 (星期几) */
#calendar-main .calendar-rh {
  background: rgba(65, 105, 225, 0.2) !important;
  border-radius: 8px !important;
  padding: 5px 0 !important;
  margin-bottom: 8px !important;
}

#calendar-main .calendar-rh div {
  color: #4169e1 !important;
  font-weight: bold !important;
  font-size: 0.9rem !important;
  flex: 1 !important; /* 确保星期几均匀分布 */
  text-align: center !important; /* 居中显示 */
}

/* 日历单元格 (日期容器) */
#calendar-main .calendar-d0,
#calendar-main .calendar-d1,
#calendar-main .calendar-d2,
#calendar-main .calendar-d3,
#calendar-main .calendar-d4,
#calendar-main .calendar-d5,
#calendar-main .calendar-d6 {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  z-index: 9 !important;
  height: 30px !important; /* 设定固定高度 */
}

/* 日历日期链接 */
#calendar-main a {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
  color: var(--anzhiyu-fontcolor) !important;
  font-size: 0.9rem !important;
  position: relative !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  margin: 0 auto !important;
  text-decoration: none !important; /* 去除下划线 */
}

/* 空日期样式 */
#calendar-main a:empty {
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* 当前日期样式 */
#calendar-main a.now {
  background: #4169e1 !important;
  color: white !important;
  font-weight: bold !important;
  box-shadow: 0 0 10px rgba(65, 105, 225, 0.5) !important;
  animation: pulse 2s infinite !important;
}

/* 日期悬停效果 */
#calendar-main a:not(:empty):hover {
  background: rgba(65, 105, 225, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

/* 添加日历有文章的日期标记 */
#calendar-main a.haspost {
  position: relative !important;
}

#calendar-main a.haspost::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  background: #ff7070 !important;
  border-radius: 50% !important;
  animation: glow-dot 1.5s ease-in-out infinite alternate !important;
}
/* --- 日历主体样式结束 --- */

/* 移动端适配调整 */
@media screen and (max-width: 768px) {
  .card-widget.calendar {
    min-height: 380px !important;
  }
  
  #calendar-area-left {
    padding: 10px 3px 5px 3px !important; /* 调整移动端内边距 */
    gap: 3px !important;
  }
  
  #calendar-area-right {
    width: 60% !important;
    padding: 2px !important;
  }
  
  #calendar-date {
    font-size: 30px !important;
    margin-bottom: 3px !important;
  }
  
  #calendar-week {
    margin-bottom: 3px !important;
    padding: 4px 0 !important;
  }
  
  #calendar-solar, #calendar-lunar {
    margin: 1px 0 !important;
    padding: 4px 3px !important;
  }
  
  #calendar-lunar {
    padding: 3px !important;
    gap: 1px !important;
  }
  
  #calendar-main a {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.8rem !important;
  }
  
  .card-widget.calendar {
    min-height: 360px !important;
  }

  /* 调整日历主体在移动端的样式 */
  #calendar-main {
    padding: 3px !important;
    gap: 2px !important;
  }

  #calendar-main .calendar-rh {
    padding: 4px 0 !important;
    margin-bottom: 5px !important;
  }

  #calendar-main .calendar-rh div {
    font-size: 0.8rem !important;
  }

  #calendar-main .calendar-d0,
  #calendar-main .calendar-d1,
  #calendar-main .calendar-d2,
  #calendar-main .calendar-d3,
  #calendar-main .calendar-d4,
  #calendar-main .calendar-d5,
  #calendar-main .calendar-d6 {
    height: 26px !important; /* 调整移动端高度 */
  }

  #calendar-main a {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.8rem !important;
  }

  #calendar-main a.haspost::after {
    width: 3px !important;
    height: 3px !important;
    bottom: 1px !important;
  }
}

/* 卡片悬停效果 */
.card-widget.calendar:hover {
  transform: translateY(-10px) rotate3d(1, 1, 0, 15deg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
  border-image: linear-gradient(135deg, rgba(255,0,0,1), rgba(0,255,0,1), rgba(0,0,255,1));
  border-image-slice: 1;
}

/* 添加日历底部阴影效果 */
.card-widget.calendar::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 5%;
  width: 90%;
  height: 15px;
  background: transparent;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-widget.calendar:hover::after {
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.4);
}

/* --- Calendar Floating Elements Animation --- */
/* Add floating animation to calendar elements */
#calendar-date, #calendar-solar {
  animation: float-element 4s ease-in-out infinite alternate !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  perspective: 800px !important;
}

/* Different timing for second element to create asynchronous movement */
#calendar-solar {
  animation-delay: 1s !important;
  animation-duration: 5s !important;
}

/* Add subtle shadow that moves with the floating elements */
#calendar-date::after, #calendar-solar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 10px !important;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%) !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  animation: shadow-move 4s ease-in-out infinite alternate !important;
}

/* Solar uses different timing for shadow too */
#calendar-solar::after {
  width: 70% !important;
  height: 8px !important;
  bottom: -8px !important;
  animation-delay: 1s !important;
  animation-duration: 5s !important;
}

/* Define the floating animation */
@keyframes float-element {
  0% {
    transform: translateY(0) rotate3d(1, 1, 0, 0deg);
  }
  25% {
    transform: translateY(-10px) rotate3d(1, 1, 0, 3deg);
  }
  50% {
    transform: translateY(-5px) rotate3d(1, 1, 0, -2deg);
  }
  75% {
    transform: translateY(-12px) rotate3d(1, 1, 0, 1deg);
  }
  100% {
    transform: translateY(-8px) rotate3d(1, 1, 0, -1deg);
  }
}

/* Shadow animation that follows the floating elements */
@keyframes shadow-move {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.2;
  }
  50% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.25;
  }
  75% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0.15;
  }
  100% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.2;
  }
}

/* Enhance calendar elements with 3D appearance */
#calendar-date, #calendar-solar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  border-radius: 10px !important;
  padding: 8px 15px !important;
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#calendar-date {
  color: #4169e1 !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  font-size: 38px !important;
}

/* Fix floating information in calendar */
#calendar-solar {
  position: relative !important;
  width: 90% !important; /* Make wider to accommodate more text */
  text-align: center !important;
  white-space: normal !important; /* Allow text to wrap */
  line-height: 1.6 !important; /* Increase line height for better readability */
  min-height: 50px !important; /* Ensure enough height for content */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 10px !important;
}

/* Make sure the solar info text fits properly */
#calendar-solar span {
  display: inline-block !important;
  margin: 2px !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: rgba(65, 105, 225, 0.1) !important;
  font-size: 0.9rem !important;
}

/* Additional positioning for the floating elements */
#calendar-area-left {
  position: relative !important;
  padding-top: 30px !important; /* Increase top padding */
  padding-bottom: 30px !important; /* Increase bottom padding */
}

/* Clean up duplicate styles */
#calendar-solar, #calendar-lunar {
  margin: 0 !important; /* Reset margins, use gap instead */
  padding: 8px 15px !important; /* Consistent padding */
}

/* Mobile adjustments for calendar elements */
@media screen and (max-width: 768px) {
  #calendar-solar {
    min-height: 40px !important;
    padding: 5px 10px !important;
    width: 95% !important;
  }
  
  #calendar-solar span {
    font-size: 0.8rem !important;
    padding: 1px 3px !important;
  }
  
  #calendar-area-left {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}