/* ========================================
   雄丰官网 · Splash Page 样式
   纯黑背景 + SVG 线绘动画 + 呼吸光效
   ======================================== */

/* 重置 */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000000;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 容器 */
.splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: #000000;
  overflow: hidden;
  isolation: isolate;
}

/* ========================================
   背景极光流光（冷色：青 / 蓝紫 / 品红）
   三层 radial blob，慢速飘移 + 色相缓变
   纯 CSS，零依赖
   ======================================== */
.splash::before,
.splash::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  animation: auroraFadeIn 2s ease-out 0.4s forwards;
}

/* 第一层光斑：青蓝，从左下漂到右上 */
.splash::before {
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle at center,
    rgba(56, 189, 248, 0.55) 0%,
    rgba(56, 189, 248, 0.18) 40%,
    transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-65%, -40%);
  animation:
    auroraFadeIn 2s ease-out 0.4s forwards,
    auroraDriftA 18s ease-in-out 2s infinite;
}

/* 第二层光斑：紫品红，从右上漂到左下 */
.splash::after {
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(circle at center,
    rgba(192, 132, 252, 0.5) 0%,
    rgba(236, 72, 153, 0.22) 40%,
    transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-35%, -60%);
  animation:
    auroraFadeIn 2s ease-out 0.8s forwards,
    auroraDriftB 22s ease-in-out 2.5s infinite;
}

/* 第三层：通过独立元素挂在 .splash 内层，更深层的暖色流光补色 */
.splash-aurora {
  position: absolute;
  top: 50%; left: 50%;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(100px);
  background: radial-gradient(circle at center,
    rgba(34, 211, 238, 0.35) 0%,
    rgba(99, 102, 241, 0.2) 45%,
    transparent 75%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: -2;
  mix-blend-mode: screen;
  animation:
    auroraFadeIn 2.2s ease-out 1.2s forwards,
    auroraDriftC 28s ease-in-out 3s infinite,
    auroraBreathe 8s ease-in-out 3s infinite;
}

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

@keyframes auroraDriftA {
  0%, 100% { transform: translate(-65%, -40%) scale(1); }
  33%      { transform: translate(-30%, -55%) scale(1.15); }
  66%      { transform: translate(-70%, -25%) scale(0.95); }
}

@keyframes auroraDriftB {
  0%, 100% { transform: translate(-35%, -60%) scale(1); }
  40%      { transform: translate(-60%, -30%) scale(1.2); }
  75%      { transform: translate(-25%, -65%) scale(0.9); }
}

@keyframes auroraDriftC {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { transform: translate(-50%, -50%) scale(1.1) rotate(180deg); }
}

@keyframes auroraBreathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* 淡出 + 轻微放大 */
.splash.is-leaving {
  animation: splashFadeOut 0.5s ease-in forwards;
}
@keyframes splashFadeOut {
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* ========================================
   Logo SVG
   ======================================== */
.splash-logo {
  width: auto;
  height: 25vh;
  max-height: 200px;
  margin-bottom: 40px;
  opacity: 0;
  cursor: pointer;
  animation: logoFadeIn 0.3s ease-out 0.2s forwards;
}

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

/* SVG 线绘动画：所有路径和圆 */
.splash-logo svg {
  width: 100%;
  height: 100%;
}

/* 线绘核心动画 */
.splash-logo path,
.splash-logo circle {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: logoStrokeDraw 1.2s ease-out 0.3s forwards;
}

@keyframes logoStrokeDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 隐藏 SVG 内嵌的文字和矩形 */
.splash-logo text,
.splash-logo rect {
  display: none;
}

/* ========================================
   呼吸光效（慢闪）
   线绘完成后，logo + 文字整体缓慢明暗呼吸
   ======================================== */
@keyframes breathingGlow {
  0%   { opacity: 1; }
  50%  { opacity: 0.35; }
  100% { opacity: 1; }
}

/* logo 呼吸：线绘 1.5s 结束后启动 */
.splash-logo.is-breathing {
  animation: breathingGlow 3.5s ease-in-out infinite;
}

/* 文字呼吸：与 logo 同步 */
.splash-company.is-breathing {
  animation: breathingGlow 3.5s ease-in-out infinite;
}

/* ========================================
   文字元素（共用淡入动画）
   ======================================== */
.splash-text {
  opacity: 0;
  transform: translateY(10px);
}
.splash-text.is-visible {
  animation: textFadeUp 0.6s ease-out forwards;
}
@keyframes textFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 公司名 */
.splash-company {
  text-align: center;
  margin-bottom: 32px;
  color: #FFFFFF;
  font-family: 'Barlow Condensed', 'DIN Condensed', sans-serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}
.splash-company-zh {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 300;
  letter-spacing: 0.5em;
  margin-left: 0.2em;
}

/* 进入官网按钮（logo 下方居中，非绝对定位） */
.splash-skip {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Noto Sans SC', 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  cursor: pointer;
  padding: 10px 28px;
  transition: color 0.3s ease, border-color 0.3s ease;
  opacity: 0;
}
.splash-skip.is-visible {
  animation: textFadeUp 0.4s ease-out forwards;
}
.splash-skip:hover {
  color: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   prefers-reduced-motion
   跳过所有动画，2 秒后跳转
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .splash::before,
  .splash::after,
  .splash-aurora {
    animation: none;
    opacity: 0.6;
  }
  .splash-logo,
  .splash-text,
  .splash-skip {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .splash-logo path,
  .splash-logo circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
  .splash-logo.is-breathing,
  .splash-company.is-breathing {
    animation: none;
    opacity: 1;
  }
  .splash.is-leaving {
    animation-duration: 0.2s;
  }
}

/* ========================================
   移动端适配（< 768px）
   ======================================== */
@media (max-width: 768px) {
  .splash-logo {
    height: 20vh;
    max-height: 140px;
    margin-bottom: 28px;
  }
  .splash-company {
    margin-bottom: 24px;
  }
  .splash-skip {
    font-size: 12px;
    padding: 8px 22px;
  }
}