/**
 * 欢迎页面加载动画样式
 * 支持响应式设计，适配PC端和移动端
 * 增强科技感视觉效果 - 优化版
 */

/* 基础样式重置 */
* {
  box-sizing: border-box;
}

/* 根元素字体大小 - 响应式基准 */
html {
  font-size: clamp(14px, 2.5vw, 18px);
}

/* 主容器 - 全屏欢迎页面 */
#loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 999;

  /* 增强科技感渐变背景 */
  background: radial-gradient(circle at 10% 10%, rgba(0, 50, 100, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(0, 100, 150, 0.05) 0%, transparent 40%),
    linear-gradient(
      145deg,
      rgba(0, 5, 20, 0.98),
      rgba(0, 15, 35, 0.95),
      rgba(5, 20, 50, 0.92),
      rgba(0, 0, 10, 1)
    );

  /* 微妙的背景动画 */
  animation: bgShift 15s ease-in-out infinite alternate;

  /* 移动端优化 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* 背景微妙变化动画 */
@keyframes bgShift {
  0% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg) brightness(1);
  }
  100% {
    background-position: 100% 100%;
    filter: hue-rotate(15deg) brightness(1.1);
  }
}

/* 添加微妙的粒子背景 */
#loader-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(1px 1px at 20px 30px, rgba(0, 150, 255, 0.15), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(0, 200, 255, 0.1), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(0, 255, 200, 0.1), transparent),
    radial-gradient(1px 1px at 160px 30px, rgba(0, 100, 255, 0.1), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.4;
  animation: particlesFloat 60s linear infinite;
  pointer-events: none;
}

@keyframes particlesFloat {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-100px) translateX(100px);
  }
}

/* 内容容器 */
#loader-wrapper .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2rem 1rem;
  max-width: 90vw;
  text-align: center;
  position: relative;
  z-index: 3;
}

/* Logo容器 */
.logo-container {
  position: relative;
  margin-bottom: 2rem;
}

/* Logo 样式 - 增强科技感 */
#loader-wrapper .content .logo {
  position: relative;
  width: clamp(6rem, 10vw, 10rem);
  height: clamp(6rem, 10vw, 10rem);
  border-radius: 50%;

  /* 科技感边框 */
  border: 2px solid rgba(0, 150, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 150, 255, 0.3), inset 0 0 10px rgba(0, 200, 255, 0.1);

  /* 3D浮动动画 */
  animation: logoFloat 4s ease-in-out infinite;

  /* 性能优化 */
  will-change: transform;

  /* 高分辨率优化 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 添加Logo光晕效果 */
.logo-glow {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(0, 150, 255, 0.2),
    rgba(0, 200, 255, 0.3),
    rgba(0, 255, 200, 0.2),
    transparent
  );
  filter: blur(3px);
  animation: logoGlowRotate 8s linear infinite;
  z-index: -1;
  opacity: 0.7;
}

/* 3D浮动动画 */
@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0) rotateY(0deg);
  }
  50% {
    transform: translateY(-0.5rem) rotateY(10deg);
  }
}

@keyframes logoGlowRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 应用名称 */
#loader-wrapper .content .name {
  letter-spacing: 0.2rem;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800;
  margin: 1.5rem 0 1rem 0;

  /* 增强科技感文字效果 */
  background: linear-gradient(
    135deg,
    #00d4ff 0%,
    #ffffff 40%,
    #00ffcc 60%,
    #0099ff 80%,
    #ffffff 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 动态渐变动画 */
  animation: textShimmer 5s linear infinite;

  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 文字发光效果 */
  filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.3));
}

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

/* 公司信息容器 - 低调但科技感 */
.company-info {
  margin: 3rem 0 1.5rem 0;
  padding: 0.8rem 1.5rem;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

/* 公司名称 - 低调但科技感 */
.company-name {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 500;
  color: rgba(4, 123, 150, 0.8);
  margin-bottom: 0.2rem;
  letter-spacing: 0.05rem;
  text-shadow: 0 0 5px rgba(0, 180, 220, 0.2);
}

/* 公司英文名 - 低调但科技感 */
.company-subtitle {
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

/* 加载提示文字 - 增强科技感 */
#loader-wrapper .content .tip {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  margin: 1rem 0;
  font-weight: 300;
  letter-spacing: 0.05rem;

  /* 打字机效果 */
  border-right: 2px solid rgba(0, 200, 255, 0.6);
  padding-right: 5px;
  animation: typingBlink 1.2s step-end infinite;
}

@keyframes typingBlink {
  0%,
  100% {
    border-color: rgba(0, 200, 255, 0.6);
  }
  50% {
    border-color: transparent;
  }
}

/* 科技感进度指示器 - 增强版 */
#loader-wrapper .content .progress-indicator {
  width: clamp(250px, 60vw, 400px);
  height: 4px;
  background-color: rgba(0, 50, 100, 0.3);
  border-radius: 2px;
  margin-top: 2rem;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 150, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.1);
}

