/* styles.css
   单元素日/夜切换（参考：SegmentFault 教程），默认亮（day）
   切换按钮位置：居中卡片上方（带可调偏移 --offset）
*/

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  background:#f5f7fb;           /* 默认日间背景 */
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  transition: background 0.45s ease, color 0.35s ease;
  position:relative;
}

/* 容器：用于定位按钮 */
.wrap {
  position: relative;
  width: 100%;
  max-width: 740px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 内容卡片 */
.card{
  background:#fff;
  padding:48px 56px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(16,24,40,0.08);
  width:100%;
  text-align:center;
  position: relative;
  z-index: 1;
}
h1{font-size:32px;margin-bottom:8px}
p{color:rgba(17,24,39,0.7);margin-top:8px;font-size:1.02rem}

/* 作者署名 */
.author{
  position:fixed;
  right:14px;
  bottom:10px;
  color:#6b7280;
  font-size:0.95rem;
  user-select:none;
}

/* 深色主题的 body 样式 */
body.dark{
  background:#07122a;
  color:#dbeafe;
}
body.dark .card{
  background:#071428;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}
body.dark p{color:rgba(219,234,254,0.8)}
body.dark .author{color:#9ca3af}

/* ================== 切换 按钮（单元素 + ::before ::after） ================== */
/* 本版：按钮放在 .wrap 内，居中且悬浮在 card 上方 */
/* 可调参数：--w --h --pad --offset（offset 越大按钮越往上） */

.toggle {
  --w:120px;
  --h:52px;
  --pad:6px;
  --offset:8px; /* 默认往上抬 8px，想更高就改这个值 */
  position: absolute;
  /* 把按钮往上拉，悬浮在卡片上方，并向上额外偏移 --offset */
  top: calc(-1 * (var(--h) / 2) - var(--offset));
  left: 50%;
  transform: translateX(-50%);
  width:var(--w);
  height:var(--h);
  border-radius:999px;
  cursor:pointer;
  z-index: 5;
  overflow:visible;

  /* 背景：左半是 day color，右半是 night color；使用 200% 宽度并通过 background-position 切换 */
  background:
    linear-gradient(90deg, #fff 50%, #071428 50%);
  background-size:200% 100%;
  background-position: 0% 0%;
  transition: background-position 0.6s cubic-bezier(.2,.9,.2,1), box-shadow 0.25s;
  display:flex;
  align-items:center;
  justify-content:flex-start;

  /* 拟态阴影（light） */
  box-shadow:
    6px 6px 14px rgba(0,0,0,0.08),
    -6px -6px 14px rgba(255,255,255,0.85);
  padding:var(--pad);
}

/* 按下效果 */
.toggle:active{
  transform: translateX(-50%) translateY(1px);
  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.08),
              inset -4px -4px 8px rgba(255,255,255,0.7);
}

/* ::before = 圆盘（太阳/月亮） */
.toggle::before{
  content:"";
  position:absolute;
  width: calc(var(--h) - var(--pad)*2); /* 圆盘直径与可见高度一致 */
  height: calc(var(--h) - var(--pad)*2);
  left: calc(var(--pad)); /* 初始靠左看起来像滑块 */
  top: calc(var(--pad));
  border-radius:50%;
  z-index:3;
  transition: transform 0.55s cubic-bezier(.2,.9,.2,1), background 0.55s, left 0.55s;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.12),
    inset 2px 2px 4px rgba(255,255,255,0.8),
    inset -2px -2px 4px rgba(0,0,0,0.06);
  background: radial-gradient(circle at 30% 30%, #fff9c4 0 20%, #ffd54f 40%, #f7b733 100%);
  transform: translateX(0) scale(1);
}

/* ::after = 光晕 / 云朵 / 星星（用多个 box-shadow 构成） */
.toggle::after{
  content:"";
  position:absolute;
  width: calc(var(--h) * 1.2);
  height: calc(var(--h) * 1.2);
  left: calc(var(--pad) - 6px);
  top: calc(var(--pad) - 6px);
  border-radius:50%;
  z-index:2;
  transition: all 0.55s cubic-bezier(.2,.9,.2,1);
  /* 白天：云朵 + 柔和光晕（利用 box-shadow 多个影子模拟） */
  box-shadow:
    /* cloud pieces */
    24px 8px 0 -6px rgba(255,255,255,0.98),
    40px 22px 0 -6px rgba(255,255,255,0.96),
    58px 28px 0 -6px rgba(255,255,255,0.95),
    82px 12px 0 -6px rgba(255,255,255,0.92),

    /* soft glow */
    0 0 30px 6px rgba(247,183,51,0.08),
    0 0 8px 2px rgba(247,183,51,0.12);
  opacity:1;
}

/* Hover 提升感 */
.toggle:hover{ transform: translateX(-50%) translateY(-2px) }
.toggle:hover::before{ transform: scale(1.03) }

/* ========== 切换到夜间（body.dark）效果 ========== */
body.dark .toggle{
  background-position: 100% 0%; /* 背景整体向左滑，显示夜侧颜色 */
  box-shadow:
    6px 6px 18px rgba(0,0,0,0.55),
    -6px -6px 12px rgba(20,45,70,0.15);
}

/* 圆盘移动到右侧并变为月亮（用多重 radial-gradients 做陨石坑） */
body.dark .toggle::before{
  left: calc(var(--w) - (var(--h) - var(--pad)*2) - var(--pad)); /* 移到右侧内边距位置 */
  background:
    radial-gradient(circle at 50% 20%, #939aa5 0 6px, transparent 7px),
    radial-gradient(circle at 35% 45%, #7f8690 0 10px, transparent 11px),
    radial-gradient(circle at 72% 50%, #8b939e 0 8px, transparent 9px),
    radial-gradient(#ccd6e0,#c5d2de);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 2px 2px 6px rgba(255,255,255,0.06);
  transform: translateX(0) scale(0.95);
}

/* 光晕/云朵伪元素过渡为星星（把原本的 cloud shadows 变为透明，并用小白点模拟星星） */
body.dark .toggle::after{
  left: calc(var(--pad) - 6px + 60px); /* 右移，跟随月亮产生“尾迹” */
  box-shadow:
    /* cloud pieces -> transparent for transition smoothness */
    24px 8px 0 -6px transparent,
    40px 22px 0 -6px transparent,
    58px 28px 0 -6px transparent,
    82px 12px 0 -6px transparent,

    /* subtle stars using many tiny dots placed via shadows */
    6px -18px 0 0 rgba(255,255,255,0.95),
    -6px -8px 0 0 rgba(255,255,255,0.85),
    10px -6px 0 0 rgba(255,255,255,0.9),
    -12px -20px 0 0 rgba(255,255,255,0.75),
    14px -14px 0 0 rgba(255,255,255,0.8);

  opacity:1;
  transform: scale(0.95);
}

/* focus outline */
.toggle:focus{ outline: 3px solid rgba(59,130,246,0.18); outline-offset:3px }

/* responsive */
@media (max-width:480px){
  .card{ padding:22px 16px }
  h1{ font-size:22px }
  .toggle{ --w:100px; --h:44px; --offset:6px; top: calc(-1 * (var(--h) / 2) - var(--offset)); }
}