/* ---------- Обёртка ---------- */
.shimmer-logo-wrapper {
  position: relative !important;
  display: inline-block !important;
  line-height: 0 !important;
}
.shimmer-logo-wrapper img {
  position: relative !important;
  z-index: 1 !important;
}

/* ---------- Overlay — обрезается маской по форме PNG ---------- */
.shimmer-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: hidden !important;
  /* Маска — эффекты видны ТОЛЬКО где PNG непрозрачный */
  -webkit-mask-image: var(--shimmer-mask);
  mask-image: var(--shimmer-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- Диагональный блик ---------- */
.shimmer-sweep {
  position: absolute;
  top: 0;
  left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(
    25deg,
    transparent 0%,
    transparent 28%,
    rgba(255,255,255,0.03) 36%,
    rgba(255,255,255,0.18) 43%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.18) 57%,
    rgba(255,255,255,0.03) 64%,
    transparent 72%,
    transparent 100%
  );
  /* БЕЗ mix-blend-mode — он желтил прозрачные области */
  animation: shimmerSweep 4s ease-in-out 3s infinite;
}

@keyframes shimmerSweep {
  0%   { left: -150%; opacity: 0; }
  5%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

/* ---------- Второй блик (встречный) ---------- */
.shimmer-sweep-2 {
  position: absolute;
  top: 0;
  left: 200%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    -20deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 65%,
    transparent 100%
  );
  animation: shimmerSweep2 5s ease-in-out 5.5s infinite;
}

@keyframes shimmerSweep2 {
  0%   { left: 200%; opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: -150%; opacity: 0; }
}

/* ---------- Искры ---------- */
.shimmer-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  pointer-events: none;
  z-index: 3;
}
.shimmer-sparkle::before,
.shimmer-sparkle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
}
.shimmer-sparkle::before {
  width: 18px; height: 1.5px;
  box-shadow: 0 0 5px 1px rgba(255,255,255,0.5);
}
.shimmer-sparkle::after {
  width: 1.5px; height: 12px;
  box-shadow: 0 0 5px 1px rgba(255,255,255,0.5);
}

.shimmer-sparkle[data-pos="1"] { top: 12%; left: 30%; animation: sparkFlash 4.5s 0.0s ease-in-out infinite; }
.shimmer-sparkle[data-pos="2"] { top: 16%; left: 66%; animation: sparkFlash 4.5s 1.4s ease-in-out infinite; }
.shimmer-sparkle[data-pos="3"] { top: 40%; left: 36%; animation: sparkFlash 4.5s 2.6s ease-in-out infinite; }
.shimmer-sparkle[data-pos="4"] { top: 28%; left: 53%; animation: sparkFlash 4.5s 0.8s ease-in-out infinite; }
.shimmer-sparkle[data-pos="5"] { top: 7%;  left: 48%; animation: sparkFlash 4.5s 2.0s ease-in-out infinite; }
.shimmer-sparkle[data-pos="6"] { top: 50%; left: 24%; animation: sparkFlash 4.5s 3.2s ease-in-out infinite; }
.shimmer-sparkle[data-pos="7"] { top: 44%; left: 70%; animation: sparkFlash 4.5s 0.5s ease-in-out infinite; }

@keyframes sparkFlash {
  0%, 8%, 28%, 100% { opacity: 0; transform: scale(0.3); }
  12%  { opacity: 1; transform: scale(1.3) rotate(12deg); }
  18%  { opacity: 0.8; transform: scale(1.0) rotate(0deg); }
}

/* ---------- Большая вспышка ---------- */
.shimmer-big-sparkle {
  position: absolute;
  top: 20%; left: 56%;
  width: 6px; height: 6px;
  pointer-events: none;
  z-index: 4;
  animation: bigFlash 7s 1.5s ease-in-out infinite;
}
.shimmer-big-sparkle::before,
.shimmer-big-sparkle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 50%;
}
.shimmer-big-sparkle::before {
  width: 32px; height: 2px;
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.5),
              0 0 22px 4px rgba(200,240,255,0.15);
}
.shimmer-big-sparkle::after {
  width: 2px; height: 22px;
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.5),
              0 0 22px 4px rgba(200,240,255,0.15);
}
.shimmer-big-sparkle .ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 1.5px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.35);
}
.shimmer-big-sparkle .ray:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.shimmer-big-sparkle .ray:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@keyframes bigFlash {
  0%, 5%, 22%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  9%  { opacity: 1; transform: scale(1.5) rotate(18deg); }
  14% { opacity: 0.9; transform: scale(1.0) rotate(0deg); }
}
</style>