.text-gradient {
  background: var(--hero-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-violet {
  box-shadow: 0 0 40px hsl(262 83% 58% / 0.4), 0 0 80px hsl(262 83% 58% / 0.2);
}

.glow-cyan {
  box-shadow: 0 0 40px hsl(188 94% 53% / 0.4), 0 0 80px hsl(188 94% 53% / 0.2);
}

.glow-magenta {
  box-shadow: 0 0 40px hsl(324 100% 59% / 0.4), 0 0 80px hsl(324 100% 59% / 0.2);
}

.border-glow {
  border: 1px solid hsl(0 0% 100% / 0.1);
  transition: border-color var(--t-med) var(--ease-smooth), box-shadow var(--t-med) var(--ease-smooth);
}

.border-glow:hover {
  border-color: hsl(188 94% 53% / 0.5);
  box-shadow: 0 0 30px hsl(188 94% 53% / 0.15);
}

.bg-fog-violet {
  background-image: var(--fog-violet);
}

.bg-fog-cyan {
  background-image: var(--fog-cyan);
}

.bg-panel {
  background-color: hsl(var(--panel));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-background {
  background-color: hsl(var(--background));
}