/**
 * loyalty-hero.css — nagłówek strony Klubu: pigułka, h1, lead, przyciski,
 * trzy liczby i karta klubowa z przechyłem w drugiej kolumnie.
 *
 * Wymaga tokens.css, base.css, components/ring.css i components/tilt-card.css.
 * Wszystko pod prefiksem .dc-loyalty-hero__; komponenty (.dc-ring,
 * .dc-tilt-card) dostrajane wyłącznie na gospodarzu pod prefiksem sekcji.
 *
 * MAKIETA JEST CIEMNA W CAŁOŚCI (loyalty-card.html ma tylko wersję ciemną),
 * motyw ma dwa motywy. Tekst, przyciski i pigułka biorą więc tokeny
 * PRZEŁĄCZANE (--dc-text, --dc-accent-strong, --dc-surface-glass) i w jasnym
 * motywie stoją na jasnej stronie — makieta mówi CO, projekt JAK. Wyjątek:
 * KARTA KLUBOWA jest ciemna w obu motywach, bo to ten sam wzór karty co
 * w loyalty-cta (tam na czarnym panelu) — karta ma wyglądać identycznie
 * wszędzie, gdzie stoi. Jej wnętrze bierze tokeny -on-dark i --dc-accent,
 * jak tam.
 *
 * KARTA — KOPIA PRZEPISU Z loyalty-cta.css (sekcja 8), drugie wystąpienie
 * (reguła 18: kopia, komponent przy trzecim). Wartości, komentarze
 * o kontraście i jedyny literał — trzyprzystankowy gradient tła karty
 * „wprost z makiety" (loyalty-cta.css, nagłówek, punkt a) — przeniesione
 * bez zmian, żeby obie karty były jednym obrazem. Ten gradient jest JEDYNYM
 * trafieniem grepa po hex w tym pliku i jest świadomy: to ta sama wartość,
 * którą zatwierdzono w loyalty-cta; zapisanie jej tokenami zmieniłoby
 * kartę na jednej z dwóch stron.
 *
 * SCALENIA (reguła 15), zgłoszone w raporcie:
 *   siatka minmax(340px) -> --dc-grid-min-lg (320), odstęp 56 = --dc-space-56;
 *   lead 17 = --dc-text-2xl, szerokość 520 -> --dc-measure-md (480),
 *   odstęp 34 -> --dc-space-32; przyciski: pigułka -> r16 rangi (C.9),
 *   padding 17/36 -> przepis hero.css 16/28; liczby 30 = --dc-numeral-sm,
 *   podpis 12,5 -> --dc-text-sm, odstęp 34 -> --dc-space-32;
 *   karta: szerokość 430 -> --dc-measure-sm (400), padding 32/34/28 ->
 *   przepis karty z loyalty-cta (24/28/22), promień 22 -> 18 (jak tam);
 *   poświata za kartą: blur(50px) -> --dc-blur-xl, złoto .25 -> a20;
 *   podpis pod kartą 12,5 -> --dc-text-sm, odstęp 20 = --dc-space-20;
 *   kropka pigułki 7 px -> --dc-space-8 (kropka statusu, C.8).
 *
 * ZDJĘTE Z MAKIETY — projekt ma odpowiednik albo nie ma takiej rzeczy:
 *   - migotanie złota na drugim wierszu h1 (gradient-text + dcShimmer):
 *     motyw nie ma tekstu gradientowego, złoty tekst to --dc-accent-strong
 *     (reguła J); ruch ciągły na nagłówku konkurowałby z obwódkami;
 *   - uniesienie przycisków na najeździe (C.2: hover wyłącznie kolorem);
 *   - trzy plamy tła i siatka linii — warstwa atmosfery strony.
 */

/* ==========================================================================
   1. SIATKA
   Dwie kolumny auto-fit (reguła 9), wyśrodkowane w pionie jak w makiecie.
   min(..., 100%) chroni przed przepełnieniem przy 390 px.
   ========================================================================== */

/* .dc-loyalty-hero nie ma tu żadnej deklaracji — szerokość i marginesy
   daje .dc-container, pionowy oddech .dc-section (reguła 8). */

.dc-loyalty-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-56);
  align-items: center;
}

/* ==========================================================================
   2. PIGUŁKA Z KROPKĄ
   Przepis pigułki nadtytułu z fuel-switch.css, ale na JASNYM tle strony:
   złoty tekst bierze --dc-accent-strong (reguła J), nie --dc-accent
   z ciemnego panelu. Kropka tętni kryciem i skalą jak w makiecie
   (dcPulse 2,4 s) — czas poza skalą --dc-duration-*, zostaje z makiety
   jak tętno w fuel-switch; blok prefers-reduced-motion niżej (reguła 12).
   ========================================================================== */

.dc-loyalty-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-24);
  padding-block: var(--dc-space-8);
  padding-inline: var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-accent-a30);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

