﻿/* ===== 基础样式 ===== */
html {
    touch-action: manipulation;
    font-size: var(--front-root-font-size-mobile, 100%);
}
:root {
    --front-font-stack-mobile: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --front-font-stack-desktop: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --front-root-font-size-mobile: 100%;
    --front-root-font-size-desktop: 100%;
}
body {
    font-family: var(--front-font-stack-mobile);
    font-weight: 500;
    font-synthesis: weight;
    background-color: #f8fafc;
    touch-action: manipulation;
}
body .font-sans,
.front-site-font,
.front-number-font {
    font-family: var(--front-font-stack-mobile);
    font-synthesis: weight;
}

@media (min-width: 768px) {
    html {
        font-size: var(--front-root-font-size-desktop, 100%);
    }

    body,
    body .font-sans,
    .front-site-font,
    .front-number-font {
        font-family: var(--front-font-stack-desktop);
    }
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== 公告栏动画 ===== */
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
.animate-marquee { display: inline-block; left: 100%; white-space: nowrap; animation: marquee 15s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

@keyframes bannerPrismSweep { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(400%) skewX(-15deg); } }

/* ===== 通用动画 ===== */
@keyframes lockBreath {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px 5px rgba(59,130,246,0.15); }
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-card-enter {
    animation: cardEnter 0.4s ease-out both;
}

/* ===== 类型缀章动画 ===== */
@keyframes typeBadgeShine {
    0% { transform: translateX(-240%) rotate(22deg); opacity: 0; }
    8% { opacity: .95; }
    28% { opacity: 1; }
    44% { transform: translateX(235%) rotate(22deg); opacity: .9; }
    54% { opacity: 0; }
    100% { transform: translateX(220%) rotate(22deg); opacity: 0; }
}
@keyframes typeBadgeShineSecondary {
    0%, 46% { transform: translateX(-220%) rotate(22deg); opacity: 0; }
    58% { opacity: .9; }
    76% { transform: translateX(230%) rotate(22deg); opacity: .78; }
    88% { opacity: 0; }
    100% { transform: translateX(220%) rotate(22deg); opacity: 0; }
}
@keyframes typeBadgeGlow {
    0%, 100% { opacity: .42; }
    35% { opacity: .72; }
    65% { opacity: .58; }
}
.type-badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -10px 20px rgba(255,255,255,0.06), 0 10px 28px rgba(15,23,42,0.26);
}
.type-badge-glow {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: radial-gradient(120% 120% at 18% 12%, rgba(255,255,255,0.62), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 76%);
    animation: typeBadgeGlow 2.2s ease-in-out infinite;
}
.type-badge-shine {
    pointer-events: none;
    position: absolute;
    left: -33%;
    top: -50%;
    height: 235%;
    width: 38%;
    transform: rotate(22deg);
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9), transparent);
    opacity: 0.9;
    filter: blur(0.5px);
    animation: typeBadgeShine 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.type-badge-shine-secondary {
    pointer-events: none;
    position: absolute;
    left: -33%;
    top: -50%;
    height: 220%;
    width: 26%;
    transform: rotate(22deg);
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.75), transparent);
    opacity: 0.8;
    animation: typeBadgeShineSecondary 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* ===== 文章排版 ===== */
.prose img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1rem 0; }
.prose h2 { font-size: 1.25rem; font-weight: 900; margin: 1.5rem 0 0.75rem; }
.prose h3 { font-size: 1.125rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.prose p { margin: 0.75rem 0; }
.prose ul, .prose ol { margin: 0.75rem 0; padding-left: 1.5rem; }
.prose li { margin: 0.25rem 0; }
.prose a { text-decoration: underline; }
.prose blockquote { border-left: 3px solid #2563eb; padding-left: 1rem; font-style: italic; color: #64748b; margin: 1rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
.prose th { background: #f8fafc; font-weight: 700; }
