.incantation {
  position: relative;
  display: inline-block;
  --glow-color: #a855f7;
  --shift-color: #fbbf24;
  --pulse-duration: 2s;
}

.incantation .text {
  position: relative;
  z-index: 2;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.incantation .glowLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  color: var(--glow-color);
  filter: blur(2px);
  opacity: 0.8;
  animation: glow-pulse var(--pulse-duration) ease-in-out infinite;
}

.incantation .shiftLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--shift-color);
  opacity: 0;
  animation: color-shift var(--pulse-duration) ease-in-out infinite;
}

.incantation .vibrationLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  color: transparent;
}

/* INTENSITY LEVELS */

.subtle .glowLayer {
  filter: blur(1px);
  animation: glow-pulse var(--pulse-duration) ease-in-out infinite;
}

.subtle .vibrationLayer {
  animation: vibrate-subtle 0.1s linear infinite;
}

.medium .glowLayer {
  filter: blur(3px);
  animation: glow-pulse calc(var(--pulse-duration) * 0.7) ease-in-out infinite;
}

.medium .vibrationLayer {
  animation: vibrate-medium 0.08s linear infinite;
}

.intense .glowLayer {
  filter: blur(4px);
  animation: glow-pulse calc(var(--pulse-duration) * 0.5) ease-in-out infinite;
}

.intense .vibrationLayer {
  animation: vibrate-intense 0.05s linear infinite;
}

/* LANGUAGE STYLES */

.arcane {
  font-family: 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase;
}

.arcane .glowLayer {
  text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);
}

.divine {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}

.divine .glowLayer {
  text-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color), 0 0 45px var(--glow-color);
}

.eldritch {
  font-family: 'UnifrakturMaguntia', 'Blackletter', serif;
  text-transform: uppercase;
}

.eldritch .glowLayer {
  text-shadow: 0 0 8px var(--glow-color), 0 0 16px var(--shift-color), 0 0 24px var(--glow-color);
}

/* ANIMATIONS */

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes color-shift {
  0%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  25% {
    opacity: 0.3;
    transform: translateX(-1px);
  }
  75% {
    opacity: 0.3;
    transform: translateX(1px);
  }
}

@keyframes vibrate-subtle {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.5px, 0.5px); }
  50% { transform: translate(-0.5px, 0); }
  75% { transform: translate(0, -0.5px); }
}

@keyframes vibrate-medium {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1px, 1px); }
  40% { transform: translate(-1px, 0); }
  60% { transform: translate(0, -1px); }
  80% { transform: translate(1px, -1px); }
}

@keyframes vibrate-intense {
  0% { transform: translate(0, 0); }
  10% { transform: translate(2px, 2px); }
  20% { transform: translate(-2px, 0); }
  30% { transform: translate(0, -2px); }
  40% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  60% { transform: translate(0, 0); }
  70% { transform: translate(2px, 0); }
  80% { transform: translate(-2px, -2px); }
  90% { transform: translate(0, 2px); }
  100% { transform: translate(0, 0); }
}
