/* =========================================================
   redstone-extra.css — 红石元素装饰层（rsx-*）
   只做装饰：绝对定位、pointer-events:none、aria-hidden、压在正文之下
   - 资源：assets/img/redstone/*.png（项目内已有），无外部请求
   - 暗色覆盖：html[data-theme="night"]
   - 动效：prefers-reduced-motion: reduce 时全部停止
   ========================================================= */

/* ---------------------------------------------------------
   0. 容器与变量
   --------------------------------------------------------- */
.rsx {
  --rsx-red: var(--redstone, #d63a2f);
  --rsx-red-hot: #ff7a63;
  --rsx-red-deep: var(--redstone-dark, #8f1f18);
  --rsx-glow: var(--redstone-glow, rgba(214, 58, 47, 0.45));
  --rsx-frame: rgba(43, 33, 25, 0.16);
  --rsx-frame-bg: rgba(255, 253, 247, 0.55);
  --rsx-shadow: rgba(43, 33, 25, 0.08);
  --rsx-op: 0.42;
  --rsx-icon: 18px;

  position: absolute;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  border: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: -1;
}

.rsx,
.rsx *,
.rsx *::before,
.rsx *::after {
  pointer-events: none;
}

/* 让 z-index:-1 的装饰落在「区块背景之上、正文之下」
   isolation 不参与布局，不影响任何既有盒模型 */
.section,
.site-footer {
  isolation: isolate;
}

/* ---------------------------------------------------------
   1. 通用零件：红石粉线 / 信号流动 / 元件图标
   --------------------------------------------------------- */
.rsx-rail {
  position: absolute;
  height: 8px;
  overflow: hidden;
}

/* 像素红石粉底纹（复用已有 png） */
.rsx-rail__dust {
  position: absolute;
  inset: 0;
  background-image: url("../img/redstone/dust-line.png");
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: auto 100%;
  image-rendering: pixelated;
  opacity: var(--rsx-op);
}

/* 沿线路「通电」的高光扫过 */
.rsx-rail__flow {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 122, 99, 0) 0%,
    rgba(255, 122, 99, 0.55) 32%,
    #ffd9c9 50%,
    rgba(255, 122, 99, 0.55) 68%,
    rgba(255, 122, 99, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 22% 100%;
  background-position: -34% 0;
  opacity: 0.85;
  filter: drop-shadow(0 0 5px rgba(255, 107, 87, 0.5));
  animation: rsx-feed 7.5s linear infinite;
}

.rsx-rail__flow--alt {
  opacity: 0.45;
  animation-duration: 12s;
  animation-delay: -5.5s;
}

@keyframes rsx-feed {
  from {
    background-position: -34% 0;
  }
  to {
    background-position: 134% 0;
  }
}

/* 竖向线路（纯 CSS 绘制） */
.rsx-vrail {
  position: absolute;
  width: 3px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 122, 99, 0) 0%,
    var(--rsx-red) 12%,
    var(--rsx-red) 88%,
    rgba(255, 122, 99, 0) 100%
  );
  opacity: 0.55;
  box-shadow: 0 0 8px rgba(214, 58, 47, 0.22);
}

.rsx-vrail__flow {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(255, 214, 200, 0) 0%,
    rgba(255, 214, 200, 0.9) 50%,
    rgba(255, 214, 200, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 16%;
  background-position: 0 -22%;
  animation: rsx-feed-y 8.5s linear infinite;
}

@keyframes rsx-feed-y {
  from {
    background-position: 0 -22%;
  }
  to {
    background-position: 0 122%;
  }
}

/* 小元件：尺寸统一、像素渲染 */
.rsx-node {
  position: absolute;
  width: var(--rsx-icon);
  height: var(--rsx-icon);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(43, 33, 25, 0.14));
}

.rsx-i--torch { background-image: url("../img/redstone/torch.png"); }
.rsx-i--lamp { background-image: url("../img/redstone/lamp_on.png"); }
.rsx-i--lamp-off { background-image: url("../img/redstone/lamp_off.png"); }
.rsx-i--repeater { background-image: url("../img/redstone/repeater.png"); }
.rsx-i--comparator { background-image: url("../img/redstone/comparator.png"); }
.rsx-i--observer { background-image: url("../img/redstone/observer.png"); }
.rsx-i--target { background-image: url("../img/redstone/target.png"); }
.rsx-i--note { background-image: url("../img/redstone/note.png"); }
.rsx-i--dropper { background-image: url("../img/redstone/dropper.png"); }
.rsx-i--hopper { background-image: url("../img/redstone/hopper.png"); }
.rsx-i--minecart { background-image: url("../img/redstone/minecart.png"); }
.rsx-i--rail { background-image: url("../img/redstone/rail.png"); }
.rsx-i--dust { background-image: url("../img/redstone/dust.png"); }
.rsx-i--piston { background-image: url("../img/redstone/piston.png"); }
.rsx-i--lever { background-image: url("../img/redstone/lever.png"); }
.rsx-i--rs-block { background-image: url("../img/redstone/rs_block.png"); }

