@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@900&display=swap');

@font-face {
    font-family: 'font-logo';
    src: url('../images/font-logo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@keyframes float {
  0%,100% { transform: translateY(0); filter: drop-shadow(0 0 16px rgba(160,0,255,0.4)); }
  50%      { transform: translateY(-14px); filter: drop-shadow(0 0 44px rgba(200,0,255,0.85)); }
}

.logo-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  animation: float 4s ease-in-out infinite;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-line {
  display: block;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #B8860B);
}

.bar-line:last-child {
  background: linear-gradient(90deg, #B8860B, transparent);
}

.bar-text {
  font-family: Georgia, serif;
  letter-spacing: 3px;
  color: #fff;
  opacity: .82;
  white-space: nowrap;
}

.main-title {
  display: flex;
  align-items: center;
  line-height: 1;
}

.char {
  font-family: 'font-logo', 'STKaiti', 'KaiTi', serif;
  font-weight: 100;
  line-height: 1;
  display: inline-block;

  /* ── 纹理透明度控制变量，0~1，改这里即可 ── */
  --texture-opacity: 0.18;

  background-image:
    url('../images/your-texture.png'),   /* 👈 替换为你的纹理图路径 */
    linear-gradient(
      105deg,
      #e600ff 0%, #a967ff 20%, #f3b4ff 38%,
      #ffffff 48%, #ffffffcc 50%, #ffffff 52%,
      #f3b4ff 62%, #a967ff 80%, #e600ff 100%
    );

  background-size: 200px 200px, 300% 100%;
  background-position: 0 0, -100% 0;
  background-blend-mode: overlay;  /* 可选：soft-light / multiply / screen / luminosity */

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  animation:
    sweepTxt 3.5s ease-in-out infinite,
    charGlow 3s ease-in-out infinite,
    charPulse 4.5s ease-in-out infinite;
  animation-delay:
    calc(var(--i) * .18s),
    calc(var(--i) * .3s),
    calc(var(--i) * .55s);
}

/* ⚠️ sweepTxt 改为双层写法，纹理位置固定，只动渐变层 */
@keyframes sweepTxt {
  0%         { background-position: 0 0, -100% 0; }
  55%, 100%  { background-position: 0 0,  250% 0; }
}

@keyframes charGlow {
  0%,100% {
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,.9))
            drop-shadow(6px 6px 8px rgba(16,0,72,0.6));
  }
  50% {
    filter: drop-shadow(3px 3px 0 rgb(20,0,53))
            drop-shadow(0 0 22px rgba(28,0,113,0.6))
            drop-shadow(6px 6px 10px rgba(46,0,77,0.7));
  }
}

@keyframes charPulse {
  0%,100% { transform: scale(1) translateY(0); }
  25%     { transform: scale(1.07) translateY(-4px); }
  75%     { transform: scale(0.96) translateY(2px); }
}

.bottom-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gem {
  display: block;
  width: 14px;
  height: 14px;
  background: #c4abff;
  border: 1.5px solid #c1acff;
  transform: rotate(45deg);
  animation: gemGlow 2.5s ease-in-out infinite alternate;
}

@keyframes gemGlow {
  0%   { box-shadow: 0 0 4px #a67cff; background: #c4abff; }
  100% { box-shadow: 0 0 18px #4f005a, 0 0 34px #7b00ff; background: #e8d0ff; }
}

.btag {
  font-family: 'ZCOOL XiaoWei', serif;
  letter-spacing: 3px;
  color: #0f0082;
  animation: tagGlow 3s ease-in-out infinite alternate;
}

@keyframes tagGlow {
  0%   { color: #c2ccff; text-shadow: none; }
  100% { color: #e8ddff; text-shadow: 0 0 14px rgba(200,150,255,.9); }
}

.dot { color: #ffae00; }

.seal {
  width: 52px;
  height: 52px;
  background: rgba(180,30,30,0.55);
  border: 2.5px solid rgba(210,60,60,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  animation: sealGlow 3s ease-in-out infinite alternate;
}

.seal::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
}

@keyframes sealGlow {
  0%   { box-shadow: 0 0 4px rgba(116,0,146,0.3); }
  100% { box-shadow: 0 0 12px rgba(36,0,121,0.7), 0 0 24px rgba(180,0,0,.3); }
}

.seal-char {
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: 19px;
  line-height: 1.15;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  letter-spacing: 0;
}