/* CloudArc — Arc Halo 品牌光环系统 */

.arc-halo {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.arc-halo::before,
.arc-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* 双层柔光弧 */
.arc-halo--lg {
  width: 520px;
  height: 520px;
}

.arc-halo--lg::before {
  background: radial-gradient(
    circle at 50% 50%,
    transparent 42%,
    rgba(0, 113, 227, 0.06) 48%,
    rgba(0, 113, 227, 0.12) 52%,
    transparent 58%
  );
  animation: arc-halo-spin 28s linear infinite;
}

.arc-halo--lg::after {
  inset: 12%;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 55%,
    rgba(90, 200, 250, 0.08) 62%,
    transparent 70%
  );
  animation: arc-halo-spin 20s linear infinite reverse;
}

.arc-halo--md {
  width: 120px;
  height: 120px;
}

.arc-halo--md::before {
  background: conic-gradient(
    from 200deg,
    transparent 0deg,
    rgba(0, 113, 227, 0.15) 60deg,
    rgba(90, 200, 250, 0.2) 120deg,
    transparent 180deg,
    transparent 360deg
  );
  animation: arc-halo-spin 12s linear infinite;
  mask: radial-gradient(circle, transparent 55%, black 56%, black 68%, transparent 69%);
  -webkit-mask: radial-gradient(circle, transparent 55%, black 56%, black 68%, transparent 69%);
}

.arc-halo--sm {
  width: 48px;
  height: 48px;
}

.arc-halo--sm::before {
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(0, 113, 227, 0.25),
    rgba(90, 200, 250, 0.3),
    transparent
  );
  animation: arc-halo-spin 8s linear infinite;
  mask: radial-gradient(circle, transparent 60%, black 61%, black 75%, transparent 76%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 61%, black 75%, transparent 76%);
}

/* Logo 环绕光环 */
.arc-halo--logo {
  position: absolute;
  inset: -6px;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity var(--transition);
}

.nav-brand:hover .arc-halo--logo,
.nav-brand:focus-visible .arc-halo--logo {
  opacity: 1;
}

/* Loading 脉冲 */
.arc-halo--loading {
  width: 32px;
  height: 32px;
}

.arc-halo--loading::before {
  background: conic-gradient(from 0deg, var(--color-accent), rgba(90, 200, 250, 0.5), transparent);
  animation: arc-halo-spin 1.2s linear infinite;
  mask: radial-gradient(circle, transparent 62%, black 63%);
  -webkit-mask: radial-gradient(circle, transparent 62%, black 63%);
}

@keyframes arc-halo-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes arc-halo-breathe {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.03);
  }
}

.arc-halo--breathe {
  animation: arc-halo-breathe 6s var(--ease-out) infinite;
}