@property --ds-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---------------------------------------------------------------------
   主体：深空玻璃卡片
   9 层背景 = 扫描线 / 三层漂浮星尘 / 三团流动极光 / 深空底色 / 旋转霓虹边框
   --------------------------------------------------------------------- */
#serverMovedModal .domain-sale {
  --ds-cyan: #00f0ff;
  --ds-violet: #7b5cff;
  --ds-pink: #ff2bd6;
  --ds-gold: #ffe66d;
  --ds-text: #e8ecff;

  position: relative;
  margin: 22px 0 0;
  padding: 22px 18px 28px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  border: 2px solid transparent;

  color: var(--ds-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .04em;
  text-align: center;
  text-shadow:
    0 0 6px rgba(0, 240, 255, .55),
    0 0 14px rgba(123, 92, 255, .45);

  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px) padding-box,
    radial-gradient(1px 1px at 20% 30%, #fff, transparent 60%) padding-box,
    radial-gradient(1.6px 1.6px at 70% 80%, rgba(0,240,255,.95), transparent 60%) padding-box,
    radial-gradient(1.3px 1.3px at 40% 60%, rgba(255,43,214,.95), transparent 60%) padding-box,
    radial-gradient(60% 130% at 0% 50%, rgba(123,92,255,.55), transparent 62%) padding-box,
    radial-gradient(60% 130% at 100% 50%, rgba(255,43,214,.45), transparent 62%) padding-box,
    radial-gradient(90% 90% at 50% 130%, rgba(0,240,255,.38), transparent 62%) padding-box,
    linear-gradient(135deg, #06061a, #0d0b2e 50%, #1b0727) padding-box,
    conic-gradient(from var(--ds-a), var(--ds-cyan), var(--ds-violet), var(--ds-pink), var(--ds-gold), var(--ds-cyan)) border-box;
  background-size:
    100% 100%, 90px 70px, 120px 90px, 70px 110px,
    200% 100%, 200% 100%, 100% 200%, 100% 100%, 100% 100%;

  outline: 1.5px solid rgba(0, 240, 255, .8);
  outline-offset: 0;

  transform-style: preserve-3d;
  will-change: transform, box-shadow;

  animation:
    dsIntro   1.3s cubic-bezier(.2, .9, .2, 1) backwards,
    dsSpin    3s   linear infinite,
    dsField   12s  linear infinite,
    dsHalo    2.4s ease-in-out infinite,
    dsTilt    6s   ease-in-out infinite,
    dsFlicker 5s   linear infinite,
    dsRipple  2.4s ease-out infinite;

  transition: scale .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

/* ---------------------------------------------------------------------
   ::before —— 旋转的彩色光柱，同时整体色相循环
   --------------------------------------------------------------------- */
#serverMovedModal .domain-sale::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: auto; left: auto; width: auto; height: auto;
  inset: -110%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg 20deg,
      rgba(0,240,255,.55) 26deg,
      transparent 34deg 80deg,
      rgba(255,43,214,.50) 88deg,
      transparent 98deg 150deg,
      rgba(255,255,255,.60) 155deg,
      transparent 162deg 215deg,
      rgba(123,92,255,.55) 224deg,
      transparent 236deg 290deg,
      rgba(255,230,109,.45) 297deg,
      transparent 306deg 360deg);
  mix-blend-mode: screen;
  opacity: .55;
  filter: blur(10px) hue-rotate(0deg);
  animation: dsBeams 7s linear infinite;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   ::after —— 底部透视网格地面（合成波风格），向前无限滚动
   --------------------------------------------------------------------- */
#serverMovedModal .domain-sale::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: auto; width: auto;
  left: -60%;
  right: -60%;
  bottom: -14px;
  height: 70%;
  background:
    linear-gradient(90deg, rgba(0,240,255,.55) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,43,214,.55) 1px, transparent 1px);
  background-size: 22px 22px;
  transform: perspective(110px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  filter: drop-shadow(0 0 3px rgba(0,240,255,.8));
  opacity: .7;
  animation: dsGrid 1.1s linear infinite;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   域名主体：全息渐变 + 白色流光 + 霓虹辉光 + 偶发抖动
   --------------------------------------------------------------------- */
#serverMovedModal .domain-sale span {
  position: relative;
  display: inline-block;
  margin: 0 6px;
  padding: 0;
  font-size: 1.45em;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: none;
  background:
    linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%),
    linear-gradient(90deg, var(--ds-cyan), var(--ds-violet), var(--ds-pink), var(--ds-gold), var(--ds-cyan));
  background-size: 250% 100%, 300% 100%;
  background-repeat: no-repeat, repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    dsHolo   3s   linear infinite,
    dsGlow   1.6s ease-in-out infinite,
    dsJitter 4s   linear infinite;
}

