/* Continuous RGB rotation with .4s fade-in and .6s LED afterglow. */
@property --ks-rgb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.atlas-touch-nav > a { position: relative; isolation: isolate; }
.atlas-touch-nav > a::before,
.atlas-touch-nav > a::after,
.atlas-touch-nav > a > .rgb-key-fill {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--ks-rgb-angle),
    #ff335f, #ffab32, #f6f54b, #51f47d, #28e6ed, #417aff, #bd52ff, #ff335f);
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1);
  /* Keep the color phase running while dark, including throughout a fade-out. */
  animation: ks-rgb-lap 2s linear infinite;
}
.atlas-touch-nav > a::before,
.atlas-touch-nav > a::after {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.atlas-touch-nav > a::before { z-index: 1; }
.atlas-touch-nav > a::after { z-index: -1; filter: blur(4px); }
.atlas-touch-nav > a > .rgb-key-fill {
  display: block;
  z-index: -1;
  inset: 0;
  padding: 0;
  filter: blur(2px);
}
.atlas-touch-nav > a.rgb-active::before,
.atlas-touch-nav > a.rgb-active::after,
.atlas-touch-nav > a:focus-visible::before {
  opacity: 1;
  transition-duration: .4s;
}
/* A separate fill layer fades smoothly without switching the border mask. */
@media (hover: hover) and (pointer: fine) {
  .atlas-touch-nav > a:hover::before,
  .atlas-touch-nav > a:hover::after {
    opacity: 1;
    transition-duration: .4s;
  }
  .atlas-touch-nav > a:hover > .rgb-key-fill {
    opacity: .64;
    transition-duration: .4s;
  }
}
@keyframes ks-rgb-lap {
  from { --ks-rgb-angle: 0deg; }
  to { --ks-rgb-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-touch-nav > a::before,
  .atlas-touch-nav > a::after,
  .atlas-touch-nav > a > .rgb-key-fill {
    animation: none !important;
    transition: none !important;
  }
}