/*
  Source code from Noctivision - noctivision.pages.dev
  已授权给 5a3b2c 使用及修改，仅限个人项目。
*/
/* 赞美伟大的noctivision!!! */
/* ==========================================================================
   1. 全局初始化与交互微调
   ========================================================================== */

* {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

* { 
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                backdrop-filter 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}

:root {
    font-family: Inter, sans-serif !important;
    font-feature-settings: 'liga' 1, 'calt' 1 !important;
}

html,
body {
    height: 100%;
    margin: 0;
    background: transparent;
    color: inherit;
}

html {
    background-color: rgb(0, 0, 0);
    color: #fff;
}

body {
    margin: 0;
    color: inherit;
    background: transparent;
    font-size: 20px !important;
    position: static !important;
}

/* ==========================================================================
   2. 主内容区域布局 (.story)
   ========================================================================== */

.story {
    max-width: 50vw;
    margin: 0 auto;
    padding-top: 5vh;
    padding-bottom: 5vh;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-align: left;
    word-break: break-word;
    color: var(--text-color);
    animation: textReveal 2.8s cubic-bezier(0.2, 0, 0.2, 1) forwards;
    will-change: opacity;
    box-shadow: 0 0 20px rgba(133, 78, 245, 0.2);
}

.story p {
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

.title-h1 {
    text-align: center;
    font-size: 1.8rem !important;
    margin-bottom: 2rem;
    font-weight: 600;
    color: #854ef5; /* 以此为基准色 */
    text-shadow: 0 0 20px rgba(133, 78, 245, 0.2);
}

.title-h2 {
    font-size: 1.6rem !important;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    color: #a78bfa;
    font-weight: 500;
    letter-spacing: 0.05rem;
}

.story hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 50vw !important; 
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important; 
    margin: 40px 0 !important; 
}

/* ==========================================================================
   3. 响应式布局：移动端适配
   ========================================================================== */

@media (max-width: 768px) {
    .story {
        max-width: 80vw;
        line-height: 1.7;
        font-size: 0.95rem;
    }

    .story p {
        font-size: 1.05rem;
    }

    .story hr {
        width: 80vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important; 
        left: 0;
        right: 0;
        display: block !important;
        border: 0; 
        border-top: 1px solid rgba(255, 255, 255, 0.4);
    }

    .blob-1, .blob-2, .blob-3 {
        width: 60vw;
        height: 60vw;
    }
}

/* ==========================================================================
   4. 环境氛围层 (Blobs)
   ========================================================================== */

.light-blobs-bg .blob {
    position: fixed;
    border-radius: 50%;
    opacity: 0;
    filter: blur(80px);
    mix-blend-mode: screen;
    z-index: 1000;
    will-change: transform, opacity;
}

.blob-1 {
    width: 100vh; height: 100vh;
    background: radial-gradient(circle, #884dff 0%, transparent 65%);
    top: -10%; left: -10%;
    animation: blobFloat1 40s infinite ease-in-out;
}

.blob-2 {
    width: 100vh; height: 100vh;
    background: radial-gradient(circle, #3d98ff 0%, transparent 65%);
    bottom: 10%; right: -5%;
    animation: blobFloat2 55s infinite ease-in-out -5s;
}

.blob-3 {
    width: 90vh; height: 90vh;
    background: radial-gradient(circle, #3ab1ed 0%, transparent 65%);
    top: 40%; left: 40%;
    animation: blobFloat3 70s infinite ease-in-out -10s;
}

/* ==========================================================================
   5. 动画逻辑定义
   ========================================================================== */

@keyframes blobFloat1 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.25; }
    25%  { transform: translate(60vw, 20vh) scale(1.4) rotate(90deg); opacity: 0.35; }
    50%  { transform: translate(30vw, 70vh) scale(0.8) rotate(180deg); opacity: 0.25; }
    75%  { transform: translate(-20vw, 40vh) scale(1.2) rotate(270deg); opacity: 0.15; }
    100% { transform: translate(0, 0) scale(1) rotate(360deg); opacity: 0.2; }
}

@keyframes blobFloat2 {
    0%   { transform: translate(0, 0) scale(1.2) rotate(0deg); opacity: 0.3; }
    33%  { transform: translate(-40vw, 60vh) scale(0.7) rotate(-120deg); opacity: 0.15; }
    66%  { transform: translate(40vw, -20vh) scale(1.5) rotate(-240deg); opacity: 0.25; }
    100% { transform: translate(0, 0) scale(1.2) rotate(-360deg); opacity: 0.15; }
}

@keyframes blobFloat3 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.2; }
    60%  { transform: translate(20vw, 80vh) scale(1.1); opacity: 0.35; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
}

@keyframes textReveal {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   6. 语义化文本组件
   ========================================================================== */

.story strong {
    font-weight: 500;
    color: #a26cff; 
}

.story mark {
    font-weight: 600;
    color: #b68bff; 
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.511);
    background-color: transparent;
}

.story a {
    color: #7f5af0;
    text-decoration: none;
    border-bottom: 1px solid rgba(127, 90, 240, 0.5);
    transition: border-color 0.3s ease;
}

.story table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.story table th,
.story table td {
    padding: 12px;
    text-align: left;
}

.story ul, .story ol {
    margin: 1.5rem 0 2rem 1.5rem;
    padding: 0;
    color: var(--text-color);
}

.story li {
    margin-bottom: 0.8rem;
    position: relative;
}

.story ul li::marker {
    color: #854ef5; /* 统一使用你的基准紫 */
}

/* 2. 引用块 (blockquote) - 适配文中的歌词和引言 */
.story blockquote {
    margin: 2.5rem 0;
    padding: 1rem 2rem;
    background: rgba(133, 78, 245, 0.05); /* 极淡的紫色背景 */
    border-left: 3px solid #464646;
    border-right:1px solid rgba(48, 48, 48, 0.1);
    border-top: 1px solid rgba(93, 93, 93, 0.1);
    border-bottom: 1px solid rgba(93, 93, 93, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6;
}

.story blockquote p {
    margin-bottom: 0rem; /* 引用内的段落间距收紧 */
}

/* 3. 代码块与行内代码 (针对文中提到的公式或代码) */
.story code {
    font-family: 'Fira Code', monospace;
    background: rgba(133, 78, 245, 0.2);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: #e0d1ff;
}

.story pre {
    background: rgba(20, 20, 25, 0.8);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(133, 78, 245, 0.3);
    overflow-x: auto;
    margin: 2rem 0;
}

.story pre code {
    background: transparent;
    padding: 0;
}

/* 4. 链接增强 */
.story a {
    color: #a78bfa;
    text-decoration: none;
    border-bottom: 1px solid rgba(167, 139, 250, 0.3);
    transition: all 0.3s ease;
}

.story a:hover {
    color: #854ef5;
    border-bottom-color: #854ef5;
    background: rgba(133, 78, 245, 0.1);
}

/* 5. 任务列表 (checkbox) */
.story input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #854ef5;
    transform: scale(1.2);
}

/* 6. 强调色微调 */
.story em {
    color: #d1b3ff;
    font-style: italic;
}

/* 针对所有 Markdown 渲染出来的图片 */
.story img {
    display: block;
    margin: 2.5rem auto; /* 上下留白，左右居中 */
    
    /* 核心适配：限制最大高度，宽度自动，防止超长截图撑破屏幕 */
    max-width: 100%; 
    max-height: 70vh; 
    width: auto; 
    
    object-fit: cover; /* 确保图片完整显示，不被裁剪 */
    
    border-radius: 16px;
    border: 1px solid rgba(133, 78, 245, 0.2); /* 淡淡的紫色边框，增加精致感 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    transition: transform 0.3s ease;
}

/* 鼠标悬停时稍微放大，方便看清字 */
.story img:hover {
    transform: scale(1.05);
    cursor: zoom-in;
    z-index: 10;
}

/* 移动端特殊适配 */
@media (max-width: 768px) {
    .story img {
        max-height: 60vh; /* 手机上高度限制紧一点 */
        width: 100%;      /* 手机上尽量占满宽度 */
        border-radius: 8px;
    }
}