/*
 * LikeGirl Glass Theme v1.1
 * 修复：移动端光标/粒子问题；优化手机布局
 */

/* ── 1. 全局背景 ── */
:root {
  --gls-pink:   rgba(212, 82, 122, 1);
  --gls-glass:  rgba(255, 255, 255, 0.20);
  --gls-glass2: rgba(255, 255, 255, 0.32);
  --gls-border: rgba(255, 255, 255, 0.55);
  --gls-shadow: 0 8px 40px rgba(180, 80, 120, 0.16), 0 1px 0 rgba(255,255,255,0.65) inset;
  --gls-hover:  0 20px 60px rgba(180, 80, 120, 0.28), 0 1px 0 rgba(255,255,255,0.75) inset;
}

body {
  background-image: none !important;
  background-color: #f5dce6 !important;
}

/* 动态网格背景 */
.gls-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 15% 10%, #ffb3cc 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 5%,  #ffd6a0 0%, transparent 55%),
    radial-gradient(ellipse 55% 80% at 5%  85%, #d4b3f8 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 90% 90%, #a8d0f8 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #fce4ec 0%, #f5d5e8 100%);
  animation: glsMesh 22s ease-in-out infinite alternate;
}
@keyframes glsMesh {
  0%  { filter: hue-rotate(0deg)   brightness(1)    saturate(1); }
  50% { filter: hue-rotate(10deg)  brightness(1.05) saturate(1.1); }
  100%{ filter: hue-rotate(-8deg)  brightness(0.97) saturate(0.95); }
}

