/**
 * ═══════════════════════════════════════════
 *  Nebula Effects — 霓虹特效 & 科技感增强
 * ═══════════════════════════════════════════
 *  霓虹发光文字 | CRT扫描线 | 动态扫描光条
 *  科技感字体 | 霓虹边框动画 | 全息光泽
 */

/* ── Google Fonts (科技感无衬线) ── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── 字体 Token ── */
:root {
  --font-tech: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-mono-tech: 'Share Tech Mono', 'Consolas', 'Courier New', monospace;
  --font-display: 'Rajdhani', 'Orbitron', system-ui, sans-serif;

  /* 霓虹色板 */
  --neon-pink: #ff2d95;
  --neon-cyan: #00f0ff;
  --neon-purple: #b347ea;
  --neon-green: #39ff14;
  --neon-orange: #ff6b35;
  --neon-blue: #4488ff;
  --neon-gold: #ffd700;
}

/* ═══════════════════════════════════════
   CRT 扫描线叠加层
   ═══════════════════════════════════════ */

body.nebula-scanlines::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  opacity: 0.5;
}

/* 扫描线仅在深色模式启用 */
[data-theme="light"] body.nebula-scanlines::after {
  opacity: 0.15;
}

/* ── 动态扫描光条 ── */
.nebula-scan-bar {
  position: fixed;
  top: -150px;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 240, 255, 0.04) 30%,
    rgba(180, 71, 234, 0.08) 50%,
    rgba(0, 240, 255, 0.04) 70%,
    transparent 100%
  );
  animation: scanDown 8s linear infinite;
}

@keyframes scanDown {
  0% {
    top: -150px;
  }
  100% {
    top: 100vh;
  }
}

/* ═══════════════════════════════════════
   霓虹发光文字
   ═══════════════════════════════════════ */

.neon-text {
  font-family: var(--font-tech);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 霓虹粉 */
.neon-pink {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px var(--neon-pink),
    0 0 82px var(--neon-pink),
    0 0 92px var(--neon-pink),
    0 0 102px var(--neon-pink),
    0 0 151px var(--neon-pink);
  animation: neonFlicker 1.5s infinite alternate;
}

/* 霓虹青 */
.neon-cyan {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px var(--neon-cyan),
    0 0 82px var(--neon-cyan),
    0 0 92px var(--neon-cyan),
    0 0 102px var(--neon-cyan),
    0 0 151px var(--neon-cyan);
  animation: neonPulse 2s ease-in-out infinite;
}

/* 霓虹紫 */
.neon-purple {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px var(--neon-purple),
    0 0 82px var(--neon-purple),
    0 0 92px var(--neon-purple),
    0 0 102px var(--neon-purple),
    0 0 151px var(--neon-purple);
}

/* 霓虹绿 */
.neon-green {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px var(--neon-green),
    0 0 42px var(--neon-green),
    0 0 82px var(--neon-green),
    0 0 102px var(--neon-green);
}

/* 霓虹橙 */
.neon-orange {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px var(--neon-orange),
    0 0 82px var(--neon-orange),
    0 0 92px var(--neon-orange),
    0 0 102px var(--neon-orange),
    0 0 151px var(--neon-orange);
}

/* 霓虹蓝 */
.neon-blue {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px var(--neon-blue),
    0 0 82px var(--neon-blue),
    0 0 92px var(--neon-blue),
    0 0 102px var(--neon-blue);
}

/* 霓虹金 */
.neon-gold {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px var(--neon-gold),
    0 0 82px var(--neon-gold),
    0 0 92px var(--neon-gold),
    0 0 102px var(--neon-gold);
}

/* ── 霓虹动画 ── */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px var(--neon-pink),
      0 0 82px var(--neon-pink),
      0 0 92px var(--neon-pink),
      0 0 102px var(--neon-pink),
      0 0 151px var(--neon-pink);
  }
  20%, 24%, 55% {
    text-shadow:
      0 0 4px #fff,
      0 0 7px #fff,
      0 0 13px #fff,
      0 0 20px var(--neon-pink),
      0 0 35px var(--neon-pink);
  }
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px var(--neon-cyan),
      0 0 82px var(--neon-cyan),
      0 0 92px var(--neon-cyan),
      0 0 102px var(--neon-cyan),
      0 0 151px var(--neon-cyan);
  }
  50% {
    text-shadow:
      0 0 4px #fff,
      0 0 7px #fff,
      0 0 13px var(--neon-cyan),
      0 0 20px var(--neon-cyan),
      0 0 40px var(--neon-cyan),
      0 0 50px var(--neon-cyan);
  }
}

/* ═══════════════════════════════════════
   霓虹边框
   ═══════════════════════════════════════ */

