/* ═══════════════════════════════════════════════
   FANY LASER — CSS 动效库 v1.0
   用法：在 HTML 中 <link rel="stylesheet" href="fany-effects.css">
   然后在元素上加对应的 class 即可
   ═══════════════════════════════════════════════ */

/* ─── 1. 动感背景 ──────────────────────────── */

/* 1a. 渐变流光背景（工业/科技感，推荐 Hero 区） */
.bg-flow {
  background: linear-gradient(-45deg, 
    var(--p, #1a73e8), 
    var(--pf, #0d47a1), 
    #1a237e, 
    #002171
  );
  background-size: 400% 400%;
  animation: flowGradient 8s ease infinite;
}
@keyframes flowGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 1b. 光晕脉冲背景（柔和高科技） */
.bg-pulse {
  position: relative;
  overflow: hidden;
}
.bg-pulse::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 50%, 
    rgba(100, 180, 255, 0.15) 0%, 
    transparent 50%
  );
  animation: pulseGlow 6s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
 0%   { transform: translate(-10%, -10%) scale(1); opacity: 0.5; }
 100% { transform: translate(10%, 10%) scale(1.3); opacity: 1; }
}

/* 1c. 网格科技线 */
.bg-grid {
  background-image: 
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* 1d. 粒子飘浮 */
.bg-particles {
  position: relative;
  overflow: hidden;
}
.bg-particles::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.2) 100%, transparent),
    radial-gradient(3px 3px at 60% 20%, rgba(255,255,255,0.25) 100%, transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.2) 100%, transparent),
    radial-gradient(3px 3px at 10% 80%, rgba(255,255,255,0.15) 100%, transparent),
    radial-gradient(2px 2px at 70% 90%, rgba(255,255,255,0.2) 100%, transparent),
    radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.15) 100%, transparent),
    radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.2) 100%, transparent);
  background-size: 200% 200%;
  animation: particlesFloat 15s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes particlesFloat {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  100% { background-position: 10% 20%, -10% -10%, 15% -5%, -5% 10%, 5% 15%, -8% -12%, 12% -8%, -15% 10%; }
}

/* 1e. 扫光效果 */
.sweep-light {
  position: relative;
  overflow: hidden;
}
.sweep-light::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: skewX(-20deg);
  animation: sweep 4s ease-in-out infinite;
}
@keyframes sweep {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ─── 2. 元素入场动效 ───────────────────────── */

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-up {
  animation: fadeUp 0.6s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-left {
  animation: fadeLeft 0.6s ease forwards;
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-scale {
  animation: fadeScale 0.5s ease forwards;
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ─── 3. 悬停动效 ───────────────────────────── */

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(100, 180, 255, 0.3);
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-border {
  position: relative;
}
.hover-border::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--p, #1a73e8);
  transition: width 0.3s ease;
}
.hover-border:hover::after {
  width: 100%;
}

/* ─── 4. 按钮动效 ───────────────────────────── */

.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateY(-50%) rotate(25deg);
  transition: left 0.6s ease;
}
.btn-shine:hover::before {
  left: 150%;
}

.btn-pulse-ring {
  position: relative;
}
.btn-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--p, #0f62fe);
  animation: pulseRing 2s ease infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ─── 5. 加载动效 ───────────────────────────── */

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--p, #0f62fe);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.loader-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p, #0f62fe);
  animation: dotBounce 1.4s ease-in-out infinite both;
}
.loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.loader-dots span:nth-child(2) { animation-delay: -0.16s; }
.loader-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ─── 6. 文字动效 ───────────────────────────── */

.text-glitch {
  position: relative;
}
.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.text-glitch::before { color: #ff0040; z-index: -1; animation: glitch1 3s infinite; }
.text-glitch::after { color: #00e5ff; z-index: -2; animation: glitch2 3s infinite; }
@keyframes glitch1 {
  0%, 90%, 100% { transform: none; }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(1px, -1px); }
  96% { transform: translate(-1px, 2px); }
}
@keyframes glitch2 {
  0%, 90%, 100% { transform: none; }
  92% { transform: translate(2px, -1px); }
  94% { transform: translate(-1px, 2px); }
  96% { transform: translate(1px, 1px); }
}

/* 通用工具 */
.ease-out-slow { transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.ease-bounce { transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.gpu { transform: translateZ(0); will-change: transform; }