/**
 * K4电竞 - 特效层（可开关）
 * 职责：glow / scanline / noise / reveal / 微交互 等特效
 * 禁止：布局、尺寸、页面定位
 * 开关：通过 body.fx-on 控制
 */

/* ===== 特效开关：默认关闭，需 body.fx-on 启用 ===== */

/* ===== START: 新增动效体系（可回滚点） ===== */

/* ===== 1. Reveal 滚动出现动效 ===== */
body.fx-on .reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: 
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

body.fx-on .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 移动端降级：只保留淡入，不做 blur */
@media (max-width: 767px) {
  body.fx-on .reveal {
    filter: none;
    transform: translateY(8px);
  }
}

/* prefers-reduced-motion：关闭位移动画 */
@media (prefers-reduced-motion: reduce) {
  body.fx-on .reveal {
    opacity: 0;
    transform: none;
    filter: none;
    transition: opacity 0.3s ease;
  }
  
  body.fx-on .reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ===== 2. 卡片微交互（.fx-card） ===== */
body.fx-on .fx-card {
  transition: 
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

body.fx-on .fx-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(0, 229, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.04) 50%,
    rgba(255,255,255,.03) 100%
  );
}

body.fx-on .fx-card:active {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  body.fx-on .fx-card:hover,
  body.fx-on .fx-card:active {
    transform: none;
  }
}

/* ===== 3. 按钮微交互（.fx-btn） ===== */
body.fx-on .fx-btn {
  transition: 
    transform 0.2s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

body.fx-on .fx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(0, 229, 255, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  filter: brightness(1.1);
}

body.fx-on .fx-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(0, 229, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  body.fx-on .fx-btn:hover,
  body.fx-on .fx-btn:active {
    transform: none;
  }
}

/* ===== 4. 导航微交互（.fx-nav-link） ===== */
body.fx-on .fx-nav-link {
  position: relative;
}

body.fx-on .fx-nav-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent,
    rgba(0, 229, 255, 0.8),
    rgba(74, 245, 255, 1),
    rgba(0, 229, 255, 0.8),
    transparent
  );
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

body.fx-on .fx-nav-link:hover::after,
body.fx-on .fx-nav-link:active::after {
  width: 100%;
}

/* ===== 5. 背景细噪声/扫描线（极轻） ===== */
body.fx-on::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/>\
</filter>\
<rect width='180' height='180' filter='url(%23n)' opacity='.22'/>\
</svg>");
  background-repeat: repeat;
  opacity: 0.03;
  mix-blend-mode: overlay;
  animation: fx-noise-breathe 8s ease-in-out infinite;
}

@keyframes fx-noise-breathe {
  0%, 100% { opacity: 0.02; }
  50% { opacity: 0.04; }
}

body.fx-on::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 229, 255, 0.15),
    rgba(0, 229, 255, 0.3),
    rgba(0, 229, 255, 0.15),
    transparent
  );
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
  animation: fx-scanline 4s linear infinite;
  opacity: 0.2;
}

@keyframes fx-scanline {
  0% { 
    top: -2px;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% { 
    top: 100vh;
    opacity: 0;
  }
}

/* 移动端降低扫描线强度 */
@media (max-width: 767px) {
  body.fx-on::after {
    opacity: 0.1;
    animation-duration: 6s;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fx-on::before,
  body.fx-on::after {
    animation: none;
    opacity: 0.02;
  }
}

/* ===== END: 新增动效体系（可回滚点） ===== */

/* ===== 原有特效（保留） ===== */
body.fx-on .scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 15px #00ffff;
  animation: scan 1.5s linear infinite;
  opacity: 0.5;
}

@keyframes scan {
  0% { top: -10%; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ===== 1. Glitch信号故障效果（标题） ===== */

/* Glitch基础样式 - 默认隐藏 */
.k4-glitch {
  position: relative;
  display: inline-block;
}

/* Glitch激活状态 - 通过JS添加.k4-glitch-active触发 */
body.fx-on .k4-glitch-active {
  animation: k4-glitch-effect 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes k4-glitch-effect {
  0%, 100% {
    transform: translate(0);
    text-shadow: 
      0 0 10px rgba(0, 229, 255, 0.5),
      0 0 20px rgba(0, 229, 255, 0.3);
  }
  10% {
    transform: translate(-1px, 1px);
    text-shadow: 
      -1px 0 0 rgba(255, 0, 0, 0.3),
      1px 0 0 rgba(0, 255, 255, 0.3),
      0 0 10px rgba(0, 229, 255, 0.5);
  }
  20% {
    transform: translate(1px, -1px);
    text-shadow: 
      1px 0 0 rgba(255, 0, 0, 0.3),
      -1px 0 0 rgba(0, 255, 255, 0.3),
      0 0 10px rgba(0, 229, 255, 0.5);
  }
  30% {
    transform: translate(-1px, 0);
    text-shadow: 
      -1px 0 0 rgba(255, 0, 0, 0.2),
      1px 0 0 rgba(0, 255, 255, 0.2);
  }
  40% {
    transform: translate(1px, 0);
    text-shadow: 
      1px 0 0 rgba(255, 0, 0, 0.2),
      -1px 0 0 rgba(0, 255, 255, 0.2);
  }
  50% {
    transform: translate(0);
    text-shadow: 
      0 0 10px rgba(0, 229, 255, 0.5),
      0 0 20px rgba(0, 229, 255, 0.3);
  }
}

/* Glitch Hover效果 - 轻微触发（仅特效开启时） */
body.fx-on .k4-glitch:hover {
  transition: all 0.2s ease;
}

body.fx-on .k4-glitch:hover::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  clip-path: inset(0 0 0 0);
  animation: k4-glitch-hover 0.4s ease-out;
  pointer-events: none;
}

@keyframes k4-glitch-hover {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  25% {
    clip-path: inset(20% 0 60% 0);
    transform: translate(-1px, 0);
  }
  50% {
    clip-path: inset(60% 0 20% 0);
    transform: translate(1px, 0);
  }
  75% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(0, 0);
  }
}

/* ===== 2. "电池充电"按钮填充效果（仅特效开启时） ===== */

body.fx-on .k4-btn {
  position: relative;
  overflow: hidden;
}

/* 充电填充层 */
body.fx-on .k4-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(0, 229, 255, 0.3) 20%,
    rgba(0, 229, 255, 0.5) 50%,
    rgba(74, 245, 255, 0.6) 80%,
    rgba(0, 229, 255, 0.4) 100%
  );
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Hover时填充 */
body.fx-on .k4-btn:hover::after {
  left: 0;
}

/* Active时快速填充 */
body.fx-on .k4-btn:active::after {
  left: 0;
  transition: left 0.15s ease-out;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(0, 229, 255, 0.4) 20%,
    rgba(0, 229, 255, 0.7) 50%,
    rgba(74, 245, 255, 0.8) 80%,
    rgba(0, 229, 255, 0.5) 100%
  );
}

