/* ==========================================================================
   GK 统一频道头部 —— 主站 / 影像 / 影评 / 作品 四站共用
   桌面：logo（+频道标识）居左，频道一排靠右
   手机：logo 居中，第一排 4 个主频道居中，第二排 6 个文字频道
   ========================================================================== */

/* ---------- 品牌 ---------- */
.gk-ch-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}
.gk-ch-brand img {
  display: block;
  height: 32px;
  width: auto;
  max-width: none;
}
.gk-ch-tag {
  font-size: .68rem;
  letter-spacing: .16em;
  line-height: 1;
  color: rgba(201, 169, 98, .95);
  padding-left: .75rem;
  border-left: 1px solid rgba(201, 169, 98, .45);
  white-space: nowrap;
}

/* ---------- 频道 ---------- */
.gk-ch-links {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex-wrap: nowrap;
}
.gk-ch-row {
  display: flex;
  align-items: center;
  gap: .08rem;
}
.gk-ch-row--sub {
  margin-left: .3rem;
  padding-left: .55rem;
  border-left: 1px solid rgba(0, 0, 0, .1);
}
.gk-ch {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .42rem .6rem;
  border-radius: 999px;
  font-size: .92rem;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: var(--ink, #22303f);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.gk-ch svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .92;
}
.gk-ch:hover {
  color: var(--gold, #b99342);
  background: rgba(201, 169, 98, .12);
}
.gk-ch.is-cur {
  color: var(--gold, #b99342);
  background: rgba(201, 169, 98, .16);
  font-weight: 600;
}
.gk-ch-p { font-weight: 600; }

/* 「关于我」：不再用金色胶囊/呼吸动画，改为普通频道样式 + 一个引导箭头 */
.gk-ch-guide { position: relative; }
.gk-ch-guide::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-left: 1px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  transition: opacity .2s ease, transform .2s ease;
}
.gk-ch-guide:hover::after { opacity: .9; transform: rotate(45deg) translate(1px, -1px); }

/* ---------- 深色首屏（.nav.top 透明压在 hero 上）时的配色 ---------- */
.nav.top .gk-ch { color: rgba(255, 255, 255, .8); }
.nav.top .gk-ch:hover { color: var(--gold-lt, #e8d3a0); background: rgba(255, 255, 255, .1); }
.nav.top .gk-ch.is-cur { color: var(--gold-lt, #e8d3a0); background: rgba(255, 255, 255, .12); }
.nav.top .gk-ch-tag { color: rgba(255, 255, 255, .62); border-left-color: rgba(255, 255, 255, .26); }
.nav.top .gk-ch-row--sub { border-left-color: rgba(255, 255, 255, .18); }

/* ==========================================================================
   手机：logo 居中 + 两排频道
   ========================================================================== */
@media (max-width: 768px) {
  /* 品牌区上下留白相等：padding-top（上方）= .nav-inner 的 gap（下方） */
  .nav { padding: 13px 14px 10px; }
  .nav-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
  }
  .gk-ch-brand { justify-content: center; gap: 9px; }
  .gk-ch-brand img { height: 30px; }
  .gk-ch-tag { font-size: .72rem; letter-spacing: .14em; padding-left: 9px; }

  /* 导航区：与品牌区之间一条极淡发丝线，形成「品牌条 / 导航条」两段式 */
  .gk-ch-links {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding-top: 11px;
    border-top: 1px solid rgba(201, 169, 98, .16);
  }
  /* 两排都铺满整宽、均匀分布，不再挤在中间 */
  .gk-ch-row {
    width: 100%;
    justify-content: space-evenly;
    gap: 0;
  }
  .gk-ch-row--sub {
    margin-left: 0;
    padding-left: 0;
    padding-top: 5px;
    border-left: 0;
    border-top: 1px solid rgba(201, 169, 98, .1);
    gap: 0;
    background: none;
    border-radius: 0;
  }
  .gk-ch { font-size: 1rem; padding: .4rem .22rem; gap: .32rem; }
  .gk-ch svg { width: 17px; height: 17px; flex: 0 0 17px; }
  .gk-ch-row--sub .gk-ch { font-size: .95rem; padding: .36rem .18rem; color: rgba(34, 48, 63, .84); }
  .nav.top .gk-ch-row--sub .gk-ch { color: rgba(255, 255, 255, .78); }
  .gk-ch-row--sub .gk-ch-guide { font-size: .95rem; padding: .36rem .18rem; }

  .nav-toggle,
  .nav-social { display: none; }
}

/* 极窄屏：主频道再收一点，保证 4 个一排不换行 */
@media (max-width: 360px) {
  .gk-ch { font-size: .9rem; padding: .38rem .4rem; }
  .gk-ch svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .gk-ch-row--sub .gk-ch { font-size: .9rem; padding: .38rem .38rem; }
  .gk-ch-brand img { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .gk-ch-guide { animation: none; }
}

/* ==========================================================================
   固定头部变高后的页面顶部留白（仅 yzipicc 系站点：主站 / 影评）
   手机头部实测 103px，这里给各页面首屏容器留 121px
   ========================================================================== */
@media (max-width: 768px) {
  .hero,
  .hero.hero-slim { padding-top: 10rem; }
  .post-hero { padding-top: 10.2rem; }
  .err-wrap { padding-top: 10rem; }
}

/* ==========================================================================
   频道高亮（2026-10-20 第四版 · 金黄统一）
   只高亮当前频道；四站用同一套金色，避免作品站看起来「发灰」
   ========================================================================== */
.gk-ch.is-cur {
  color: #7d5f1c;
  font-weight: 700;
  background: rgba(201, 169, 98, .26);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 98, .62), 0 0 12px -4px rgba(201, 169, 98, .55);
}
.nav.top .gk-ch.is-cur,
.gk-ch-nav .gk-ch.is-cur {
  color: #ffe9b8;
  background: rgba(232, 211, 160, .24);
  box-shadow: inset 0 0 0 1px rgba(240, 214, 150, .8), 0 0 14px -4px rgba(240, 214, 150, .6);
  text-shadow: 0 0 9px rgba(255, 226, 160, .5);
}

/* 副行允许换行（关于我和作品排末尾时，窄屏自动落到下一行） */
.gk-ch-row--sub { flex-wrap: wrap; }

@media (max-width: 768px) {
  .gk-ch-row--sub .gk-ch.is-cur { padding: .4rem .5rem; }
}


/* ==========================================================================
   第二排栏目：质感与交互（2026-10-20）
   ========================================================================== */
.gk-ch-row--sub {
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(201, 169, 98, .08) 0%, rgba(201, 169, 98, 0) 100%);
}
.gk-ch-row--sub .gk-ch {
  position: relative;
  transition: color .22s ease, text-shadow .22s ease, background-color .22s ease;
}
/* hover：底部金色光条从中间向两侧展开 */
.gk-ch-row--sub .gk-ch::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(232, 205, 140, 0), #f2d79b, rgba(232, 205, 140, 0));
  opacity: 0;
  transition: left .32s cubic-bezier(.4, 0, .2, 1), right .32s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
  pointer-events: none;
}
.gk-ch-row--sub .gk-ch:not(.is-cur):hover::after {
  left: 14%;
  right: 14%;
  opacity: 1;
}
.gk-ch-row--sub .gk-ch:not(.is-cur):hover {
  color: #ffe9b8;
  text-shadow: 0 0 10px rgba(255, 230, 170, .55);
}

/* ==========================================================================
   头部与正文之间：双光子对撞分隔线（2026-10-20）
   —— 两道光从左右向中间生长，中心相撞迸出火花，随后消失、循环
   ========================================================================== */
.gk-ch-beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  z-index: 3;
}
/* 静态底线（很淡，保证任何时候都有边界） */
.gk-ch-beam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, .25) 20%,
    rgba(201, 169, 98, .28) 80%,
    rgba(201, 169, 98, 0) 100%);
}
/* 左右两道光 */
.gk-ch-beam span {
  position: absolute;
  bottom: 0;
  width: 47%;
  height: 1.5px;
  border-radius: 2px;
  filter: drop-shadow(0 0 5px rgba(255, 226, 160, .85));
  will-change: transform, opacity;
}
.gk-ch-beam span:first-child {
  left: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(232, 205, 140, 0) 0%, rgba(255, 240, 200, .5) 55%, #fffdf5 100%);
  animation: gkBeamL 4.2s cubic-bezier(.45, 0, .25, 1) infinite;
}
.gk-ch-beam span:last-child {
  right: 0;
  transform-origin: right center;
  background: linear-gradient(270deg, rgba(232, 205, 140, 0) 0%, rgba(255, 240, 200, .5) 55%, #fffdf5 100%);
  animation: gkBeamR 4.2s cubic-bezier(.45, 0, .25, 1) infinite;
}
/* 碰撞火花 */
.gk-ch-beam::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-bottom: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf2 0%, rgba(255, 234, 184, .95) 38%, rgba(255, 208, 120, 0) 72%);
  box-shadow: 0 0 18px 6px rgba(255, 226, 160, .55);
  opacity: 0;
  transform: scale(.3);
  animation: gkSpark 4.2s ease-out infinite;
}
@keyframes gkBeamL {
  0%   { transform: scaleX(0);    opacity: 0; }
  6%   { transform: scaleX(.03);  opacity: .9; }
  40%  { transform: scaleX(1);    opacity: 1; }
  46%  { transform: scaleX(1);    opacity: 1; }
  54%  { transform: scaleX(1);    opacity: 0; }
  100% { transform: scaleX(1);    opacity: 0; }
}
@keyframes gkBeamR {
  0%   { transform: scaleX(0);    opacity: 0; }
  6%   { transform: scaleX(.03);  opacity: .9; }
  40%  { transform: scaleX(1);    opacity: 1; }
  46%  { transform: scaleX(1);    opacity: 1; }
  54%  { transform: scaleX(1);    opacity: 0; }
  100% { transform: scaleX(1);    opacity: 0; }
}
@keyframes gkSpark {
  0%, 40% { opacity: 0; transform: scale(.25); }
  46%     { opacity: 1; transform: scale(1); }
  54%     { opacity: .9; transform: scale(2.2); }
  64%     { opacity: 0; transform: scale(3.4); }
  100%    { opacity: 0; transform: scale(.25); }
}
@media (prefers-reduced-motion: reduce) {
  .gk-ch-beam span { animation: none; opacity: 0; }
  .gk-ch-beam::after { animation: none; opacity: 0; }
}

