/* =============================================================================
   components.css —— 可复用组件样式
   1) 液态玻璃（LiquidGlass 的视觉部分）
   2) 侧边栏音频播放器（SidebarPlayer）
   主题色/透明度由 site.css 里的 CSS 变量提供，组件本身不写死颜色
   ============================================================================= */

/* ============================ 1. 液态玻璃 ============================ */
.glass-frame{
  position:relative;
  border-radius:var(--lg-radius, 18px);
  isolation:isolate;
  --lg-bk: 1;                       /* 折射层的模糊系数（JS 可调） */
}
.lg-body{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(135deg,
    rgba(255,255,255, calc(var(--ga1) * var(--glass-k))),
    rgba(255,255,255, calc(var(--ga2) * var(--glass-k))) 42%,
    rgba(255,255,255, calc(var(--ga3) * var(--glass-k))));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--lg-bk))) saturate(var(--glass-sat, 175%));
  backdrop-filter: blur(calc(var(--glass-blur) * var(--lg-bk))) saturate(var(--glass-sat, 175%));
  border:1px solid var(--gt-border);
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.42),
    inset -1px -2px 3px rgba(255,255,255,.10),
    var(--glass-shadow, 0 12px 34px rgba(0,0,0,.16));
}
/* 按压/悬停暗角 */
.lg-shade{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0;
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 62%),
    radial-gradient(120% 110% at 50% 118%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%);
}
/* 表面层：裁到圆角内 */
.lg-surface{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:2;
}
/* 表面光泽：迎光月牙 + 背光暗边（--lg-sheen=0 即完全消失） */
.lg-blob{
  position:absolute; left:0; top:0; width:200px; height:200px; margin:-100px 0 0 -100px;
  transform-origin:50% 50%; opacity:0; will-change:transform,opacity;
  background-image:
    radial-gradient(52% 36% at calc(50% + var(--lg-lx, 12%)) calc(50% + var(--lg-ly, 0%)),
                    rgba(255,255,255,var(--lg-a1, .16)) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(76% 62% at 50% 50%,
                    rgba(0,0,0,0) 46%, rgba(0,0,0,var(--lg-a2, .14)) 72%, rgba(0,0,0,0) 94%);
}
/* 跟手小镜头：超大面板（日志正文）用的廉价折射。
   只有几百像素见方，位移在圆边归零，所以看不出边界；
   backdrop-filter 里只放位移滤镜（不放模糊），接缝更干净。 */
.lg-follow{
  position:absolute; left:0; top:0; width:220px; height:220px;
  border-radius:50%; opacity:0; pointer-events:none;
  will-change:transform, opacity;
  transition:opacity .18s ease;
}
/* 镜面勾边 */
.lg-rim{
  position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none; z-index:3;
  background:linear-gradient(140deg, var(--gt-rim1), var(--gt-rim2) 38%, var(--gt-rim3) 62%, var(--gt-rim2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.lg-content{ position:relative; z-index:4; }
.lg-defs{ position:absolute; width:0; height:0; pointer-events:none; }

/* ======================= 2. 侧边栏音频播放器 ======================= */
.player{
  --t: 0;                            /* 0=收起 1=展开 */
  --accent: #12a06a;
  --accent-2: #46cfa0;
  position:relative;
  width:  calc(72px  + var(--t) * 272px);    /* 72 → 344 */
  height: calc(320px + var(--t) * 160px);    /* 320 → 480 */
  border-radius:calc(26px - var(--t) * 6px);
  overflow:hidden;
  isolation:isolate;
  user-select:none; -webkit-user-select:none;
  transition:none;
}
/* 独立使用时的面板背景；嵌进侧边栏时用 .player.is-flat 去掉 */
.player{
  background:linear-gradient(150deg,
    rgba(255,255,255, calc(var(--pa1) * var(--glass-k))),
    rgba(255,255,255, calc(var(--pa2) * var(--glass-k))));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  border:1px solid var(--gt-border);
}
.player.is-flat{ background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }


/* 频谱：收起=竖排横长，展开=横排竖高 */
.eq{
  position:absolute; z-index:4;
  left:  calc(14px + var(--t) * 6px);
  top:   calc(64px - var(--t) * 48px);
  width: calc(42px + var(--t) * 114px);
  height:calc(180px - var(--t) * 134px);
}
.bar{
  --len:.12; --i:0;
  position:absolute; left:0; top:0; display:block; border-radius:99px;
  background:linear-gradient(calc(90deg + var(--t) * 90deg), var(--accent), var(--accent-2));
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
  width:  calc((1 - var(--t)) * (var(--len) * 42px) + var(--t) * 3px);
  height: calc((1 - var(--t)) * 3px + var(--t) * (var(--len) * 46px));
  transform:translate3d(
    calc(var(--t) * var(--i) * 13px),
    calc((1 - var(--t)) * var(--i) * 15px + var(--t) * (46px - var(--len) * 46px)), 0);
}

/* 唱片 */
.disc{
  position:absolute; z-index:4; cursor:pointer;
  left:calc(10px + var(--t) * 210px);
  top: calc(248px + var(--t) * 108px);
  width: calc(52px + var(--t) * 52px);
  height:calc(52px + var(--t) * 52px);
  border-radius:50%;
  box-shadow:0 10px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.10);
}
.disc-plate{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  animation:lg-spin 9s linear infinite; animation-play-state:paused;
}
.player.is-playing .disc-plate{ animation-play-state:running; }
@keyframes lg-spin{ to{ transform:rotate(360deg); } }
.disc-art{ position:absolute; inset:0; border-radius:50%; background-size:cover; background-position:center; }
/* 光盘中心的封面标签（跟着盘面一起转） */
.disc-label{
  position:absolute; left:50%; top:50%; width:47%; height:47%; transform:translate(-50%,-50%);
  border-radius:50%; background-size:cover; background-position:center; background-color:#14141c;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.5);
}
.disc-grooves{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, rgba(255,255,255,0) 1px 4px),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.13), rgba(255,255,255,0) 45%);
}
.disc-hole{
  position:absolute; left:50%; top:50%; width:16%; height:16%; transform:translate(-50%,-50%);
  border-radius:50%; background:#0d0d14;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), inset 0 0 6px rgba(0,0,0,.9);
}
.disc-overlay{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  background:rgba(6,6,12,.55); opacity:0; transition:opacity .16s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.disc:hover .disc-overlay, .disc.is-hover .disc-overlay{ opacity:1; }
.disc-overlay svg{ width:38%; height:38%; fill:rgba(255,255,255,.92); }
.player.is-playing .disc-overlay .ico-play{ display:none; }
.player:not(.is-playing) .disc-overlay .ico-pause{ display:none; }

/* 展开后才出现的内容 */
.fade{
  position:absolute; z-index:5;
  opacity:clamp(0, calc((var(--t) - .35) * 1.6), 1);
  pointer-events:none;
}
.player[data-expanded="true"] .fade{ pointer-events:auto; }

.info{ left:22px; right:22px; top:100px; }
.info .title{ font-size:15.5px; font-weight:650; letter-spacing:-.01em; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.info .artist{ margin-top:4px; font-size:12px; color:var(--text-dim); }

.progress{ left:22px; right:22px; top:196px; }
.progress .rail{ position:relative; height:16px; display:flex; align-items:center; cursor:pointer; }
.progress .rail::before{ content:''; position:absolute; left:0; right:0; height:3px; border-radius:99px; background:var(--line); }
.progress .fill{ position:absolute; left:0; height:3px; border-radius:99px; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.progress .knob{ position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; left:0;
  transform:translateX(-50%); box-shadow:0 1px 6px rgba(0,0,0,.5); opacity:0; transition:opacity .15s; }
.progress .rail:hover .knob{ opacity:1; }
.progress .times{ display:flex; justify-content:space-between; margin-top:4px; font-size:11px;
  color:var(--text-dim); font-variant-numeric:tabular-nums; }

.controls{ left:22px; top:238px; display:flex; align-items:center; gap:10px; }
.cbtn{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text);
  transition:background .15s;
}
.cbtn:hover{ background:rgba(255,255,255,.18); }
.cbtn svg{ width:16px; height:16px; fill:currentColor; }
.cbtn.main{ width:44px; height:44px; background:var(--accent); color:#fff; border-color:transparent;
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.cbtn.main:hover{ background:var(--accent-2); }
.cbtn.mode{ border-style:dashed; }
.player.is-playing .cbtn.main .ico-play{ display:none; }
.player:not(.is-playing) .cbtn.main .ico-pause{ display:none; }

/* 音量条（播放器内，展开后可见） */
.vol-row{ left:22px; right:22px; top:288px; display:flex; align-items:center; gap:9px; }
.vol-row .vbtn{
  width:26px; height:26px; flex:0 0 26px; padding:0; border-radius:9px; cursor:pointer;
  display:grid; place-items:center; color:var(--text-dim);
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  transition:background .15s, color .15s;
}
.vol-row .vbtn:hover{ background:rgba(255,255,255,.16); color:var(--text); }
.vol-row .vbtn svg{ width:14px; height:14px; fill:currentColor; }
.vol-row .vbtn .ico-mute{ display:none; }
.vol-row .vbtn.is-muted{ color:var(--accent); }
.vol-row .vbtn.is-muted .ico-vol{ display:none; }
.vol-row .vbtn.is-muted .ico-mute{ display:block; }
.vol-row .vrange{ flex:1; min-width:0; }
.vol-row .vval{ font-size:10.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; width:20px; text-align:right; }

.playlist{
  left:22px; width:186px; top:322px; height:138px; overflow-y:auto; overflow-x:hidden;
  padding:0; margin:0; list-style:none; scrollbar-width:thin;
}
.playlist::-webkit-scrollbar{ width:5px; }
.playlist::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.trk{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer;
  font-size:12.5px; color:var(--text-dim); }
.trk:hover{ background:rgba(255,255,255,.10); color:var(--text); }
.trk.is-active{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--text); }
.trk .idx{ width:14px; font-size:10.5px; opacity:.6; font-variant-numeric:tabular-nums; }
.trk .nm{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trk .du{ font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; }
.trk .wave{ display:none; gap:2px; align-items:flex-end; height:10px; }
.trk.is-active .wave{ display:flex; }
.trk.is-active .du{ display:none; }
.trk .wave i{ width:2px; height:4px; border-radius:1px; background:var(--accent-2); animation:lg-wave .9s ease-in-out infinite; }
.trk .wave i:nth-child(2){ animation-delay:.15s; }
.trk .wave i:nth-child(3){ animation-delay:.3s; }
.player:not(.is-playing) .trk .wave i{ animation-play-state:paused; }
@keyframes lg-wave{ 0%,100%{ height:4px; } 50%{ height:10px; } }

/* 跨页续播被浏览器自动播放策略拦下时的一次性提示 */
.resume-tip{
  position:fixed; right:18px; bottom:18px; z-index:60;
  padding:9px 16px; border-radius:99px; font-size:12.5px; cursor:pointer; font-family:inherit;
  color:var(--text); border:1px solid var(--line);
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  animation:lg-tip-in .24s ease both;
}
html[data-theme="dark"] .resume-tip{ background:rgba(18,24,22,.78); }
.resume-tip:hover{ background:rgba(255,255,255,.85); }
@keyframes lg-tip-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* 收起态：整块可点（展开） */
.player[data-expanded="false"]{ cursor:pointer; }
/* 频谱关闭（设置项） */
.player.no-eq .eq{ display:none; }