/* 锤子动画加载样式 */
:root {
  --hammer-color: #4f6df5;
  --hammer-shadow: rgba(79, 109, 245, 0.5);
  --text-glow: rgba(79, 109, 245, 0.8);
  --impact-glow: rgba(79, 109, 245, 0.9);
  --text-break-color: #f5f5f5;
  /* 新增科技感色彩 */
  --neon-blue: #00d4ff;
  --neon-purple: #9d4edd;
  --tech-green: #39ff14;
  --hologram-color: rgba(0, 212, 255, 0.7);
  --grid-color: rgba(79, 109, 245, 0.1);
}

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-gradient);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  perspective: 1500px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

/* 新增科技网格背景 */
.loader-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(79, 109, 245, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 109, 245, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
  opacity: 0.3;
}

/* 新增扫描线效果 */
.loader-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
  animation: scanLine 3s linear infinite;
  box-shadow: 0 0 10px var(--neon-blue);
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

@keyframes scanLine {
  0% { top: -2px; }
  100% { top: 100%; }
}

/* 新增全息投影效果容器 */
.hologram-container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: contrast(1.2);
}

.hologram-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--hologram-color) 20%, 
    var(--hologram-color) 80%, 
    transparent 100%);
  opacity: 0.2;
  animation: hologramScan 8s ease-in-out infinite;
}

@keyframes hologramScan {
  0%, 100% { transform: translateY(-100vh); opacity: 0; }
  50% { transform: translateY(100vh); opacity: 0.3; }
}

/* 新增数据流效果 */
.data-stream {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    var(--tech-green) 50%, 
    transparent 100%);
  opacity: 0.6;
  animation: dataFlow 2s linear infinite;
}

@keyframes dataFlow {
  0% { top: -100px; }
  100% { top: 100%; }
}

.loader-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

/* 新增光晕效果 */
.loader-inner::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, 
    rgba(79, 109, 245, 0.1) 0%, 
    rgba(79, 109, 245, 0.05) 30%,
    transparent 70%);
  border-radius: 50%;
  animation: auraRotate 30s linear infinite;
  filter: blur(20px);
}

@keyframes auraRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

.loader-content {
  position: relative;
  transform-style: preserve-3d;
  font-size: 6rem;
  font-weight: bold;
  perspective: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.animation-stage {
  position: relative;
  width: 700px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  z-index: 1;
}

/* 增强最终文本效果 - 重写以确保显示 */
.full-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) translateZ(0) scale(0.8) !important;
  width: 100% !important;
  text-align: center !important;
  /* 确保文字可见 */
  color: #ffffff !important;
  opacity: 0;
  font-size: 6rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-family: 'Inter', sans-serif !important;
  z-index: 100000 !important;
  pointer-events: none !important;
  /* 先使用基础动画 */
  animation: finalTextAppearSimple 1s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
  animation-delay: 4.5s !important;
  /* 发光效果 */
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 25px rgba(79, 109, 245, 0.8),
    0 0 50px rgba(0, 212, 255, 0.6),
    0 0 75px rgba(157, 78, 221, 0.4) !important;
}

/* 简化的出现动画 */
@keyframes finalTextAppearSimple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    filter: blur(20px);
  }
  50% {
    opacity: 0.8;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(0);
  }
}

/* 渐变版本（可选） */
.full-text.with-gradient {
  background: linear-gradient(45deg, 
    #ffffff 0%, 
    #00d4ff 25%, 
    #ffffff 50%, 
    #9d4edd 75%,
    #ffffff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 300% auto !important;
  animation: finalTextAppearSimple 1s cubic-bezier(0.19, 1, 0.22, 1) forwards,
             textShineSimple 3s linear infinite !important;
  animation-delay: 4.5s, 5.5s !important;
}

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

/* 确保容器不会阻挡文字 */
.full-text-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 99998 !important;
  pointer-events: none !important;
  /* 确保容器透明 */
  background: transparent !important;
}

/* 移除任何可能的遮挡 */
.animation-stage > * {
  z-index: auto;
}

.animation-stage .full-text-container {
  z-index: 99998 !important;
}

