/* =========================================================
   Liquid Gooey 风格覆盖层
   参考: https://gooey.jakubantalik.com/
   纯CSS实现，不依赖第三方组件库
   ========================================================= */

/* 液态流体基础变量 */
:root {
  --gooey-blur: 6;
  --gooey-contrast: 18;
  --gooey-radius: 24px;
  --gooey-shadow: 0 4px 20px rgba(52, 87, 213, 0.12);
  --gooey-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gooey-squish: 1.02;
}

/* 液态流体按钮 */
button, .button, input[type="button"], input[type="reset"], input[type="submit"] {
  border-radius: var(--gooey-radius) !important;
  box-shadow: var(--gooey-shadow) !important;
  transition: var(--gooey-transition) !important;
  position: relative;
  overflow: hidden;
}

button::before, .button::before, input[type="button"]::before, input[type="reset"]::before, input[type="submit"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:hover::before, .button:hover::before, input[type="button"]:hover::before, input[type="reset"]:hover::before, input[type="submit"]:hover::before {
  width: 200px;
  height: 200px;
}

button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
  transform: scale(var(--gooey-squish));
  box-shadow: 0 6px 28px rgba(52, 87, 213, 0.2);
}

/* 液态流体卡片 */
article, .paper-post-nav__prev, .paper-post-nav__next, .paper-related__item, .qr-modal-card {
  border-radius: var(--gooey-radius) !important;
  box-shadow: var(--gooey-shadow) !important;
  transition: var(--gooey-transition) !important;
  position: relative;
  overflow: hidden;
}

article::after, .paper-post-nav__prev::after, .paper-post-nav__next::after, .paper-related__item::after, .qr-modal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
}

article:hover, .paper-post-nav__prev:hover, .paper-post-nav__next:hover, .paper-related__item:hover, .qr-modal-card:hover {
  transform: translateY(-4px) scale(var(--gooey-squish));
  box-shadow: 0 12px 40px rgba(52, 87, 213, 0.18);
}

/* 液态流体悬浮按钮 */
.back-to-top, .contact-fab, .subscribe-fab {
  border-radius: 50% !important;
  box-shadow: 0 6px 24px rgba(52, 87, 213, 0.2) !important;
  transition: var(--gooey-transition) !important;
}

.back-to-top:hover, .contact-fab:hover, .subscribe-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(52, 87, 213, 0.3) !important;
}

/* 液态流体输入框 */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
  border-radius: 999px !important;
  border: 2px solid var(--border-color);
  transition: var(--gooey-transition) !important;
  padding: 12px 20px !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 15%, transparent) !important;
  transform: scale(1.02);
}

/* 液态流体导航链接 */
.ma-menu .menu-item > a {
  position: relative;
  padding: 8px 16px !important;
  border-radius: var(--gooey-radius);
  transition: var(--gooey-transition) !important;
}

.ma-menu .menu-item > a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-color);
  border-radius: var(--gooey-radius);
  opacity: 0;
  transform: scale(0.8);
  transition: var(--gooey-transition);
  z-index: -1;
}

.ma-menu .menu-item > a:hover::before {
  opacity: 0.1;
  transform: scale(1);
}

.ma-menu .menu-item.current-menu-item > a,
.ma-menu .menu-item.current_page_item > a {
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  border-bottom: none;
  border-radius: var(--gooey-radius);
}

/* 液态流体页脚链接 */
.flink {
  border-radius: var(--gooey-radius);
  padding: 4px 12px;
  transition: var(--gooey-transition);
}

.flink:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  transform: scale(1.05);
}

/* 液态流体阅读更多按钮 */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--gooey-radius);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  transition: var(--gooey-transition);
}

.read-more:hover {
  background: var(--accent-color);
  color: #fff;
  transform: translateX(4px);
}

.read-more::after {
  content: '→';
  transition: transform 0.3s ease;
}

.read-more:hover::after {
  transform: translateX(4px);
}

/* 液态流体文章卡片 */
.home article, .archive article, .search article {
  border-bottom: none !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  background: linear-gradient(135deg, var(--main-color) 0%, color-mix(in srgb, var(--main-color) 95%, var(--accent-color)) 100%);
}

/* 液态流体移动端适配 */
@media (max-width: 680px) {
  :root {
    --gooey-radius: 18px;
  }
  
  button, .button, input[type="button"], input[type="reset"], input[type="submit"] {
    padding: 10px 18px !important;
  }
  
  .ma-menu .menu-item > a {
    padding: 6px 12px !important;
    font-size: 14px;
  }
}

/* 液态流体暗色模式适配 */
@media (prefers-color-scheme: dark) {
  :root {
    --gooey-shadow: 0 4px 20px rgba(138, 160, 255, 0.15);
  }
}

.scheme-dark :root, .theme-dark {
  --gooey-shadow: 0 4px 20px rgba(138, 160, 255, 0.15);
}

/* 液态流体动画关键帧 */
@keyframes gooey-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

button:hover, .back-to-top:hover, .contact-fab:hover, .subscribe-fab:hover {
  animation: gooey-pulse 0.6s ease-in-out infinite;
}

/* 液态流体磨砂玻璃效果 */
.site-header {
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  background: color-mix(in srgb, var(--header-bg) 85%, transparent) !important;
}

/* 液态流体滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}