/* fykj-fx · 科技感动效层
   原则:只在背景/装饰层加动静,不改布局、不动文案、不抢正文;全部低透明度慢节奏 */
#root{position:relative;z-index:1}

/* ---------- 1. 背景网格:匀速缓慢流动 ---------- */
body::before{
  content:"";position:fixed;inset:-140px;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(34,211,197,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,197,.075) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(125% 78% at 50% 0%,#000 0%,rgba(0,0,0,.35) 46%,transparent 80%);
  mask-image:radial-gradient(125% 78% at 50% 0%,#000 0%,rgba(0,0,0,.35) 46%,transparent 80%);
  animation:fx-grid 46s linear infinite;
}
@keyframes fx-grid{
  from{background-position:0 0,0 0}
  to{background-position:0 68px,68px 0}
}

/* ---------- 2. 顶部极淡辉光:缓慢呼吸 ---------- */
body::after{
  content:"";position:fixed;left:50%;top:-300px;width:940px;height:560px;z-index:0;
  pointer-events:none;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(34,211,197,.13),transparent 72%);
  animation:fx-aura 13s ease-in-out infinite;
}
@keyframes fx-aura{
  0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}
  50%{opacity:.85;transform:translateX(-50%) scale(1.07)}
}

/* ---------- 3. 滚动进度条 ---------- */
.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;opacity:0;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(34,211,197,0),#22d3c5 55%,#7ef0d8);
  box-shadow:0 0 14px rgba(34,211,197,.45);
  transition:opacity .35s ease;
}

/* ---------- 4. 光标微光(仅桌面) ---------- */
.fx-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(470px circle at var(--fx-x,50%) var(--fx-y,28%),rgba(34,211,197,.08),transparent 66%);
}

/* ---------- 5. 竖向扫描线:极慢上下 ---------- */
.fx-scan{
  position:fixed;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;opacity:.3;
  background:linear-gradient(90deg,transparent,rgba(34,211,197,.7),transparent);
  animation:fx-scan 13s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes fx-scan{
  0%{transform:translateY(14vh)}
  50%{transform:translateY(86vh)}
  100%{transform:translateY(14vh)}
}

/* ---------- 6. 区块分隔线:高光缓缓划过 ---------- */
section[id]{position:relative;overflow-x:clip}
section[id]::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:24%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(126,240,216,.55),transparent);
  animation:fx-line 12s ease-in-out infinite;
}
@keyframes fx-line{
  0%{transform:translateX(-120%);opacity:0}
  18%{opacity:1}
  58%{transform:translateX(430%);opacity:.9}
  72%,100%{transform:translateX(430%);opacity:0}
}

/* ---------- 7. eyebrow 下划线:一次扫过 ---------- */
.eyebrow{position:relative;display:inline-block}
.eyebrow::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,197,.55),transparent);
  transform:scaleX(0);transform-origin:0 50%;
  animation:fx-eyebrow 8.5s ease-in-out infinite;
}
@keyframes fx-eyebrow{
  0%{transform:scaleX(0);opacity:0}
  22%{opacity:.85}
  52%{transform:scaleX(1);opacity:.85}
  68%,100%{transform:scaleX(1);opacity:0}
}

/* ---------- 7.5 宽卡:桌面端占满一整行(产物 CSS 里没有对应原子类,自带) ---------- */
@media (min-width:1024px){
  .fx-wide{grid-column:1 / -1}
}

/* ---------- 8. 卡片:悬停时一圈极淡描边光 ---------- */
@media (hover:hover) and (pointer:fine){
  :where(#service,#pricing,#templates,#casino,#contact) [class*="rounded-2xl"]{
    transition:box-shadow .4s ease,border-color .4s ease,transform .4s ease;
  }
  :where(#service,#pricing,#templates,#casino,#contact) [class*="rounded-2xl"]:hover{
    box-shadow:0 0 0 1px rgba(34,211,197,.16),0 24px 62px -42px rgba(34,211,197,.6);
  }
  /* 报价区里的电报按钮:每 6 秒一次极快的光扫过 */
  #pricing a[href*="t.me"]{position:relative;overflow:hidden}
  #pricing a[href*="t.me"]::after{
    content:"";position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
    transform:translateX(-170%) skewX(-18deg);
    animation:fx-btn 6.6s ease-in-out infinite;
  }
}
@keyframes fx-btn{
  0%,72%{transform:translateX(-170%) skewX(-18deg)}
  88%,100%{transform:translateX(320%) skewX(-18deg)}
}

@media (max-width:640px){
  body::before{background-size:52px 52px;animation-duration:60s}
  .fx-scan{opacity:.2}
  section[id]::after{animation-duration:16s}
}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.fx-scan,section[id]::after,.eyebrow::after,
  #pricing a[href*="t.me"]::after{animation:none!important}
  .fx-glow{display:none}
}