/* ===== 手机端收尾：去掉第二排的色带与多余分隔线，只留品牌区发丝线 + 光子线 ===== */
@media (max-width: 768px) {
  .gk-ch-row--sub {
    background: none;
    border-radius: 0;
    border-top: 0;
    padding-top: 2px;
  }
}

/* ==========================================================================
   头部底部分隔：静态赛博朋克风格（2026-10-20 取代双光子对撞）
   构成：青→白→品红 的霓虹细线 + 两端 45° 斜切 + 中心发光菱形
   —— 全静态，不抢阅读视线
   ========================================================================== */
.gk-ch-beam {
  height: 10px;
  overflow: visible;
}
/* 主线：金色收尾，中间过渡到冷光 */
.gk-ch-beam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, .32) 14%,
    rgba(112, 214, 255, .38) 32%,
    rgba(255, 255, 255, .68) 50%,
    rgba(228, 124, 214, .36) 68%,
    rgba(201, 169, 98, .32) 86%,
    rgba(201, 169, 98, 0) 100%);
  box-shadow: 0 0 7px rgba(120, 205, 255, .22);
}
/* 两端：45° 斜切的小走线 */
.gk-ch-beam span {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 11px;
  border: 0;
  border-radius: 0;
  background: none;
  filter: none;
  opacity: 1;
  will-change: auto;
  animation: none;
  transform: rotate(45deg);
  transform-origin: bottom center;
}
.gk-ch-beam span:first-child {
  left: 11%;
  background: linear-gradient(180deg, rgba(112, 214, 255, 0), rgba(112, 214, 255, .85));
}
.gk-ch-beam span:last-child {
  right: 11%;
  background: linear-gradient(180deg, rgba(228, 124, 214, 0), rgba(228, 124, 214, .7));
}
/* 中心：静态发光菱形 */
.gk-ch-beam::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: linear-gradient(135deg, #ffffff 0%, #9fe8ff 48%, #e08cd8 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(159, 232, 255, .75), 0 0 15px rgba(224, 140, 216, .3);
  animation: none;
  opacity: 1;
}

