/* Wariant C "Karta": strona jak karta do gry, spójna z wizytówką. Lico z logo, rewers z pików.
   K1.5: rozdanie z obrotem, karta 3D za kursorem z odblaskiem folii, połysk złota, wachlarz przy przewijaniu.
   Animujemy tylko transform i opacity. Wydajność (12.10 22:00): bez mix-blend-mode, bez backdrop-filter,
   cienie jako osobne statyczne warstwy, will-change tylko w trakcie ruchu.
   Wachlarz sprzężony z przewijaniem: animation-timeline: scroll() albo (bez wsparcia) jeden rAF w karta.js. */
.hero {
  position: relative; overflow: hidden;
  min-height: max(620px, var(--ekran-h));
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: calc(var(--naglowek-h) + 24px) var(--bok) 64px;
  background: radial-gradient(ellipse 50% 60% at 72% 50%, rgba(201, 162, 75, .12), transparent 70%), var(--czern);
}
.hero::after {
  /* winieta */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55));
}
.hero__tekst { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(56px, 8.6vw, 132px); font-weight: 600; letter-spacing: .02em; line-height: 1; }
.hero__lead { margin: 22px 0 36px; font-size: clamp(18px, 1.6vw, 21px); color: var(--tekst-2); letter-spacing: .02em; }
/* Data otwarcia (Piotr 26.10: „Open Date”, 18.11) */
.otwarcie { margin: -16px 0 34px; font-family: var(--f-tytul); font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--zloto-jasne); }

/* Połysk na napisie: jasna kopia tekstu widoczna tylko w wąskim oknie.
   Okno jedzie w prawo, kopia w lewo o tyle samo, więc litery stoją, a przesuwa się samo światło. */
.polysk { position: relative; display: inline-block; vertical-align: top; }
.polysk__pas {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  transform: translateX(-100%); opacity: 0;
}
.polysk__pas > span {
  display: block; width: calc(100% / .3); white-space: nowrap;
  color: #fff4d2; text-shadow: 0 0 18px rgba(255, 226, 150, .55);
  transform: translateX(30%);
}

/* Talia */
.talia {
  position: relative; z-index: 1; justify-self: center;
  width: min(360px, 64vw); aspect-ratio: 5 / 7;
}
.talia__wachlarz, .talia__poz { position: absolute; inset: 0; }
/* Wachlarz: rewers rozchyla się razem z przewijaniem, postęp 0 przy scrollY 0, 1 przy --wachlarz-zakres.
   Zakres z --ekran-h (liczone tylko przy zmianie szerokości, bez vh): pełny rozkład, zanim karta zniknie.
   Bez transition: przy sprzężeniu ze scrollem dawałoby opóźnienie. Warstwa od początku. */