.gls-blob {
  position: fixed; border-radius: 50%;
  filter: blur(80px); opacity: 0.48;
  z-index: 0; pointer-events: none;
}
.gls-blob-1{width:580px;height:580px;background:#ffb3cc;top:-140px;left:-140px;animation:glsB1 22s ease-in-out infinite alternate}
.gls-blob-2{width:460px;height:460px;background:#a8c8f8;bottom:-90px;right:-90px;animation:glsB2 18s ease-in-out infinite alternate}
.gls-blob-3{width:320px;height:320px;background:#d8b3f8;top:38%;left:28%;animation:glsB3 28s ease-in-out infinite alternate}
.gls-blob-4{width:260px;height:260px;background:#ffd8a8;top:14%;right:18%;animation:glsB4 20s ease-in-out infinite alternate}
@keyframes glsB1{to{transform:translate(55px,-35px) scale(1.1)}}
@keyframes glsB2{to{transform:translate(-45px,35px) scale(1.08)}}
@keyframes glsB3{to{transform:translate(28px,45px) scale(0.93)}}
@keyframes glsB4{to{transform:translate(-35px,18px) scale(1.14)}}

#glsCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* 内容层级 */
.header-wrap,.bg-wrap,#pjax-container,.footer-warp{position:relative;z-index:1}

/* ── 2. 顶部导航 ── */
.header-wrap {
  z-index: 1000 !important;
  background: rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.52) !important;
  box-shadow: 0 2px 32px rgba(200,100,140,0.12) !important;
}
.header-wrap .header .logo h1 a,
.header-wrap .header .word .wenan,
.header-wrap .header .word .wenan a { color: #3a1a2e !important; }
.alogo b {
  background: linear-gradient(135deg, var(--gls-pink), #9c6bc0) !important;
  border-radius: 0.6rem !important;
}

/* ── 3. 英雄头像卡片 ── */
.bg-img .middle {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(44px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(190%) !important;
  border: 1px solid rgba(255,255,255,0.58) !important;
  border-radius: 3rem !important;
  box-shadow: 0 24px 72px rgba(160,70,110,0.22), 0 1px 0 rgba(255,255,255,0.75) inset !important;
  position: relative; overflow: hidden;
}
.bg-img .middle::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg,rgba(255,255,255,.55) 0%,transparent 45%,transparent 55%,rgba(255,255,255,.18) 100%);
  pointer-events: none; z-index: 0;
}
.bg-img .middle::after {
  content: ''; position: absolute; top:0; left:-100%; width:60%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation: glsShimmer 7s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes glsShimmer{0%{left:-100%}100%{left:220%}}
.bg-img .middle > *{position:relative;z-index:1}
.bg-img .middle img {
  border: 3px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 6px 24px rgba(180,80,120,0.25) !important;
  transition: transform 0.35s cubic-bezier(.23,1,.32,1), box-shadow 0.35s !important;
}
.bg-img .middle img:hover {
  transform: scale(1.08) translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(180,80,120,0.38) !important;
}
.bg-img .middle .img-male span,
.bg-img .middle .img-female span { text-shadow: 0 2px 12px rgba(0,0,0,0.22) !important; }

/* ── 4. 计时器 ── */
.time {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  border-radius: 2rem !important;
  box-shadow: var(--gls-shadow) !important;
  padding: 2.5rem 3rem !important;
  margin: 2rem auto !important;
  max-width: 700px !important;
  position: relative; overflow: hidden;
}
.time::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg,rgba(255,255,255,.5) 0%,transparent 50%);
  pointer-events: none;
}
.time span {
  background-image: linear-gradient(135deg,#d4527a,#9c6bc0,#5b8dee,#d4527a) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  animation: glsGrad 8s linear infinite !important;
  font-size: 1.5rem !important;
}
@keyframes glsGrad{to{background-position:-300% 0}}
.time b { color: #2d1a26 !important; text-shadow: 0 2px 12px rgba(180,80,120,0.18) !important; font-size: 2.8rem !important; }

/* ── 5. 功能卡片 ── */
.card-wrap .row .card {
  background: rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(32px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 2rem !important;
  box-shadow: var(--gls-shadow) !important;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s ease, background 0.3s !important;
  position: relative; overflow: hidden;
}
.card-wrap .row .card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg,rgba(255,255,255,.55) 0%,transparent 45%,transparent 55%,rgba(255,255,255,.18) 100%);
  pointer-events: none; z-index: 0;
}
.card-wrap .row .card > * { position: relative; z-index: 1; }
.card-wrap .row .card:hover {
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: var(--gls-hover) !important;
  background: rgba(255,255,255,0.32) !important;
  border-color: rgba(255,255,255,0.7) !important;
}
.card-wrap .row .card:hover img { transform: rotate(-15deg) scale(1.1) !important; filter: drop-shadow(0 4px 12px rgba(180,80,120,0.3)); }
.card-wrap .row .card .text span a { color: #2d1a26 !important; transition: color 0.2s !important; }
.card-wrap .row .card:hover .text span a { color: var(--gls-pink) !important; }
.card-wrap .row .card .text p { color: rgba(45,26,38,0.55) !important; }

/* ── 6. 侧边按钮 ── */
.lg-sidebar-item {
  background: rgba(255,255,255,0.30) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  border-radius: 1rem !important;
  box-shadow: 0 6px 24px rgba(180,80,120,0.2) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s !important;
}
.lg-sidebar-item:hover { background: rgba(255,255,255,0.52) !important; transform: scale(1.12) !important; box-shadow: 0 10px 32px rgba(180,80,120,0.32) !important; }
.lg-sidebar-item:hover::after { background: rgba(45,26,38,0.75) !important; border-radius: 0.6rem !important; }
.lg-sidebar-icon path { fill: #d4527a !important; }

/* ── 7. 底部版权 ── */
.footer-warp { background: rgba(255,255,255,0.12) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(255,255,255,0.42) !important; margin-top: 4rem !important; }
.footer-warp::after { background: transparent !important; }
.footer-warp .footer p { color: rgba(45,26,38,0.5) !important; font-weight: 400 !important; }
.footer-warp .footer p a { color: rgba(45,26,38,0.5) !important; }

/* ── 8. 波浪颜色 ── */
.bg-img .waves .parallax use:last-child { fill: rgba(245,220,230,0.9) !important; }

/* ── 9. 滚动条 ── */
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom,rgba(212,82,122,0.4),rgba(156,107,192,0.4)) !important; border-radius: 10px !important; }

/* ── 10. 自定义鼠标（仅桌面） ── */
.gls-cursor-dot {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 8px; height: 8px; border-radius: 50%;
  background: #d4527a; transform: translate(-50%,-50%);
}
.gls-cursor-ring {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(212,82,122,0.5);
  transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s;
}

/* ── 11. 移动端强制隐藏光标元素 ── */
@media (pointer: coarse) {
  .gls-cursor-dot,
  .gls-cursor-ring { display: none !important; }

  /* 移动端关闭背景动画，节省性能 */
  .gls-blob { animation: none !important; }
  .gls-mesh { animation: none !important; }

  /* 移动端卡片禁用 hover 形变（tap 时不会残留偏移） */
  .card-wrap .row .card:hover {
    transform: none !important;
  }
  .card-wrap .row .card:active {
    transform: scale(0.97) !important;
    box-shadow: var(--gls-shadow) !important;
  }

  /* 移动端计时器字号适配 */
  .time b { font-size: 2rem !important; }
  .time { padding: 1.8rem 1.5rem !important; }

  /* 移动端头像卡片内边距 */
  .bg-img .middle { border-radius: 2rem !important; }
}

/* ── 12. 卡片入场动画 ── */
@keyframes glsCardIn {
  from { opacity:0; transform:translateY(28px) scale(0.96); }
  to   { opacity:1; transform:none; }
}
.card-wrap .row .card { animation: glsCardIn 0.7s cubic-bezier(.23,1,.32,1) both !important; }
.card-wrap .row .card:nth-child(1){animation-delay:.05s!important}
.card-wrap .row .card:nth-child(2){animation-delay:.12s!important}
.card-wrap .row .card:nth-child(3){animation-delay:.19s!important}
.card-wrap .row .card:nth-child(4){animation-delay:.26s!important}
.card-wrap .row .card:nth-child(5){animation-delay:.33s!important}
.card-wrap .row .card:nth-child(6){animation-delay:.40s!important}