/* ============================================================
   换主题入场转场 v2 · 揭幕式（2026-10-01）
   v1 只有一条 3px 带子 + 10% 薄纱，站长判"太素"。
   v2 照站点自己已有的两套入场（national-entrance 的揭幕、naruto-entrance 的由暗到亮）
   的机理做重，但守住三条：只动 transform / opacity；总时长压在 1.05s 内；
   全程 pointer-events:none，不挡点击也不接点击，节点播完即摘。
   配色全部走钩子，主题不声明就掉到自己的 --blue / --nav-bg，所以 8 套主题零改动通吃。
   ============================================================ */
.ne-swap {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; overflow: hidden;
  --ne-a: var(--ne-swap-a, var(--blue, #4169E1));
  --ne-b: var(--ne-swap-b, var(--blue, #4169E1));
  --ne-bg: var(--ne-swap-bg, var(--nav-bg, #2a2a2a));
}

/* 1. 两幅幕布从左右对穿：左→右、右→左，中段在屏幕中心交叠，
      交叠的那一瞬正好把"旧主题已经变了"这件事盖过去 */
.ne-swap-panel {
  position: absolute; top: 0; bottom: 0; width: 62%;
  background: linear-gradient(180deg, var(--ne-bg), var(--ne-a));
  opacity: 0;
}
.ne-swap-panel-l { left: 0; transform: translateX(-104%); animation: ne-panel-l 1000ms cubic-bezier(.66, 0, .34, 1) both; }
.ne-swap-panel-r { right: 0; transform: translateX(104%); animation: ne-panel-r 1000ms cubic-bezier(.66, 0, .34, 1) both; }
@keyframes ne-panel-l {
  0%   { transform: translateX(-104%); opacity: 1; }
  38%  { transform: translateX(38%);   opacity: 1; }
  62%  { transform: translateX(96%);   opacity: .96; }
  100% { transform: translateX(160%);  opacity: 0; }
}
@keyframes ne-panel-r {
  0%   { transform: translateX(104%);  opacity: 1; }
  38%  { transform: translateX(-38%);  opacity: 1; }
  62%  { transform: translateX(-96%);  opacity: .96; }
  100% { transform: translateX(-160%); opacity: 0; }
}

/* 2. 中缝：两幅幕交叠时亮起来的一条光带，静态 box-shadow 发光（不参与动画） */
.ne-swap-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px;
  background: linear-gradient(180deg, transparent, var(--ne-a) 22%, var(--ne-b) 78%, transparent);
  box-shadow: 0 0 26px 7px var(--ne-b);
  opacity: 0; transform: scaleY(.2);
  animation: ne-seam 1000ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes ne-seam {
  0%, 26% { opacity: 0; transform: scaleY(.2); }
  44%     { opacity: .95; transform: scaleY(1); }
  70%     { opacity: .5;  transform: scaleY(1); }
  100%    { opacity: 0;   transform: scaleY(1); }
}

/* 3. 主题母题碎屑：默认是菱形小方块，主题可以用 --ne-swap-motif 挂真资产
      （提瓦特挂的是从站长原图里抠出来的银杏/四芒星） */
.ne-swap-mote {
  position: absolute; width: var(--s, 12px); height: var(--s, 12px);
  background: var(--ne-a);
  -webkit-mask: var(--ne-swap-motif, none) no-repeat center / contain;
          mask: var(--ne-swap-motif, none) no-repeat center / contain;
  opacity: 0;
  animation: ne-mote 900ms ease-out both;
}
@keyframes ne-mote {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(.4); opacity: 0; }
  18%  { opacity: .95; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, 0), 0) rotate(var(--rot, 180deg)) scale(1); opacity: 0; }
}
.ne-swap:not([data-motif]) .ne-swap-mote {
  -webkit-mask: none; mask: none;
  border-radius: 2px; transform-origin: center;
}

/* 4. 顶部扫掠带：v1 唯一的那条，留作收尾，加宽到 4px 并配静态光晕 */
.ne-swap-band {
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--ne-a) 28%, var(--ne-b) 62%, transparent);
  box-shadow: 0 0 18px 4px var(--ne-a);
  animation: ne-swap-band 1000ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes ne-swap-band {
  0%   { transform: translateY(-2px) scaleX(.18); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translateY(100vh) scaleX(1); opacity: 0; }
}

/* 5. 薄纱：幕布交叠时把整页压一档，露出来时新主题像"亮了一下" */
.ne-swap-veil {
  position: absolute; inset: 0; background: var(--ne-a);
  opacity: 0; animation: ne-swap-veil 1000ms ease-out both;
}
@keyframes ne-swap-veil {
  0%, 30% { opacity: 0; }
  46%     { opacity: .22; }
  100%    { opacity: 0; }
}

/* 6. 揭幕后的落定：Hero 轻微回正，让"换好了"这件事有个收尾 */
.ne-swap-settle .hero { animation: ne-settle 520ms ease-out both; }
@keyframes ne-settle {
  0%   { transform: scale(.982); opacity: .55; }
  100% { transform: scale(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ne-swap { display: none; }
  .ne-swap-settle .hero { animation: none; }
}