/* 故障分层：青色 / 品红两层错位切片 */
#serverMovedModal .domain-sale span::before,
#serverMovedModal .domain-sale span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: none;
  text-shadow: none;
  mix-blend-mode: screen;
  clip-path: inset(50% 0 50% 0);
  pointer-events: none;
}

#serverMovedModal .domain-sale span::before {
  -webkit-text-fill-color: var(--ds-cyan);
  color: var(--ds-cyan);
  animation: dsGlitchA 2.8s steps(1, end) infinite;
}

#serverMovedModal .domain-sale span::after {
  -webkit-text-fill-color: var(--ds-pink);
  color: var(--ds-pink);
  animation: dsGlitchB 2.8s steps(1, end) infinite .15s;
}

/* ---------------------------------------------------------------------
   悬停：放大、增亮、故障频率加速
   --------------------------------------------------------------------- */
#serverMovedModal .domain-sale:hover {
  scale: 1.04;
  filter: saturate(1.35) brightness(1.12);
}

#serverMovedModal .domain-sale:hover span::before,
#serverMovedModal .domain-sale:hover span::after {
  animation-duration: .9s;
}

#serverMovedModal .domain-sale:hover::before {
  opacity: .8;
}

/* ===================================================================== 
   关键帧
   ===================================================================== */

/* 入场：从虚化、缩小中弹出 */
@keyframes dsIntro {
  0%   { opacity: 0; scale: .6; }
  60%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

/* 霓虹边框旋转 */
@keyframes dsSpin {
  to { --ds-a: 360deg; }
}

/* 扫描线下移、星尘上浮、极光左右流动（9 层背景逐层对应） */
@keyframes dsField {
  0% {
    background-position:
      0 0, 0 0, 0 0, 0 0,
      0% 0, 100% 0, 0 0%, 0 0, 0 0;
  }
  50% {
    background-position:
      0 15px, 0 -70px, 0 -90px, 0 -110px,
      100% 0, 0% 0, 0 100%, 0 0, 0 0;
  }
  100% {
    background-position:
      0 30px, 0 -140px, 0 -180px, 0 -220px,
      0% 0, 100% 0, 0 0%, 0 0, 0 0;
  }
}

/* 外发光：青 / 紫 / 品红交替脉冲 */
@keyframes dsHalo {
  0%, 100% {
    box-shadow:
      inset 0 0 18px rgba(0,240,255,.35),
      inset 0 0 2px rgba(255,255,255,.6),
      0 0 14px rgba(0,240,255,.45),
      0 0 34px rgba(123,92,255,.30),
      0 10px 40px rgba(0,0,0,.35);
  }
  50% {
    box-shadow:
      inset 0 0 26px rgba(255,43,214,.40),
      inset 0 0 2px rgba(255,255,255,.9),
      0 0 22px rgba(255,43,214,.60),
      0 0 60px rgba(123,92,255,.45),
      0 0 90px rgba(0,240,255,.25),
      0 14px 50px rgba(0,0,0,.40);
  }
}

/* 3D 悬浮倾斜 */
@keyframes dsTilt {
  0%, 100% { transform: perspective(800px) rotateX(0deg)  rotateY(0deg)  translateY(0); }
  25%      { transform: perspective(800px) rotateX(5deg)  rotateY(-6deg) translateY(-2px); }
  50%      { transform: perspective(800px) rotateX(-2deg) rotateY(0deg)  translateY(-3px); }
  75%      { transform: perspective(800px) rotateX(4deg)  rotateY(6deg)  translateY(-1px); }
}

/* 霓虹灯管式闪烁 */
@keyframes dsFlicker {
  0%, 88%, 90%, 94%, 100% {
    color: var(--ds-text);
    text-shadow: 0 0 6px rgba(0,240,255,.55), 0 0 14px rgba(123,92,255,.45);
  }
  89%, 92% {
    color: rgba(232,236,255,.45);
    text-shadow: none;
  }
  96% {
    color: #fff;
    text-shadow: 0 0 8px #fff, 0 0 20px var(--ds-cyan), 0 0 34px var(--ds-pink);
  }
}

/* 能量波纹向外扩散 */
@keyframes dsRipple {
  0%   { outline-offset: 0;    outline-color: rgba(0, 240, 255, .85); }
  70%  { outline-color: rgba(255, 43, 214, .25); }
  100% { outline-offset: 12px; outline-color: rgba(255, 43, 214, 0); }
}

/* 光柱旋转 + 色相循环 */
@keyframes dsBeams {
  from { transform: rotate(0deg);   filter: blur(10px) hue-rotate(0deg); }
  to   { transform: rotate(360deg); filter: blur(10px) hue-rotate(360deg); }
}

/* 网格地面向前滚动 */
@keyframes dsGrid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 22px; }
}

