/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.5 可以自行修改*/
    background: rgba(255, 255, 255, .3);
}

/* 所有页面背景 */
#aside_content .card-widget,
#recent-posts>.recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
    /* 以下代表透明度为0.7 */
    background: rgba(255, 255, 255, .5);
}

/*侧边卡片的透明度 */
:root {
    --card-bg: rgba(255, 255, 255, 0.5) !important;
}

/* 暗色模式下的卡片透明度 */
[data-theme='dark'] {
    --card-bg: rgba(18, 18, 18, 0.5) !important;
}

/* 页脚透明 */
#footer {
    /* 以下代表透明度为0.1*/
    background: rgba(255, 255, 255, .1);
}


/* 整体背景渐变光幕 */
#loading-box {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #1a1a1a, #000);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity .8s ease;
}

#loading-box.loaded {
  opacity: 0;
  pointer-events: none;
}

/* 3D 旋转容器 */
.spinner-box {
  position: relative;
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
  animation: spin3D 3s linear infinite;
}

/* 立体方框 */
.cube-border {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 4px solid rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  border-radius: 12px;
  animation: pulseGlow 2s ease-in-out infinite;
}

/* 两个方框不同角度 */
.cube-1 {
  transform: rotateX(45deg) rotateY(45deg);
  border-color: #00eaff;
  box-shadow: 0 0 25px #00eaff;
}

.cube-2 {
  transform: rotateX(-45deg) rotateY(-45deg);
  border-color: #9f7aea;
  box-shadow: 0 0 25px #9f7aea;
}

/* 内部核心光点 */
.cube-core {
  position: absolute;
  inset: 40px;
  background: radial-gradient(circle, #fff, #00eaff);
  border-radius: 50%;
  box-shadow: 0 0 30px #00eaff;
  animation: corePulse 1.5s ease-in-out infinite;
}

/* 加载文字 */
.loading-word {
  position: absolute;
  bottom: -50px;
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #00eaff;
  text-shadow: 0 0 10px #00eaff, 0 0 20px #00eaff;
  animation: textBlink 1.5s infinite alternate;
}

/* 3D 旋转动画 */
@keyframes spin3D {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 发光脉冲 */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 15px rgba(0,255,255,0.6); }
  100% { box-shadow: 0 0 35px rgba(0,255,255,1); }
}

/* 核心光点呼吸 */
@keyframes corePulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* 文字闪烁 */
@keyframes textBlink {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}