.dc-loyalty-hero__eyebrow-dot {
  flex: none;
  width: var(--dc-space-8);
  height: var(--dc-space-8);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent);
  animation: dcLoyaltyHeroPulse 2.4s var(--dc-ease) infinite;
}

/* ==========================================================================
   3. TYTUŁ I LEAD
   h1 bierze krój, --dc-display-1, wagę i interlinię z base.css — tu tylko
   odstęp do leadu (22 = --dc-space-22) i złoty drugi wiersz.
   ========================================================================== */

.dc-loyalty-hero__heading {
  margin-block-end: var(--dc-space-22);
}

.dc-loyalty-hero__heading-accent {
  color: var(--dc-accent-strong);
}

.dc-loyalty-hero__lead {
  max-width: var(--dc-measure-md);
  margin-block-end: var(--dc-space-32);
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   4. PRZYCISKI — RANGA 1 I 2 (design-audit.md C.1), przepis z hero.css
   Geometria, wagi, hover (kolorem, bez uniesienia) i active (nacisk)
   skopiowane z .dc-hero__cta; makietowa pigułka schodzi na r16 rangi.
   ========================================================================== */

.dc-loyalty-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-14);
  margin-block-end: var(--dc-space-40);
}

.dc-loyalty-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-16) var(--dc-space-28);
  border-radius: var(--dc-radius-16);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-loyalty-hero__cta:active {
  transform: scale(0.97);
}

.dc-loyalty-hero__cta:focus-visible {
  border-radius: var(--dc-radius-16);
}

.dc-loyalty-hero__cta--primary {
  border: var(--dc-border) solid var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  font-weight: var(--dc-weight-bold);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
}

.dc-loyalty-hero__cta--primary:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

.dc-loyalty-hero__cta--primary:active {
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-loyalty-hero__cta--secondary {
  border: var(--dc-border) solid var(--dc-border-subtle);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-weight: var(--dc-weight-medium);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
}

.dc-loyalty-hero__cta--secondary:hover {
  border-color: var(--dc-surface-inverse);
  background-color: var(--dc-surface-inverse);
  color: var(--dc-surface);
}

/* ==========================================================================
   5. TRZY LICZBY
   Rząd z pionowymi kreskami między pozycjami — kreska to obramowanie
   kolejnej pozycji, więc pierwsza jej nie ma i rząd zawija się czysto.
   ========================================================================== */

.dc-loyalty-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-32);
}

.dc-loyalty-hero__stat + .dc-loyalty-hero__stat {
  padding-inline-start: var(--dc-space-32);
  border-inline-start: var(--dc-border) solid var(--dc-border-line);
}

/* --dc-numeral-sm trafia w makietowe 30 px co do piksela. Interlinia 1
   i trakt -.02em jak w liczbach about. */
.dc-loyalty-hero__stat-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-numeral-sm);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-text);
}

.dc-loyalty-hero__stat-value--accent {
  color: var(--dc-accent-strong);
}

.dc-loyalty-hero__stat-label {
  margin-block-start: var(--dc-space-6);
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   6. KOLUMNA Z KARTĄ
   Karta wyśrodkowana, za nią miękka złota poświata (makieta: elipsa 70 %
   z blur(50px) i dcGlow) — tu z tokenów: a20 -> a00 i --dc-blur-xl, tętno
   kryciem w tych samych klatkach co poświaty loyalty-cta (dcLoyaltyCtaGlow
   .35 -> .85), 6 s z makiety.
   ========================================================================== */

.dc-loyalty-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: var(--dc-space-32);
}

.dc-loyalty-hero__glow {
  position: absolute;
  z-index: var(--dc-z-base);
  inset: 15%;
  border-radius: var(--dc-radius-full);
  background-image: radial-gradient(ellipse, var(--dc-accent-a20), var(--dc-accent-a00) 65%);
  filter: var(--dc-blur-xl);
  pointer-events: none;
  animation: dcLoyaltyHeroGlow 6s var(--dc-ease) infinite;
}

.dc-loyalty-hero__aside {
  position: relative;
  z-index: var(--dc-z-raised);
  width: min(var(--dc-measure-sm), 100%);
}

/* ==========================================================================
   7. KARTA KLUBOWA — przepis z loyalty-cta.css, sekcja 8 (kopia, patrz nagłówek)
   Gospodarz komponentów .dc-tilt-card i .dc-ring: position: relative
   i isolation: isolate; overflow: hidden przycina połysk i okręgi do promienia.
   ========================================================================== */

.dc-loyalty-hero__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--dc-space-24) var(--dc-space-22);
  padding-inline: var(--dc-space-28);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 10%, transparent);
  border-radius: var(--dc-radius-18);
  background-image: linear-gradient(140deg, #1d1407 0%, #0d0b07 55%, #1a1208 100%);
  box-shadow: inset 0 var(--dc-border) 0 var(--dc-accent-a15);
}

