@charset "UTF-8";

/* ============================================================
   QWQLang Enhanced - Visual & Performance Optimization
   视觉优化 + 性能增强 + 动画特效
   ============================================================ */

/* ---- 高级动画效果 ---- */
@keyframes qwq-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes qwq-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes qwq-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes qwq-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 页面加载动画 ---- */
.qwq-child-body {
  animation: qwq-fade-in 0.6s ease-out;
}

/* ---- 卡片悬浮效果增强 ---- */
.qwq-glass-panel,
.qwq-profile-card,
.qwq-map-card,
.qwq-post-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.qwq-glass-panel:hover,
.qwq-profile-card:hover,
.qwq-map-card:hover,
.qwq-post-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.4),
    0 0 40px rgba(139,92,246,0.3);
}

/* ---- 导航栏滚动优化 ---- */
.qwq-site-header {
  transition: all 0.3s ease;
}

.qwq-site-header.scrolled {
  background: rgba(12,18,36,0.85);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
}

/* ---- 按钮点击反馈 ---- */
.qwq-btn,
.qwq-site-menu a,
.qwq-search-toggle {
  position: relative;
  overflow: hidden;
}

.qwq-btn::before,
.qwq-site-menu a::before,
.qwq-search-toggle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.qwq-btn:active::before,
.qwq-site-menu a:active::before,
.qwq-search-toggle:active::before {
  width: 300px;
  height: 300px;
}

/* ---- 文字渐变效果 ---- */
.qwq-gradient-text {
  background: linear-gradient(135deg, 
    var(--qwq-midnight) 0%, 
    var(--qwq-lavender) 50%, 
    var(--qwq-moon) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- 图片懒加载优化 ---- */
img {
  content-visibility: auto;
}

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* ---- 代码块美化增强 ---- */
pre, code {
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-variant-ligatures: common-ligatures;
}

pre {
  position: relative;
  padding: 20px;
  border-radius: 16px;
  background: rgba(8,13,28,0.8);
  border: 1px solid rgba(139,92,246,0.3);
  overflow-x: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* 代码块复制按钮 */
pre::before {
  content: 'Copy';
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(139,92,246,0.2);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
}

pre:hover::before {
  background: rgba(139,92,246,0.4);
  color: #fff;
}

/* ---- 滚动条美化 ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(8,13,28,0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, 
    var(--qwq-midnight), 
    var(--qwq-lavender));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, 
    var(--qwq-lavender), 
    var(--qwq-moon));
}

/* ---- 选中文本样式 ---- */
::selection {
  background: rgba(139,92,246,0.5);
  color: #fff;
}

::-moz-selection {
  background: rgba(139,92,246,0.5);
  color: #fff;
}

/* ---- 加载动画 ---- */
.qwq-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: var(--qwq-midnight);
  border-radius: 50%;
  animation: qwq-spin 0.8s linear infinite;
}

@keyframes qwq-spin {
  to { transform: rotate(360deg); }
}

/* ---- 响应式优化 (移动端) ---- */
@media (max-width: 768px) {
  .qwq-site-header {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  
  .qwq-site-menu {
    width: 100%;
    justify-content: center;
  }
  
  .qwq-glass-panel {
    padding: 24px 16px;
  }
  
  /* 移动端触摸优化 */
  .qwq-btn,
  .qwq-site-menu a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---- 性能优化：GPU 加速 ---- */
.qwq-glass-panel,
.qwq-profile-card,
.qwq-map-card,
.qwq-post-card,
.qwq-site-header {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ---- 打印样式优化 ---- */
@media print {
  .qwq-site-header,
  .qwq-search-form,
  .qwq-back-to-top {
    display: none !important;
  }
  
  .qwq-glass-panel {
    background: #fff;
    border: 1px solid #ddd;
  }
}

/* ---- 暗色模式适配 ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --qwq-bg: #040711;
    --qwq-surface: rgba(4,7,17,0.4);
  }
}

/* ---- 减弱动画 (accessibility) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}