/* 全息渐变流动 + 白色高光扫过 */
@keyframes dsHolo {
  0%   { background-position: 160% 0, 0 0; }
  100% { background-position: -60% 0, 300% 0; }
}

/* 域名呼吸辉光 */
@keyframes dsGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(0,240,255,.6))
      drop-shadow(0 0 8px rgba(123,92,255,.4));
  }
  50% {
    filter:
      drop-shadow(0 0 6px rgba(255,43,214,.8))
      drop-shadow(0 0 16px rgba(0,240,255,.6))
      drop-shadow(0 0 28px rgba(123,92,255,.5));
  }
}

/* 偶发位移抖动 */
@keyframes dsJitter {
  0%, 84%, 100% { translate: 0 0; }
  86%           { translate: -2px 1px; }
  88%           { translate: 2px -1px; }
  90%           { translate: -1px 0; }
  92%           { translate: 1px 1px; }
  94%           { translate: 0 -2px; }
}

/* 故障切片 A（青） */
@keyframes dsGlitchA {
  0%   { clip-path: inset(0 0 82% 0);   translate: -3px 0; }
  6%   { clip-path: inset(38% 0 42% 0); translate: 3px 0; }
  12%  { clip-path: inset(78% 0 4% 0);  translate: -2px 0; }
  18%  { clip-path: inset(12% 0 66% 0); translate: 2px 0; }
  24%  { clip-path: inset(55% 0 28% 0); translate: -4px 0; }
  30%, 100% { clip-path: inset(50% 0 50% 0); translate: 0 0; }
}

/* 故障切片 B（品红） */
@keyframes dsGlitchB {
  0%   { clip-path: inset(70% 0 10% 0); translate: 3px 0; }
  6%   { clip-path: inset(5% 0 75% 0);  translate: -3px 0; }
  12%  { clip-path: inset(45% 0 35% 0); translate: 4px 0; }
  18%  { clip-path: inset(85% 0 2% 0);  translate: -2px 0; }
  24%  { clip-path: inset(20% 0 60% 0); translate: 2px 0; }
  30%, 100% { clip-path: inset(50% 0 50% 0); translate: 0 0; }
}

/* ---------------------------------------------------------------------
   系统开启“减少动态效果”时全部静止
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #serverMovedModal .domain-sale,
  #serverMovedModal .domain-sale::before,
  #serverMovedModal .domain-sale::after,
  #serverMovedModal .domain-sale span,
  #serverMovedModal .domain-sale span::before,
  #serverMovedModal .domain-sale span::after {
    animation: none !important;
    transition: none !important;
  }
}


#serverMovedModal .domain-sale .ds-link {
  text-decoration: none;
  cursor: pointer;
}

#serverMovedModal .domain-sale .ds-link:hover,
#serverMovedModal .domain-sale .ds-link:focus {
  text-decoration: none;
}

#serverMovedModal .domain-sale .ds-link:focus-visible {
  outline: 2px solid #00f0ff;
  outline-offset: 4px;
  border-radius: 4px;
}