/* ============================================================
 * nfs-base.css — 汽车公园公用 NFS 竞速风基元（全园共享）
 * 从 windtunnel/css/nfs.css 抽取的公共部分：
 *   ① 流程层配色变量  ② 背景层（网格/速度线/光条/暗角）
 *   ③ 斜切幕布转场 #flWipe  ④ CTA / 幽灵按钮
 * 子系统页面请先加载本文件，再加载各自的皮肤样式。
 * ============================================================ */

:root {
  --fl-acc: #22d3ee;
  --fl-acc2: #ffb020;
  --fl-hot: #ff3b30;
  --fl-ink: #eaf6ff;
}

/* ── 背景层：网格 + 斜向速度线 + 飞驰光条 + 暗角 ── */
.fl-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #0e1826 0%, #070c13 62%, #04070c 100%); }
.fl-bg i { position: absolute; inset: -20%; display: block; }
.fl-bg .fl-grid {
  background-image:
    linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(560px) rotateX(38deg) translateY(14%) scale(1.6);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 72%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 72%);
  animation: nfsGridRun 3.2s linear infinite;
}
@keyframes nfsGridRun { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 44px 0; } }
.fl-bg .fl-speed {
  background: repeating-linear-gradient(115deg,
    transparent 0 90px, rgba(34,211,238,.05) 90px 92px, transparent 92px 200px,
    rgba(255,176,32,.04) 200px 202px, transparent 202px 320px);
  animation: flSpeed 2.6s linear infinite;
}
@keyframes flSpeed { from { transform: translateX(0); } to { transform: translateX(-320px); } }
.fl-bg .fl-vig { background: radial-gradient(75% 62% at 50% 44%, transparent 42%, rgba(0,0,0,.66) 100%); }
/* 飞驰光条：竞速菜单标志性速度感 */
.fl-bg .fl-streak {
  position: absolute; left: -240px; width: 220px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(150,238,255,.85), transparent);
  opacity: 0; transform: rotate(16deg);
}
.fl-bg .s1 { top: 14%; animation: flShoot 2.8s linear infinite .2s; }
.fl-bg .s2 { top: 32%; width: 320px; animation: flShoot 3.6s linear infinite 1.4s; }
.fl-bg .s3 { top: 52%; animation: flShoot 2.4s linear infinite .8s; }
.fl-bg .s4 { top: 66%; width: 140px; animation: flShoot 3.1s linear infinite 2s; }
.fl-bg .s5 { top: 78%; width: 300px; animation: flShoot 2.6s linear infinite 1.1s; }
.fl-bg .s6 { top: 88%; width: 180px; animation: flShoot 3.4s linear infinite 2.6s; }
@keyframes flShoot {
  0%   { transform: translateX(-30vw) rotate(16deg); opacity: 0; }
  6%   { opacity: .95; }
  26%  { transform: translateX(150vw) rotate(16deg); opacity: 0; }
  100% { transform: translateX(150vw) rotate(16deg); opacity: 0; }
}
/* 扫描线：轻 CRT 质感（#flow 为风洞流程层；无该元素的页面不受影响） */
#flow::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.10) 3px 4px);
}

/* ── 切屏斜切幕布 #flWipe（各系统切屏共用，z-index 700） ── */
#flWipe { position: fixed; inset: 0; z-index: 700; pointer-events: none; display: none; }
#flWipe.on { display: block; }
#flWipe i {
  position: absolute; top: -12%; height: 124%; width: 62%;
  background: linear-gradient(105deg, #0b141f 0%, #0e1c2b 55%, #10283a 100%);
  border-color: var(--fl-acc);
  transform: skewX(-14deg);
}
#flWipe i:first-child { left: -70%; border-right: 3px solid var(--fl-acc); box-shadow: 6px 0 34px rgba(34,211,238,.35); }
#flWipe i:last-child { right: -70%; border-left: 3px solid var(--fl-acc2); box-shadow: -6px 0 34px rgba(255,176,32,.28); }
#flWipe.on i:first-child { animation: flWl .92s cubic-bezier(.7,0,.3,1) both; }
#flWipe.on i:last-child  { animation: flWr .92s cubic-bezier(.7,0,.3,1) both; }
@keyframes flWl { 0% { left: -70%; } 42% { left: -6%; } 60% { left: -6%; } 100% { left: -70%; } }
@keyframes flWr { 0% { right: -70%; } 42% { right: -6%; } 60% { right: -6%; } 100% { right: -70%; } }
/* 中央高速流光：幕布合拢前掠过 */
#flWipe em {
  position: absolute; top: 50%; left: -30%; width: 46%; height: 3px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, #d8faff, transparent);
  box-shadow: 0 0 22px rgba(120,230,255,.9); opacity: 0; transform: skewX(-14deg);
}
#flWipe.on em { animation: flZip .5s cubic-bezier(.6,0,.4,1) .06s backwards; }
@keyframes flZip { 0% { left: -30%; opacity: 1; } 100% { left: 115%; opacity: 1; } }
/* 合拢瞬间白闪 */
#flWipe::after { content: ''; position: absolute; inset: 0; background: #c8f4ff; opacity: 0; }
#flWipe.on::after { animation: flFlash .9s ease both; }
@keyframes flFlash { 0%, 40% { opacity: 0; } 46% { opacity: .5; } 58% { opacity: 0; } 100% { opacity: 0; } }