/* Faza i zwrot łuku — numer 3 z rejestru w components/ring.css (start
   o 3/12 obrotu, nieparzysty = w lewo). Rejestr ma 12 numerów i wszystkie
   są zajęte; numer 3 należy do volume-picker, który na stronie klubu NIE
   STOI — reguła rejestru mówi „numer, którego nie ma na tej samej stronie".
   Zgłoszone w raporcie razem z otwartą decyzją o rejestrze 12 -> 24. */
.dc-loyalty-hero__card {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -3 / 12);
}

/* Okręgi: 160/240/320 to dwie, trzy i cztery jednostki --dc-space-80. */
.dc-loyalty-hero__orbit {
  position: absolute;
  z-index: var(--dc-z-base);
  border-radius: var(--dc-radius-full);
  pointer-events: none;
}

.dc-loyalty-hero__orbit--sm {
  inset-block-end: calc(var(--dc-space-20) * -1);
  inset-inline-end: calc(var(--dc-space-20) * -1);
  width: calc(var(--dc-space-80) * 2);
  height: calc(var(--dc-space-80) * 2);
  border: var(--dc-border-thick) solid var(--dc-accent-a15);
}

.dc-loyalty-hero__orbit--md {
  inset-block-end: calc(var(--dc-space-56) * -1);
  inset-inline-end: calc(var(--dc-space-56) * -1);
  width: calc(var(--dc-space-80) * 3);
  height: calc(var(--dc-space-80) * 3);
  border: var(--dc-border) solid var(--dc-accent-a05);
}

.dc-loyalty-hero__orbit--lg {
  inset-block-end: calc((var(--dc-space-80) + var(--dc-space-10)) * -1);
  inset-inline-end: calc((var(--dc-space-80) + var(--dc-space-10)) * -1);
  width: calc(var(--dc-space-80) * 4);
  height: calc(var(--dc-space-80) * 4);
  border: var(--dc-border) solid var(--dc-accent-a05);
}

.dc-loyalty-hero__card-edge {
  position: absolute;
  z-index: var(--dc-z-base);
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--dc-border);
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    var(--dc-accent-a00),
    var(--dc-accent-a20),
    var(--dc-accent-a00)
  );
}

.dc-loyalty-hero__card-top {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: var(--dc-space-28);
}

.dc-loyalty-hero__card-brand {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-wider);
  color: var(--dc-accent);
}

/* Ciemne okienko pod sygnetem — jedna reguła [data-theme] na kolor w tym
   pliku: para --dc-surface-inverse / --dc-surface daje prawie czerń w obu
   motywach bez wpisywania koloru (jak loyalty-cta i help-cta). */
.dc-loyalty-hero__card-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-inverse);
  box-shadow: inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 6%, transparent);
}

[data-theme='dark'] .dc-loyalty-hero__card-mark {
  background-color: var(--dc-surface);
}

/* Nadtytuł karty — 70 % złota zamiast a50: korekta kontrastu z loyalty-cta
   (4,64:1 na tle karty; a50 dawało 2,91:1). */
.dc-loyalty-hero__card-kind {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-end: var(--dc-space-6);
  font-size: var(--dc-text-3xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dc-accent) 70%, transparent);
}

.dc-loyalty-hero__card-holder {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-end: var(--dc-space-28);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-text-on-dark);
}

.dc-loyalty-hero__card-foot {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-16);
}

.dc-loyalty-hero__card-field--end {
  text-align: end;
}

/* Etykiety pól: biel 50 % — korekta kontrastu z loyalty-cta (5,33:1 / 4,85:1). */
.dc-loyalty-hero__card-label {
  margin-block-end: var(--dc-space-4);
  font-size: var(--dc-text-3xs);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

.dc-loyalty-hero__card-code {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wider);
  color: var(--dc-accent);
}

.dc-loyalty-hero__card-valid {
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-on-dark-muted);
}

/* Podpis pod kartą — na tle STRONY, więc token przełączany. */
.dc-loyalty-hero__card-intro {
  margin-block-start: var(--dc-space-20);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-relaxed);
  text-align: center;
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   8. RUCH — tętno kropki i poświaty (reguła 12: blok dokłada ten, kto animuje)
   ========================================================================== */

@keyframes dcLoyaltyHeroPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes dcLoyaltyHeroGlow {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.85;
  }
}

/* animation: none zeruje animation-name, którego globalny !important
   z base.css nie obejmuje — kropka i poświata stoją w pełni widoczne,
   nie zamarłe w połowie oddechu. Przechył karty wyłącza sam komponent. */
@media (prefers-reduced-motion: reduce) {
  .dc-loyalty-hero__eyebrow-dot,
  .dc-loyalty-hero__glow {
    animation: none;
  }
}