.animation-stage .full-text {
  z-index: 99999 !important;
}

/* 增强锤子部分文字效果 */
.hammer-part {
  position: absolute;
  color: var(--hammer-color);
  text-shadow: 
    0 0 15px var(--hammer-shadow),
    0 0 30px var(--neon-blue);
  top: 50%;
  left: 30%;
  transform: translate(-100%, -50%) translateZ(0);
  opacity: 0;
  animation: 
    hammerTextAppear 0.7s ease forwards, 
    hammerTransform 1.5s ease forwards;
  animation-delay: 0.3s, 1.3s;
  z-index: 5;
  letter-spacing: 1px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--hammer-color) 0%, var(--neon-purple) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 增强数学部分文字效果 */
.math-part {
  position: absolute;
  color: var(--text-color);
  top: 50%;
  right: 30%;
  transform: translate(100%, -50%) translateZ(0);
  opacity: 0;
  animation: 
    mathAppear 0.7s ease forwards,
    mathFadeOut 0.5s ease forwards;
  animation-delay: 1.5s, 4.0s;
  z-index: 5;
  letter-spacing: 1px;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px var(--tech-green);
}

.math-fragment {
  position: absolute;
  color: var(--text-break-color);
  font-size: 0.5em;
  opacity: 0;
  top: 50%;
  right: 30%;
  transform: translate(100%, -50%);
  text-shadow: 
    0 0 8px var(--text-glow),
    0 0 15px var(--neon-blue);
  z-index: 1;
  filter: blur(0.5px);
}

.fragment-1 { 
  animation: fragment1 1.5s cubic-bezier(0.22, 0.68, 0, 1.71) forwards;
  animation-delay: 2.7s;
}

.fragment-2 {
  animation: fragment2 1.5s cubic-bezier(0.22, 0.68, 0, 1.71) forwards;
  animation-delay: 2.75s;
}

.fragment-3 {
  animation: fragment3 1.5s cubic-bezier(0.22, 0.68, 0, 1.71) forwards;
  animation-delay: 2.8s;
}

.fragment-4 {
  animation: fragment4 1.5s cubic-bezier(0.22, 0.68, 0, 1.71) forwards;
  animation-delay: 2.85s;
}

.fragment-5 {
  animation: fragment5 1.5s cubic-bezier(0.22, 0.68, 0, 1.71) forwards;
  animation-delay: 2.9s;
}

/* 增强3D锤子效果 */
.hammer-3d {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0;
  transform-style: preserve-3d;
  transform-origin: 70% 70%;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%) rotateZ(0deg) rotateX(0deg);
  animation: 
    hammerAppear 0.5s ease forwards, 
    hammerMove 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    hammerSwing 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 1.3s, 1.9s, 2.4s;
  z-index: 10;
  will-change: transform;
  animation-fill-mode: forwards !important;
  filter: drop-shadow(0 0 20px var(--neon-blue));
}

/* 超级科技感锤头 */
.hammer-head {
  position: absolute;
  width: 110px;
  height: 70px;
  background: var(--hammer-color);
  transform: translateX(100px) translateY(-30px);
  border-radius: 8px;
  box-shadow: 
    0 0 25px var(--hammer-shadow),
    inset 0 10px 30px rgba(255, 255, 255, 0.4),
    inset 0 -10px 20px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  will-change: transform;
  
  /* 科技感增强 */
  background: linear-gradient(135deg, 
    #4f6df5 0%, 
    #3a57e2 30%, 
    #5e3fd6 60%,
    #2a46d1 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 30px var(--hammer-shadow),
    0 0 50px rgba(79, 109, 245, 0.5),
    0 0 15px var(--neon-blue),
    inset 0 0 20px rgba(255, 255, 255, 0.4),
    inset 0 0 40px rgba(0, 212, 255, 0.2);
  overflow: hidden;
}

/* 增强锤头表面效果 */
.hammer-head::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, transparent 30%),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      rgba(0, 212, 255, 0.1) 2px,
      transparent 4px,
      transparent 8px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(157, 78, 221, 0.1) 2px,
      transparent 4px,
      transparent 8px
    );
  background-blend-mode: overlay;
  border-radius: 8px;
  animation: surfaceGlow 3s ease-in-out infinite alternate;
}