/* 红石灯呼吸 */
.rsx-lamp {
  background-image: url("../img/redstone/lamp_on.png");
  filter: drop-shadow(0 0 6px rgba(255, 170, 100, 0.55));
}

.rsx-lamp::after {
  content: "";
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 120, 0.5),
    rgba(255, 160, 90, 0) 62%
  );
  animation: rsx-breathe 4.6s ease-in-out infinite;
}

@keyframes rsx-breathe {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

/* 火把火焰闪烁 */
.rsx-flicker {
  animation: rsx-flicker 2.6s steps(1, end) infinite;
}

@keyframes rsx-flicker {
  0% {
    opacity: 0.96;
    transform: translateY(0) scale(1);
  }
  14% {
    opacity: 0.7;
    transform: translateY(-1px) scale(0.97);
  }
  22% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  38% {
    opacity: 0.82;
    transform: translateY(0) scale(0.99);
  }
  46% {
    opacity: 1;
    transform: translateY(-1px) scale(1.01);
  }
  74% {
    opacity: 0.88;
    transform: translateY(0) scale(1);
  }
  82% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 0.96;
    transform: translateY(0) scale(1);
  }
}

/* 中继器脉动 */
.rsx-repeater::after {
  content: "";
  position: absolute;
  inset: -28%;
  border: 2px solid rgba(255, 107, 87, 0.5);
  border-radius: 3px;
  animation: rsx-pulse 3.4s ease-out infinite;
}

