/* Slowly turning colour border for the site's key call-to-action buttons.
   Usage: add class "rn-rgb" to a .btn (filled buttons); add "rn-rgb rn-rgb--dark" for a dark button.
   The border is a conic gradient painted in the border box, so the button keeps its own fill and layout. */
@property --rn-rgb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rnRgbSpin{to{--rn-rgb-a:360deg}}
@keyframes rnRgbGlow{0%,100%{box-shadow:0 0 6px rgba(255,150,60,.2)}50%{box-shadow:0 0 16px rgba(255,150,60,.5)}}

:is(.btn,.gg-play).rn-rgb{
  --rn-rgb-fill:var(--legendary,#ff8000);
  --rn-rgb-fill-hover:var(--legendary-bright,#ffa23d);
  border:2px solid transparent;
  background:
    linear-gradient(var(--rn-rgb-fill),var(--rn-rgb-fill)) padding-box,
    conic-gradient(from var(--rn-rgb-a),#ff8000,#ffd27a,#ff3b6b,#8b5cff,#2ec9ff,#4dff88,#ffd27a,#ff8000) border-box;
  animation:rnRgbSpin 5s linear infinite,rnRgbGlow 2.8s ease-in-out infinite;
}
:is(.btn,.gg-play).rn-rgb:hover{
  background:
    linear-gradient(var(--rn-rgb-fill-hover),var(--rn-rgb-fill-hover)) padding-box,
    conic-gradient(from var(--rn-rgb-a),#ff8000,#ffd27a,#ff3b6b,#8b5cff,#2ec9ff,#4dff88,#ffd27a,#ff8000) border-box;
}
.btn.rn-rgb--dark{--rn-rgb-fill:#17120f;--rn-rgb-fill-hover:#241b15;color:var(--text,#f3ece3)}
:is(.btn,.gg-play).rn-rgb:disabled{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){:is(.btn,.gg-play).rn-rgb{animation:none}}