@keyframes surfaceGlow {
  0% { opacity: 0.5; }
  100% { opacity: 0.9; }
}

/* 科技纹路增强 */
.hammer-head::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 3px;
  left: -50%;
  top: 50%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--neon-blue) 20%, 
    rgba(255, 255, 255, 0.9) 50%,
    var(--neon-blue) 80%,
    transparent 100%);
  transform: translateY(-50%);
  animation: techScan 2s linear infinite;
  filter: blur(1px);
  box-shadow: 0 0 10px var(--neon-blue);
}

/* 扫描动画 */
@keyframes techScan {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 超级科技感手柄 */
.hammer-handle {
  position: absolute;
  width: 20px;
  height: 160px;
  background: linear-gradient(90deg, #a0a0a0, #e0e0e0, #a0a0a0);
  transform: translateX(140px) translateY(20px);
  border-radius: 6px;
  box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.4), inset 0 -5px 10px rgba(0, 0, 0, 0.2);
  will-change: transform;
  
  /* 科技感手柄 */
  background: linear-gradient(90deg, 
    rgba(180, 180, 180, 0.9), 
    rgba(220, 220, 220, 0.9), 
    rgba(180, 180, 180, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 0 5px rgba(255, 255, 255, 0.5),
    0 0 15px var(--neon-blue),
    inset 0 0 10px rgba(255, 255, 255, 0.7),
    inset 0 0 20px rgba(0, 212, 255, 0.3);
  overflow: hidden;
}

/* 增强手柄装饰 */
.hammer-handle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 10px,
      rgba(0, 212, 255, 0.3) 10px,
      rgba(0, 212, 255, 0.3) 11px
    ),
    linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.4) 50%, 
      transparent 100%);
  animation: handlePulse 2s ease-in-out infinite;
}

@keyframes handlePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* 增强连接点 - 能量核心 */
.hammer-handle::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  left: -6px;
  top: -10px;
  background: radial-gradient(circle, 
    rgba(255,255,255,0.9) 0%, 
    var(--neon-blue) 20%, 
    #4f6df5 40%, 
    #3a57e2 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px var(--neon-blue),
    0 0 40px rgba(79, 109, 245, 0.7),
    inset 0 0 10px rgba(255, 255, 255, 0.9);
  z-index: 2;
  animation: coreEnergy 1.5s ease-in-out infinite alternate;
}

@keyframes coreEnergy {
  0% { 
    transform: scale(1);
    box-shadow: 
      0 0 20px var(--neon-blue),
      0 0 40px rgba(79, 109, 245, 0.7);
  }
  100% { 
    transform: scale(1.1);
    box-shadow: 
      0 0 30px var(--neon-blue),
      0 0 60px rgba(79, 109, 245, 0.9);
  }
}

/* 增强能量环绕效果 */
.hammer-energy {
  position: absolute;
  width: 120%;
  height: 90%;
  left: -10%;
  top: 5%;
  pointer-events: none;
  border-radius: 12px;
  opacity: 0;
  z-index: 4;
  animation: energyPulse 2s ease-in-out infinite alternate;
  background: 
    radial-gradient(
      ellipse at 50% 50%, 
      rgba(79, 109, 245, 0) 0%, 
      rgba(79, 109, 245, 0.1) 50%,
      rgba(79, 109, 245, 0.3) 80%,
      rgba(79, 109, 245, 0) 100%
    );
  filter: blur(5px);
  box-shadow: 
    inset 0 0 30px var(--neon-blue),
    inset 0 0 60px var(--neon-purple);
}

@keyframes energyPulse {
  0% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* 增强科技电路纹路 */
.tech-circuits {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: overlay;
  background-image: 
    radial-gradient(circle at 20% 30%, var(--neon-blue) 0%, transparent 5%),
    radial-gradient(circle at 80% 40%, var(--neon-purple) 0%, transparent 5%),
    radial-gradient(circle at 50% 70%, var(--tech-green) 0%, transparent 5%),
    linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0, 212, 255, 0.3) 45%, transparent 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 30%, rgba(157, 78, 221, 0.3) 35%, transparent 40%, transparent 100%);
  animation: circuitPulse 4s infinite alternate;
}

