/* 高清晰度提示框样式 - 加深颜色+增强特效+清晰显示 */
.el-tooltip {
  /* 基础样式优化 - 优先保证清晰度 */
  font-weight: 700; /* 进一步加粗文字 */
  position: relative;
  z-index: 2; /* 提高层级避免被阴影覆盖 */
  letter-spacing: 0.6px; /* 增加字间距提升可读性 */
  text-stroke: 0.5px rgba(0, 0, 0, 0.15); /* 文字描边增强边缘 */
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.15);
  
  /* 加深的多色渐变文字（更浓郁的色调） */
  background: linear-gradient(
    90deg,
    #e50000,  /* 深赤红色 */
    #ffcc00,  /* 深黄色 */
    #22c55e,  /* 深绿色 */
    #0070f3,  /* 深蓝色 */
    #9333ea,  /* 深紫色 */
    #e50000   /* 回到深红色形成循环 */
  );
  background-size: 500% 100%; /* 更大背景尺寸让跑马灯更流畅 */
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  
  /* 分层发光阴影（避免覆盖文字主体） */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1), /* 最内层强白色边缘 */
    0 0 2px currentColor,           /* 随文字颜色变化的基础发光 */
    0 0 3px currentColor,           /* 增强颜色一致性 */
    0 0 6px rgba(147, 51, 234, 0.4);/* 外层紫色弱光 */
  
  /* 增强的组合动画效果 */
  animation:
    gradientScroll 8s linear infinite,   /* 跑马灯效果 */
    glowPulse 3s ease-in-out infinite alternate, /* 发光呼吸 */
    subtleFloat 6s ease-in-out infinite; /* 轻微浮动效果 */
}

/**
 * 更流畅的跑马灯动画
 */
@keyframes gradientScroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/**
 * 优化的发光呼吸动画（避免过度模糊）
 */
@keyframes glowPulse {
  from {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 1),
      0 0 2px currentColor,
      0 0 3px currentColor,
      0 0 4px rgba(147, 51, 234, 0.2);
  }
  to {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 1),
      0 0 2px currentColor,
      0 0 4px currentColor,
      0 0 7px rgba(147, 51, 234, 0.5),
      0 0 9px rgba(59, 130, 246, 0.3);
  }
}

/**
 * 新增轻微浮动特效
 */
@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}


/*渐变设置*/

.page-container  {
  /* 基础布局：铺满视口（可根据实际需求调整高度） */
  min-height: 100vh;
  width: 100%;
  /* 背景层：渐变 + 背景图 叠加融合 */
  background: 
    /* 清新线性渐变（浅青白 → 浅青绿，带透明度透出背景图） */
    linear-gradient(135deg, 
      rgba(240, 253, 250, 0.9) 0%, 
      rgba(219, 247, 240, 0.85) 50%, 
      rgba(199, 246, 238, 0.8) 100%
    ),
    /* 背景图（自适应+居中+固定，增强沉浸感） */
    url('https://ts1.tc.mm.bing.net/th/id/R-C.6fbaf38efbd985a4bee9fde5a62b3bb7?rik=4PrR1XcwEfsbNg&riu=http%3a%2f%2fimg.52desk.com%2ftp%2f010813rQ3kM.jpg&ehk=47IDwuP%2fGDO%2bd0RmbL3Abvdz4rS6eD%2f1NaZMck4qG5M%3d&risl=&pid=ImgRaw&r=0');
  /* 背景图配置：覆盖容器+居中+不重复+滚动时固定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 渐变与背景图柔和融合（关键！避免生硬叠加） */
  background-blend-mode: soft-light;
  /* 轻微内发光，增强清新通透感 */
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  /* 可选：若页面有内容，增加内边距避免贴边 */
  padding: 20px;
  box-sizing: border-box;
}













/*随笔样式*/
.jotting-li {
  /* 基础样式：确保容器有尺寸（根据实际布局调整，必设！） */
  display: block; /* 若为li标签可省略，确保能设置宽高 */
  width: 100%; /* 占满父容器宽度，可改为固定值（如 300px） */
  min-height: 120px; /* 最低高度，避免背景图“撑不开” */
  padding: 1.2rem;
  box-sizing: border-box;
  
  /* 核心：透明背景+指定背景图（柔和融合） */
  background: 
    /* 透明叠加层：让背景图不刺眼，增强文字可读性 */
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.6)),
    /* 指定背景图 */
    url('https://ts1.tc.mm.bing.net/th/id/R-C.82e749cb17737c9ae9d8d6f1481de587?rik=h%2fDYDQQqRampDA&riu=http%3a%2f%2fimg.52desk.com%2ftp%2f214758dVddM.jpg&ehk=3vA8Uj%2f6dvyTLLbtK8n399Y%2bok9rJkL9llUk7SiB0hU%3d&risl=&pid=ImgRaw&r=0');
  /* 背景图配置：覆盖容器+居中+不重复 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 透明效果增强：容器本身轻微透明（可选，根据需求调整） */
  opacity: 0.95;
  
  /* 动态效果：轻微缩放+背景缓慢位移（自然不夸张） */
  transition: all 0.3s ease; /* hover过渡更丝滑 */
  animation: jottingFloat 20s ease-in-out infinite;
  
  /* 内容保护：确保文字不被背景覆盖，增强可读性 */
  z-index: 1;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.05); /* 轻微文字阴影 */
}

/* 动态动画：缓慢缩放+背景位移，营造悬浮感 */
@keyframes jottingFloat {
  0% {
    transform: scale(1) translateY(0);
    background-position: center center;
  }
  50% {
    transform: scale(1.01) translateY(-3px); /* 轻微放大+上移 */
    background-position: 5% 5%; /* 背景轻微偏移 */
  }
  100% {
    transform: scale(1) translateY(0);
    background-position: center center;
  }
}

/* hover互动增强：动态效果轻微放大，提升体验 */
.jotting-li:hover {
  opacity: 1; /* hover时完全不透明 */
  transform: scale(1.02); /* 轻微放大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 新增柔和阴影 */
  animation-duration: 15s; /* 动画轻微加速 */
}

/* 兼容旧浏览器（可选，如需支持Chrome<43、Safari<9） */
@-webkit-keyframes jottingFloat {
  0% {
    -webkit-transform: scale(1) translateY(0);
    background-position: center center;
  }
  50% {
    -webkit-transform: scale(1.01) translateY(-3px);
    background-position: 5% 5%;
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
    background-position: center center;
  }
}
/*随笔样式*/