/* ══════════════════════════════════════════════════════
   关于我们模块  #about(不只是一款工具)
   子组件:__glow(背景白粉光晕:设计稿切图为静态位图,改为
                 手写渐变复刻 + 呼吸动画;色值取自原图采样——
                 色相沿水平走、透明度沿垂直羽化、左下粉白热点)
          __head(标签/渐变标题,无副标题)
          __body(两段 35px 渐变宣言)
   设计稿 1920×1080:光晕带 1920×886,宣言区宽 972
   ══════════════════════════════════════════════════════ */

.about {
  position: relative;
  overflow: hidden; /* 光晕呼吸放大时不外溢 */
  padding: 104px 0 191px;
}

/* ── 背景光晕(呼吸:整体亮度起伏 + 左下粉白热点更强脉动,同相位) ── */
.about__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    #D173D7 0%, #D58BDF 8%, #C86BD5 20%, #A533B3 35%,
    #78088C 50%, #570072 65%, #5A0077 80%, #7C0198 92%, #741EBF 100%);
  /* 只以"加光"方式与背景星空混合:边缘过渡自然消融,星点可透出 */
  mix-blend-mode: screen;
  /* mask 同时裁切 ::before 热点,上下羽化整体生效;S 曲线长羽化避免出现起始线 */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0, 0, 0, 0.03) 6%, rgba(0, 0, 0, 0.1) 12%,
    rgba(0, 0, 0, 0.24) 20%, rgba(0, 0, 0, 0.46) 29%, rgba(0, 0, 0, 0.72) 38%,
    rgba(0, 0, 0, 0.92) 45%, #000 51%, rgba(0, 0, 0, 0.9) 59%,
    rgba(0, 0, 0, 0.7) 68%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0.25) 84%,
    rgba(0, 0, 0, 0.09) 91%, transparent 97%);
  mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0, 0, 0, 0.03) 6%, rgba(0, 0, 0, 0.1) 12%,
    rgba(0, 0, 0, 0.24) 20%, rgba(0, 0, 0, 0.46) 29%, rgba(0, 0, 0, 0.72) 38%,
    rgba(0, 0, 0, 0.92) 45%, #000 51%, rgba(0, 0, 0, 0.9) 59%,
    rgba(0, 0, 0, 0.7) 68%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0.25) 84%,
    rgba(0, 0, 0, 0.09) 91%, transparent 97%);
  transform-origin: 50% 55%;
  animation: about-breathe 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.about__glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(1000px 520px at 4% 62%, rgba(238, 178, 244, 0.85), transparent 70%);
  transform-origin: 4% 62%;
  animation: about-breathe-spot 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes about-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
@keyframes about-breathe-spot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .about__glow,
  .about__glow::before { animation: none; }
}

/* ── 头部文案 ── */
.about__head {
  position: relative;
  text-align: center;
}
.about__heading {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.about__slogan {
  margin: 32px auto 0;
  width: fit-content;
  font-weight: 400;
  font-size: 78px;
  line-height: 120px;
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 宣言正文 ── */
.about__body {
  position: relative;
  max-width: 972px;
  margin: 80px auto 0;
}
.about__creed {
  font-size: 35px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about__creed + .about__creed { margin-top: 22px; }

/* ── 响应式 ── */
@media (max-width: 1100px) {
  .about__body { padding: 0 24px; }
}
@media (max-width: 960px) {
  .about { padding: 100px 24px 120px; }
  .about__slogan { font-size: clamp(2rem, 8vw, 78px); line-height: 1.5; }
  .about__body { margin-top: 48px; padding: 0; }
  .about__creed { font-size: 22px; line-height: 40px; }
}