@keyframes circuitPulse {
  0% { opacity: 0.3; transform: rotate(0deg); }
  50% { opacity: 0.7; transform: rotate(5deg); }
  100% { opacity: 0.5; transform: rotate(-5deg); }
}

/* 增强冲击效果 */
.impact {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.9) 0%, 
    var(--neon-blue) 30%, 
    var(--impact-glow) 60%, 
    transparent 100%);
  top: 50%;
  right: 30%;
  transform: translate(50%, -50%) scale(0);
  animation: impactEffect 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 2.6s;
  opacity: 0.8;
  border-radius: 50%;
  filter: blur(3px);
  z-index: 4;
  box-shadow: 
    0 0 50px var(--neon-blue),
    0 0 100px var(--impact-glow);
}

.impact::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.9) 0%, 
    var(--tech-green) 40%, 
    transparent 70%);
  border-radius: 50%;
  top: 15%;
  left: 15%;
  animation: impactCore 0.6s ease-out forwards;
  animation-delay: 2.6s;
}

@keyframes impactCore {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.7; }
}

/* 增强冲击射线 */
.impact-rays {
  position: absolute;
  top: 50%;
  right: 30%;
  transform: translate(50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  animation: impactRays 0.6s ease-out forwards;
  animation-delay: 2.6s;
  z-index: 6;
  will-change: opacity, transform;
}

.ray {
  position: absolute;
  background: linear-gradient(90deg, 
    var(--hammer-color) 0%, 
    var(--neon-blue) 50%, 
    transparent 100%);
  height: 3px;
  width: 0;
  top: 0;
  left: 0;
  transform-origin: left center;
  box-shadow: 
    0 0 8px var(--hammer-shadow),
    0 0 15px var(--neon-blue);
  animation: rayGrow 0.4s ease-out forwards;
  animation-delay: 2.6s;
  will-change: width, opacity;
  filter: blur(0.5px);
}

@keyframes rayGrow {
  0% { width: 0; opacity: 0.9; }
  50% { width: 100px; opacity: 0.6; }
  100% { width: 120px; opacity: 0; }
}

.ray:nth-child(1) { transform: rotate(0deg); }
.ray:nth-child(2) { transform: rotate(45deg); animation-delay: 2.65s; }
.ray:nth-child(3) { transform: rotate(90deg); animation-delay: 2.7s; }
.ray:nth-child(4) { transform: rotate(135deg); animation-delay: 2.75s; }
.ray:nth-child(5) { transform: rotate(180deg); animation-delay: 2.8s; }
.ray:nth-child(6) { transform: rotate(225deg); animation-delay: 2.85s; }
.ray:nth-child(7) { transform: rotate(270deg); animation-delay: 2.9s; }
.ray:nth-child(8) { transform: rotate(315deg); animation-delay: 2.95s; }

.small-particles {
  position: absolute;
  top: 50%;
  right: 30%;
  transform: translate(50%, -50%);
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: particlesFade 0.3s ease forwards;
  animation-delay: 2.65s;
  z-index: 5;
}

.small-particle {
  position: absolute;
  background: var(--text-color);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
  box-shadow: 
    0 0 2px var(--text-color),
    0 0 5px var(--neon-blue);
  will-change: transform;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.9) 0%, 
    var(--neon-blue) 100%);
}

@keyframes particlesFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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

@keyframes hammerTransform {
  0% {
    transform: translate(-100%, -50%) translateZ(0) rotateX(0) rotateY(0);
    opacity: 1;
  }
  30% {
    transform: translate(-100%, -50%) translateZ(50px) rotateX(15deg) rotateY(10deg);
    opacity: 1;
  }
  80% {
    transform: translate(-100%, -50%) translateZ(80px) rotateX(30deg) rotateY(15deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(-100%, -50%) translateZ(100px) rotateX(40deg) rotateY(20deg);
    opacity: 0;
  }
}

@keyframes hammerAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotateZ(0deg) scale(0.5) rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateZ(0deg) scale(1) rotateX(-10deg);
  }
}

