/* ============================================
   tsukimiri.com — 博客特效系统 v2
   樱吹雪 · 毛玻璃 · 进度条 · 粒子 · 倾斜
   ============================================ */

/* === 字体 === */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap');

body { font-family: 'Noto Sans SC', -apple-system, sans-serif; }
.post-content, article p, .description { font-family: 'Noto Serif SC', Georgia, serif; }

/* === 阅读进度条 === */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 10000;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  width: 0; transition: width 0.1s linear; border-radius: 0 2px 2px 0;
}

/* === 粒子背景 === */
#particles-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -1; opacity: 0.5;
}

/* === 光标（仅桌面端） === */
@media (hover: none) and (pointer: coarse) {
  * { cursor: auto !important; }
  .custom-cursor, .custom-cursor-dot { display: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
  a, button, input, textarea, [role="button"] { cursor: none !important; }
}

.custom-cursor {
  position: fixed; top: 0; left: 0; z-index: 99999;
  width: 20px; height: 20px;
  border: 2px solid rgba(140,160,255,0.5);
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.3s, background 0.3s;
  mix-blend-mode: exclusion;
}
.custom-cursor.hover {
  width: 44px; height: 44px;
  background: rgba(140,160,255,0.1);
  border-color: rgba(140,160,255,0.9);
}
.custom-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 99999;
  width: 5px; height: 5px;
  background: #889eff; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
}

/* === 樱吹雪 === */
.sakura-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.sakura {
  position: absolute; top: -60px;
  will-change: transform;
  animation: sakura-fall linear infinite;
  opacity: 0.6; pointer-events: none;
}
@keyframes sakura-fall {
  0%   { transform: translateY(-5vh) rotate(0deg) translateX(0); opacity: 0.7; }
  25%  { transform: translateY(25vh) rotate(120deg) translateX(40px); opacity: 0.6; }
  50%  { transform: translateY(50vh) rotate(240deg) translateX(-30px); opacity: 0.4; }
  75%  { transform: translateY(75vh) rotate(320deg) translateX(20px); opacity: 0.2; }
  100% { transform: translateY(105vh) rotate(400deg) translateX(-15px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura-container { display: none; }
}

/* === 页面进入 === */
body { animation: pageIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === 滚动渐现 === */
.reveal {
  opacity: 0; transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* === 毛玻璃卡片 === */
article, [class*="post"], .card {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03) !important;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}
article:hover, [class*="post"]:hover, .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08) !important;
  border-color: rgba(140,160,255,0.3) !important;
}

/* === 卡片倾斜（JS驱动） === */
.tilt-card { transform-style: preserve-3d; perspective: 1000px; }
.tilt-card-inner { transition: transform 0.1s ease-out; }

/* === 渐变标题 === */
h1 a, h2 a, [class*="title"] a, .post-title a {
  background: linear-gradient(135deg, #667eea 0%, #a855f7 50%, #f093fb 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
  font-weight: 700 !important;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* === 链接悬停 === */
a:not(nav a):not(.no-effect) {
  text-decoration: none !important;
  background: linear-gradient(90deg, #667eea, #a855f7);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
a:not(nav a):not(.no-effect):hover { background-size: 100% 1.5px; }

/* === 图片 === */
.post-content img, article img, .card img {
  border-radius: 12px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-content img:hover, article img:hover {
  transform: scale(1.025);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* === 导航栏 === */
nav[style*="2c3e50"], .service-nav {
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  background: rgba(22,30,50,0.88) !important;
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.12) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
nav[style*="2c3e50"] a, .service-nav a {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-block !important; padding: 4px 8px !important;
  border-radius: 8px !important;
}
nav[style*="2c3e50"] a:hover, .service-nav a:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.3) !important;
  background: rgba(255,255,255,0.08) !important;
}
nav.nav-hidden { transform: translateY(-100%) !important; }

/* === 滚动条 === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 3px;
}

/* === 暗色模式 === */
body.dark-mode {
  background: #0a0a18 !important;
  color: #d8d8e8 !important;
}
body.dark-mode article, body.dark-mode [class*="post"], body.dark-mode .card {
  background: rgba(20,20,45,0.7) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: #eee !important; }
body.dark-mode nav[style*="2c3e50"] { background: rgba(10,10,25,0.92) !important; }
body.dark-mode .back-to-top, body.dark-mode #theme-toggle {
  background: rgba(40,40,70,0.7) !important; color: #ccc !important;
}
body.dark-mode .custom-cursor { border-color: rgba(180,180,255,0.4); }
body.dark-mode .custom-cursor-dot { background: #99aaff; }

/* === 按钮 === */
#theme-toggle, .back-to-top {
  position: fixed; z-index: 998; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55); backdrop-filter: blur(14px);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#theme-toggle { bottom: 90px; right: 28px; }
.back-to-top { bottom: 34px; right: 28px; opacity: 0; transform: translateY(16px); pointer-events: none; }
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: all; }
#theme-toggle:hover, .back-to-top:hover { transform: scale(1.15) !important; }

/* === 页面过渡 === */
.page-transition {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: 9999; pointer-events: none;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
}
.page-transition.active { transform: scaleY(1); transform-origin: top; }

/* === 波纹按钮效果 === */
.ripple { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0); animation: rippleAnim 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* === 代码块 === */
pre { position: relative; border-radius: 12px !important; overflow: hidden !important; }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 10px; background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  color: #aaa; font-size: 12px; z-index: 10;
  transition: all 0.3s ease;
}
.copy-btn:hover { background: rgba(255,255,255,0.2) !important; color: #fff; }

/* === 骨架屏 === */
.skeleton {
  background: linear-gradient(90deg, rgba(200,200,210,0.2) 25%, rgba(220,220,230,0.4) 50%, rgba(200,200,210,0.2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === 响应式 === */
@media (max-width: 768px) {
  article, [class*="post"], .card { border-radius: 12px !important; }
  .sakura-container { display: none; }
  #theme-toggle { bottom: 70px; right: 16px; }
  .back-to-top { bottom: 20px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}