/* ===================================================================
   common.css — 全站共享样式 (V1.1)

   包含：
   - CSS 变量 (复古怀旧主题)
   - 全局 Reset
   - Body 背景纹理
   - 落叶动画
   - 复古装饰物
   - 火漆印章返回按钮
   - 页面标题装饰线
   - Toast 提示
   - 主容器布局
   - 响应式基础
   =================================================================== */

/* ---- CSS 变量（核心复古色板）---- */
:root {
    --bg: #2c2416;
    --paper: #f4e4c1;
    --paper-dark: #e8d5a3;
    --ink: #3c2415;
    --ink-light: #5c3d28;
    --ink-faded: #8b7355;
    --sepia: #c4a67a;
    --sepia-light: #d4b896;
    --wax-red: #8b3a3a;
    --wax-red-light: #a0524a;
    --gold: #b8860b;
    --gold-light: #daa520;
}

/* ---- 全局 Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Body 基础 ---- */
body {
    font-family: 'Georgia', 'Noto Serif SC', 'KaiTi', '楷体', serif;
}

/* ---- 纹理背景 Body（复古纸张）---- */
body.textured-bg {
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 25% 30%, rgba(196, 166, 122, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 60%, rgba(184, 134, 11, 0.04) 0%, transparent 55%);
    min-height: 100vh;
    position: relative;
}

body.textured-bg::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139,115,85,0.02) 3px, rgba(139,115,85,0.02) 4px);
    pointer-events: none;
    z-index: 0;
}

/* ---- 落叶动画 ---- */
.falling-leaf {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    font-size: 1.2rem;
    opacity: 0;
    animation: leafFall var(--duration) linear var(--delay) infinite;
}

@keyframes leafFall {
    0% { opacity: 0; transform: translateY(-10vh) translateX(0) rotate(0deg); }
    10% { opacity: 0.4; }
    90% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(110vh) translateX(var(--drift)) rotate(var(--spin)); }
}

/* ---- 复古装饰物 ---- */
.vintage-deco,
.vintage-decoration {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    filter: sepia(0.5) brightness(0.7);
    transition: all 0.6s ease;
}

/* 装饰物定位（各页面按主题选用） */
/* 通用 / 时光 */
.deco-clock   { top: 30px; right: 40px; font-size: 3rem; animation: clockTick 8s ease-in-out infinite, floatSlow 6s ease-in-out infinite; }
/* 相册主题 */
.deco-camera  { bottom: 80px; left: 30px; font-size: 2.5rem; animation: floatSlow 6s ease-in-out 1s infinite; }
.deco-film    { top: 18%; right: 5%; font-size: 2.2rem; animation: floatSlow 7s ease-in-out 1.5s infinite; }
.deco-polaroid{ bottom: 20%; right: 8%; font-size: 2rem; animation: floatSlow 8s ease-in-out 0.8s infinite; }
/* 雷霆发言主题 */
.deco-thunder { top: 20px; right: 45px; font-size: 3rem; animation: thunderShake 0.6s ease-in-out infinite, floatSlow 5s ease-in-out infinite; filter: brightness(1.3) drop-shadow(0 0 8px rgba(232,196,74,0.5)); }
.deco-quill   { bottom: 80px; left: 30px; font-size: 2.2rem; animation: floatSlow 7s ease-in-out 1s infinite; }
.deco-speech  { top: 22%; right: 7%; font-size: 2rem; animation: floatSlow 8s ease-in-out 2s infinite; }
@keyframes thunderShake {
    0%,100%{transform:rotate(0deg)}25%{transform:rotate(-6deg)}50%{transform:rotate(0deg)}75%{transform:rotate(6deg)}
}
/* 神图主题 */
.deco-frame   { top: 25px; right: 40px; font-size: 2.8rem; animation: floatSlow 6s ease-in-out infinite; }
.deco-sparkle { bottom: 80px; left: 30px; font-size: 2.2rem; animation: floatSlow 7s ease-in-out 0.5s infinite; }
.deco-palette { top: 20%; right: 6%; font-size: 2rem; animation: floatSlow 8s ease-in-out 2s infinite; }
/* 音乐主题 */
.deco-music   { bottom: 90px; left: 25px; font-size: 2.2rem; animation: floatSlow 7s ease-in-out 1.5s infinite; }
.deco-headphone { top: 25px; right: 40px; font-size: 2.8rem; animation: floatSlow 6s ease-in-out infinite; }
.deco-guitar  { top: 22%; right: 6%; font-size: 2.3rem; animation: floatSlow 8s ease-in-out 1s infinite; }
.deco-note    { bottom: 22%; left: 8%; font-size: 2rem; animation: floatSlow 7s ease-in-out 2s infinite; }
/* 关于我主题 */
.deco-apple   { top: 28px; right: 40px; font-size: 2.8rem; animation: floatSlow 6s ease-in-out infinite; }
.deco-laptop  { bottom: 80px; left: 30px; font-size: 2.3rem; animation: floatSlow 7s ease-in-out 1s infinite; }
.deco-book    { top: 20%; left: 5%; font-size: 2rem; animation: floatSlow 8s ease-in-out 2s infinite; }
.deco-pen     { bottom: 25%; right: 6%; font-size: 1.8rem; animation: featherFall 7s ease-in-out 0.5s infinite; }
/* 管理后台主题 */
.deco-gear    { top: 25px; right: 40px; font-size: 2.5rem; animation: gearSpin 10s linear infinite; }
.deco-wrench  { bottom: 80px; left: 30px; font-size: 2.2rem; animation: floatSlow 7s ease-in-out 1s infinite; }
.deco-chart   { top: 22%; right: 5%; font-size: 2rem; animation: floatSlow 8s ease-in-out 2s infinite; }
@keyframes gearSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* 泛用装饰 */
.deco-letter  { top: 25%; left: 5%; font-size: 2rem; animation: floatSlow 8s ease-in-out 2s infinite; }
.deco-feather { bottom: 25%; right: 6%; font-size: 1.8rem; animation: featherFall 7s ease-in-out 0.5s infinite; }
.deco-teacup  { bottom: 15%; left: 50%; font-size: 2rem; animation: floatSlow 7s ease-in-out 3s infinite; }
.deco-flower  { top: 15%; right: 8%; font-size: 2.5rem; animation: floatSlow 5s ease-in-out 2s infinite; }

