/* 进化论 EVOLUTION 着陆页样式
 *
 * 深色霓虹主题:径向光晕背景 + 56px 网格 + JS 驱动的随机激光 + 交叉电火花。
 * 实现参考 apps/admin/src/views/auth/Login.vue 的 beam/spark 方案:
 *  - JS 每 1-2.8s 随机 spawn 一条 beam(横/纵交替),动画结束自动移除
 *  - 碰撞用"几何区间相交"判定,非 head 距离,所以视觉相交时刻必触发
 *  - spark = 核心白热球 + 7 条参差电弧射线,~700ms 自动消散
 *
 * 纯本地静态资源(无外部 CDN),符合 CSP default-src 'self'。
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: -apple-system, "SF Pro Display", "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  background: #05070d;
  color: #e6f1ff;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* 背景径向渐变光晕 */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(64, 156, 255, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(168, 85, 247, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 56px 网格,边缘 mask 渐隐 */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(99, 179, 237, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 179, 237, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* ───── beam 激光层(JS 动态注入) ───── */
.lasers, .sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sparks { mix-blend-mode: screen; z-index: 2; }

.beam {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}
.beam-h {
  height: 1px;
  --beam-color: 167, 139, 250;
  --beam-glow: 124, 58, 237;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--beam-color), 0.05) 30%,
    rgba(var(--beam-color), 0.95) 75%,
    #fff 100%
  );
  filter: drop-shadow(0 0 6px rgba(var(--beam-color), 0.85))
          drop-shadow(0 0 14px rgba(var(--beam-glow), 0.55));
}
.beam-v {
  width: 1px;
  --beam-color: 96, 165, 250;
  --beam-glow: 59, 130, 246;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--beam-color), 0.05) 30%,
    rgba(var(--beam-color), 0.95) 75%,
    #fff 100%
  );
  filter: drop-shadow(0 0 6px rgba(var(--beam-color), 0.85))
          drop-shadow(0 0 14px rgba(var(--beam-glow), 0.55));
}
.beam-purple { --beam-color: 167, 139, 250; --beam-glow: 124, 58, 237; }
.beam-blue   { --beam-color: 96, 165, 250;  --beam-glow: 59, 130, 246; }
.beam-cyan   { --beam-color: 103, 232, 249; --beam-glow: 14, 165, 233; }

/* 反向束:镜像渐变,白色亮端永远在运动前方 */
.beam-h.beam-rev {
  background: linear-gradient(
    270deg,
    transparent 0%,
    rgba(var(--beam-color), 0.05) 30%,
    rgba(var(--beam-color), 0.95) 75%,
    #fff 100%
  );
}
.beam-v.beam-rev {
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(var(--beam-color), 0.05) 30%,
    rgba(var(--beam-color), 0.95) 75%,
    #fff 100%
  );
}

.beam-h.beam-fwd { animation: beam-h-fwd linear forwards; }
.beam-h.beam-rev { animation: beam-h-rev linear forwards; }
.beam-v.beam-fwd { animation: beam-v-fwd linear forwards; }
.beam-v.beam-rev { animation: beam-v-rev linear forwards; }

/* 对撞湮灭:停帧 + 急亮一闪 + 渐隐(JS 加 .beam-consume) */
.beam-consume {
  animation-play-state: paused !important;
  opacity: 0;
  filter:
    brightness(2.4)
    drop-shadow(0 0 14px rgba(var(--beam-color), 0.95))
    drop-shadow(0 0 28px rgba(var(--beam-glow), 0.85));
  transition: opacity 280ms ease-out 60ms, filter 60ms ease-out;
}

/* fwd/rev 起终点严格对称:fwd start === rev end,fwd end === rev start。
 * 这样 JS beamRangeAt 用同一个 span = vw/vh + length + 160 即可,fwd/rev 共享公式。 */
