/* === rainbow.css (упрощённый) === */
:root{
  --rg-stops:
    #fff 0%,
    #fff 5%,
    hsl(180 100% 50%) 15%,
    hsl(240 100% 50%) 25%,
    hsl(270 100% 50%) 35%,
    hsl(330 40% 70%) 45%,
    hsl(0 100% 50%) 55%,
    hsl(60 100% 50%) 65%,
    hsl(90 100% 75%) 75%,
    #fff 95%,
    #fff 100%;
  --rg: linear-gradient(90deg, var(--rg-stops));
  --rg-size: 900% 100%;
}

/* одна анимация для всех случаев */
@keyframes rainbow-flow{
  from{ background-position: 100% 0 }
  to{   background-position:   0% 0 }
}

/* универсальные утилиты */
.rg{ background-image: var(--rg); background-size: var(--rg-size) }
.rg-animated{ animation: rainbow-flow 3s linear infinite }

/* текст с радугой (если нужно где-то ещё) */
.rg-text{
  background-image: var(--rg);
  background-size: var(--rg-size);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- ИКОНКА-МАСКА ----- */
.ico{
  /* укажи SVG-файл через style="--ico:url('/svg/EN.svg')" */
  --sz: 24px; /* базовый размер, можно переопределить */
  display:inline-block; inline-size:var(--sz); block-size:var(--sz);
  background: currentColor;               /* дефолтный однотонный цвет */
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
  vertical-align: middle;
}

/* радуга по ховеру (просто добавь класс rg-hover) */
.rg-hover{ transition: background-position .3s ease }
.rg-hover:hover{
  background-image: var(--rg);
  background-size: var(--rg-size);
  animation: rainbow-flow 3s linear infinite;
}