@keyframes rsx-pulse {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  28% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* ---------------------------------------------------------
   2. 顶栏：一条红石线路压在导航下面
   --------------------------------------------------------- */
.rsx-head {
  left: 0;
  right: 0;
  bottom: -2px;
  height: 16px;
  overflow: hidden;
  z-index: -1;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.rsx-head__rail {
  top: 4px;
  left: 0;
  right: 0;
  height: 8px;
}

.rsx-head__node {
  top: -1px;
}

.rsx-head__node--a {
  left: 7%;
}

.rsx-head__node--b {
  right: 9%;
}

/* ---------------------------------------------------------
   3. 首屏：左右两条竖向支线（左：红石灯 / 右：中继器·火把）
   --------------------------------------------------------- */
.rsx-hero {
  --rsx-edge: clamp(10px, 2.4vw, 36px);
  --rsx-left-h: min(22vh, 200px);
  --rsx-right-h: min(42vh, 380px);
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* 左侧：从顶栏线路拐下来的支线，尽头一盏红石灯 */
.rsx-hero__vrail--l {
  left: var(--rsx-edge);
  top: calc(var(--header-h, 74px) - 2px);
  width: 3px;
  height: var(--rsx-left-h);
}

.rsx-hero__lamp {
  left: calc(var(--rsx-edge) - 8px);
  top: calc(var(--header-h, 74px) - 7px + var(--rsx-left-h));
}

/* 右侧：竖向线路，顶端中继器、末端火把 */
.rsx-hero__vrail--r {
  right: var(--rsx-edge);
  top: 24%;
  width: 3px;
  height: var(--rsx-right-h);
}

.rsx-hero__repeater {
  top: calc(24% - 26px);
  right: calc(var(--rsx-edge) - 8px);
}

.rsx-hero__torch {
  top: calc(24% + var(--rsx-right-h) - 8px);
  right: calc(var(--rsx-edge) - 9px);
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------
   4. 区块：上下边缘的红石线路 + 元件 + 标题旁小元件
   --------------------------------------------------------- */
.rsx-sec {
  --rsx-inset: 2%;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.rsx-sec__rail {
  top: 16px;
  left: var(--rsx-inset);
  width: min(300px, 34%);
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent 100%);
}

.rsx-sec__rail--b {
  top: auto;
  bottom: 16px;
  left: auto;
  right: var(--rsx-inset);
  width: min(230px, 26%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 18%,
    #000 100%
  );
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%);
}

.rsx-sec__rail--b .rsx-rail__flow {
  animation-direction: reverse;
}

.rsx-sec__node {
  top: 11px;
  left: calc(var(--rsx-inset) + 6px);
}

.rsx-sec__node--b {
  top: auto;
  left: auto;
  bottom: 11px;
  right: calc(var(--rsx-inset) + 6px);
}

/* 标题旁的小元件（位置由 JS 按 .eyebrow 计算） */
.rsx-orn {
  width: 24px;
  height: 24px;
  border: 2px solid var(--rsx-frame);
  border-radius: 5px;
  background-color: var(--rsx-frame-bg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 var(--rsx-shadow);
  opacity: 0.9;
}

/* ---------------------------------------------------------
   5. 页脚：线路从顶部延伸进来
   --------------------------------------------------------- */
.rsx-foot {
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.rsx-foot__rail {
  top: 14px;
  left: 0;
  width: min(360px, 46%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 88%,
    transparent 100%
  );
}

.rsx-foot__cart {
  top: 7px;
  left: calc(min(360px, 46%) - 26px);
}

.rsx-foot__torch {
  top: 8px;
  right: 4%;
}

/* ---------------------------------------------------------
   6. 暗色覆盖：换成发光观感
   --------------------------------------------------------- */
html[data-theme="night"] .rsx {
  --rsx-op: 0.58;
  --rsx-frame: rgba(255, 214, 180, 0.26);
  --rsx-frame-bg: rgba(24, 20, 16, 0.5);
  --rsx-shadow: rgba(0, 0, 0, 0.42);
}

html[data-theme="night"] .rsx-rail__dust {
  opacity: var(--rsx-op);
  filter: brightness(1.3) saturate(1.15) drop-shadow(0 0 7px rgba(255, 96, 72, 0.6));
}

html[data-theme="night"] .rsx-rail__flow {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 140, 110, 0.85));
}

html[data-theme="night"] .rsx-vrail {
  opacity: 0.85;
  box-shadow: 0 0 16px rgba(255, 90, 70, 0.55);
}

html[data-theme="night"] .rsx-vrail__flow {
  filter: drop-shadow(0 0 6px rgba(255, 150, 120, 0.9));
}

html[data-theme="night"] .rsx-node {
  filter: drop-shadow(0 0 8px rgba(255, 110, 80, 0.65)) brightness(1.12);
}

html[data-theme="night"] .rsx-lamp {
  filter: drop-shadow(0 0 14px rgba(255, 196, 110, 0.9)) brightness(1.16);
}

html[data-theme="night"] .rsx-lamp::after {
  inset: -105%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 130, 0.8),
    rgba(255, 150, 80, 0) 62%
  );
}

html[data-theme="night"] .rsx-flicker {
  filter: drop-shadow(0 0 12px rgba(255, 124, 82, 0.78)) brightness(1.14);
}

html[data-theme="night"] .rsx-repeater::after {
  border-color: rgba(255, 138, 110, 0.7);
}

html[data-theme="night"] .rsx-orn {
  border-color: var(--rsx-frame);
  background-color: var(--rsx-frame-bg);
}

/* ---------------------------------------------------------
   7. 窄屏收敛：只留线条，不挤占内容
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .rsx {
    --rsx-icon: 16px;
  }
  .rsx-hero {
    --rsx-left-h: min(18vh, 150px);
    --rsx-right-h: min(32vh, 260px);
  }
  .rsx-sec__rail {
    width: min(200px, 46%);
  }
  .rsx-sec__rail--b {
    width: min(150px, 34%);
  }
}

@media (max-width: 640px) {
  .rsx-head__node--b,
  .rsx-hero__vrail--r,
  .rsx-hero__repeater,
  .rsx-hero__torch,
  .rsx-foot__torch {
    display: none;
  }
  .rsx-hero {
    --rsx-left-h: min(14vh, 110px);
  }
  .rsx-sec__rail {
    width: min(140px, 42%);
  }
  .rsx-sec__rail--b {
    width: min(110px, 30%);
  }
  .rsx-orn {
    width: 20px;
    height: 20px;
    background-size: 14px 14px;
  }
}

/* ---------------------------------------------------------
   8. 无障碍：减少动态时全部静止
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rsx,
  .rsx *,
  .rsx *::before,
  .rsx *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* JS 兜底（媒体查询变化时同步） */
html.rsx-still .rsx,
html.rsx-still .rsx *,
html.rsx-still .rsx *::before,
html.rsx-still .rsx *::after {
  animation: none !important;
  transition: none !important;
}

/* 打印时不需要装饰 */
@media print {
  .rsx {
    display: none !important;
  }
}