.talia__wachlarz { transform-origin: 50% 110%; will-change: transform; }
:root { --wachlarz-zakres: calc(var(--ekran-h) * .65); }
@media (max-width: 900px) { :root { --wachlarz-zakres: calc(var(--ekran-h) * .5); } }
@keyframes wachlarz {
  from { transform: rotate(0deg) translateX(0%); }
  to { transform: rotate(-16deg) translateX(-10%); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .talia__wachlarz {
      animation: wachlarz linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px var(--wachlarz-zakres);
    }
  }
}
/* cień pod kartami: zwykły gradient (bez rozmycia), nie obraca się z kartą, pojawia się opacity */
.talia__cien {
  position: absolute; left: -22%; right: -14%; top: 8%; bottom: -14%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 55%, transparent 75%);
}
.talia__rewers, .talia__lico, .talia__grzbiet {
  position: absolute; inset: 0; border-radius: 18px;
  border: 1px solid rgba(201, 162, 75, .55);
}
.talia__rewers, .talia__grzbiet {
  background: var(--rewers) center / 30px 30px, #14110c;
}
.talia__rewers {
  transform: translate(-16%, 3%) rotate(-11deg);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55);
}
.talia__rewers::after, .talia__grzbiet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle, transparent 30%, rgba(10, 9, 7, .75));
  box-shadow: inset 0 0 0 9px #14110c, inset 0 0 0 10px rgba(201, 162, 75, .3);
}
.talia__poz { transform: translate(6%, 0) rotate(4deg); perspective: 1000px; }
.talia__tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.talia.w-ruchu .talia__tilt, .talia.w-ruchu .odblask { will-change: transform; }
.talia__karta { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Każda animacja na własnym elemencie (WebKit/iOS): .talia__karta = lot, .talia__obrot = sam flip, .talia__tilt = oddech i tilt */
.talia__obrot { position: absolute; inset: 0; transform-style: preserve-3d; }
.talia__lico, .talia__grzbiet { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.talia__lico { transform: translateZ(0); }
.talia__grzbiet { transform: rotateY(180deg); }
.talia__lico {
  overflow: hidden;
  background: linear-gradient(160deg, #1b1710, #0b0a07);
  display: flex; align-items: center; justify-content: center; padding: 18% 8%;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55), inset 0 0 0 7px #0b0a07, inset 0 0 0 8px rgba(201, 162, 75, .25);
}
.talia__lico img { width: 100%; position: relative; }
.talia__lico .indeks { z-index: 1; }
.talia__lico::after {
  /* błysk krawędzi, zgrany z połyskiem napisu */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, .95), 0 0 0 1px rgba(255, 236, 180, .6), inset 0 0 26px rgba(240, 213, 142, .35);
  opacity: 0;
}
.odblask {
  /* odblask folii: duży miękki blask przesuwany transformem */
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 214, .24) 0%, rgba(255, 230, 160, .08) 18%, transparent 36%),
    linear-gradient(115deg, transparent 40%, rgba(255, 240, 200, .08) 48%, rgba(255, 240, 200, .18) 50%, rgba(255, 240, 200, .08) 52%, transparent 60%);
  /* bez mix-blend-mode: mieszanie z kartą 3D wymuszało przerysowanie przy każdym ruchu; na ciemnym licu zwykła przezroczystość wygląda tak samo */
}

/* Animacje: tylko gdy użytkownik ich nie wyłączył */
@media (prefers-reduced-motion: no-preference) {
  /* Rozdanie: rewers wjeżdża z talii, potem karta z logo ląduje grzbietem do góry i obraca się na lico */
  /* Start dopiero po załadowaniu: klasa .start na <html> (karta.js po decode logo i fontach, bezpiecznik 1,5 s w <head>).
     Do tego czasu karty i napis są ukryte opacity, układ się nie rusza. */
  /* .001, nie 0: WebKit przy opacity 0 nie maluje warstw i robił to dopiero w pierwszej klatce rozdania */
  .czeka:not(.start) .talia, .czeka:not(.start) .hero__tekst { opacity: .001; }
  .start .talia__rewers { animation: rozdanie-rewers .7s cubic-bezier(.2, .8, .25, 1) both; }
  .start .talia__karta { animation: rozdanie-lot 1.25s cubic-bezier(.22, .7, .2, 1) .25s both; }
  .start .talia__obrot { animation: rozdanie-obrot 1.25s cubic-bezier(.22, .7, .2, 1) .25s both; }
  .start .talia__cien { animation: cien-wejscie .6s ease-out 1.1s both; }
  .start .hero__tekst > * { animation: tekst-wejscie .8s cubic-bezier(.2, .8, .25, 1) both; }
  .start .hero__tekst > :nth-child(1) { animation-delay: .75s; }
  .start .hero__tekst > :nth-child(2) { animation-delay: .85s; }
  .start .hero__tekst > :nth-child(3) { animation-delay: .97s; }
  .start .hero__tekst > :nth-child(4) { animation-delay: 1.07s; }
  .start .hero__tekst > :nth-child(5) { animation-delay: 1.17s; }

  .start .polysk__pas { animation: polysk-okno 7s ease-in-out 1.8s infinite; }
  .start .polysk__pas > span { animation: polysk-tekst 7s ease-in-out 1.8s infinite; }
  .start .talia__lico::after { animation: krawedz 7s ease-in-out 1.8s infinite; }

  /* Telefon i tablet: karta lekko faluje sama, bez żyroskopu */
  @media (hover: none) {
    /* na dotyku te animacje idą bez końca: warstwy od początku, bez przełączania w trakcie */
    .talia__tilt, .odblask { will-change: transform; }
    .talia__lico::after { will-change: opacity; }
    .start .talia__tilt { animation: oddech 10s ease-in-out 1.6s infinite; }
    .start .odblask { animation: odblask-ruch 10s ease-in-out 1.6s infinite; }
  }

  /* Hero poza ekranem: nieskończone animacje karty i połysku stoją */
  .poza .talia__tilt, .poza .odblask, .poza .polysk__pas, .poza .polysk__pas > span, .poza .talia__lico::after { animation-play-state: paused; }

  /* Powrót z bfcache: stan końcowy rozdania, bez powtórki od połowy */
  .koniec .talia__rewers, .koniec .talia__karta, .koniec .talia__obrot, .koniec .talia__cien, .koniec .hero__tekst > * { animation: none; }

  /* Telefon: połysk napisu bez mask-image (w WebKicie drogi), błysk krawędzi karty zostaje */
  @media (pointer: coarse) { .polysk__pas { display: none; } }

  /* Plan B (?prosto=1): karta wjeżdża licem do góry, bez obrotu 3D; oddech płaski */
  .prosto .talia__grzbiet { display: none; }
  .start.prosto .talia__karta { animation: rozdanie-prosto .9s cubic-bezier(.2, .8, .25, 1) .25s both; }
  .start.prosto .talia__obrot { animation: none; }
  @media (hover: none) {
    .start.prosto .talia__tilt { animation: oddech-plaski 7s ease-in-out 1.6s infinite; }
  }

  .js .wjazd { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .25, 1); }
  .js .wjazd.widoczne { opacity: 1; transform: none; }
}

