/* ============================================================
   见丰科技 · 首屏（Hero）强化动效层
   极光星云 / 透视网格地面 / 斜向光束 / 扫描光带 / HUD 光环阵列 /
   鼠标光斑与视差 / 渐变流光标题 / 按钮流光
   —— 只增加视觉装饰层，不改动任何文字结构（可视化编辑不受影响）
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  --px: 0;   /* 鼠标视差 -1 ~ 1，由 main.js 写入 */
  --py: 0;
}

/* ---------------- 装饰舞台 ---------------- */
.hero-stage {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease 0.15s;
}
body.jf-loaded .hero-stage { opacity: 1; }
html:not(.js) .hero-stage { opacity: 1; }

/* ---------------- 极光星云 ---------------- */
.hero-aurora {
  position: absolute; inset: -25% -12%;
  transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -16px), 0);
}
.hero-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle, rgba(46, 160, 255, 0.52), rgba(46, 160, 255, 0) 66%);
  animation: hero-aurora-a 17s ease-in-out infinite;
}
.hero-aurora i:nth-child(2) {
  width: 38vw; height: 38vw; right: 2vw; top: 6vh;
  background: radial-gradient(circle, rgba(70, 224, 122, 0.4), rgba(70, 224, 122, 0) 66%);
  animation: hero-aurora-b 23s ease-in-out infinite;
}
.hero-aurora i:nth-child(3) {
  width: 34vw; height: 34vw; left: 32vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(120, 92, 255, 0.26), rgba(46, 160, 255, 0) 68%);
  animation: hero-aurora-c 19s ease-in-out infinite;
}
@keyframes hero-aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50%      { transform: translate3d(6vw, 4vh, 0) scale(1.14); opacity: 1; }
}
@keyframes hero-aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.7; }
  50%      { transform: translate3d(-5vw, 6vh, 0) scale(0.92); opacity: 1; }
}
@keyframes hero-aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.5; }
  50%      { transform: translate3d(4vw, -5vh, 0) scale(1.2); opacity: 0.85; }
}

/* ---------------- 透视网格地面（向观者流动） ---------------- */
.hero-floor {
  position: absolute; left: -30%; right: -30%; bottom: -10vh; height: 54vh;
  background-image:
    linear-gradient(rgba(46, 160, 255, 0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 224, 122, 0.26) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
  transform: perspective(520px) rotateX(76deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 86%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 86%);
  animation: hero-floor-run 7s linear infinite;
  opacity: 0.62;
}
@keyframes hero-floor-run {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 88px, 0 0; }
}
/* 地平线亮带 */
.hero-floor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(46, 160, 255, 0.5) 30%, rgba(70, 224, 122, 0.6) 60%, transparent);
  filter: blur(1px);
}

/* ---------------- 斜向光束 ---------------- */
.hero-beams { position: absolute; inset: 0; }
.hero-beams i {
  position: absolute; top: -45%; height: 190%; width: 1px;
  background: linear-gradient(to bottom, transparent 4%, rgba(46, 160, 255, 0.5) 44%, rgba(70, 224, 122, 0.6) 62%, transparent 96%);
  opacity: 0;
  animation: hero-beam 9.5s ease-in-out infinite;
}
.hero-beams i:nth-child(1) { left: 16%; rotate: 16deg; animation-delay: 0.2s; }
.hero-beams i:nth-child(2) { left: 47%; rotate: -13deg; animation-delay: 3.1s; }
.hero-beams i:nth-child(3) { left: 78%; rotate: 21deg; animation-delay: 6s; }
@keyframes hero-beam {
  0%   { opacity: 0; translate: 0 -28%; }
  16%  { opacity: 0.9; }
  52%  { opacity: 0.45; }
  100% { opacity: 0; translate: 0 32%; }
}

/* ---------------- 横扫光带（金属扫光感） ---------------- */
.hero-sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 28vw;
  background: linear-gradient(100deg, transparent 0%, rgba(142, 180, 240, 0.07) 40%, rgba(70, 224, 122, 0.06) 56%, transparent 100%);
  will-change: transform;
  animation: hero-sweep-x 11s cubic-bezier(0.45, 0, 0.25, 1) infinite 2.4s;
}
@keyframes hero-sweep-x {
  0%        { transform: translate3d(-34vw, 0, 0); }
  48%, 100% { transform: translate3d(114vw, 0, 0); }
}