@keyframes hammerMove {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateX(-10deg);
  }
  100% {
    transform: translate(20%, -50%) rotateZ(0deg) rotateX(-10deg);
  }
}

@keyframes hammerSwing {
  0% {
    transform: translate(20%, -50%) rotateZ(0deg) rotateX(-10deg);
  }
  20% {
    transform: translate(20%, -50%) rotateZ(-40deg) rotateX(0deg);
  }
  60% {
    transform: translate(20%, -50%) rotateZ(-20deg) rotateX(-5deg);
  }
  80% {
    transform: translate(80%, -50%) rotateZ(-100deg) rotateX(10deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(150%, -50%) rotateZ(-140deg) rotateX(20deg);
    opacity: 0;
  }
}

@keyframes mathAppear {
  0% {
    opacity: 0;
    transform: translate(100%, -50%) translateZ(0) scale(0.8);
    filter: blur(5px);
  }
  50% {
    transform: translate(100%, -50%) translateZ(0) scale(1.1);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate(100%, -50%) translateZ(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes mathFadeOut {
  0% {
    opacity: 1;
    transform: translate(100%, -50%) translateZ(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(100%, -50%) translateZ(0) scale(0.9);
  }
}

@keyframes fragment1 {
  0% {
    transform: translate(100%, -50%) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-50px, -130px) rotate(-65deg) scale(0.7) rotateY(80deg);
    opacity: 0;
  }
}

@keyframes fragment2 {
  0% {
    transform: translate(100%, -50%) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(50px, -90px) rotate(50deg) scale(0.8) rotateY(-60deg);
    opacity: 0;
  }
}

@keyframes fragment3 {
  0% {
    transform: translate(100%, -50%) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(90px, 0) rotate(80deg) scale(0.6) rotateX(70deg);
    opacity: 0;
  }
}

@keyframes fragment4 {
  0% {
    transform: translate(100%, -50%) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(30px, 90px) rotate(-40deg) scale(0.7) rotateX(-60deg);
    opacity: 0;
  }
}

@keyframes fragment5 {
  0% {
    transform: translate(100%, -50%) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-60px, 50px) rotate(-100deg) scale(0.6) rotateZ(90deg);
    opacity: 0;
  }
}

@keyframes impactEffect {
  0% {
    transform: translate(50%, -50%) scale(0);
    opacity: 0;
  }
  40% {
    transform: translate(50%, -50%) scale(2.5);
    opacity: 0.9;
  }
  85% {
    transform: translate(50%, -50%) scale(4);
    opacity: 0.1;
  }
  100% {
    transform: translate(50%, -50%) scale(5);
    opacity: 0;
  }
}

@keyframes impactRays {
  0% {
    opacity: 0;
    transform: translate(50%, -50%) scale(0.3);
  }
  40% {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
  }
  85% {
    opacity: 0.2;
    transform: translate(50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(50%, -50%) scale(1.5);
  }
}

/* 当最终文本出现后固定所有动画和窗口晃动 */
@keyframes freezeAnimations {
  0% {
    animation-play-state: running;
  }
  100% {
    animation-play-state: paused;
  }
}

/* 修改遮罩层，确保它能停止所有动画效果和窗口晃动 */
.final-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-gradient); /* 初始背景，用于平滑过渡 */
  opacity: 0;
  z-index: 9999; /* 初始较高，确保在加载动画元素之上，但在 full-text 之下 */
  animation: maskTransition 1s ease-in forwards;
  animation-delay: 4.0s; /* 稍早于 full-text 出现，或与其同步 */
  pointer-events: none; /* 确保不会捕获鼠标事件 */
}

@keyframes maskTransition {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1; /* 过渡时完全不透明，覆盖旧动画的最后阶段 */
  }
  100% {
    opacity: 0; /* 最终变为透明，为显示 full-text 和后续页面内容做准备 */
    /* z-index: -1; */ /* 不再需要移到后面，保持透明即可 */
  }
}

/* 提前隐藏锤子元素 */
@keyframes hideHammer {
  to {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}

/* 当遮罩层出现时强制隐藏锤子 */
.final-mask:not([style*="opacity: 0"]) ~ .hammer-3d,
.final-mask:not([style*="opacity: 0"]) ~ .hammer-part,
.final-mask:not([style*="opacity: 0"]) ~ .impact {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 添加一个停止晃动的类，在JS中动态添加 */
.stop-animations * {
  animation-play-state: paused !important;
  transition: none !important;
  transform: none !important;
}

/* 以下元素在动画停止时完全隐藏 */
.stop-animations .hammer-3d,
.stop-animations .hammer-part,
.stop-animations .math-part,
.stop-animations .impact,
.stop-animations .impact-rays,
.stop-animations .math-fragment,
.stop-animations .small-particles,
.stop-animations .hammer-head,
.stop-animations .hammer-handle,
.stop-animations .shadow-overlay,
.stop-animations .impact-flash,
.stop-animations .impact-shockwave {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 防止HTML元素有任何动画效果 */
.no-animation {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* 确保最终文本动画不受其他样式影响 */
.no-animation .full-text,
.stop-animations .full-text {
  animation-play-state: running !important;
  transform: translate(-50%, -50%) translateZ(0) scale(1.1) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  color: var(--text-color) !important;
}

/* 添加一个额外的类来确保文字显示 */
.full-text.show {
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--text-color) !important;
}

.hidden {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
  pointer-events: none;
}

/* 适配不同屏幕尺寸 */
@media (max-width: 768px) {
  .loader-content {
    font-size: 4rem;
  }
  
  .animation-stage {
    width: 500px;
    height: 180px;
  }
  
  .hammer-3d {
    transform-origin: 60% 60%;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@media (max-width: 480px) {
  .loader-content {
    font-size: 3rem;
  }
  
  .animation-stage {
    width: 350px;
    height: 150px;
  }
  
  .hammer-3d {
    transform: translate(-50%, -50%) scale(0.6);
  }
}

/* 确保所有碎片动画到4秒时完全消失 */
.fragment-1, .fragment-2, .fragment-3, .fragment-4, .fragment-5 {
  animation-duration: 1.5s;  /* 缩短动画时间 */
  animation-fill-mode: forwards;
}

/* 新增：新 Logo 图片样式 */
.new-logo-image {
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%) scale(0.5); */ /* 初始transform由动画控制 */
  /* max-width: 80%; */ /* 暂时由内联样式控制，或根据需要调整 */
  /* max-height: 80%; */
  opacity: 0; /* 初始透明，配合动画淡入 */
  animation: newLogoFadeIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards; /* 更新动画和时长 */
  z-index: 10; /* 确保在背景元素之上 (内联样式中可能更高) */
  filter: drop-shadow(0px 8px 20px rgba(0, 212, 255, 0.35)); /* 添加阴影以增加立体感 */
  transform-style: preserve-3d; /* 配合 perspective 和 rotate */
}

@keyframes newLogoFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) perspective(600px) rotateY(25deg) rotateX(15deg);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) perspective(600px) rotateY(-7deg) rotateX(-3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) perspective(600px) rotateY(0deg) rotateX(0deg);
  }
}

/* 注释掉大部分旧锤子动画相关样式 */
/*
.hammer-part {
*/
/* ... existing code ... */
/*
.ray:nth-child(8) { transform: rotate(315deg); animation-delay: 2.95s; }
*/

/* 保留小粒子效果，但初始隐藏，如果需要可以调整后启用 */
.small-particles {
/* ... existing code ... */
}
@keyframes particlesFade {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(50px) scale(0.5); }
}

/* 注释掉旧动画的关键帧 */
/*
@keyframes hammerTextAppear {
*/
/* ... existing code ... */
/*
@keyframes impactRays {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
*/

/* 保留 final-mask 和 full-text 相关样式，它们在最后显示文字时可能仍有用 */
/* ... existing code ... */ 

/*# sourceMappingURL=/loader-animation.a08f01c7.css.map */