/* ============================================
   动画样式 - 入场动画、悬停动画、特殊效果
   ============================================ */

/* ============================================
   ActiveTheory 风格开场动画
   ============================================ */

/* 开场遮罩层 */
.intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: linear-gradient(180deg, #0a1120 0%, #080e1b 40%, #060b16 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 3D 容器 */
.intro-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 文字层 */
.intro-text-layer {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.intro-text-layer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 开场完成后淡出 */
.intro-overlay.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 手机端隐藏进入动画，提升性能 */
@media (max-width: 767px) {
  .intro-overlay {
    display: none !important;
  }
}

/* 手机端在 HTML 渲染前就隐藏，避免闪烁 */
.mobile-device .intro-overlay {
  display: none !important;
}

/* Canvas 粒子背景 */
.intro-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 中心光晕效果 */
.intro-glow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(108, 99, 255, 0.4) 0%,
    rgba(6, 182, 212, 0.2) 30%,
    transparent 60%
  );
  z-index: 2;
  pointer-events: none;
  animation: glowExpand 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes glowExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 800px;
    height: 800px;
    opacity: 0.6;
  }
}

/* 内容容器 */
.intro-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo 容器 */
.intro-logo-container {
  position: relative;
  margin-bottom: 2rem;
  opacity: 0;
  transform: scale(0.6);
  animation: logoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Logo 本身 */
.intro-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(108, 99, 255, 0.5));
}

/* Logo 外发光环 */
.intro-logo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 1px solid rgba(108, 99, 255, 0.4);
  border-radius: 50%;
  opacity: 0;
  animation: ringPulse 3s ease-out 1.5s infinite;
}

.intro-logo-ring::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 50%;
  animation: ringPulse 3s ease-out 1.7s infinite;
}

@keyframes ringPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* 主标题 */
.intro-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  animation: titleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

.intro-title-text {
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 40%, #33e8c2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

/* 标题光效 */
.intro-title-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 80px;
  background: radial-gradient(ellipse, rgba(108, 99, 255, 0.3) 0%, transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* 副标题 */
.intro-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(20px);
  animation: subtitleReveal 1s ease-out 1.8s forwards;
}

@keyframes subtitleReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 底部装饰线 */
.intro-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.6), transparent);
  margin-top: 2rem;
  animation: lineExpand 1.2s ease-out 2.2s forwards;
}

@keyframes lineExpand {
  0% { width: 0; opacity: 0; }
  100% { width: 200px; opacity: 1; }
}

/* 跳过按钮 */
.intro-skip {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 20;
  padding: 8px 20px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  animation: skipFade 0.5s ease-out 3s forwards;
}

@keyframes skipFade {
  to { opacity: 1; }
}

.intro-skip:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 角落装饰 */
.intro-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0;
  animation: cornerFade 0.8s ease-out 2s forwards;
}

.intro-corner::before,
.intro-corner::after {
  content: '';
  position: absolute;
  background: rgba(108, 99, 255, 0.3);
}

.intro-corner-tl { top: 30px; left: 30px; }
.intro-corner-tr { top: 30px; right: 30px; transform: scaleX(-1); }
.intro-corner-bl { bottom: 30px; left: 30px; transform: scaleY(-1); }
.intro-corner-br { bottom: 30px; right: 30px; transform: scale(-1); }

.intro-corner::before {
  width: 20px;
  height: 1px;
  top: 0;
  left: 0;
}

.intro-corner::after {
  width: 1px;
  height: 20px;
  top: 0;
  left: 0;
}

@keyframes cornerFade {
  to { opacity: 1; }
}

/* ============================================
   遗留的开场动画样式（兼容性保留）
   ============================================ */

/* 闪光层（已不使用） */
.intro-flash {
  display: none;
}

/* 光束（已不使用） */
.intro-light-beam {
  display: none;
}

/* Logo 包装器（旧版兼容） */
.intro-logo-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto var(--space-xl);
}

/* Logo 发光（旧版兼容） */
.intro-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.5) 0%, rgba(6, 182, 212, 0.2) 40%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  z-index: -1;
}

/* 光芒射线（旧版兼容） */
.intro-rays {
  display: none;
}

.intro-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, rgba(108, 99, 255, 0.8), transparent);
  transform-origin: top center;
}

/* 光效扫过文字（旧版兼容） */
.intro-title-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================
   滚动渐入动画
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 延迟变体 - 错落有致的入场效果 */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* 从左边滑入 */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* 从右边滑入 */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* 缩放入场 */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   呼吸/浮动动画
   ============================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float {
  animation: float 3s ease-in-out infinite;
}

.float-slow {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(108, 99, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(108, 99, 255, 0.6);
  }
}

@keyframes pulse-cyan {
  0%, 100% {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.8);
    transform: scale(1.2);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ============================================
   渐变文字
   ============================================ */

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   发光效果
   ============================================ */

.glow {
  box-shadow: var(--shadow-glow);
}

.glow-text {
  text-shadow: 0 0 30px rgba(108, 99, 255, 0.5);
}

/* ============================================
   向下滚动指示箭头
   ============================================ */

@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.5;
  }
}

.scroll-indicator {
  animation: bounce-down 2s ease-in-out infinite;
}

