/* Живые логотипы: «Бірінші ағын» и QAZAQGAZ. По золоту проходит световой блик — строго по контуру
   букв (маска — сам логотип), в момент блика золото чуть разгорается, мягкая тень снизу даёт глубину.
   Блики двух логотипов разнесены во времени. Только CSS: без внешних ресурсов, совместимо с CSP.
   При «уменьшить движение» в системе — статичные логотипы. */

.shine { position: relative; display: inline-block; flex: none; width: max-content; line-height: 0;
  justify-self: start; align-self: start; isolation: isolate; }
.shine > img { position: relative; display: block; }
.shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  /* «экран» поверх золота: блик осветляет металл, а не красит его в белый — золото остаётся золотом */
  mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 0 39%, rgb(255 196 110 / 35%) 45%, rgb(255 236 190 / 80%) 50%,
    rgb(255 205 120 / 40%) 55%, transparent 61% 100%) 120% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--shine-mask) center / 100% 100% no-repeat;
  mask: var(--shine-mask) center / 100% 100% no-repeat;
}
/* маска — свой логотип у каждого вида; url() — здесь, а не в разметке */
.shine--agyn  { --shine-mask: url("../img/logo-agyn.png"); }
.shine--gold  { --shine-mask: url("../img/logo-gold.png"); }
.shine--white { --shine-mask: url("../img/logo-white.png"); }
/* на белом логотипе блик тёплый, золотистый — как у золотых */
.shine--white::after {
  background-image: linear-gradient(112deg, transparent 0 40%, rgb(240 200 140 / 45%) 46%, rgb(255 226 170 / 90%) 50%,
    rgb(224 184 136 / 50%) 54%, transparent 60% 100%);
}
/* глубина: тень под золотом постоянно, тёплое свечение — в момент блика */
.shine--agyn > img, .shine--gold > img {
  filter: drop-shadow(0 5px 10px rgb(0 8 24 / 45%)) drop-shadow(0 0 3px rgb(240 200 140 / 18%));
}

@media (prefers-reduced-motion: no-preference) {
  .shine::after { opacity: 1; animation: qg-shine 8s cubic-bezier(.45, .05, .25, 1) infinite; }
  .shine--agyn > img, .shine--gold > img { animation: qg-glow 8s ease-in-out infinite; }
  /* второй логотип вспыхивает позже первого — блики «перекликаются», а не мигают разом */
  .shine--late::after, .shine--late > img { animation-delay: -4.2s; }
  .shine--white::after { animation-duration: 11s; animation-delay: -2s; }

  @keyframes qg-shine {
    0%, 58% { background-position: 120% 0; }
    84%, 100% { background-position: -20% 0; }
  }
  @keyframes qg-glow {
    0%, 52%, 100% { filter: drop-shadow(0 5px 10px rgb(0 8 24 / 45%)) drop-shadow(0 0 3px rgb(240 200 140 / 18%)) brightness(1); }
    72% { filter: drop-shadow(0 5px 10px rgb(0 8 24 / 45%)) drop-shadow(0 0 12px rgb(255 214 150 / 50%)) brightness(1.08); }
  }
}