/* 页面加载时的LOGO入场动画 */
.site-logo {
  display: inline-block;
  opacity: 0; /* 初始状态：透明 */
  transform: translateY(-10px); /* 初始位置：向上偏移10px */
  /* 动画：0.6秒后开始，1秒完成，缓入缓出 */
  animation: logoFadeIn 1s ease forwards 0.6s;
}

.site-logo img {
  height: 50px;
  width: auto;
}

/* 定义入场动画关键帧 */
@keyframes logoFadeIn {
  to {
    opacity: 1; /* 结束状态：完全显示 */
    transform: translateY(0); /* 结束位置：回到正常位置 */
  }
}

/* 可选：hover时再叠加轻微缩放 */
.site-logo:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
/* 1. LOGO基础样式 + 页面加载入场动画 */
.site-logo {
  display: inline-block;
  position: relative; /* 关键：为伪元素光效定位 */
  overflow: hidden; /* 关键：隐藏光效超出LOGO的部分 */
  /* 入场动画：透明→显示 + 向上偏移→复位（保留原效果） */
  opacity: 0;
  transform: translateY(-10px);
  animation: logoFadeIn 1s ease forwards 0.6s;
}

.site-logo img {
  height: 50px; /* 按你的LOGO实际高度调整 */
  width: auto; /* 保持宽高比，防止变形 */
  vertical-align: middle;
}

/* 2. 定义“光效”伪元素（左上到右下的光带） */
.site-logo::before {
  content: "";
  position: absolute;
  top: -50%; /* 光效初始位置：LOGO上方 */
  left: -50%; /* 光效初始位置：LOGO左侧 */
  /* 光效样式：斜向长条 + 半透明渐变（模拟光束） */
  width: 20%;
  height: 200%;
  background: linear-gradient(
    to bottom right, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.8) 50%, 
    rgba(255,255,255,0) 100%
  );
  /* 光效旋转：让光带倾斜，匹配“左上→右下”方向 */
  transform: rotate(30deg);
  /* 光效动画：延迟入场动画后，快速从左滑到右 */
  animation: logoLight 0.8s ease-out 1.4s; /* 1.4s延迟：等LOGO入场后再闪 */
}

/* 3. 原有入场动画关键帧（LOGO显示+复位） */
@keyframes logoFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. 新增光效滑动动画关键帧（左上→右下闪过） */
@keyframes logoLight {
  0% {
    /* 光效初始位置：左侧完全隐藏 */
    transform: rotate(30deg) translateX(-100%);
  }
  100% {
    /* 光效结束位置：右侧完全隐藏（闪过LOGO） */
    transform: rotate(30deg) translateX(600%);
  }
}

/* 可选：鼠标hover时再轻微放大（增强互动） */
.site-logo:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}