@keyframes rozdanie-rewers {
  0% { opacity: 0; transform: translate(70%, -95%) rotate(-48deg) scale(.9); }
  100% { opacity: 1; transform: translate(-16%, 3%) rotate(-11deg); }
}
/* bez opacity: opacity < 1 spłaszcza 3D i lico prześwituje lustrzanie przy obrocie.
   Lot i flip osobno, a w każdej klatce ta sama lista funkcji: inaczej WebKit (Core Animation na iOS)
   interpoluje całą macierz, a obrót o 180° rozkłada się wtedy na ujemną skalę i karta "obraca się dwa razy". */
@keyframes rozdanie-lot {
  0% { transform: translate(120%, -150%) rotate(32deg) scale(.9); }
  45% { transform: translate(0, 0) rotate(0deg) scale(1); }
  58% { transform: translate(0, -4%) rotate(0deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes rozdanie-obrot {
  0%, 58% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes rozdanie-prosto {
  0% { opacity: 0; transform: translate(0, -12%) rotate(8deg) scale(.94); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes oddech-plaski {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(0, -6px) rotate(-1.2deg); }
}
@keyframes cien-wejscie { from { opacity: 0; } to { opacity: 1; } }
@keyframes tekst-wejscie {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes polysk-okno {
  0% { opacity: 0; transform: translateX(-100%); }
  2% { opacity: 1; }
  16% { opacity: 1; transform: translateX(340%); }
  17%, 100% { opacity: 0; transform: translateX(340%); }
}
@keyframes polysk-tekst {
  0% { transform: translateX(30%); }
  16%, 100% { transform: translateX(-102%); }
}
@keyframes krawedz {
  0%, 6% { opacity: 0; }
  13% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
/* Start i koniec w zerze: wcześniej oddech zaczynał od wychylenia i karta skakała w 1. klatce ("pauza" na iPhonie) */
@keyframes oddech {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
  25% { transform: rotateX(4deg) rotateY(-7deg); }
  75% { transform: rotateX(-3deg) rotateY(7deg); }
}
@keyframes odblask-ruch {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-18%, -12%); }
  75% { transform: translate(16%, 10%); }
}

/* Klub na rewersie */
.klub {
  position: relative; padding: clamp(80px, 11vw, 150px) var(--bok);
  background: var(--rewers) center / 36px 36px, var(--czern-2);
  border-top: 1px solid rgba(201, 162, 75, .3); border-bottom: 1px solid rgba(201, 162, 75, .3);
}
.klub::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(10, 9, 7, .97) 35%, rgba(10, 9, 7, .82));
}
.klub__w { position: relative; max-width: 640px; margin: 0 auto; text-align: center; }
.klub h2 { margin-bottom: 28px; }
.klub .lead { font-size: clamp(19px, 2vw, 22px); color: var(--tekst); margin: 0 0 14px; }
.klub p { color: var(--tekst-2); }

.kontakt { padding: clamp(80px, 11vw, 150px) var(--bok); display: flex; justify-content: center; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; gap: 48px; }
  .talia { order: 1; width: min(250px, 58vw); margin-top: 8px; }
  .hero__tekst { order: 2; }
}

/* K2: znaczek 18+, kafelki, stopka */
.menu { align-items: center; }
.znaczek-18 {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 26px; padding: 0 8px; border: 1px solid rgba(201, 162, 75, .6); border-radius: 13px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--zloto-jasne);
}
.kropka { margin: 0 6px; }

.cechy { padding: clamp(80px, 10vw, 140px) var(--bok) 0; text-align: center; }
.cechy__tytul { margin-bottom: clamp(36px, 5vw, 64px); }
.cechy__lista {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px);
}
.cecha {
  position: relative; padding: 56px 28px 44px; border-radius: 16px; text-align: center;
  background: linear-gradient(160deg, #17140f, #0d0b08);
  border: 1px solid rgba(201, 162, 75, .35);
  box-shadow: inset 0 0 0 5px var(--czern), inset 0 0 0 6px rgba(201, 162, 75, .14);
}
.cecha__kolor {
  display: block; margin-bottom: 18px; font-size: 34px; line-height: 1; color: var(--zloto);
}
.cecha__kolor--czerwony { color: #b4543f; }
.cecha h3 {
  margin: 0 0 12px; font-family: var(--f-tytul); font-weight: 500; font-size: 21px; letter-spacing: .04em; color: var(--tekst);
}
.cecha p { margin: 0; color: var(--tekst-2); font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .cecha:nth-child(2).widoczne:not(:hover) { transition-delay: .12s; }
  .cecha:nth-child(3).widoczne:not(:hover) { transition-delay: .24s; }
  @media (hover: hover) {
    .cecha { transition: opacity .9s ease, transform .5s cubic-bezier(.2, .8, .25, 1), border-color .3s; }
    .cecha.widoczne:hover { transform: translateY(-6px); border-color: rgba(201, 162, 75, .7); }
  }
}

.karta__opis { margin: 14px 0 0; color: var(--tekst-2); }
.kontakt .telefon { margin-top: 18px; }
.kontakt .karta { padding-bottom: clamp(76px, 9vw, 88px); }

.stopka__18 { color: var(--tekst) !important; margin-bottom: 6px !important; }
.stopka__linki { margin: 6px 0 10px !important; }
.stopka__linki a { color: var(--zloto-jasne); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 75, .4); }
.stopka__linki a:hover { border-bottom-color: var(--zloto-jasne); }

@media (max-width: 900px) {
  .cechy__lista { grid-template-columns: 1fr; max-width: 460px; }
  .cecha { padding: 40px 24px 32px; }
}
@media (max-width: 760px) {
  .menu .znaczek-18 { align-self: flex-start; margin-top: 16px; }
}

/* K4: przełącznik języka, dopisek w O klubie */
.naglowek { gap: 28px; }
.naglowek .menu { margin-left: auto; }
.jezyk { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.jezyk a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 6px;
  text-decoration: none; color: var(--tekst-2); border-bottom: 1px solid transparent; transition: color .2s;
}
.jezyk a:hover { color: var(--zloto-jasne); }
.jezyk a[aria-current="page"] { color: var(--zloto-jasne); border-bottom-color: var(--zloto); }
.klub .lead + .lead { margin-top: 4px; }
.klub__dopisek { margin-top: 26px; font-size: 15px; }
@media (max-width: 760px) {
  .naglowek { gap: 8px; }
  .jezyk { margin-left: auto; }
}
@media (max-width: 760px) { .menu-przycisk { order: 3; } }

/* 27.10.2026: dwa przyciski w hero (Zarezerwuj miejsce + Dołącz do klubu), wyrównane jak tekst */
.hero__tekst .przyciski { justify-content: flex-start; margin-top: 0; }
@media (max-width: 900px) { .hero__tekst .przyciski { justify-content: center; } }

/* 27.10.2026: e-mail zamiast numeru w Kontakcie, nie może wychodzić poza kartę */
.telefon[href^="mailto:"] { font-size: clamp(15px, 2.1vw, 24px); letter-spacing: .06em; overflow-wrap: anywhere; max-width: 100%; display: inline-block; }