.neon-border {
  position: relative;
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow:
    0 0 5px rgba(0, 240, 255, 0.2),
    inset 0 0 5px rgba(0, 240, 255, 0.1);
}

.neon-border::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    transparent 30%,
    var(--neon-cyan) 50%,
    var(--neon-purple) 70%,
    transparent
  );
  background-size: 300% 300%;
  animation: neonBorderSweep 4s linear infinite;
  z-index: -1;
  filter: blur(8px);
  opacity: 0.5;
}

.neon-border-pink::before {
  background: linear-gradient(
    45deg,
    transparent 30%,
    var(--neon-pink) 50%,
    var(--neon-orange) 70%,
    transparent
  );
  background-size: 300% 300%;
}

@keyframes neonBorderSweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 紧凑版霓虹边框（不占额外空间） */
.neon-border-inner {
  position: relative;
  overflow: hidden;
}

.neon-border-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  animation: neonBorderLine 3s linear infinite;
}

@keyframes neonBorderLine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ═══════════════════════════════════════
   全息光泽卡片
   ═══════════════════════════════════════ */

.holo-card {
  position: relative;
  overflow: hidden;
}

.holo-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(128, 128, 255, 0.08) 40deg,
    transparent 80deg,
    rgba(255, 128, 128, 0.06) 120deg,
    transparent 160deg,
    rgba(128, 255, 128, 0.05) 200deg,
    transparent 240deg,
    rgba(255, 200, 100, 0.06) 280deg,
    transparent 320deg,
    rgba(128, 128, 255, 0.08) 360deg
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.holo-card:hover::before {
  opacity: 0.8;
}

/* ═══════════════════════════════════════
   科技字体实用类
   ═══════════════════════════════════════ */

.font-tech {
  font-family: var(--font-tech);
}

.font-mono-tech {
  font-family: var(--font-mono-tech);
}

.font-display {
  font-family: var(--font-display);
}

/* ═══════════════════════════════════════
   数据面板 / 终端风格
   ═══════════════════════════════════════ */

.terminal-text {
  font-family: var(--font-mono-tech);
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
  letter-spacing: 0.05em;
}

.data-panel {
  font-family: var(--font-mono-tech);
  font-size: 13px;
  line-height: 1.8;
  color: var(--neon-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
}

/* ═══════════════════════════════════════
   3D 倾斜卡片 (CSS 部分)
   ═══════════════════════════════════════ */

.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(800px);
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.tilt-card .tilt-content {
  transform: translateZ(20px);
}

.tilt-card .tilt-deep {
  transform: translateZ(50px);
}

.tilt-card .tilt-shallow {
  transform: translateZ(10px);
}

/* 光效跟随层（通过JS动态更新CSS变量） */
.light-follow {
  position: relative;
  overflow: hidden;
}

.light-follow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s;
  opacity: 0;
}

.light-follow:hover::before {
  opacity: 1;
}

/* ═══════════════════════════════════════
   视差滚动
   ═══════════════════════════════════════ */

.parallax-container {
  perspective: 1px;
  perspective-origin: center top;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

.parallax-back {
  transform: translateZ(-2px) scale(3);
}

.parallax-mid {
  transform: translateZ(-1px) scale(2);
}

.parallax-front {
  transform: translateZ(0);
}

/* JS 驱动的视差（更灵活） */
.parallax-js {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ═══════════════════════════════════════
   数字滚动动画
   ═══════════════════════════════════════ */

.count-up {
  display: inline-block;
}

/* ═══════════════════════════════════════
   全局光晕增强（配合粒子系统）
   ═══════════════════════════════════════ */

.nebula-glow-base {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
  animation: glowDrift 12s ease-in-out infinite;
}

.nebula-glow-base.glow-top-left {
  width: 400px;
  height: 400px;
  background: var(--accent-1, #ff8d53);
  top: -150px;
  left: -100px;
  animation-delay: 0s;
}

.nebula-glow-base.glow-top-right {
  width: 350px;
  height: 350px;
  background: #7c3aed;
  top: -100px;
  right: -100px;
  animation-delay: -4s;
}

.nebula-glow-base.glow-bottom {
  width: 300px;
  height: 300px;
  background: var(--neon-cyan);
  bottom: -100px;
  left: 30%;
  animation-delay: -8s;
}

@keyframes glowDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(60px, -30px) scale(1.15);
  }
  50% {
    transform: translate(-20px, 40px) scale(0.9);
  }
  75% {
    transform: translate(-40px, -20px) scale(1.05);
  }
}

/* ═══════════════════════════════════════
   旋转霓虹边框 (Chrome @property)
   ═══════════════════════════════════════ */

/* 降级方案：两层伪元素模拟旋转 */
.neon-border-spin {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.neon-border-spin::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    var(--neon-cyan),
    var(--neon-purple),
    var(--neon-pink),
    var(--neon-orange),
    var(--neon-cyan)
  );
  animation: rotateBorder 3s linear infinite;
  z-index: -1;
  filter: blur(8px);
}

