/* --- Mouse Circle Follower ---------------------------------------------- */

.mouse-circle-follower {
  position: fixed;
  left: 0; top: 0;
  z-index: 9999;
  pointer-events: none;

  /* rozmiar bazowy */
  width: 100px;
  height: 100px;

  /* ring */
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;

  /* pozycja z JS */
  transform: translate3d(var(--tx, -50px), var(--ty, -50px), 0) scale(1);
  will-change: transform, width, height, filter;
  transition: width 120ms ease, height 120ms ease, border-color 120ms ease;

  /* opcjonalnie, żeby ring był czytelny na różnych tłach jak u nich: */
  /* mix-blend-mode: difference; */
}

/* warstwa do „rozmycia tła” wewnątrz kółka */
.mouse-circle-follower::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* domyślnie nic nie rozmywamy */
  filter: none;
  /* dla przeglądarek z backdrop-filter – rozmywa TŁO pod kółkiem */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: filter, backdrop-filter;
  /* żeby filtr nie wyciekał poza kółko */
  overflow: clip;
  contain: paint;
}

/* większe kółko na elementach interaktywnych */
.mouse-circle-follower.active {
  width: 150px;
  height: 150px;
}

/* „pop” + krótki blur przy wejściu */
.mouse-circle-follower.wobble {
  animation: cursor-pop 360ms cubic-bezier(.2,.9,.2,1) both;
}

/* keyframes skali (sprężynka) */
@keyframes cursor-pop {
  0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
  36%  { transform: translate3d(var(--tx), var(--ty), 0) scale(1.16); }
  56%  { transform: translate3d(var(--tx), var(--ty), 0) scale(0.985); }
  76%  { transform: translate3d(var(--tx), var(--ty), 0) scale(1.06); }
  100% { transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
}

/* ——— Motion-blur tylko podczas powiększania ——— */

/* Jeśli JEST wsparcie dla backdrop-filter: rozmyj TŁO w kółku */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mouse-circle-follower.wobble::before {
    animation: cursor-backdrop-blur 180ms ease-out both;
  }
  @keyframes cursor-backdrop-blur {
    0%   { -webkit-backdrop-filter: none; backdrop-filter: none; }
    45%  { -webkit-backdrop-filter: blur(1.4px) saturate(110%) contrast(105%);
           backdrop-filter: blur(1.4px) saturate(110%) contrast(105%); }
    100% { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}

/* Fallback: brak backdrop-filter → rozmyj sam ring na moment */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mouse-circle-follower.wobble { animation: cursor-pop 360ms cubic-bezier(.2,.9,.2,1) both,
                                           cursor-filter-blur 150ms ease-out both; }
  @keyframes cursor-filter-blur {
    0%   { filter: none; }
    45%  { filter: blur(1.1px); }
    100% { filter: none; }
  }
}

/* szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mouse-circle-follower.wobble,
  .mouse-circle-follower.wobble::before { animation: none !important; }
}