/* ---------------- 纵向扫描光 ---------------- */
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 30vh;
  background: linear-gradient(to bottom, transparent, rgba(46, 160, 255, 0.09) 46%, rgba(70, 224, 122, 0.15) 62%, transparent);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: hero-scan-y 9s cubic-bezier(0.4, 0, 0.3, 1) infinite 1.6s;
}
@keyframes hero-scan-y {
  0%   { transform: translate3d(0, -36vh, 0); opacity: 0; }
  10%  { opacity: 1; }
  68%  { opacity: 0.85; }
  100% { transform: translate3d(0, 104vh, 0); opacity: 0; }
}

/* ---------------- HUD 光环阵列 ---------------- */
.hero-orbit {
  position: absolute; top: 50%; right: -9vw;
  width: min(56vw, 700px); aspect-ratio: 1;
  translate: 0 -50%;
  transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -14px), 0);
  opacity: 0.9;
}
.hero-orbit .ring,
.hero-orbit .ticks,
.hero-orbit .core { position: absolute; border-radius: 50%; }
.hero-orbit .ring { inset: 0; }
.hero-orbit .ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 68.6%, #000 69.4%, #000 70.3%, transparent 71%);
  mask: radial-gradient(circle, transparent 68.6%, #000 69.4%, #000 70.3%, transparent 71%);
}
.hero-orbit .r1::after {
  background: conic-gradient(from 0deg, transparent 0deg 54deg, rgba(46, 160, 255, 0.95) 96deg, rgba(70, 224, 122, 0.95) 128deg, transparent 166deg);
  animation: hero-spin 14s linear infinite;
}
.hero-orbit .r2 { inset: 13%; }
.hero-orbit .r2::after {
  background: conic-gradient(from 0deg, transparent 0deg 120deg, rgba(70, 224, 122, 0.85) 160deg, transparent 210deg, rgba(46, 160, 255, 0.6) 280deg, transparent 330deg);
  animation: hero-spin 22s linear infinite reverse;
  -webkit-mask: radial-gradient(circle, transparent 68.6%, #000 69.4%, #000 70.3%, transparent 71%);
  mask: radial-gradient(circle, transparent 68.6%, #000 69.4%, #000 70.3%, transparent 71%);
}
.hero-orbit .r3 { inset: 27%; border: 1px solid rgba(142, 180, 240, 0.12); }
.hero-orbit .r3::after {
  background: conic-gradient(from 0deg, transparent 0deg 200deg, rgba(46, 160, 255, 0.5) 250deg, transparent 300deg);
  animation: hero-spin 9s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 68.6%, #000 69.4%, #000 70.3%, transparent 71%);
  mask: radial-gradient(circle, transparent 68.6%, #000 69.4%, #000 70.3%, transparent 71%);
}
.hero-orbit .ticks {
  inset: 6%;
  background: repeating-conic-gradient(from 0deg, rgba(142, 180, 240, 0.55) 0deg 0.8deg, transparent 0.8deg 8deg);
  -webkit-mask: radial-gradient(circle, transparent 91.5%, #000 92.2%, #000 93%, transparent 93.6%);
  mask: radial-gradient(circle, transparent 91.5%, #000 92.2%, #000 93%, transparent 93.6%);
  animation: hero-spin 70s linear infinite reverse;
  opacity: 0.45;
}
.hero-orbit .core {
  inset: 40%;
  background: radial-gradient(circle, rgba(46, 160, 255, 0.3), rgba(70, 224, 122, 0.12) 46%, transparent 70%);
  animation: hero-core-pulse 5s ease-in-out infinite;
}
.hero-orbit .core::before,
.hero-orbit .core::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(70, 224, 122, 0.45);
  animation: hero-ripple 4.6s ease-out infinite;
}
.hero-orbit .core::after { animation-delay: 2.3s; border-color: rgba(46, 160, 255, 0.45); }
@keyframes hero-spin { to { rotate: 360deg; } }
@keyframes hero-core-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.65; }
  50%      { transform: scale(1.1); opacity: 1; }
}
@keyframes hero-ripple {
  0%   { transform: scale(0.55); opacity: 0.9; }
  70%  { opacity: 0.1; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ---------------- HUD 四角标记 ---------------- */
.hero-frame { position: absolute; inset: 22px; z-index: 0; }
.hero-frame span {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid rgba(142, 180, 240, 0.28);
  animation: hero-frame-fade 6s ease-in-out infinite;
}
.hero-frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero-frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; animation-delay: 1.5s; }
.hero-frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; animation-delay: 3s; }
.hero-frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; animation-delay: 4.5s; }
@keyframes hero-frame-fade { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }

/* ---------------- 鼠标光斑 + 暗角 ---------------- */
.hero-spot {
  position: absolute; inset: 0;
  background: radial-gradient(30rem 24rem at calc(50% + var(--px) * 26rem) calc(46% + var(--py) * 18rem),
    rgba(46, 160, 255, 0.13), rgba(70, 224, 122, 0.05) 46%, transparent 72%);
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 74% at 46% 46%, transparent 32%, rgba(3, 6, 12, 0.62) 100%);
}