/* 进度条轨道 - 更流畅的动画 */
.progress-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(
    90deg,
    rgba(0, 150, 255, 0.4),
    rgba(0, 200, 255, 0.8),
    rgba(0, 150, 255, 0.4)
  );
  animation: progressMove 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 进度条发光效果 */
.progress-glow {
  position: absolute;
  top: -2px;
  left: 0;
  height: 8px;
  width: 15%;
  background: radial-gradient(ellipse, rgba(0, 200, 255, 0.6) 0%, transparent 70%);
  filter: blur(1px);
  animation: progressGlowMove 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

@keyframes progressGlowMove {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(500px);
  }
}

/* 数据流效果 - 增强科技感 */
.data-stream {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.data-stream span {
  width: 3px;
  height: 20px;
  background: linear-gradient(to top, transparent, rgba(0, 200, 255, 0.8), transparent);
  animation: dataFlow 1.5s ease-in-out infinite;
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(0, 150, 255, 0.3);
}

/* 错开的动画延迟 */
.data-stream span:nth-child(1) {
  animation-delay: 0s;
  height: 15px;
}
.data-stream span:nth-child(2) {
  animation-delay: 0.2s;
  height: 20px;
}
.data-stream span:nth-child(3) {
  animation-delay: 0.4s;
  height: 25px;
}
.data-stream span:nth-child(4) {
  animation-delay: 0.6s;
  height: 20px;
}
.data-stream span:nth-child(5) {
  animation-delay: 0.8s;
  height: 15px;
}

@keyframes dataFlow {
  0%,
  100% {
    transform: scaleY(0.3);
    opacity: 0.3;
    filter: brightness(0.8);
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
    filter: brightness(1.2);
  }
}

/* 平板设备优化 */
@media (max-width: 1024px) and (min-width: 769px) {
  #loader-wrapper .content {
    padding: 3rem 2rem;
  }

  .company-info {
    padding: 0.8rem 1.5rem;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  #loader-wrapper .content {
    padding: 2rem 1rem;
  }

  .company-info {
    padding: 0.8rem 1rem;
    margin: 0.8rem 0 1rem 0;
  }

  .company-name {
    font-size: 1.3rem;
  }

  .company-subtitle {
    font-size: 0.8rem;
  }
}

/* 小屏手机优化 */
@media (max-width: 480px) {
  .company-info {
    padding: 0.6rem 0.8rem;
  }

  .company-name {
    font-size: 1.1rem;
  }

  .company-subtitle {
    font-size: 0.7rem;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  #loader-wrapper .content {
    flex-direction: row;
    gap: 2rem;
    padding: 1rem;
  }

  .logo-container {
    margin-bottom: 0;
  }

  #loader-wrapper .content .logo {
    width: 4rem;
    height: 4rem;
  }

  .company-info {
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #loader-wrapper .content .logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  #loader-wrapper,
  #loader-wrapper::before,
  #loader-wrapper .content .logo,
  .logo-glow,
  #loader-wrapper .content .name,
  .company-info::before,
  #loader-wrapper .content .tip,
  .progress-track,
  .progress-glow,
  .data-stream span {
    animation: none;
  }

  #loader-wrapper .content .logo {
    transform: none;
  }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
  #loader-wrapper {
    background: radial-gradient(circle at 10% 10%, rgba(0, 30, 60, 0.05) 0%, transparent 40%),
      radial-gradient(circle at 90% 90%, rgba(0, 60, 100, 0.05) 0%, transparent 40%),
      linear-gradient(
        145deg,
        rgba(0, 0, 0, 0.98),
        rgba(0, 10, 25, 0.95),
        rgba(0, 15, 35, 0.92),
        rgba(0, 0, 0, 1)
      );
  }
}

/* 打印样式 */
@media print {
  #loader-wrapper {
    display: none;
  }
}