/* ============================================
 * 课粒工坊 · 手绘风格增强系统 v3（精简版）
 *
 * v3 变更（UI评审优化）：
 *  - 统一管理: 滚动条 / 选中文字 / Focus 可见性（唯一来源）
 *  - 降低: 四角装饰 opacity 0.10 → 0.06
 *  - 降低: 漂浮星星 opacity 范围
 *  - 收窄: 手绘下划线仅作用于 h1, .material-title, .section-title
 *         （不再全局 h1,h2，避免过度装饰）
 *  - 降低: 星座连线透明度
 * ============================================ */

/* ========== 手绘装饰层容器 ========== */
.handdrawn-layer {
    position: fixed; top:0; left:0;
    width:100%; height:100%;
    pointer-events:none; z-index:0; overflow:hidden;
}

/* ====== 四角手绘装饰（v3: 更低调） ===== */
.corner-ornament {
    position:fixed; width:110px; height:110px;
    /* v3: 0.10→0.06，hover 也降低 */
    opacity:0.06; z-index:0; pointer-events:none;
    transition:opacity 0.5s ease;
}
.corner-ornament:hover { opacity:0.14; }

.corner-ornament.top-left     { top:52px; left:8px; }
.corner-ornament.top-right    { top:52px; right:8px; transform:scaleX(-1); }
.corner-ornament.bottom-left  { bottom:8px; left:8px; transform:scaleY(-1); }
.corner-ornament.bottom-right { bottom:8px; right:8px; transform:scale(-1); }

.corner-ornament svg {
    width:100%; height:100%;
    fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}
:not([data-theme="day"]) .corner-ornament { color:rgba(167,139,250,0.50); }
[data-theme="day"] .corner-ornament       { color:rgba(148,163,184,0.25); }

/* ====== 漂浮手绘星星（v3: 更少更淡） ===== */
.floating-doodle {
    position:fixed; pointer-events:none; z-index:0; opacity:0;
    animation:doodleFloat var(--float-duration,20s) ease-in-out infinite;
    animation-delay: var(--float-delay,0s);
}
@keyframes doodleFloat {
    0%   { transform:translateY(0) rotate(0deg); opacity:0; }
    5%   { opacity:var(--doodle-opacity,0.05); }       /* v3: 0.08→0.05 */
    50%  { transform:translateY(-70px) rotate(var(--doodle-rotate,12deg)); opacity:var(--doodle-opacity,0.05); }
    95%  { opacity:var(--doodle-opacity,0.05); }
    100% { transform:translateY(-150px) rotate(calc(var(--doodle-rotate,12deg)*2)); opacity:0; }
}

.doodle-star svg {
    width:var(--doodle-size,22px); height:var(--doodle-size,22px);
    fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
:not([data-theme="day"]) .floating-doodle { color:rgba(200,190,255,0.50); }
[data-theme="day"] .floating-doodle       { color:rgba(148,163,184,0.28); }

/* ====== 墨滴/水彩晕染（白天模式） ===== */
[data-theme="day"] .ink-splash-container { display:none !important; }
[data-theme="day"] .ink-splash { display:none !important; }
@keyframes inkSpread {
    0%,100% { transform:scale(1); opacity:0.4; }
    50% { transform:scale(1.3); opacity:0.7; }
}

/* ====== 星座连线（夜晚模式，v3: 更隐约） ===== */
.constellation-lines {
    position:fixed; inset:0; pointer-events:none; z-index:0;
    opacity:0; transition:opacity 3s ease;
}
body:hover .constellation-lines,
.constellation-lines.active { opacity:1; }

.constellation-lines line {
    stroke:rgba(167,139,250,0.07);   /* v3: 0.09→0.07 */
    stroke-width:0.6;                 /* v3: 0.7→0.6 */
    stroke-dasharray:4 10;            /* v3: 稀疏一点 */
    animation:dashFlow 28s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset:-300; } }

.constellation-node {
    fill:rgba(167,139,250,0.15);
    animation:nodePulse 5s ease-in-out infinite alternate;
}
@keyframes nodePulse { from{r:1.0; opacity:0.10} to{r:2.2; opacity:0.35} }

/* ====== 手绘下划线效果（v3: 仅限主要标题）===== */
.material-title.handdrawn-underline,
.section-title.handdrawn-underline,
h1.handdrawn-underline { position:relative; display:inline-block; }
.material-title.handdrawn-underline::after,
.section-title.handdrawn-underline::after,
h1.handdrawn-underline::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:100%; height:2px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M0,3 Q5,0.5 10,3 T20,3 T30,3 T40,3 T50,3 T60,3 T70,3 T80,3 T90,3 T100,3' fill='none' stroke='%237c3aed' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-size:100px 6px;
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.material-title.handdrawn-underline:hover::after,
.section-title.handdrawn-underline:hover::after,
h1.handdrawn-underline:hover::after { transform:scaleX(1); }

