/* Deep-space theme layer: page backdrops and specialized visual effects. */

/* Deep-space page backdrops. */
html[data-theme="dark"] body[data-page="home"] { --page-bg-overlay-left: linear-gradient(90deg, rgba(3, 4, 7, .60) 0%, rgba(3, 4, 7, .46) 44%, rgba(5, 6, 12, .34) 100%); --page-bg-overlay-bottom: linear-gradient(180deg, rgba(3, 4, 7, .16), rgba(3, 4, 7, .60) 92%); --page-bg-image: url('../images/backgrounds/astral-meteor-home.webp'); --page-bg-color: #030407; --page-bg-position: center top; }
html[data-theme="dark"] body[data-page="thinking"] { --page-bg-overlay-left: linear-gradient(90deg, rgba(3, 5, 11, .92) 0%, rgba(3, 5, 11, .82) 48%, rgba(3, 5, 11, .34) 100%); --page-bg-overlay-bottom: linear-gradient(180deg, rgba(3, 5, 11, .24), rgba(3, 5, 11, .88) 92%); --page-bg-image: url('../images/backgrounds/thinking-neural-nebula.webp'); --page-bg-color: #03050b; --page-bg-position: 72% top; }
html[data-theme="dark"] body[data-page="ai"] { --page-bg-overlay-left: linear-gradient(90deg, rgba(3, 7, 12, .92) 0%, rgba(3, 7, 12, .82) 48%, rgba(3, 7, 12, .34) 100%); --page-bg-overlay-bottom: linear-gradient(180deg, rgba(3, 7, 12, .24), rgba(3, 7, 12, .88) 92%); --page-bg-image: url('../images/backgrounds/ai-quantum-circuit.webp'); --page-bg-color: #03070c; --page-bg-position: 72% top; }
html[data-theme="dark"] body[data-page="money"] { --page-bg-overlay-left: linear-gradient(90deg, rgba(9, 5, 10, .92) 0%, rgba(9, 5, 10, .82) 48%, rgba(9, 5, 10, .34) 100%); --page-bg-overlay-bottom: linear-gradient(180deg, rgba(9, 5, 10, .24), rgba(9, 5, 10, .88) 92%); --page-bg-image: url('../images/backgrounds/money-astral-vault.webp'); --page-bg-color: #09050a; --page-bg-position: 72% top; }
html[data-theme="dark"] body[data-page="notes"], html[data-theme="dark"] body[data-page="notes-archive"] { --page-bg-overlay-left: linear-gradient(90deg, rgba(4, 5, 12, .92) 0%, rgba(4, 5, 12, .82) 48%, rgba(4, 5, 12, .34) 100%); --page-bg-overlay-bottom: linear-gradient(180deg, rgba(4, 5, 12, .24), rgba(4, 5, 12, .88) 92%); --page-bg-image: url('../images/backgrounds/notes-lunar-nebula.webp'); --page-bg-color: #04050c; --page-bg-position: 72% top; }
html[data-theme="dark"] body[data-page="about"] { --page-bg-overlay-left: linear-gradient(90deg, rgba(2, 5, 11, .94) 0%, rgba(2, 5, 11, .84) 48%, rgba(2, 5, 11, .35) 100%); --page-bg-overlay-bottom: linear-gradient(180deg, rgba(2, 5, 11, .18), rgba(2, 5, 11, .88) 92%); --page-bg-image: url('../images/backgrounds/about-holographic-archive.webp'); --page-bg-color: #02050b; --page-bg-position: 72% top; }
html[data-theme="dark"] body[data-page="home"], html[data-theme="dark"] body[data-page="thinking"], html[data-theme="dark"] body[data-page="ai"], html[data-theme="dark"] body[data-page="money"], html[data-theme="dark"] body[data-page="notes"], html[data-theme="dark"] body[data-page="notes-archive"], html[data-theme="dark"] body[data-page="about"] { background: var(--page-bg-overlay-left), var(--page-bg-overlay-bottom), var(--page-bg-image), var(--page-bg-color); background-attachment: fixed; background-size: auto, auto, cover; background-repeat: no-repeat; background-position: center top, center top, var(--page-bg-position); }
html[data-theme="dark"] body[data-page="home"]::before, html[data-theme="dark"] body[data-page="thinking"]::before, html[data-theme="dark"] body[data-page="ai"]::before, html[data-theme="dark"] body[data-page="money"]::before, html[data-theme="dark"] body[data-page="notes"]::before, html[data-theme="dark"] body[data-page="notes-archive"]::before, html[data-theme="dark"] body[data-page="about"]::before { background: none; animation: none; }

/* Homepage hologram cards: dark theme only. */
html[data-theme="dark"] body[data-page="home"] .theme-grid .theme-card, html[data-theme="dark"] body[data-page="home"] .post-list .post-card { isolation: isolate; border-color: rgba(125, 187, 255, .22); background: linear-gradient(135deg, rgba(49, 109, 164, .15), rgba(7, 9, 16, .9) 40%, rgba(97, 32, 76, .17)); box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(190, 230, 255, .1); }
html[data-theme="dark"] body[data-page="home"] .theme-title-row { display: flex; align-items: center; gap: 12px; min-height: 54px; }
html[data-theme="dark"] body[data-page="home"] .theme-title-row .theme-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; font-size: 1.42rem; }
html[data-theme="dark"] body[data-page="home"] .theme-title-row h3 { margin: 0; }
html[data-theme="dark"] body[data-page="home"] .theme-grid .theme-card > :not(.theme-visual), html[data-theme="dark"] body[data-page="home"] .post-list .post-card > :not(.post-card-aurora) { position: relative; z-index: 1; }
html[data-theme="dark"] body[data-page="home"] .theme-grid .theme-card::before { left: 9%; right: 9%; background: linear-gradient(90deg, transparent, rgba(121, 213, 255, .7), rgba(255, 135, 203, .68), transparent); }
html[data-theme="dark"] body[data-page="home"] .theme-grid .theme-card::after { content: ''; position: absolute; inset: -45% -15%; z-index: 0; pointer-events: none; background: linear-gradient(112deg, transparent 44%, rgba(254, 135, 201, .13) 50%, rgba(124, 211, 255, .09) 54%, transparent 61%); transform: translateX(-68%) rotate(4deg); transition: transform .65s ease; }
html[data-theme="dark"] body[data-page="home"] .theme-grid .theme-card:hover { transform: translateY(-3px); border-color: rgba(255, 176, 208, .52); box-shadow: 0 18px 42px rgba(0, 0, 0, .52), 0 0 20px rgba(103, 192, 255, .15), 0 0 28px rgba(255, 85, 143, .09); }
html[data-theme="dark"] body[data-page="home"] .theme-grid .theme-card:hover::after { transform: translateX(66%) rotate(4deg); }
html[data-theme="dark"] body[data-page="home"] .theme-grid [data-theme-card]:hover .theme-icon { transform: none; }
html[data-theme="dark"] body[data-page="home"] .theme-grid [data-theme-card]::after { transition: none; }
html[data-theme="dark"] body[data-page="home"] .theme-grid [data-theme-card]:hover::after { transform: translateX(-68%) rotate(4deg); }
html[data-theme="dark"] body[data-page="home"] .theme-visual, html[data-theme="dark"] body[data-page="home"] .post-card-aurora { position: absolute; z-index: 0; pointer-events: none; }
html[data-theme="dark"] body[data-page="home"] .theme-visual { width: 220px; height: 220px; right: -18px; top: -16px; overflow: visible; transform: perspective(440px) rotateX(8deg) rotateY(-10deg); transition: transform .35s ease, filter .35s ease; }
html[data-theme="dark"] body[data-page="home"] .theme-card:hover .theme-visual { transform: perspective(440px) rotateX(8deg) rotateY(-10deg) scale(1.035); filter: brightness(1.1); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="prism"] .theme-prism::before, html[data-theme="dark"] body[data-page="home"] [data-card-variant="crystal"] .theme-ai-crystal::before, html[data-theme="dark"] body[data-page="home"] [data-card-variant="matrix"] .theme-memory-matrix::before { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(149, 231, 255, .28); background: linear-gradient(135deg, rgba(255, 67, 190, .10), transparent 44%, rgba(84, 225, 255, .14)); box-shadow: inset 0 0 32px rgba(83, 213, 255, .10), 0 0 28px rgba(255, 74, 194, .12); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="prism"] .theme-prism::before { clip-path: polygon(50% 0, 91% 26%, 82% 81%, 50% 100%, 8% 75%, 14% 22%); animation: home-theme-prism-pulse 7s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="prism"] .theme-prism-solid { position: absolute; inset: 53px; clip-path: polygon(50% 0, 100% 76%, 22% 100%, 0 40%); background: linear-gradient(135deg, #ff62bf, #8026d2 48%, #48e6ff); box-shadow: 0 0 24px #f257bd; opacity: .75; animation: home-theme-prism-drift 8s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="prism"] .theme-prism-wire { position: absolute; inset: 37px; border: 1px solid rgba(255, 174, 227, .80); clip-path: polygon(50% 0, 100% 76%, 22% 100%, 0 40%); transform: translateZ(22px) rotate(18deg); animation: home-theme-prism-wire 6s linear infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="crystal"] .theme-ai-crystal::before { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); animation: home-theme-crystal-breathe 6s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="crystal"] .theme-ai-solid { position: absolute; inset: 51px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: radial-gradient(circle at 32% 25%, #e2ffff, #4cf3ed 18%, #087997 54%, transparent 70%); box-shadow: 0 0 30px rgba(63, 246, 234, .72); animation: home-theme-crystal-float 7s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="crystal"] .theme-ai-scan { position: absolute; left: 22px; right: 22px; top: 37px; height: 2px; background: #a8ffff; box-shadow: 0 0 14px #63f7ff; animation: home-theme-crystal-scan 4.8s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .theme-visual { transform: perspective(440px) rotateX(12deg) rotateY(-4deg); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"]:hover .theme-visual { transform: perspective(440px) rotateX(12deg) rotateY(-4deg) scale(1.035); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .theme-planet { position: absolute; width: 56px; height: 56px; left: 82px; top: 82px; border-radius: 50%; background: radial-gradient(circle at 30% 27%, #fff6ba 0 7%, #ffd75c 17%, #e28b11 47%, #6a270c 72%); box-shadow: 0 0 27px rgba(255, 188, 47, .72), inset -10px -8px 16px rgba(85, 27, 0, .52); animation: home-theme-planet-glow 5.5s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .theme-track { position: absolute; width: 190px; height: 76px; left: 15px; top: 72px; border: 1px solid rgba(255, 210, 94, .42); border-radius: 50%; box-shadow: 0 0 10px rgba(255, 211, 94, .16); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .track-one { transform: rotate(0deg); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .track-two { transform: rotate(60deg); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .track-three { transform: rotate(120deg); }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .theme-satellite { position: absolute; width: 11px; height: 11px; left: 0; top: 0; border-radius: 50%; offset-path: ellipse(95px 38px at 50% 50%); offset-rotate: 0deg; box-shadow: 0 0 12px currentColor; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .satellite-pink { color: #ff66c5; background: #ff66c5; animation: home-theme-satellite-pink 6.2s linear infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .satellite-cyan { color: #50f4ff; background: #50f4ff; animation: home-theme-satellite-cyan 7.4s linear infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .satellite-purple { color: #ba77ff; background: #ba77ff; animation: home-theme-satellite-purple 8.6s linear infinite; }
html[data-theme="dark"] body[data-page="home"] [data-card-variant="matrix"] .theme-memory-matrix::before { clip-path: polygon(8% 18%, 82% 2%, 99% 70%, 27% 99%); animation: home-theme-matrix-tilt 9s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] .theme-matrix-frame { position: absolute; inset: 39px; border: 1px solid rgba(206, 133, 255, .76); background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(195, 115, 255, .24) 17px 18px), repeating-linear-gradient(0deg, transparent 0 16px, rgba(124, 232, 255, .20) 17px 18px); transform: rotateX(58deg) rotateZ(-25deg); box-shadow: 0 0 23px rgba(180, 79, 255, .36); animation: home-theme-matrix-hum 6s ease-in-out infinite; }
html[data-theme="dark"] body[data-page="home"] .theme-matrix-trail { position: absolute; width: 115px; height: 115px; left: 53px; top: 50px; border: 1px solid rgba(128, 233, 255, .62); border-radius: 50%; border-left-color: transparent; transform: rotateX(67deg) rotateZ(24deg); animation: home-theme-matrix-orbit 7s linear infinite; }
html[data-theme="dark"] body[data-page="home"] .post-list .post-card { padding-left: 28px; }
html[data-theme="dark"] body[data-page="home"] .post-list .post-card::before { width: 2px; top: 14%; bottom: 14%; opacity: .8; background: linear-gradient(#5ecbff, #f79cd6 52%, #f5c96e); box-shadow: 0 0 12px rgba(97, 207, 255, .7); }
html[data-theme="dark"] body[data-page="home"] .post-card-aurora { width: 48%; height: 160%; right: -17%; top: -30%; background: linear-gradient(108deg, transparent 42%, rgba(82, 183, 255, .1) 49%, rgba(255, 116, 186, .1) 52%, transparent 59%); transform: translateX(82%) rotate(8deg); transition: transform .6s ease; }
html[data-theme="dark"] body[data-page="home"] .post-list .post-card:hover { transform: translateY(-4px); border-color: rgba(251, 176, 210, .42); box-shadow: 0 16px 38px rgba(0, 0, 0, .48), 0 0 22px rgba(92, 188, 255, .11); }
html[data-theme="dark"] body[data-page="home"] .post-list .post-card:hover .post-card-aurora { transform: translateX(-143%) rotate(8deg); }
html[data-theme="dark"] body[data-page="home"] .post-list .post-card:hover .post-title { color: #b8e9ff; }
@keyframes home-theme-prism-pulse { 50% { filter: brightness(1.25); transform: rotate(5deg) scale(1.03); } }
@keyframes home-theme-prism-drift { 50% { transform: translate3d(7px, -9px, 28px) rotate(10deg); filter: brightness(1.22); } }
@keyframes home-theme-prism-wire { to { transform: translateZ(22px) rotate(378deg); } }
@keyframes home-theme-crystal-breathe { 50% { transform: scale(1.05); filter: brightness(1.2); } }
@keyframes home-theme-crystal-float { 50% { transform: translate3d(-5px, -10px, 22px); } }
@keyframes home-theme-crystal-scan { 50% { transform: translateY(139px); opacity: .35; } }
@keyframes home-theme-planet-glow { 50% { transform: scale(1.06); filter: brightness(1.22); } }
@keyframes home-theme-satellite-pink { to { offset-distance: 100%; } }
@keyframes home-theme-satellite-cyan { to { offset-distance: 100%; } }
@keyframes home-theme-satellite-purple { to { offset-distance: 100%; } }
@keyframes home-theme-matrix-tilt { 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes home-theme-matrix-hum { 50% { filter: brightness(1.22); transform: rotateX(58deg) rotateZ(-25deg) translateZ(16px); } }
@keyframes home-theme-matrix-orbit { to { transform: rotateX(67deg) rotateZ(384deg); } }
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"] body[data-page="home"] .theme-visual, html[data-theme="dark"] body[data-page="home"] .theme-visual *, html[data-theme="dark"] body[data-page="home"] .theme-card:hover, html[data-theme="dark"] body[data-page="home"] .theme-card:hover .theme-visual { animation: none !important; transform: none; transition: none; } }
@media (max-width: 720px) { html[data-theme="dark"] body[data-page="home"] .theme-visual { width: 174px; height: 174px; right: -45px; top: 3px; transform: perspective(440px) rotateX(8deg) rotateY(-10deg) scale(.8); transform-origin: center; } html[data-theme="dark"] body[data-page="home"] .theme-card:hover .theme-visual { transform: perspective(440px) rotateX(8deg) rotateY(-10deg) scale(.828); } html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"] .theme-visual { transform: perspective(440px) rotateX(12deg) rotateY(-4deg) scale(.8); } html[data-theme="dark"] body[data-page="home"] [data-card-variant="orbit"]:hover .theme-visual { transform: perspective(440px) rotateX(12deg) rotateY(-4deg) scale(.828); } }
@media (max-width: 420px) { html[data-theme="dark"] body[data-page="home"] .theme-visual { display: none; } }


/* ===== 随笔归档：筛选与文章索引 ===== */
@media (max-width: 720px) {
  html[data-theme="dark"] body[data-page="home"], html[data-theme="dark"] body[data-page="thinking"], html[data-theme="dark"] body[data-page="ai"], html[data-theme="dark"] body[data-page="money"], html[data-theme="dark"] body[data-page="notes"], html[data-theme="dark"] body[data-page="notes-archive"], html[data-theme="dark"] body[data-page="about"] { background-attachment: scroll; --page-bg-position: 66% top; }
  html[data-theme="dark"] body[data-page="notes-archive"] { background-attachment: scroll; background-position: center top, center top, 66% top; }
}