.neon-border-spin::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: inherit;
  background: var(--bg-card, #0d1117);
  z-index: -1;
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* @property 增强版（Chrome 115+） */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.neon-border-pro {
  --border-angle: 0deg;
  position: relative;
  border-radius: var(--radius-xl);
}

.neon-border-pro::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    var(--neon-cyan) 40deg,
    var(--neon-purple) 120deg,
    var(--neon-pink) 200deg,
    var(--neon-orange) 280deg,
    transparent 360deg
  );
  filter: blur(12px);
  z-index: -1;
  animation: borderAngleSpin 4s linear infinite;
}

.neon-border-pro::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: inherit;
  background: var(--bg-card, #0d1117);
  z-index: -1;
}

@keyframes borderAngleSpin {
  to {
    --border-angle: 360deg;
  }
}

/* ═══════════════════════════════════════
   自定义光标 + 拖尾
   ═══════════════════════════════════════ */

.cursor-custom {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(0, 240, 255, 0.6) 40%,
    transparent 70%
  );
  box-shadow:
    0 0 10px rgba(0, 240, 255, 0.8),
    0 0 30px rgba(0, 240, 255, 0.4),
    0 0 60px rgba(124, 58, 237, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
  mix-blend-mode: screen;
}

.cursor-custom.hovering {
  width: 32px;
  height: 32px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 45, 149, 0.6) 40%,
    transparent 70%
  );
  box-shadow:
    0 0 15px rgba(255, 45, 149, 0.8),
    0 0 40px rgba(255, 45, 149, 0.4),
    0 0 80px rgba(124, 58, 237, 0.3);
}

.cursor-trail-canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99998;
  width: 100%;
  height: 100%;
}

/* 隐藏原生光标 */
body.cursor-hidden,
body.cursor-hidden * {
  cursor: none !important;
}

/* ═══════════════════════════════════════
   页面切换转场
   ═══════════════════════════════════════ */

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99990;
  pointer-events: all;
  background: #080c14;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.page-transition.active {
  opacity: 1;
}

.page-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent,
    rgba(0, 240, 255, 0.05),
    transparent,
    rgba(124, 58, 237, 0.05),
    transparent
  );
  animation: rotateBorder 3s linear infinite;
}

/* 转场文字 */
.page-transition-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-tech);
  font-size: 24px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s 0.2s;
  letter-spacing: 0.1em;
}

.page-transition.active .page-transition-text {
  opacity: 1;
}

/* ═══════════════════════════════════════
   点击粒子爆炸
   ═══════════════════════════════════════ */

.particle-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99995;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: burstOut 0.8s ease-out forwards;
}

@keyframes burstOut {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--bx), var(--by)) scale(0);
  }
}

/* ═══════════════════════════════════════
   打字机效果
   ═══════════════════════════════════════ */

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--neon-cyan);
  animation:
    typing 3s steps(40, end),
    blinkCaret 0.75s step-end infinite;
  width: 0;
  animation-fill-mode: forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blinkCaret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: var(--neon-cyan);
  }
}

/* ═══════════════════════════════════════
   动态网格背景偏移
   ═══════════════════════════════════════ */

.bg-grid-animate {
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

/* ═══════════════════════════════════════
   渐变背景流动
   ═══════════════════════════════════════ */

.bg-gradient-flow {
  background: linear-gradient(
    135deg,
    var(--neon-purple),
    var(--neon-cyan),
    var(--neon-pink),
    var(--neon-orange),
    var(--neon-purple)
  );
  background-size: 400% 400%;
  animation: gradientFlow 8s ease infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ═══════════════════════════════════════
   响应式 & 无障碍
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .neon-pink,
  .neon-cyan,
  .neon-border-spin::before,
  .neon-border-pro::before,
  .bg-grid-animate,
  .bg-gradient-flow {
    animation: none;
  }
  .nebula-scan-bar {
    animation: none;
    display: none;
  }
  .neon-border::before {
    animation: none;
  }
  .tilt-card {
    transform: none !important;
  }
  .cursor-custom,
  .cursor-trail-canvas {
    display: none;
  }
  body.cursor-hidden,
  body.cursor-hidden * {
    cursor: auto !important;
  }
}

@media (max-width: 768px) {
  .neon-text {
    font-size: 0.85em;
  }
  .nebula-glow-base {
    opacity: 0.15;
  }
  .cursor-custom,
  .cursor-trail-canvas {
    display: none;
  }
}

/* ══ 安全规则：确保粒子 Canvas 永不拦截点击 ══ */
#nebula-canvas {
  pointer-events: none !important;
  z-index: 0;
}