/**
 * Loader Page Styles
 * 加载动画页面样式
 *
 * @description 沉浸式加载动画，平滑过渡到落地页
 */

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

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* =====================
   背景层 - 深邃空间感
   ===================== */
.bg-layer {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0f 70%);
  z-index: 0;
}

/* 光线扫描效果 */
.light-sweep {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  animation: lightSweepIn 0.8s ease-out 0.3s forwards;
}

.light-sweep::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 107, 0, 0.03) 60deg,
    transparent 120deg,
    rgba(255, 107, 0, 0.02) 180deg,
    transparent 240deg,
    rgba(255, 107, 0, 0.03) 300deg,
    transparent 360deg
  );
  animation: lightRotate 8s linear infinite;
}

/* 网格背景 */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  animation: gridFadeIn 1.2s ease-out 0.5s forwards;
  background-image: 
    linear-gradient(rgba(255, 107, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 0, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* =====================
   波纹扩散效果
   ===================== */
.ripple-container {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 107, 0, 0.4);
  border-radius: 50%;
  opacity: 0;
}

.ripple:nth-child(1) {
  animation: rippleExpand 2s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards;
}

.ripple:nth-child(2) {
  animation: rippleExpand 2s cubic-bezier(0.25, 1, 0.5, 1) 1.1s forwards;
}

.ripple:nth-child(3) {
  animation: rippleExpand 2s cubic-bezier(0.25, 1, 0.5, 1) 1.4s forwards;
}

/* =====================
   中心光球
   ===================== */
.center-orb {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  z-index: 3;
  opacity: 0;
  animation: orbAppear 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

.center-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.6) 0%, rgba(255, 107, 0, 0.1) 50%, transparent 70%);
  border-radius: 50%;
  animation: orbPulse 2s ease-in-out infinite;
}

.center-orb::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 60%);
  border-radius: 50%;
  animation: orbGlow 3s ease-in-out infinite;
}

/* =====================
   粒子系统
   ===================== */
.particles {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #FF6B00;
  border-radius: 50%;
  opacity: 0;
}

/* 从中心向外发散的粒子 */
.particle:nth-child(1)  { top: 50%; left: 50%; animation: particleFly1 2.5s ease-out 0.6s forwards; }
.particle:nth-child(2)  { top: 50%; left: 50%; animation: particleFly2 2.5s ease-out 0.6s forwards; }
.particle:nth-child(3)  { top: 50%; left: 50%; animation: particleFly3 2.5s ease-out 0.6s forwards; }
.particle:nth-child(4)  { top: 50%; left: 50%; animation: particleFly4 2.5s ease-out 0.6s forwards; }
.particle:nth-child(5)  { top: 50%; left: 50%; animation: particleFly5 2.5s ease-out 0.6s forwards; }
.particle:nth-child(6)  { top: 50%; left: 50%; animation: particleFly6 2.5s ease-out 0.6s forwards; }
.particle:nth-child(7)  { top: 50%; left: 50%; animation: particleFly7 2.5s ease-out 0.6s forwards; }
.particle:nth-child(8)  { top: 50%; left: 50%; animation: particleFly8 2.5s ease-out 0.6s forwards; }
.particle:nth-child(9)  { top: 50%; left: 50%; animation: particleFly9 2.5s ease-out 0.6s forwards; }
.particle:nth-child(10) { top: 50%; left: 50%; animation: particleFly10 2.5s ease-out 0.6s forwards; }
.particle:nth-child(11) { top: 50%; left: 50%; animation: particleFly11 2.5s ease-out 0.6s forwards; }
.particle:nth-child(12) { top: 50%; left: 50%; animation: particleFly12 2.5s ease-out 0.6s forwards; }
.particle:nth-child(13) { top: 50%; left: 50%; animation: particleFly13 2.5s ease-out 0.6s forwards; }
.particle:nth-child(14) { top: 50%; left: 50%; animation: particleFly14 2.5s ease-out 0.6s forwards; }
.particle:nth-child(15) { top: 50%; left: 50%; animation: particleFly15 2.5s ease-out 0.6s forwards; }
.particle:nth-child(16) { top: 50%; left: 50%; animation: particleFly16 2.5s ease-out 0.6s forwards; }
.particle:nth-child(17) { top: 50%; left: 50%; animation: particleFly17 2.5s ease-out 0.6s forwards; }
.particle:nth-child(18) { top: 50%; left: 50%; animation: particleFly18 2.5s ease-out 0.6s forwards; }
.particle:nth-child(19) { top: 50%; left: 50%; animation: particleFly19 2.5s ease-out 0.6s forwards; }
.particle:nth-child(20) { top: 50%; left: 50%; animation: particleFly20 2.5s ease-out 0.6s forwards; }

/* 悬浮粒子（持续漂浮） */
.float-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 107, 0, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 107, 0, 0.3);
}

.float-particle:nth-child(21) { top: 20%; left: 15%; animation: float1 4s ease-in-out 1s infinite; }
.float-particle:nth-child(22) { top: 30%; left: 80%; animation: float2 5s ease-in-out 1.2s infinite; }
.float-particle:nth-child(23) { top: 70%; left: 25%; animation: float3 4.5s ease-in-out 0.8s infinite; }
.float-particle:nth-child(24) { top: 60%; left: 75%; animation: float4 3.5s ease-in-out 1.5s infinite; }
.float-particle:nth-child(25) { top: 15%; left: 50%; animation: float5 5s ease-in-out 1.8s infinite; }
.float-particle:nth-child(26) { top: 80%; left: 60%; animation: float6 4s ease-in-out 0.5s infinite; }
.float-particle:nth-child(27) { top: 45%; left: 10%; animation: float7 4.8s ease-in-out 2s infinite; }
.float-particle:nth-child(28) { top: 55%; left: 90%; animation: float8 3.8s ease-in-out 1.3s infinite; }
.float-particle:nth-child(29) { top: 10%; left: 35%; animation: float9 4.2s ease-in-out 0.7s infinite; }
.float-particle:nth-child(30) { top: 85%; left: 40%; animation: float10 5.2s ease-in-out 1.6s infinite; }

