@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .aurora-text{
    --aurora-duration: 16.5s;  
    background-image: linear-gradient(135deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4), var(--aurora-5), var(--aurora-3), var(--aurora-1));
    background-size: 200% auto;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aurora-pan var(--aurora-duration) ease-in-out infinite;
  }
   
  .aurora-text .accent{-webkit-text-fill-color: currentColor}
  



  .bx-word.aurora-text.is-in{animation: aurora-pan var(--aurora-duration) ease-in-out infinite}
}
@keyframes aurora-pan{
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}
@media (prefers-reduced-motion: reduce){
  .aurora-text, .bx-word.aurora-text.is-in{animation: none}
}
 
:is(html.no-heavy-fx, html.is-lowperf) :is(.aurora-text, .bx-word.aurora-text.is-in){animation: none}