/* ── CTA 大按钮：平行四边形 + 扫光 ── */
.fl-cta {
  position: relative; display: inline-block; border: 0; cursor: pointer;
  background: linear-gradient(100deg, #0f3542, #134e5e 58%, #0f3542);
  color: #d8f8ff; transform: skewX(-12deg);
  padding: 17px 54px; overflow: hidden;
  border-left: 4px solid var(--fl-acc); border-right: 4px solid var(--fl-acc);
  box-shadow: 0 0 26px rgba(34,211,238,.28), inset 0 0 22px rgba(34,211,238,.10);
  transition: box-shadow .25s, background .25s;
}
.fl-cta > span, .fl-cta > i { display: block; transform: skewX(12deg); }
.fl-cta span { font-size: 23px; font-weight: 800; letter-spacing: 9px; }
.fl-cta i { font-style: normal; font-family: Consolas, monospace; font-size: 11px; letter-spacing: 5px; color: #6fc3d8; margin-top: 5px; }
.fl-cta::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); animation: flSheen 2.8s ease-in-out infinite;
}
@keyframes flSheen { 0% { left: -40%; } 55%, 100% { left: 130%; } }
.fl-cta:hover { box-shadow: 0 0 40px rgba(34,211,238,.55), inset 0 0 26px rgba(34,211,238,.18); }
.fl-cta.sm { padding: 12px 40px; }
.fl-cta.sm span { font-size: 17px; letter-spacing: 6px; }
.fl-cta.sm i { font-size: 10px; }

/* ── 幽灵次按钮 ── */
.fl-ghost {
  display: inline-block; border: 1px solid #2c4256; background: rgba(13,22,33,.6);
  color: #a9c6da; cursor: pointer; transform: skewX(-12deg);
  padding: 11px 34px; transition: border-color .2s, color .2s;
}
.fl-ghost > span, .fl-ghost > i { display: block; transform: skewX(12deg); }
.fl-ghost span { font-size: 16.5px; font-weight: 700; letter-spacing: 5px; }
.fl-ghost i { font-style: normal; font-family: Consolas, monospace; font-size: 10px; letter-spacing: 3px; color: #5d7d95; margin-top: 4px; }
.fl-ghost:hover { border-color: var(--fl-acc); color: var(--fl-acc); }

/* ═══ 英雄车台 · 大圆台（全系统选车统一：车库 / 试车场 / 风洞） ═══ */
.hero-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--ring, 300px); height: var(--ring, 300px); border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 46%, rgba(34,211,238,.20), rgba(34,211,238,.05) 52%, transparent 72%);
  border: 2px solid rgba(34,211,238,.4);
  box-shadow: 0 0 70px rgba(34,211,238,.16), inset 0 0 90px rgba(34,211,238,.08);
}
.hero-ring::before {
  content: ''; position: absolute; inset: 16px; border-radius: 50%;
  border: 2px dashed rgba(34,211,238,.5); animation: heroRingSpin 24s linear infinite;
}
.hero-ring::after {
  content: ''; position: absolute; inset: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(34,211,238,.13), transparent 62%);
}
@keyframes heroRingSpin { to { transform: rotate(360deg); } }