/* 覆盖此前的动画（同权重后写，确保静态） */
.gk-ch-beam span:first-child,
.gk-ch-beam span:last-child {
  animation: none !important;
  transform: rotate(45deg);
  width: 1px;
  height: 11px;
  border-radius: 0;
  filter: none;
  opacity: 1;
}

/* 深色头部上霓虹线再压一档，避免整条发白 */
.gk-mh .gk-ch-beam::before {
  background: linear-gradient(90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, .28) 16%,
    rgba(112, 214, 255, .32) 34%,
    rgba(255, 255, 255, .58) 50%,
    rgba(228, 124, 214, .3) 66%,
    rgba(201, 169, 98, .28) 84%,
    rgba(201, 169, 98, 0) 100%);
  box-shadow: 0 0 6px rgba(120, 205, 255, .16);
}

/* ==========================================================================
   头部底部分隔：电路板走线（2026-10-20 第三版）
   —— 一条带台阶的青绿走线 + 发光节点，纯静态，宽度自适应（桌面/手机通用）
   ========================================================================== */
.gk-ch-beam,
.gk-mh .gk-ch-beam {
  height: 16px;
  bottom: 0;
  overflow: visible;
}
.gk-ch-beam span { display: none; }

/* 走线：4 段台阶 + 3 段竖线 */
.gk-ch-beam::before,
.gk-mh .gk-ch-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  box-shadow: none;
  background-image:
    linear-gradient(90deg, #2fe3a4 0 26%, rgba(0,0,0,0) 26%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 26%, #2fe3a4 26% 50%, rgba(0,0,0,0) 50%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 50%, #2fe3a4 50% 74%, rgba(0,0,0,0) 74%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 74%, #2fe3a4 74% 100%),
    linear-gradient(#2fe3a4, #2fe3a4),
    linear-gradient(#2fe3a4, #2fe3a4),
    linear-gradient(#2fe3a4, #2fe3a4);
  background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px, 1px 3px, 1px 4px, 1px 3px;
  background-position:
    0 bottom 6px,
    0 bottom 9px,
    0 bottom 5px,
    0 bottom 8px,
    26% bottom 6px,
    50% bottom 5px,
    74% bottom 5px;
  background-repeat: no-repeat;
  opacity: .9;
  filter: drop-shadow(0 0 3px rgba(47, 227, 164, .45));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* 节点：发光小圆点 */
.gk-ch-beam::after,
.gk-mh .gk-ch-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ★ 背景层数由 background-image 决定：多少个点就要写多少次渐变 */
  background-image:
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px),
    radial-gradient(circle, #e2fff8 0 1.1px, rgba(47,227,164,.95) 1.9px, rgba(47,227,164,0) 3px);
  background-size: 7px 7px;
  background-repeat: no-repeat;
  background-position:
    left 8%  bottom 3px,
    left 19% bottom 3px,
    left 33% bottom 6px,
    left 44% bottom 2px,
    left 57% bottom 2px,
    left 68% bottom 5px,
    left 81% bottom 5px,
    left 92% bottom 5px;
  filter: drop-shadow(0 0 4px rgba(47, 227, 164, .7));
  animation: none;
  opacity: 1;
  border-radius: 0;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  box-shadow: none;
  background-color: transparent;
}