/* =====================================================================
   VoiceCreate UI Effects: Intro Text, Metal Badges and Node Cubes
   ===================================================================== */

/* 1. Chromatic Heading & Typography */
/* Override existing .hero h1 span { color:var(--accent) } for intro wrappers */
.hero h1 span.vc-intro-word,
.hero h1 span.vc-intro-char,
.hero h1 span.vc-intro-space,
#hero-title span.vc-intro-word,
#hero-title span.vc-intro-char,
#hero-title span.vc-intro-space {
  color: inherit;
}

.hero h1 span.vc-intro-accent,
.hero h1 span.vc-intro-accent span.vc-intro-char,
#hero-title span.vc-intro-accent,
#hero-title span.vc-intro-accent span.vc-intro-char {
  color: var(--accent, #b48eff);
}

.vc-intro-word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}

.vc-intro-char {
  display: inline-block;
  vertical-align: baseline;
}

#hero-title.vc-intro-preparing .vc-intro-char { opacity: 0; }
.vc-intro-char { letter-spacing: 0; }

.vc-intro-space {
  display: inline;
  white-space: normal;
}

/* 2. Metal Badges: Polished Gold, Silver, Bronze */
:is(.leader-server, .leader-member)[data-rank="1"] {
  --vc-metal-primary: oklch(0.85 0.14 85);
  --vc-metal-light: oklch(0.96 0.08 92);
  --vc-metal-dark: oklch(0.62 0.16 68);
  --vc-metal-shadow: rgba(120, 75, 10, 0.45);
  --vc-metal-text: oklch(0.24 0.06 65);
  --vc-metal-text-emboss: rgba(255, 245, 190, 0.65);
}
:is(.leader-server, .leader-member)[data-rank="2"] {
  --vc-metal-primary: oklch(0.86 0.02 255);
  --vc-metal-light: oklch(0.97 0.01 260);
  --vc-metal-dark: oklch(0.64 0.03 250);
  --vc-metal-shadow: rgba(70, 80, 95, 0.45);
  --vc-metal-text: oklch(0.22 0.02 260);
  --vc-metal-text-emboss: rgba(255, 255, 255, 0.75);
}
:is(.leader-server, .leader-member)[data-rank="3"] {
  --vc-metal-primary: oklch(0.76 0.11 52);
  --vc-metal-light: oklch(0.92 0.07 60);
  --vc-metal-dark: oklch(0.52 0.13 42);
  --vc-metal-shadow: rgba(100, 45, 15, 0.45);
  --vc-metal-text: oklch(0.23 0.05 45);
  --vc-metal-text-emboss: rgba(255, 225, 200, 0.6);
}

:is(.leader-member, .leader-server):is([data-rank="1"],[data-rank="2"],[data-rank="3"]) :is(.leader-rank, .leader-server-rank) {
  position: relative;
  overflow: hidden;
  color: var(--vc-metal-text);
  font-weight: 700;
  text-shadow: 0 1px 0 var(--vc-metal-text-emboss), 0 -1px 0 rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.28) 72%, rgba(255, 255, 255, 0.3) 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 1px, rgba(0, 0, 0, 0.14) 1.5px, transparent 2px, transparent 3.5px),
    radial-gradient(circle at 40% 35%, var(--vc-metal-light) 0%, var(--vc-metal-primary) 50%, var(--vc-metal-dark) 100%);
  box-shadow:
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 2px 4px -1px var(--vc-metal-shadow),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  isolation: isolate;
}

:is(.leader-member, .leader-server):is([data-rank="1"],[data-rank="2"],[data-rank="3"]) :is(.leader-rank, .leader-server-rank)::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -140%;
  width: 50%;
  height: 220%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 75%,
    transparent 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  opacity: 0;
  transition: transform 0s, opacity 0s;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  :is(.leader-server:hover, .leader-server:focus-within) .leader-server-rank::before,
  :is(.leader-member:hover, .leader-member:focus-within) .leader-rank::before {
    opacity: 1;
    transform: translateX(420%) rotate(25deg);
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.leader-member, .leader-server):is([data-rank="1"],[data-rank="2"],[data-rank="3"]) :is(.leader-rank, .leader-server-rank)::before {
    display: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* 3. Node Diagnostic: Wireframe Canvas */
.vc-node-cube {
  display: block;
  width: 64px;
  height: 48px;
  flex: 0 0 64px;
  pointer-events: none;
  background: transparent;
}

.lavalink-node-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.lavalink-node-heading h4 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.lavalink-node-heading .lavalink-state {
  margin-left: auto;
}

@media (max-width: 480px) {
  .vc-node-cube {
    width: 52px;
    height: 40px;
    flex: 0 0 52px;
  }
}
.leader-server:focus-visible:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) .leader-server-rank::before {
  opacity: 1; transform: translateX(420%) rotate(25deg);
  transition: transform 620ms cubic-bezier(.16,1,.3,1), opacity 250ms ease;
}
@media (prefers-reduced-motion: reduce) {
  #hero-title.vc-intro-preparing .vc-intro-char { opacity: 1; }
}