/* =======================================================================
   PRZYCISK MARKI - jeden styl dla calego motywu
   =======================================================================
   Dotad ten wyglad zyl wylacznie w lp.css, czyli na jednej podstronie pod
   reklame. Reszta motywu miala swoje osobne przyciski, wiec ta sama marka
   wygladala inaczej w headerze, inaczej w hero i inaczej na landingu.

   Tutaj jest zrodlo: sciete rogi, poziome paski, gradient marki, poswiata,
   oddech i przelatujaca smuga swiatla. lp.css zostaje nietkniety - ma wlasna
   kopie i wlasny prefiks, a scalanie tych dwoch to osobna robota.

   Uzycie:
     <a class="kbtn kbtn--primary">…</a>   pelny gradient
     <a class="kbtn kbtn--ghost">…</a>     obwodka, gradient na najechanie
     <a class="kbtn kbtn--maly">…</a>      mniejsza wersja do belek i rogow
   ======================================================================= */

.kbtn {
  --kbtn-ciecie: 10px;
  --kbtn-roz: #cc00a6;
  --kbtn-fiolet: #7338ea;
  --kbtn-gradient: linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2.25rem;
  border: 0;
  min-height: 52px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .08s ease-out, background .2s ease, box-shadow .2s ease;

  /* Sciete rogi - znak rozpoznawczy marki. */
  clip-path: polygon(
    var(--kbtn-ciecie) 0,
    calc(100% - var(--kbtn-ciecie)) 0,
    100% var(--kbtn-ciecie),
    100% calc(100% - var(--kbtn-ciecie)),
    calc(100% - var(--kbtn-ciecie)) 100%,
    var(--kbtn-ciecie) 100%,
    0 calc(100% - var(--kbtn-ciecie)),
    0 var(--kbtn-ciecie)
  );
}

/* Poziome paski. To one robia "techniczny" charakter - bez nich przycisk
   jest zwyklym gradientem. */
.kbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: inherit;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, .12) 2px,
    rgba(0, 0, 0, .12) 4px
  );
}

/* Tresc musi stac NAD paskami i nad smuga, inaczej napis bieleje w momencie
   przejscia swiatla i wyglada jak blad renderowania. */
.kbtn > * {
  position: relative;
  z-index: 3;
}

.kbtn:active { transform: translateY(2px); }

/* --- wariant pelny --------------------------------------------------- */
.kbtn--primary {
  background: var(--kbtn-gradient);
  color: #fff;
  box-shadow:
    0 4px 0 0 rgba(0, 0, 0, .4),
    0 0 0 1px rgba(204, 0, 166, .6),
    0 0 24px rgba(204, 0, 166, .4),
    0 0 48px rgba(115, 56, 234, .3);
  animation: kbtn-oddech 3.4s ease-in-out infinite;
}

/* Smuga swiatla przelatujaca co 5 s. */
.kbtn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .28) 45%,
    rgba(255, 255, 255, .45) 50%,
    rgba(255, 255, 255, .28) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: kbtn-blysk 5s ease-in-out infinite;
}

/* Na najechanie smuga przelatuje od razu, zamiast czekac na swoja kolej. */
.kbtn--primary:hover::after { animation: kbtn-blysk 1.1s ease-out; }

/* --- wariant obwodkowy ------------------------------------------------ */
.kbtn--ghost {
  background: rgba(8, 8, 14, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.kbtn--ghost:hover {
  background: var(--kbtn-gradient);
  box-shadow:
    0 0 0 1px rgba(204, 0, 166, .6),
    0 0 24px rgba(204, 0, 166, .35);
}

/* --- wersja mniejsza, do belek i rogow -------------------------------- */
.kbtn--maly {
  --kbtn-ciecie: 8px;
  min-height: 42px;
  padding: .625rem 1.25rem;
  font-size: .75rem;
  letter-spacing: .1em;
  gap: .4375rem;
}

.kbtn--maly svg { width: 1rem; height: 1rem; }

.kbtn:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
  animation: none;
}

@keyframes kbtn-oddech {
  0%, 100% {
    box-shadow:
      0 4px 0 0 rgba(0, 0, 0, .4),
      0 0 0 1px rgba(204, 0, 166, .6),
      0 0 24px rgba(204, 0, 166, .4),
      0 0 48px rgba(115, 56, 234, .3);
  }
  50% {
    box-shadow:
      0 4px 0 0 rgba(0, 0, 0, .4),
      0 0 0 1px rgba(204, 0, 166, .8),
      0 0 34px rgba(204, 0, 166, .6),
      0 0 68px rgba(115, 56, 234, .45);
  }
}

@keyframes kbtn-blysk {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .kbtn--primary,
  .kbtn--primary::after { animation: none; }
}