/* Name effects, shared by the site and the dashboard previews.
   Add data-effect to any element with the .name-fx class; --fx-a and --fx-b
   are the effect's own two colours (see applyNameEffect). */
.name-fx { position: relative; }

.name-fx[data-effect='glow'] { animation: name-glow 3s ease-in-out infinite; }

@keyframes name-glow {
  0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--fx-a, var(--accent)) 55%, transparent); }
  50% { text-shadow: 0 0 34px var(--fx-a, var(--accent)), 0 0 4px color-mix(in srgb, var(--fx-a, var(--accent)) 80%, transparent); }
}

.name-fx[data-effect='gradient'],
.name-fx[data-effect='rainbow'] {
  background: linear-gradient(90deg, var(--fx-a, var(--accent)), var(--fx-b, var(--accent-2)), var(--fx-a, var(--accent)));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: name-shift 5s linear infinite;
}

.name-fx[data-effect='rainbow'] {
  background-image: linear-gradient(90deg, #ff3b3b, #ff9f1c, #ffe14d, #3ddc84, #3ba7ff, #a66bff, #ff3b3b);
}

@keyframes name-shift { to { background-position: 200% 0; } }

.name-fx[data-effect='glitch']::before,
.name-fx[data-effect='glitch']::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.name-fx[data-effect='glitch']::before { color: var(--fx-a, var(--accent)); animation: glitch-a 2.8s steps(1) infinite; }
.name-fx[data-effect='glitch']::after { color: var(--fx-b, var(--accent-2)); animation: glitch-b 2.8s steps(1) infinite; }

@keyframes glitch-a {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  88% { clip-path: inset(18% 0 52% 0); transform: translate(-4px, -1px); }
  91% { clip-path: inset(62% 0 8% 0); transform: translate(3px, 1px); }
  94% { clip-path: inset(36% 0 40% 0); transform: translate(-2px, 0); }
}

@keyframes glitch-b {
  0%, 87%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  89% { clip-path: inset(48% 0 22% 0); transform: translate(4px, 1px); }
  92% { clip-path: inset(8% 0 70% 0); transform: translate(-3px, -1px); }
  95% { clip-path: inset(70% 0 4% 0); transform: translate(2px, 0); }
}

.name__sparkle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: var(--fx-b, var(--accent-2));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  animation: sparkle 1.2s var(--ease-out) forwards;
}

@keyframes sparkle {
  from { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; }
  60% { opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1) rotate(90deg); opacity: 0; }
}