/* ════════════════════════════════════════════════════════════════
   今测 JINCE · Hero 科技感装饰层（HUD）
   2026-10-14 用户要求「首页在不改变其他的情况下再有科技感一点」
   纯装饰层：四角取景框 + 左右刻度轨 + 顶底细边 + 旋转准星 + 横掠脉冲
   - 不改动 Hero 现有文案、布局、光幕背景与任何交互
   - 全部 pointer-events:none / aria-hidden，绝不遮挡可点击区域
   - 动效降级走站点统一策略（tokens.css 的 prefers-reduced-motion）
   ════════════════════════════════════════════════════════════════ */

.hero__hud {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__hud i {
  position: absolute;
  pointer-events: none;
}

/* ---- 四角取景角标：L 形，呼吸式明暗，错峰如取景器对焦 ---- */
.hud__c {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 6px rgba(204, 255, 0, 0.35));
  animation: hudBreathe 3.2s ease-in-out infinite;
}
.hud__c--tl {
  top: clamp(84px, 10vh, 108px);
  left: 26px;
  border-top: 1.5px solid rgba(204, 255, 0, 0.55);
  border-left: 1.5px solid rgba(204, 255, 0, 0.55);
  animation-delay: 0s;
}
.hud__c--tr {
  top: clamp(84px, 10vh, 108px);
  right: 26px;
  border-top: 1.5px solid rgba(204, 255, 0, 0.55);
  border-right: 1.5px solid rgba(204, 255, 0, 0.55);
  animation-delay: 0.8s;
}
.hud__c--bl {
  bottom: 64px;
  left: 26px;
  border-bottom: 1.5px solid rgba(204, 255, 0, 0.55);
  border-left: 1.5px solid rgba(204, 255, 0, 0.55);
  animation-delay: 1.6s;
}
.hud__c--br {
  bottom: 64px;
  right: 26px;
  border-bottom: 1.5px solid rgba(204, 255, 0, 0.55);
  border-right: 1.5px solid rgba(204, 255, 0, 0.55);
  animation-delay: 2.4s;
}

@keyframes hudBreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

/* ---- 左右刻度轨：1px 母线 + 等距短刻度 ---- */
.hud__rail {
  top: 15%;
  bottom: 17%;
  width: 10px;
}
.hud__rail--l {
  left: 15px;
  border-left: 1px solid rgba(204, 255, 0, 0.16);
  background: repeating-linear-gradient(
    180deg,
    rgba(204, 255, 0, 0.3) 0,
    rgba(204, 255, 0, 0.3) 1px,
    transparent 1px,
    transparent 13px
  );
  background-position: 9px 0;
  background-size: 5px 100%;
  background-repeat: no-repeat;
}
.hud__rail--r {
  right: 15px;
  border-right: 1px solid rgba(204, 255, 0, 0.16);
  background: repeating-linear-gradient(
    180deg,
    rgba(204, 255, 0, 0.3) 0,
    rgba(204, 255, 0, 0.3) 1px,
    transparent 1px,
    transparent 13px
  );
  background-position: -4px 0;
  background-size: 5px 100%;
  background-repeat: no-repeat;
}

/* ---- 顶 / 底细边：与角标对齐，合成取景框 ---- */
.hud__edge {
  left: 60px;
  right: 60px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(204, 255, 0, 0.2) 18%,
    rgba(204, 255, 0, 0.2) 82%,
    transparent
  );
}
.hud__edge--t { top: clamp(84px, 10vh, 108px); }
.hud__edge--b { bottom: 64px; }

/* ---- 旋转准星：双弧反向扫描 + 中心点，置于右上留白区 ---- */
.hud__reticle {
  top: 15%;
  right: 5%;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 352deg,
    rgba(204, 255, 0, 0.6) 352deg 360deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 0 76%,
    #000 77% 85%,
    transparent 86%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 0 76%,
    #000 77% 85%,
    transparent 86%
  );
  animation: hudSpin 26s linear infinite;
}
.hud__reticle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 140deg,
    transparent 0deg 4deg,
    rgba(204, 255, 0, 0.4) 4deg 11deg,
    transparent 11deg 360deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 0 60%,
    #000 61% 66%,
    transparent 67%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 0 60%,
    #000 61% 66%,
    transparent 67%
  );
  animation: hudSpinBack 18s linear infinite;
}
.hud__reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--lime, #ccff00);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(204, 255, 0, 0.8);
}

@keyframes hudSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hudSpinBack {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ---- 横掠脉冲：低透明度宽束缓慢扫过，像检测线往复 ---- */
.hud__sweep {
  top: 0;
  bottom: 0;
  left: -20vw;
  width: 20vw;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(204, 255, 0, 0.04) 42%,
    rgba(204, 255, 0, 0.08) 50%,
    rgba(204, 255, 0, 0.04) 58%,
    transparent
  );
  animation: hudSweep 14s linear infinite;
}

@keyframes hudSweep {
  from { transform: translateX(0); }
  to { transform: translateX(140vw); }
}

/* ---- TechText 字标辉光：青柠 + 深紫双色，贴合光幕 ---- */
.hero__title--wordmark .techword canvas {
  filter: drop-shadow(0 0 14px rgba(204, 255, 0, 0.18))
    drop-shadow(0 0 44px rgba(124, 92, 255, 0.14));
}

/* ---- 窄屏：只留角标与脉冲，收起刻度轨 / 准星 / 细边 ---- */
@media (max-width: 900px) {
  .hud__rail,
  .hud__reticle,
  .hud__edge {
    display: none;
  }
  .hud__c {
    width: 20px;
    height: 20px;
  }
}