/* 三相灵境 · 背景叠层（crossfade）· 阅灵统一色谱 */

:root {
  --triad-paper-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  --triad-bg-duration: 0.85s;
  --triad-bg-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --yueling-gradient: linear-gradient(
    165deg,
    #4A90E2 0%,
    #7EB0EA 16%,
    #D8E6F8 34%,
    #F5F5F7 50%,
    #FFF5F7 68%,
    #FFD4DC 84%,
    #FFB6C1 100%
  );
}

/* triad 模式下禁用 body 伪元素背景，改由叠层承载 */
body[data-theme="triad"] {
  background: transparent !important;
}
body[data-theme="triad"]::before,
body[data-theme="triad"]::after {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

#triadBgStack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#triadBgStack[hidden] { display: none !important; }

.triad-bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--triad-bg-duration) var(--triad-bg-ease);
  will-change: opacity;
}
.triad-bg-layer.active { opacity: 1; }

/* 灵境 · 中心白底 + 深色彩晕 + 流动光环 */
.triad-bg-realm {
  background:
    radial-gradient(ellipse 52% 48% at 50% 46%, #FFFFFF 0%, #FFFFFF 40%, rgba(255, 255, 255, .75) 56%, transparent 74%),
    linear-gradient(165deg, #3A7BC8 0%, #5A9AE8 14%, #8EB8F0 28%, #C5D9F5 42%, #EEF2FA 58%, #FFE4EC 78%, #FFB6C1 100%);
}
.triad-bg-realm::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--triad-paper-texture);
  background-size: cover;
  opacity: .35;
  pointer-events: none;
}

/* 灵境 · 晕染光环（CSS 动画） */
.triad-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(52px);
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
}
.triad-halo-blue {
  width: min(62vw, 720px);
  height: min(62vw, 720px);
  top: -12%;
  left: -14%;
  background: radial-gradient(circle, rgba(58, 123, 200, .72) 0%, rgba(74, 144, 226, .35) 38%, transparent 72%);
  animation: yuelingHaloBlue 20s ease-in-out infinite;
}
.triad-halo-pink {
  width: min(58vw, 680px);
  height: min(58vw, 680px);
  bottom: -14%;
  right: -10%;
  background: radial-gradient(circle, rgba(255, 182, 193, .68) 0%, rgba(255, 160, 180, .32) 42%, transparent 70%);
  animation: yuelingHaloPink 24s ease-in-out infinite;
}
.triad-halo-veil {
  width: min(44vw, 520px);
  height: min(44vw, 520px);
  top: 28%;
  left: 48%;
  background: radial-gradient(circle, rgba(110, 165, 235, .55) 0%, rgba(180, 210, 250, .22) 45%, transparent 68%);
  animation: yuelingHaloVeil 17s ease-in-out infinite reverse;
}

@keyframes yuelingHaloBlue {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .72; }
  33% { transform: translate(6vw, 5vh) scale(1.1); opacity: .88; }
  66% { transform: translate(2vw, -4vh) scale(.94); opacity: .65; }
}
@keyframes yuelingHaloPink {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .68; }
  40% { transform: translate(-5vw, -6vh) scale(1.08); opacity: .82; }
  70% { transform: translate(-2vw, 3vh) scale(.96); opacity: .58; }
}
@keyframes yuelingHaloVeil {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; }
  50% { transform: translate(-8vw, 4vh) scale(1.12); opacity: .72; }
}

/* 对话 · 白底柔雾（弱化蓝边，居中暖白） */
.triad-bg-chat {
  background:
    radial-gradient(ellipse 76% 64% at 50% 14%, #FFFFFF 0%, rgba(255, 255, 255, .94) 30%, rgba(255, 252, 253, .62) 50%, transparent 72%),
    radial-gradient(ellipse 118% 92% at 50% 108%, rgba(255, 228, 236, .24) 0%, rgba(248, 242, 246, .1) 38%, transparent 66%),
    linear-gradient(180deg, #FAFBFE 0%, #FCFAFB 44%, #F6F3F7 100%);
}
.triad-bg-chat::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--triad-paper-texture);
  background-size: cover;
  opacity: .18;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .triad-halo { animation: none !important; opacity: .45; }
}

/* 书册 · 完整阅灵色谱 */
.triad-bg-bookshelf {
  background: var(--yueling-gradient);
}
.triad-bg-bookshelf::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--triad-paper-texture);
  background-size: cover;
  opacity: .5;
  pointer-events: none;
}

/* 记忆河 · 同款色谱（略偏蓝，便于与书册区分层次） */
.triad-bg-memory {
  background: linear-gradient(
    195deg,
    #3A7BC8 0%,
    #6BA3E8 18%,
    #D0E2F6 38%,
    #F5F5F7 54%,
    #FFF0F4 72%,
    #FFD4DC 88%,
    #FFB6C1 100%
  );
}
.triad-bg-memory .triad-bg-ocean {
  display: none;
}
.triad-bg-memory-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(74, 144, 226, .06) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, .08) 0%, rgba(255, 182, 193, .06) 100%);
  pointer-events: none;
}

/* 共频调谐（独立皮肤）仍保留海洋照片 */
body[data-theme="tuning"] {
  background: transparent !important;
}
body[data-theme="tuning"]::before,
body[data-theme="tuning"]::after {
  opacity: 0 !important;
  visibility: hidden;
}
#tuningBgStack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #1a1a1a;
}
body:not([data-theme="tuning"]) #tuningBgStack { display: none; }
#tuningBgStack .triad-bg-ocean { object-position: center 60%; }
#tuningBgStack .triad-bg-memory-veil {
  opacity: 1;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, .15) 100%),
    linear-gradient(to bottom, rgba(227, 222, 209, .2) 0%, rgba(140, 170, 164, .32) 50%, rgba(216, 200, 182, .38) 100%),
    rgba(60, 79, 68, .12);
}