/* =====================
   主内容区
   ===================== */
.loader-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* 品牌文字 - 超大字号 */
.loader-brand {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 800;
  color: transparent;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8C33 30%, #FFB366 60%, #FF6B00 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  filter: blur(10px);
  animation: brandReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards,
             gradientShift 3s ease-in-out 2s infinite;
  text-shadow: none;
  position: relative;
}

/* 文字光扫效果 */
.loader-brand::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: textSweep 2s ease-in-out 1.5s forwards;
}

/* 副标题 */
.loader-tagline {
  font-size: clamp(14px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(20px);
  animation: taglineReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.2s forwards;
}

/* 分隔线 */
.loader-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.6), transparent);
  animation: dividerExpand 1s cubic-bezier(0.25, 1, 0.5, 1) 1.5s forwards;
}

/* 底部标语 */
.loader-motto {
  font-size: clamp(12px, 1.5vw, 16px);
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3em;
  opacity: 0;
  animation: mottoFadeIn 0.6s ease 1.8s forwards;
}

/* =====================
   底部进度指示
   ===================== */
.progress-container {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: progressContainerIn 0.5s ease 1s forwards;
}

.progress-track {
  width: clamp(120px, 20vw, 200px);
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF6B00, #FF8C33, #FFB366);
  border-radius: 1px;
  position: relative;
  animation: progressFill 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  background: #FF6B00;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
}

.progress-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

/* =====================
   退出动画
   ===================== */
.loader-wrapper.exit .bg-layer {
  animation: bgExit 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.loader-wrapper.exit .loader-content {
  animation: contentExit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.loader-wrapper.exit .center-orb {
  animation: orbExit 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.loader-wrapper.exit .particles {
  animation: particlesExit 0.6s ease forwards;
}

.loader-wrapper.exit .progress-container {
  animation: progressExit 0.4s ease forwards;
}

/* =====================
   动画关键帧
   ===================== */
@keyframes lightSweepIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lightRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gridFadeIn {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

@keyframes rippleExpand {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.8;
    border-width: 2px;
  }
  100% {
    width: 800px;
    height: 800px;
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes orbAppear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes orbGlow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 0.5; }
}

/* 粒子飞散动画 */
@keyframes particleFly1  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-120px, -180px); } }
@keyframes particleFly2  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(150px, -160px); } }
@keyframes particleFly3  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-180px, 100px); } }
@keyframes particleFly4  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(160px, 140px); } }
@keyframes particleFly5  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-60px, -220px); } }
@keyframes particleFly6  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(200px, -80px); } }
@keyframes particleFly7  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-220px, 40px); } }
@keyframes particleFly8  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(100px, 200px); } }
@keyframes particleFly9  { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-160px, -120px); } }
@keyframes particleFly10 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(180px, 60px); } }
@keyframes particleFly11 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-80px, 180px); } }
@keyframes particleFly12 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(120px, -200px); } }
@keyframes particleFly13 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-200px, -60px); } }
@keyframes particleFly14 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(60px, 160px); } }
@keyframes particleFly15 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-140px, 160px); } }
@keyframes particleFly16 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(140px, -140px); } }
@keyframes particleFly17 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-100px, -100px); } }
@keyframes particleFly18 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(100px, 100px); } }
@keyframes particleFly19 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-40px, 200px); } }
@keyframes particleFly20 { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(220px, -40px); } }

/* 悬浮粒子动画 */
@keyframes float1  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.8; transform: translate(20px, -30px); } }
@keyframes float2  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.6; transform: translate(-15px, 25px); } }
@keyframes float3  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.7; transform: translate(25px, 20px); } }
@keyframes float4  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.5; transform: translate(-20px, -15px); } }
@keyframes float5  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.8; transform: translate(15px, 30px); } }
@keyframes float6  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.6; transform: translate(-25px, -20px); } }
@keyframes float7  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.7; transform: translate(30px, 15px); } }
@keyframes float8  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.5; transform: translate(-15px, 25px); } }
@keyframes float9  { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.8; transform: translate(20px, -20px); } }
@keyframes float10 { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 0.6; transform: translate(-20px, 15px); } }

@keyframes brandReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes textSweep {
  from { left: -100%; }
  to { left: 200%; }
}

@keyframes taglineReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dividerExpand {
  from { width: 0; opacity: 0; }
  to { width: clamp(80px, 15vw, 160px); opacity: 1; }
}

@keyframes mottoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes progressContainerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* 退出动画 */
@keyframes bgExit {
  from { opacity: 1; }
  to { opacity: 0; filter: blur(20px); }
}

@keyframes contentExit {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: 0; transform: scale(1.1); filter: blur(8px); }
}

@keyframes orbExit {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes particlesExit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes progressExit {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ripple:nth-child(n) {
    animation-name: rippleExpandMobile;
  }
  
  @keyframes rippleExpandMobile {
    0% {
      width: 10px;
      height: 10px;
      opacity: 0.8;
    }
    100% {
      width: 400px;
      height: 400px;
      opacity: 0;
    }
  }
}