/* ── 纯黑背景 ── */
.bg-gradient {
  position: fixed; inset: 0; z-index: 0;
  background: #000000;
}

/* ── 噪点纹理 ── */
.bg-noise {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── 视差几何 ── */
.parallax-layer {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}

.parallax-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(30, 64, 175, 0.10);
}

.parallax-circle-1 {
  width: 400px; height: 400px;
  top: 10%; left: -5%;
  background: radial-gradient(circle, rgba(30,64,175,0.04) 0%, transparent 70%);
}

.parallax-circle-2 {
  width: 250px; height: 250px;
  bottom: 15%; right: 8%;
  background: radial-gradient(circle, rgba(255,0,255,0.04) 0%, transparent 70%);
}

.parallax-circle-3 {
  width: 180px; height: 180px;
  top: 40%; right: 20%;
  border-color: rgba(30, 64, 175, 0.06);
  background: radial-gradient(circle, rgba(30,64,175,0.03) 0%, transparent 60%);
}

.parallax-line {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(30,64,175,0.10), transparent);
}

.parallax-line-1 { height: 300px; top: 5%; left: 15%; }
.parallax-line-2 { height: 200px; bottom: 30%; left: 35%; }
.parallax-line-3 { height: 250px; top: 20%; right: 25%; }

.parallax-dot {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(30, 64, 175, 0.20);
}

/* ── 几何美学浮动元素 ── */
.geo-hex {
  position: absolute;
  pointer-events: none;
  opacity: 0.12;
}

.geo-hex-1 {
  top: 18%; left: 8%;
  width: 80px; height: 92px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 0.5px solid #1e40af;
  background: rgba(30,64,175,0.04);
  animation: geoFloatA 7s ease-in-out infinite;
}

.geo-hex-2 {
  bottom: 22%; right: 12%;
  width: 60px; height: 69px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 0.5px solid #ff00ff;
  background: rgba(255,0,255,0.03);
  animation: geoFloatB 9s ease-in-out infinite;
}

.geo-hex-3 {
  top: 55%; left: 75%;
  width: 100px; height: 115px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 0.5px solid #1e40af;
  background: rgba(30,64,175,0.03);
  animation: geoFloatC 11s ease-in-out infinite;
}

.geo-tri {
  position: absolute;
  pointer-events: none;
}

.geo-tri-1 {
  top: 30%; right: 6%;
  width: 90px; height: 78px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: 0.5px solid rgba(255,0,255,0.15);
  background: rgba(255,0,255,0.03);
  opacity: 0.10;
  animation: geoFloatA 10s ease-in-out infinite;
}

.geo-tri-2 {
  bottom: 35%; left: 20%;
  width: 70px; height: 61px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: 0.5px solid rgba(30,64,175,0.12);
  background: rgba(30,64,175,0.02);
  opacity: 0.08;
  animation: geoFloatB 8s ease-in-out infinite;
}

/* ── 脉冲环 ── */
.geo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(30,64,175,0.10);
  pointer-events: none;
}

.geo-ring-1 {
  top: 15%; left: 60%;
  width: 300px; height: 300px;
  animation: pulseRing 5s ease-out infinite;
}

.geo-ring-2 {
  bottom: 10%; right: 30%;
  width: 200px; height: 200px;
  animation: pulseRing 7s ease-out infinite 2s;
}

/* ── 特斯拉 12-12-12 Canvas ── */
#vortexCanvas {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
}