/* =========================================================
   欧卡俱乐部 — extra.css（科技 HUD 层）
   ========================================================= */

/* 胶片颗粒 */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("../img/noise.svg");
}

/* ---------- HUD 仪表面板（四角括号） ---------- */
.hud {
  position: absolute; z-index: 4;
  left: 28px; top: 28px;
  background: rgba(11, 13, 17, 0.55);
  backdrop-filter: blur(8px);
  padding: 14px 18px;
  color: #fff;
  line-height: 1.55;
  font-family: var(--font-mono);
  clip-path: var(--clip-btn);
  box-shadow: inset 0 0 0 1px rgba(87, 214, 232, 0.3);
}
.hud b { color: var(--amber); font-weight: 600; }
.hud span {
  display: block; font-size: 10.5px;
  letter-spacing: .22em; color: var(--cyan);
  text-transform: uppercase;
}

/* ---------- 路况滚动条 ---------- */
.ticker {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #AEB9C6;
  overflow: hidden; white-space: nowrap;
  position: relative;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--ink-2), transparent); }
.ticker .run {
  display: inline-block; padding: 12px 0;
  animation: tick 26s linear infinite;
  font-family: var(--font-mono);
  letter-spacing: .08em; font-size: 13px;
}
.ticker .run span { margin: 0 28px; }
.ticker .run b { color: var(--amber); font-weight: 600; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 滚动动画 ---------- */
.reveal-img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1);
}
.reveal-img.in { clip-path: inset(0 0 0 0); }

.count {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 图表感装饰：数字后面的网格底 ---------- */
.big-num, .dash-stat .n {
  background-image:
    linear-gradient(rgba(87,214,232,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,214,232,.12) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ---------- 卡片悬浮角标 ---------- */
.card:hover::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 22px 22px;
  border-color: transparent transparent var(--amber) transparent;
  z-index: 2;
}

/* ---------- 图片统一电影调色 ---------- */
.slide { filter: saturate(1.05) contrast(1.04); }
.news-card .media { transition: transform .6s ease; }
.news-card:hover .media { transform: scale(1.05); }
.gallery-item { filter: contrast(1.05) saturate(1.05); }

/* ---------- 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker .run, .hero-eyebrow::before { animation: none; }
  .slide { transition: none; transform: none; }
}