/* ---------------- 内容层 ---------------- */
#particle-canvas { z-index: 1; }
.hero-content {
  z-index: 3;
  will-change: transform, opacity;
  transform-origin: 50% 40%;
}
/* 首屏底部渐隐，与下一区块自然衔接 */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 2; pointer-events: none;
}

/* 标题：渐变流光
   注意：这一行同时是 .intro-seq（入场用 animation 简写驱动），
   简写会覆盖 components.css 的入场动画，导致 opacity 停在 0 永不可见，
   所以这里把两条动画一起声明，入场动画的延迟与 nth-of-type(2) 对齐。 */
.hero h1 { text-shadow: 0 0 80px rgba(46, 160, 255, 0.18); }
.hero h1 .grad {
  background-image: linear-gradient(100deg,
    #2ea0ff 0%, #46e07a 24%, #a8f7c8 40%, #2ea0ff 62%, #46e07a 84%, #2ea0ff 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 44px rgba(70, 224, 122, 0.28);
  animation:
    intro-in 0.8s var(--ease-out) 0.25s forwards,
    hero-grad-flow 7s linear infinite;
}
@keyframes hero-grad-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 260% 50%; }
}

/* 顶部胶囊：呼吸光边（放在伪元素上，避免覆盖 .intro-seq 的入场动画） */
.hero-badge {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.hero-badge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(70, 224, 122, 0.22), inset 0 0 22px rgba(46, 160, 255, 0.18);
  animation: hero-badge-glow 5.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-badge-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(70, 224, 122, 0.12), inset 0 0 16px rgba(46, 160, 255, 0.1); }
  50%      { box-shadow: inset 0 0 0 1px rgba(70, 224, 122, 0.42), inset 0 0 34px rgba(46, 160, 255, 0.3); }
}
.hero-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.16) 50%, transparent 66%);
  background-size: 240% 100%;
  animation: hero-badge-shine 5s ease-in-out infinite 1s;
}
@keyframes hero-badge-shine {
  0%        { background-position: 180% 0; }
  50%, 100% { background-position: -80% 0; }
}

/* 主按钮：渐变流动 + 高光掠过 */
.hero .btn-primary {
  position: relative;
  overflow: hidden;
  background-size: 200% 100%;
  animation: hero-btn-flow 5.5s linear infinite;
}
@keyframes hero-btn-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
.hero .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: hero-btn-shine 4.2s ease-in-out infinite 1.4s;
  pointer-events: none;
  will-change: transform;
}
@keyframes hero-btn-shine {
  0%        { transform: translate3d(-160%, 0, 0); }
  55%, 100% { transform: translate3d(330%, 0, 0); }
}
.hero .btn-ghost { backdrop-filter: blur(6px); }

/* 滚动提示：底部光晕扩散 */
.hero-scroll-hint { z-index: 3; }
.hero-scroll-hint::before {
  content: ""; position: absolute; left: 50%; bottom: -8px; translate: -50% 0;
  width: 120px; height: 60px;
  background: radial-gradient(ellipse at 50% 100%, rgba(46, 160, 255, 0.22), transparent 70%);
  animation: hero-hint-glow 3.4s ease-in-out infinite;
}
@keyframes hero-hint-glow {
  0%, 100% { opacity: 0.35; transform: scaleY(0.85); }
  50%      { opacity: 0.9; transform: scaleY(1.1); }
}

/* 入场时机：等预加载退场后再依次播放（配合 main.js 的 jf-loaded） */
html.js .hero .intro-seq { animation-play-state: paused; }
body.jf-loaded .hero .intro-seq { animation-play-state: running; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1180px) {
  .hero-orbit { right: -14vw; opacity: 0.7; }
  .hero-frame { inset: 14px; }
}
@media (max-width: 920px) {
  .hero-orbit { display: none; }
  .hero-beams, .hero-sweep { display: none; }
  .hero-floor { height: 40vh; opacity: 0.45; }
  .hero-aurora i { filter: blur(52px); }
  .hero-frame span { width: 16px; height: 16px; }
  .hero-spot { display: none; }
}
@media (max-width: 640px) {
  .hero-scan { display: none; }
  .hero-frame { display: none; }
}

/* ---------------- 降低动效偏好 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-stage,
  .hero-stage *,
  .hero-orbit * {
    animation: none !important;
  }
  .hero-stage { opacity: 1; }
  .hero .intro-seq { animation-play-state: running !important; }
  html.js .hero .intro-seq { animation-play-state: running; }
  .hero-content { transform: none !important; opacity: 1 !important; }
}