/* ============================================
   无限滚动（Logo墙等）
   ============================================ */

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.scroll-infinite {
  display: flex;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}

.scroll-infinite:hover {
  animation-play-state: paused;
}

/* ============================================
   数字增长动画（JS配合使用）
   ============================================ */

.counter {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   毛玻璃效果
   ============================================ */

.glass {
  background: rgba(10, 22, 40, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ============================================
   悬停光效扫过
   ============================================ */

.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.shine-effect:hover::after {
  transform: rotate(30deg) translateX(100%);
}

/* ============================================
   粒子背景容器
   ============================================ */

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   页面过渡
   ============================================ */

.page-transition {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-transition.loaded {
  opacity: 1;
}

/* ============================================
   React-bits 风格效果
   ============================================ */

/* 光泽文字效果 */
.shiny-text {
  position: relative;
  display: inline-block;
}

.shiny-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shinyMove 3s ease-in-out infinite;
}

@keyframes shinyMove {
  0% { left: -100%; }
  20%, 100% { left: 100%; }
}

/* 发光边框效果 */
.glow-border {
  position: relative;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6c63ff, #00b894, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}

.glow-border:hover::before {
  opacity: 0.6;
}

.glow-border:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(108, 99, 255, 0.3);
}

/* 卡片悬停发光 */
.card-glow {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(108, 99, 255, 0.15),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.card-glow:hover::after {
  opacity: 1;
}

/* 涟漪效果 */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(108, 99, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.ripple-effect:hover::before {
  width: 300%;
  height: 300%;
}

/* 星星闪烁 */
.sparkle {
  position: relative;
}

.sparkle::before,
.sparkle::after {
  content: '✦';
  position: absolute;
  color: var(--color-accent);
  font-size: 0.5em;
  opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}

.sparkle::before {
  top: -10px;
  left: -10px;
  animation-delay: 0s;
}

.sparkle::after {
  bottom: -10px;
  right: -10px;
  animation-delay: 1s;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 呼吸光晕动画 */
@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(108, 99, 255, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(6, 182, 212, 0.8));
  }
}

.logo-glow-animation {
  animation: logoGlow 2s ease-in-out infinite;
}

/* 扫描线效果 */
.scan-line {
  position: relative;
  overflow: hidden;
}

.scan-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 脉冲点动画 */
.pulse-dot {
  position: relative;
}

.pulse-dot::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 边框流动动画 */
.border-flow {
  position: relative;
}

.border-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #6c63ff, #00b894, #8b5cf6, #6c63ff);
  background-size: 300% 100%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderFlow 3s linear infinite;
}

@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================
   Logo 划开页面效果
   ============================================ */

/* 裂缝光线 - 竖向发光裂纹 */
.slice-light-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: linear-gradient(180deg, 
    rgba(255,255,255,1) 0%,
    #7dd3fc 15%,
    #38bdf8 40%,
    #0ea5e9 70%,
    rgba(56,189,248,0.3) 100%
  );
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  box-shadow: 
    0 0 15px rgba(255,255,255,1),
    0 0 35px rgba(125,211,252,0.9),
    0 0 60px rgba(56,189,248,0.7),
    0 0 100px rgba(14,165,233,0.4),
    0 0 150px rgba(2,132,199,0.2);
  border-radius: 2px;
  filter: blur(0.5px);
}

/* 丁达尔光效 - 从裂纹散发 */
.slice-tyndall {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  width: 500px;
  left: 50%;
  transform: translateX(-50%);
  background: 
    linear-gradient(90deg, transparent 35%, rgba(125,211,252,0.12) 47%, rgba(255,255,255,0.18) 49.5%, rgba(125,211,252,0.12) 52%, transparent 65%),
    linear-gradient(100deg, transparent 40%, rgba(56,189,248,0.08) 48%, rgba(125,211,252,0.1) 50%, rgba(56,189,248,0.08) 52%, transparent 60%),
    linear-gradient(80deg, transparent 42%, rgba(14,165,233,0.06) 49%, rgba(56,189,248,0.08) 51%, rgba(14,165,233,0.06) 53%, transparent 58%),
    radial-gradient(ellipse 70% 100% at center, rgba(125,211,252,0.15) 0%, rgba(56,189,248,0.05) 40%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(4px);
}

/* 终场闪光 */
.slice-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 10%, rgba(125,211,252,0.8) 25%, rgba(56,189,248,0.4) 45%, rgba(14,165,233,0.15) 65%, transparent 100%);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
}

/* 能量波纹效果 */
.slice-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 200px;
  height: 200px;
  border: 2px solid rgba(108, 99, 255, 0.6);
  border-radius: 50%;
  z-index: 10003;
  pointer-events: none;
  opacity: 0;
}

.intro-overlay.slice-reveal .slice-shockwave {
  animation: shockwaveExpand 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes shockwaveExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    border-width: 3px;
  }
  100% {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
    border-width: 1px;
  }
}

/* 多层波纹 */
.slice-shockwave:nth-child(2) {
  animation-delay: 0.15s;
  border-color: rgba(6, 182, 212, 0.5);
}

.slice-shockwave:nth-child(3) {
  animation-delay: 0.3s;
  border-color: rgba(0, 212, 170, 0.4);
}