@keyframes beam-h-fwd {
  0%   { transform: translateX(calc(-100% - 80px));   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 80px));   opacity: 0; }
}
@keyframes beam-h-rev {
  0%   { transform: translateX(calc(100vw + 80px));   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(-100% - 80px));   opacity: 0; }
}
@keyframes beam-v-fwd {
  0%   { transform: translateY(calc(-100% - 80px));   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(calc(100vh + 80px));   opacity: 0; }
}
@keyframes beam-v-rev {
  0%   { transform: translateY(calc(100vh + 80px));   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(calc(-100% - 80px));   opacity: 0; }
}

/* ───── 闪电球 spark(相交期间持续存在,离开后 500ms 渐隐) ───── */
.spark {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 1;
  animation: spark-rotate 600ms ease-in-out infinite alternate;
  transition: opacity 500ms ease-out;
}
.spark.spark-fadeout { opacity: 0; }
/* 核心:白热等离子点,体量小、贴着电弧群中心 */
.spark-core {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%,
      #ffffff 0%,
      rgba(186, 224, 255, 0.95) 30%,
      rgba(103, 232, 249, 0.7) 60%,
      transparent 100%);
  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 0.9),
    0 0 20px 5px rgba(103, 232, 249, 0.7),
    0 0 40px 10px rgba(96, 165, 250, 0.4);
  animation: spark-core 220ms ease-in-out infinite alternate;
}

/* SVG 画布:viewBox 中心在 (0,0);JS 每 ~110ms 重抽 polyline points
 * 性能关键:把 drop-shadow 集中到 SVG 容器层,而不是每条 polyline 上,
 * 让单颗球的滤镜合成由 18→1 次,显著降低主线程绘制成本。 */
.spark-svg {
  position: absolute;
  left: -100px;
  top: -100px;
  width: 200px;
  height: 200px;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 8px rgba(103, 232, 249, 0.65));
}
.spark-arc {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes spark-rotate {
  0%   { transform: scale(0.34) rotate(-4deg); }
  100% { transform: scale(0.34) rotate(4deg); }
}
@keyframes spark-core {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* 碎屑:从交点径向飞溅,衰减消失(尺寸已配合 spark 缩放) */
.shrapnel {
  position: absolute;
  width: 2px;
  height: 2px;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(186, 224, 255, 0.95) 40%, rgba(103, 232, 249, 0.7) 70%, transparent 100%);
  box-shadow:
    0 0 4px 1px rgba(186, 224, 255, 0.9),
    0 0 9px 3px rgba(103, 232, 249, 0.55);
  animation-name: shrapnel-fly;
  animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
  pointer-events: none;
}
@keyframes shrapnel-fly {
  0%   { transform: translate(0, 0) scale(1.3); opacity: 1; }
  40%  { opacity: 0.9; }
  100% { transform: translate(var(--sx, 0), var(--sy, 0)) scale(0.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .beam, .spark, .shrapnel { display: none; }
}

/* ───── 布局 ───── */
.frame {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 40px 56px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #7a8aa8;
  text-transform: uppercase;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-family: "SF Mono", Menlo, monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(168, 85, 247, 0.18));
  border: 1px solid rgba(99, 179, 237, 0.45);
  transition: all 0.2s ease;
}
.header-cta:hover {
  border-color: #22d3ee;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.32), rgba(168, 85, 247, 0.28));
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
  transform: translateY(-1px);
}
.header-cta .arrow { font-size: 10px; opacity: 0.75; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(99, 179, 237, 0.3);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 12px #22d3ee, 0 0 24px rgba(34, 211, 238, 0.5);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1080px;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.4em;
  color: #22d3ee;
  text-transform: uppercase;
  margin-bottom: 24px;
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.5);
}
h1 {
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, #a8b8d4 40%, #6b8aaf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
h1 .glow {
  background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.4));
}
.subtitle {
  font-size: clamp(18px, 1.6vw, 22px);
  color: #94a8c8;
  max-width: 640px;
  line-height: 1.5;
  font-weight: 300;
}

footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #4a5878;
  font-family: "SF Mono", Menlo, monospace;
  letter-spacing: 0.1em;
}

@media (max-width: 720px) {
  .frame { padding: 24px; }
}