@keyframes clockTick {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(3deg); }
    20% { transform: rotate(-2deg); }
    30% { transform: rotate(0deg); }
}

@keyframes featherFall {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    25% { transform: translateY(-10px) translateX(10px) rotate(5deg); }
    50% { transform: translateY(5px) translateX(-5px) rotate(-3deg); }
    75% { transform: translateY(-15px) translateX(8px) rotate(4deg); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(2deg); }
    50% { transform: translateY(-4px) rotate(-1deg); }
    75% { transform: translateY(-15px) rotate(1deg); }
}

/* ---- 火漆印章"回到首页"按钮 ---- */
.home-seal-wrapper {
    position: fixed;
    bottom: 35px;
    right: 35px;
    z-index: 101;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.home-seal-wrapper:hover {
    transform: translateY(-5px);
}

.home-seal {
    width: 48px;
    height: 48px;
    background: radial-gradient(circle at 40% 35%,
        var(--wax-red-light) 0%,
        var(--wax-red) 50%,
        #6b2020 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.3),
        inset 0 -3px 6px rgba(0,0,0,0.2),
        inset 0 2px 4px rgba(255,255,255,0.1);
    position: relative;
    transition: all 0.4s ease;
}

.home-seal-wrapper:hover .home-seal {
    box-shadow:
        0 10px 30px rgba(0,0,0,0.5),
        0 4px 10px rgba(0,0,0,0.35),
        inset 0 -3px 6px rgba(0,0,0,0.2),
        inset 0 2px 4px rgba(255,255,255,0.1),
        0 0 25px rgba(139, 58, 58, 0.4);
}

.home-seal i {
    color: rgba(255, 220, 200, 0.85);
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.home-seal-wrapper:hover .home-seal i {
    color: rgba(255, 240, 225, 0.95);
    transform: scale(1.1);
}

/* 火漆印章波纹 */
.seal-ripple {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(139, 58, 58, 0.3);
    animation: sealRipple 2.5s ease-out infinite;
    pointer-events: none;
}

.seal-ripple:nth-child(2) { animation-delay: 0.8s; }
.seal-ripple:nth-child(3) { animation-delay: 1.6s; }

@keyframes sealRipple {
    0% { width: 48px; height: 48px; opacity: 0.6; }
    100% { width: 90px; height: 90px; opacity: 0; }
}

/* ---- 主容器 ---- */
.main-container {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
}

/* ---- 页面标题区 ---- */
.page-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.header-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0.8rem;
}

.orn-line {
    width: 50px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(196,166,122,0.45), transparent);
}

.orn-dot {
    width: 4px; height: 4px;
    background: var(--sepia);
    border-radius: 50%;
    opacity: 0.7;
}

.page-title {
    font-family: 'KaiTi', '楷体', 'STKaiti', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--paper);
    letter-spacing: 6px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 40px rgba(196,166,122,0.15);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--sepia-light);
    font-style: italic;
    letter-spacing: 3px;
}

/* ---- Toast 提示 ---- */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,24,14,0.95);
    border: 1px solid rgba(196,166,122,0.3);
    color: var(--ink-faded);
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.toast.show { opacity: 1; }

/* ---- 🐱 猫咪装饰 ---- */
.cat-deco {
    position: fixed;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
    animation: catFloat var(--cat-dur, 8s) ease-in-out var(--cat-delay, 0s) infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cat-deco:hover {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
    transform: scale(1.3) !important;
    z-index: 2;
}

/* 首页大猫：禁用动画和悬停变大，仅保留拖动 */
.cat-home,
.cat-home:hover {
    animation: none !important;
    transition: none !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)) !important;
    z-index: 9999 !important;
    cursor: grab;
}

@keyframes catFloat {
    0%, 100% { transform: translateY(0) rotate(var(--cat-rot, 0deg)); }
    30%  { transform: translateY(-8px) rotate(calc(var(--cat-rot, 0deg) + 3deg)); }
    60%  { transform: translateY(3px) rotate(calc(var(--cat-rot, 0deg) - 2deg)); }
    85%  { transform: translateY(-5px) rotate(calc(var(--cat-rot, 0deg) + 1deg)); }
}

/* ---- 空状态 ---- */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--ink-faded);
    grid-column: 1 / -1;
}

/* ---- 响应式基础 ---- */
@media (max-width: 768px) {
    .page-title { font-size: 1.8rem; letter-spacing: 4px; }
    .home-seal-wrapper { bottom: 20px; right: 15px; }
    .home-seal { width: 40px; height: 40px; }
    .home-seal i { font-size: 0.85rem; }
    .seal-ripple { width: 40px; height: 40px; }
    @keyframes sealRipple {
        0% { width: 40px; height: 40px; opacity: 0.6; }
        100% { width: 70px; height: 70px; opacity: 0; }
    }
}