/* -------------------------------------------------------------------------
   PODGLĄD: pierścień przycisku głównego na /home-motywy-ring-olive
   i /home-motywy-ring-cegla. Mechanika z propozycji B (propozycja-chrome.css):
   conic-gradient w ::before wiruje pod treścią, ::after (inset 2px) zakrywa
   środek wypełnieniem przycisku, więc widać tylko obwódkę przy hover/focus.
   Tu przycisk jest pigułką (--r-pill), więc ::after też jest pigułką,
   a overflow:hidden przycina wirujący gradient do jej obrysu.

   KOLOR: na home D przycisk główny bywa żółty (--sun) na płytach noc/cegła,
   więc pierścień nie może być żółty na żółtym. Odwracamy: na żółtym
   wypełnieniu pierścień w kolorze wariantu (oliwka #476216 albo cegła
   #8C2F0A), na oliwkowym/nocnym wypełnieniu — żółty jak w B.
   Selektory .propozycja-d:is(.home-ring, .sub-page) wygrywają specyficznością
   z .propozycja-d .button-primary::before/::after { content: none }.

   PODSTRONY (.sub-page: human-design, kontakt, PCT-A, DISC) dostają ten sam
   system przez @import w podstrona-plyty.css, z wariantem oliwkowym jak home:
   główny = pierścień biegnący po obwódce, drugi = wypełnienie tuszem płyty,
   oba bez podnoszenia, ta sama krzywa i 220 ms co na home.
   ------------------------------------------------------------------------- */

.propozycja-d:is(.home-ring--olive, .sub-page) {
  --ring-on-sun: #476216;
}

.propozycja-d.home-ring--cegla {
  --ring-on-sun: #8c2f0a;
}

/* Płyty z żółtym przyciskiem → pierścień w kolorze wariantu */
.propozycja-d:is(.home-ring, .sub-page) .plate-noc,
.propozycja-d:is(.home-ring, .sub-page) .plate-cegla {
  --btn-ring: var(--ring-on-sun);
}

/* Płyty z oliwkowym/nocnym przyciskiem → pierścień żółty jak w B */
.propozycja-d:is(.home-ring, .sub-page) .plate-bez,
.propozycja-d:is(.home-ring, .sub-page) .plate-sun {
  --btn-ring: var(--sun);
}

/* Podstrony: na żółtej płycie przycisk jest nocny, a żółty pierścień zlewał się
   z tłem płyty (wyglądał jak ubytek obwódki). Kremowy obrys jest wyraźny
   i na nocnym wypełnieniu, i na żółci. */
.propozycja-d.sub-page .plate-sun {
  --btn-ring: var(--krem);
}

.propozycja-d:is(.home-ring, .sub-page) .button-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.propozycja-d:is(.home-ring, .sub-page) .button-primary::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 250%;
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  background: conic-gradient(
    from 0deg,
    var(--btn-ring) 0deg,
    var(--btn-ring) 42deg,
    transparent 78deg,
    transparent 282deg,
    var(--btn-ring) 318deg,
    var(--btn-ring) 360deg
  );
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: button-primary-ring-spin 3.2s linear infinite;
  transition: opacity 240ms var(--ease);
}

.propozycja-d:is(.home-ring, .sub-page) .button-primary::after {
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: var(--r-pill);
  pointer-events: none;
  content: "";
  background: var(--pl-btn-bg);
}

.propozycja-d:is(.home-ring, .sub-page) .button-primary span,
.propozycja-d:is(.home-ring, .sub-page) .button-primary svg {
  position: relative;
  z-index: 1;
}

.propozycja-d:is(.home-ring, .sub-page) .button-primary:hover::before,
.propozycja-d:is(.home-ring, .sub-page) .button-primary:focus-visible::before {
  opacity: 1;
}

/* BEZ PODNOSZENIA — na stronach z pierścieniem żaden przycisk ani link-przycisk
   nie unosi się na hover (koniec z translateY(-2px) z propozycja-chrome.css
   i propozycja-d.css). Hover sygnalizują kolor i pierścień, nie ruch w górę.
   Selektor z .site-header powtórzony z :not(...), żeby wygrać specyficznością
   z .site-header:not(.is-stuck):not(.is-open) .header-action:hover w chrome. */
.propozycja-d:is(.home-ring, .sub-page) .button-primary:hover,
.propozycja-d:is(.home-ring, .sub-page) .button-primary:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .button-secondary:hover,
.propozycja-d:is(.home-ring, .sub-page) .button-secondary:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .site-header .header-action:hover,
.propozycja-d:is(.home-ring, .sub-page) .site-header .header-action:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .site-header:not(.is-stuck):not(.is-open) .header-action:hover,
.propozycja-d:is(.home-ring, .sub-page) .site-header:not(.is-stuck):not(.is-open) .header-action:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .site-header.is-stuck .header-action:hover,
.propozycja-d:is(.home-ring, .sub-page) .site-header.is-stuck .header-action:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .site-header.is-open .header-action:hover,
.propozycja-d:is(.home-ring, .sub-page) .site-header.is-open .header-action:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .offer-link:hover,
.propozycja-d:is(.home-ring, .sub-page) .offer-link:focus-visible,
.propozycja-d:is(.home-ring, .sub-page) .offer-row:hover .offer-link {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .propozycja-d:is(.home-ring, .sub-page) .button-primary::before {
    animation: none;
    opacity: 0;
  }

  .propozycja-d:is(.home-ring, .sub-page) .button-primary:hover,
  .propozycja-d:is(.home-ring, .sub-page) .button-primary:focus-visible {
    outline: 2px solid var(--pl-focus);
    outline-offset: 2px;
  }
}