/* 能量边缘高光 */
body.fx-on .k4-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, 
    transparent,
    rgba(74, 245, 255, 0.9),
    rgba(0, 229, 255, 1),
    rgba(74, 245, 255, 0.9),
    transparent
  );
  box-shadow: 
    0 0 8px rgba(74, 245, 255, 0.8),
    0 0 16px rgba(0, 229, 255, 0.6);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

body.fx-on .k4-btn:hover::before,
body.fx-on .k4-btn:active::before {
  left: 100%;
}

/* 确保按钮文字在填充层之上 */
body.fx-on .k4-btn > * {
  position: relative;
  z-index: 2;
}

/* ===== 3. "机械展开 Deploy"模块进场效果（仅特效开启时） ===== */

body.fx-on .k4-deploy {
  opacity: 0;
  position: relative;
}

/* 已进入视口 - 通过JS添加.k4-deploy-active触发 */
body.fx-on .k4-deploy-active {
  animation: k4-deploy-in 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 描边动画 */
body.fx-on .k4-deploy::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: inherit;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  animation: k4-deploy-border 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 1;
}

body.fx-on .k4-deploy-active::before {
  animation: k4-deploy-border 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes k4-deploy-border {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }
  25% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 0.5;
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
    opacity: 0.7;
  }
  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.8;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0;
  }
}

/* 色块渐入 */
@keyframes k4-deploy-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  50% {
    opacity: 0.5;
    transform: translateY(5px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== 4. 移动端重力感应视差（可选，默认关闭） ===== */

/* 仅在body有.fx-parallax-on时启用 */
body.fx-parallax-on .k4-parallax-bg {
  transition: transform 0.1s ease-out;
}

body.fx-parallax-on .k4-parallax-fg {
  transition: transform 0.15s ease-out;
}

/* 视差层标记（通过JS添加class） */
.k4-parallax-bg {
  will-change: transform;
}

.k4-parallax-fg {
  will-change: transform;
}

/* ===== 无障碍支持：prefers-reduced-motion ===== */

@media (prefers-reduced-motion: reduce) {
  /* 禁用所有动画 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Glitch效果禁用 */
  .k4-glitch-active {
    animation: none;
  }
  
  .k4-glitch:hover::before {
    animation: none;
  }
  
  /* Deploy效果禁用 */
  .k4-deploy-active {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .k4-deploy-active::before {
    animation: none;
    opacity: 0;
  }
  
  /* 按钮填充保留（但更快） */
  .k4-btn::after,
  .k4-btn::before {
    transition-duration: 0.05s !important;
  }
  
  /* 视差禁用 */
  body.fx-parallax-on .k4-parallax-bg,
  body.fx-parallax-on .k4-parallax-fg {
    transform: none !important;
    transition: none !important;
  }
}

/* ===== 移动端优化 ===== */

@media (max-width: 768px) {
  /* 移动端Glitch幅度更小 */
  @keyframes k4-glitch-effect {
    0%, 100% {
      transform: translate(0);
      text-shadow: 
        0 0 8px rgba(0, 229, 255, 0.4),
        0 0 15px rgba(0, 229, 255, 0.2);
    }
    10% {
      transform: translate(-0.5px, 0.5px);
      text-shadow: 
        -0.5px 0 0 rgba(255, 0, 0, 0.2),
        0.5px 0 0 rgba(0, 255, 255, 0.2);
    }
    20% {
      transform: translate(0.5px, -0.5px);
      text-shadow: 
        0.5px 0 0 rgba(255, 0, 0, 0.2),
        -0.5px 0 0 rgba(0, 255, 255, 0.2);
    }
    30%, 40% {
      transform: translate(0);
    }
    50% {
      transform: translate(0);
      text-shadow: 
        0 0 8px rgba(0, 229, 255, 0.4),
        0 0 15px rgba(0, 229, 255, 0.2);
    }
  }
  
  /* 移动端按钮填充更快 */
  .k4-btn:hover::after,
  .k4-btn:active::after {
    transition-duration: 0.2s;
  }
  
  /* 移动端Deploy更快 */
  .k4-deploy-active {
    animation-duration: 0.6s;
  }
  
  .k4-deploy-active::before {
    animation-duration: 0.5s;
  }
}