[data-theme="day"] .material-title.handdrawn-underline::after,
[data-theme="day"] .section-title.handdrawn-underline::after,
[data-theme="day"] h1.handdrawn-underline::after {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M0,3 Q5,0.5 10,3 T20,3 T30,3 T40,3 T50,3 T60,3 T70,3 T80,3 T90,3 T100,3' fill='none' stroke='%234F6EF6' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ====== 卡片素描风悬停 ===== */
/* [已移除] 原 X 形紫色渐变边框 (.sketch-hover::after) — 用户反馈太丑，精准移除 */

/* ====== 手绘波浪分隔线 ===== */
.handdrawn-divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
.handdrawn-divider::before,
.handdrawn-divider::after {
    content:''; flex:1; height:1px;
    background-image:repeating-linear-gradient(90deg,currentColor 0,currentColor 4px,transparent 4px,transparent 9px);
    opacity:.12;
}
.handdrawn-divider-icon { font-size:13px; opacity:.20; font-style:italic; }

/* ====== 手绘徽章 ===== */
.handdrawn-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 11px; border:1.5px solid currentColor;
    border-radius:2px 20px 3px 18px/20px 2px 18px 3px;
    font-size:11px; font-weight:600; letter-spacing:.03em;
    transform:rotate(-1deg); transition:all .25s ease;
}
.handdrawn-badge:hover { transform:rotate(1deg) scale(1.05); box-shadow:2px 3px 0 currentColor; }

/* ====== 白天：水彩纹理叠加 ===== */
/* ====== 白天：关闭所有装饰层 ====== */
[data-theme="day"] body::before {
    display: none !important;
}
@keyframes watercolorShift { 0%{opacity:.55} 100%{opacity:.85} }

/* ====== 夜间：微弱极光补充（ambient aurora 为主，此为辅）===== */
:not([data-theme="day"]) body::after {
    /* 注意：此层已由 ambient-enhance.css 的 aurora-layer 承担主要职责，
       此处仅保留微弱补充，避免双重渲染 */
    content:''; position:fixed; inset:0;
    background-image:linear-gradient(115deg,
        transparent 20%, rgba(124,58,237,.008) 35%,
        rgba(99,102,241,.005) 50%,
        rgba(168,85,247,.008) 65%, transparent 80%);
    pointer-events:none; z-index:0;
    animation:auroraDrift 28s ease-in-out infinite alternate;
}
@keyframes auroraDrift { 0%{opacity:.35;background-position:0 50%} 100%{opacity:.7;background-position:100% 50%} }

/* ====== 手绘风格按钮增强 ===== */
.btn-handdrawn {
    position:relative; border:2px solid currentColor !important;
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px !important;
    transition:all .3s cubic-bezier(.34,1.56,.64,1)!important;
}
.btn-handdrawn:hover {
    border-radius:15px 225px 15px 255px/255px 15px 225px 15px !important;
    transform:scale(1.03) rotate(-0.5deg)!important;
}
.btn-handdrawn:active {
    border-radius:225px 15px 255px 15px/15px 255px 15px 225px!important;
    transform:scale(0.98) rotate(0.5deg)!important;
}

/* ====== 标题手绘装饰 ===== */
.material-title.decorated { position:relative; padding-left:16px; }
.material-title.decorated::before {
    content:'\u2726'; position:absolute; left:0; top:2px;
    font-size:14px; opacity:.28;          /* v3: 0.35→0.28 */
    animation:titleStarSpin 8s linear infinite;
}
@keyframes titleStarSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

:not([data-theme="day"]) .material-title.decorated::before { color:#a78bfa; }
[data-theme="day"] .material-title.decorated::before       { color:rgba(79,110,246,0.5); }

/* ====== 加载状态手绘铅笔动画 ===== */
.pencil-loader {
    display:inline-block; width:32px; height:32px;
    animation:pencilDrawAnim 1.2s ease-in-out infinite;
}
@keyframes pencilDrawAnim {
    0%{transform:translateX(-15px) rotate(-15deg);opacity:.4}
    40%{transform:translateX(0) rotate(0deg);opacity:1}
    60%{transform:translateX(0) rotate(0deg);opacity:1}
    100%{transform:translateX(15px) rotate(15deg);opacity:.4}
}

/* ========== ★ 唯一来源：滚动条 / 选中文字 / Focus 可见性 ========== */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; border-left:1px solid rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb {
    background:rgba(124,58,237,.22);
    border-radius:10px; border:1.5px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:rgba(124,58,237,.38); border-color:rgba(124,58,237,.08); }
[data-theme="day"] ::-webkit-scrollbar-track { background:rgba(148,163,184,.08); }
[data-theme="day"] ::-webkit-scrollbar-thumb { background:rgba(79,110,246,.22); border-color:transparent; }
[data-theme="day"] ::-webkit-scrollbar-thumb:hover { background:rgba(79,110,246,.38); }

::selection { background:rgba(124,58,237,0.3); color:#fff; }
[data-theme="day"] ::selection { background:rgba(79,110,246,0.15); color:#1E293B; }

*:focus-visible { outline:2px solid rgba(124,58,237,0.6); outline-offset:2px; border-radius:4px; }
[data-theme="day"] *:focus-visible { outline-color:rgba(79,110,246,0.45); }

/* ====== 响应式：小屏隐藏装饰 ===== */
@media (max-width:768px) {
    .corner-ornament { width:55px; height:55px; opacity:.03; }
    .floating-doodle { display:none; }
    .constellation-lines { display:none; }
    [data-theme="day"] body::before { opacity:.30; }
    :not([data-theme="day"]) body::after { opacity:.20; }
}

/* ====== 减少动画偏好适配 ===== */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .floating-doodle,.ink-splash { display:none !important; }
}