/* ═══ REKLAMA ANIMUSA — duży, animowany baner na górze przewodnika (Krzysztof 17.10.2026: „efekt wow, nowoczesny,
   animacyjny; napisy mają się zmieniać; dla Lipowej inna, dla Unickiej inna, dla Majdanka inna”).
   Animowane tylko transform/opacity; pauza poza ekranem (js/reklama.js); wyłączone przy „ogranicz ruch”. ═══ */
.reklama {
  --srebro: linear-gradient(180deg, #ffffff 0%, #e3e7ee 50%, #b8c0cd 100%);
  position: relative; isolation: isolate; overflow: hidden;
  color: #eef1f6; background: #0b0e15;
}
.reklama__scena { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.reklama__scena::after { /* winieta: tekst zawsze czytelny na scenie */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(6 8 12 / 0.78) 0%, rgb(6 8 12 / 0.45) 45%, rgb(6 8 12 / 0) 75%),
              linear-gradient(0deg, rgb(6 8 12 / 0.55), transparent 35%);
}
.reklama__srodek {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 3rem;
  width: min(100% - 2 * var(--margines), 74rem); min-height: clamp(22rem, 34vw, 28rem); margin-inline: auto;
  padding: 2.25rem 0 1.25rem;
}
.reklama__tresc { min-width: 0; }
.reklama__logo { display: inline-block; line-height: 0; margin-bottom: 1.1rem; animation: rk-wejscie-dol 1s cubic-bezier(.2,.8,.2,1) both; }
.reklama__logo img { width: clamp(8.5rem, 11vw, 10.5rem); height: auto; filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.7)); }
.reklama__haslo {
  position: relative; display: block; width: fit-content; max-width: 100%; margin: 0; overflow: hidden; padding-bottom: 0.08em;
  font: 500 clamp(2.3rem, 1.1rem + 4.2vw, 5rem)/1.04 var(--kroj-tytul); letter-spacing: 0.005em;
  /* Połysk tylko na literach: jasny pas w gradiencie wypełnienia tekstu przesuwa się co kilka sekund. */
  background: linear-gradient(105deg, #d5dbe4 0%, #d5dbe4 40%, #ffffff 47%, #fffdf2 50%, #ffffff 53%, #d5dbe4 60%, #d5dbe4 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgb(0 0 0 / 0.55));
  animation: rk-wejscie-dol 1.1s .12s cubic-bezier(.2,.8,.2,1) both, rk-polysk-liter 8s 2s ease-in-out infinite;
}
.reklama__zmienne {
  display: grid; margin: 1rem 0 0; min-height: 1.5em; overflow: hidden;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); font-weight: 600; line-height: 1.4; color: #fff;
}
.reklama__zmienne span { grid-area: 1 / 1; opacity: 0; animation: rk-zmiana 14s calc(var(--i) * 3.5s + 1.2s) infinite both; }
.reklama__opis {
  max-width: 36rem; margin: 0.6rem 0 0; color: rgb(238 241 246 / 0.78); font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem); line-height: 1.55;
  animation: rk-wejscie-dol 1.1s .3s cubic-bezier(.2,.8,.2,1) both;
}
.reklama__akcje { display: grid; gap: 0.8rem; min-width: 17rem; animation: rk-wejscie-prawo 1s .45s cubic-bezier(.2,.8,.2,1) both; }
.reklama__telefon {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.75rem; padding: 0.6rem 1.7rem; border-radius: 999px;
  background: var(--srebro); color: #0a0d14; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); font-weight: 700;
  text-decoration: none; white-space: nowrap; box-shadow: 0 16px 44px rgb(0 0 0 / 0.6), inset 0 1px 0 #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.reklama__telefon small { font-size: 0.55em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #3b4354; }
.reklama__telefon::before { /* puls „zadzwoń” wokół głównego przycisku */
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgb(230 236 245 / 0.7);
  opacity: 0; animation: rk-puls 3s 2.2s ease-out infinite;
}
.reklama__telefon--drugi {
  min-height: 3rem; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  background: rgb(255 255 255 / 0.08); color: #eef1f6; border: 1px solid rgb(255 255 255 / 0.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none;
}
.reklama__telefon--drugi::before { content: none; }
.reklama__telefon:hover { transform: translateY(-2px); }
.reklama__podpis {
  grid-column: 1 / -1; margin: 0.5rem 0 0; color: rgb(238 241 246 / 0.5); font-size: 0.75rem; letter-spacing: 0.05em;
}
.reklama a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes rk-wejscie-dol { from { transform: translateY(26px); } to { transform: none; } }
@keyframes rk-wejscie-prawo { from { transform: translateX(34px); } to { transform: none; } }
@keyframes rk-polysk-liter { 0%, 62% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes rk-puls { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.12, 1.35); } }
@keyframes rk-zmiana { 0% { opacity: 0; transform: translateY(80%); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-80%); } }

/* ── LIPOWA „Pod Lipkami”: liście lipy w trzech planach, smugi światła, świetliki ── */
.reklama--lipowa { background: radial-gradient(ellipse 70% 120% at 82% -20%, #6d8a5c 0%, #2c4a37 30%, #13241b 62%, #0a120e 100%); }
.reklama--lipowa .promien {
  position: absolute; top: -30%; left: var(--x); width: var(--w); height: 170%;
  background: linear-gradient(180deg, rgb(240 248 220 / 0.32), rgb(240 248 220 / 0.06) 55%, transparent 80%);
  transform: rotate(24deg); transform-origin: top center; animation: rk-promien 10s var(--d) ease-in-out infinite alternate;
}
.reklama--lipowa .swietlik {
  position: absolute; left: var(--x); top: var(--y); width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%;
  background: #f4f9d8; box-shadow: 0 0 12px 3px rgb(236 246 190 / 0.6); animation: rk-swietlik var(--t) var(--d) ease-in-out infinite;
}
.reklama--lipowa .lisc { position: absolute; top: -12%; left: var(--x); width: calc(30px * var(--s)); animation: rk-lisc var(--t) var(--d) linear infinite; }
.reklama--lipowa .lisc svg { display: block; width: 100%; transform: rotate(var(--r)); animation: rk-kolys calc(var(--t) / 4) var(--d) ease-in-out infinite alternate; }
.reklama--lipowa .lisc--daleki { color: #6f8f5a; opacity: .55; }
.reklama--lipowa .lisc--bliski { color: #b7cf7d; }
.reklama--lipowa .lisc--przod { color: #d6e59a; filter: blur(3px); opacity: .8; }
@keyframes rk-promien { from { opacity: .45; transform: rotate(20deg); } to { opacity: 1; transform: rotate(28deg); } }
@keyframes rk-swietlik { 0%, 100% { opacity: .1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(10px, -14px); } }
@keyframes rk-lisc {
  from { transform: translate3d(0, 0, 0); opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; }
  to { transform: translate3d(calc(var(--k) * 140px), 620px, 0); opacity: 0; }
}
@keyframes rk-kolys { from { transform: rotate(calc(var(--r) - 35deg)) translateX(-16px); } to { transform: rotate(calc(var(--r) + 35deg)) translateX(16px); } }
.reklama--lipowa .reklama__zmienne span { color: #eef6d8; }

/* ── UNICKA: grupa zniczy w dwóch rzędach, ciepła poświata, niebo z gwiazdami i księżycem ── */
.reklama--unicka { background: radial-gradient(ellipse 60% 90% at 78% 115%, #8a4a1c 0%, #3a1d1d 35%, #160f18 65%, #0a0910 100%); }
.reklama--unicka .luna {
  position: absolute; right: 9%; top: 12%; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e8, #e9dcc0 60%, #c9b994);
  box-shadow: 0 0 60px 10px rgb(255 240 210 / 0.25); animation: rk-luna 8s ease-in-out infinite alternate;
}
.reklama--unicka .gwiazda {
  position: absolute; left: var(--x); top: var(--y); width: calc(2px * var(--s)); height: calc(2px * var(--s));
  border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: rk-migotanie var(--t) var(--d) ease-in-out infinite;
}
.reklama--unicka .znicz { position: absolute; left: var(--x); width: calc(46px * var(--h)); height: calc(80px * var(--h)); transform: translateX(-50%); }
.reklama--unicka .znicz--tyl { bottom: 13%; filter: brightness(.75); }
.reklama--unicka .znicz--przod { bottom: 2%; }
.reklama--unicka .znicz__szklo {
  position: absolute; inset: auto 0 0; height: 72%; border-radius: 22% 22% 10% 10% / 14% 14% 6% 6%;
  box-shadow: inset 0 0 18px rgb(255 160 70 / 0.75), 0 0 24px rgb(255 120 40 / 0.35);
}
.reklama--unicka .znicz--czerwony .znicz__szklo { background: linear-gradient(180deg, rgb(214 52 40 / 0.9), rgb(120 18 14 / 0.97)); }
.reklama--unicka .znicz--bialy .znicz__szklo { background: linear-gradient(180deg, rgb(245 240 232 / 0.92), rgb(180 172 160 / 0.95)); }
.reklama--unicka .znicz--bursztyn .znicz__szklo { background: linear-gradient(180deg, rgb(240 170 70 / 0.92), rgb(150 80 20 / 0.96)); }
.reklama--unicka .znicz__plomien {
  position: absolute; left: 50%; bottom: 68%; width: 30%; height: 38%; transform: translateX(-50%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 78%, #fffbe6, #ffd36b 40%, rgb(255 120 30 / 0.45) 70%, transparent 76%);
  transform-origin: 50% 100%; animation: rk-plomien var(--t) var(--d) ease-in-out infinite alternate;
}
.reklama--unicka .znicz__swiatlo {
  position: absolute; left: 50%; bottom: 30%; width: 360%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgb(255 175 80 / 0.42), transparent 62%); animation: rk-swiatlo var(--t) var(--d) ease-in-out infinite alternate;
}
@keyframes rk-luna { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes rk-migotanie { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes rk-plomien {
  0% { transform: translateX(-50%) scale(1, 1) skewX(0deg); } 30% { transform: translateX(-50%) scale(.9, 1.1) skewX(4deg); }
  65% { transform: translateX(-50%) scale(1.07, .93) skewX(-4deg); } 100% { transform: translateX(-50%) scale(.96, 1.05) skewX(2deg); }
}
@keyframes rk-swiatlo { from { opacity: .6; transform: translateX(-50%) scale(.92); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.reklama--unicka .reklama__zmienne span { animation-name: rk-zmiana-blask; color: #ffdcaa; text-shadow: 0 0 20px rgb(255 170 70 / 0.6); }
@keyframes rk-zmiana-blask { 0% { opacity: 0; transform: scale(1.08); } 4%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.96); } }

/* ── MAJDANEK: świt — słońce przy horyzoncie, snopy światła, drzewa, mgła, ptaki ── */
.reklama--majdanek { background: #0d1426; }
.reklama--majdanek .niebo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d1426 0%, #23325a 32%, #6b4f78 58%, #d98a6a 80%, #f6c48f 100%);
  animation: rk-niebo 10s ease-out both;
}
.reklama--majdanek .slonce {
  position: absolute; left: 74%; bottom: 14%; width: 9rem; height: 9rem; margin-left: -4.5rem; border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0%, #ffe3b0 38%, rgb(255 190 130 / 0.6) 55%, transparent 72%);
  box-shadow: 0 0 120px 50px rgb(255 200 150 / 0.45);
  animation: rk-wschod 9s cubic-bezier(.2,.7,.2,1) both, rk-oddech 6s 9s ease-in-out infinite alternate;
}
.reklama--majdanek .snop {
  position: absolute; left: 74%; bottom: 22%; width: 3px; height: 70%; transform-origin: bottom center;
  background: linear-gradient(0deg, rgb(255 230 190 / 0.55), transparent); transform: rotate(var(--k)) scaleX(18);
  opacity: .35; animation: rk-snop 7s var(--d) ease-in-out infinite alternate;
}
.reklama--majdanek .drzewa { position: absolute; left: 0; bottom: 0; width: 100%; height: 42%; color: #070b15; }
.reklama--majdanek .mgla {
  position: absolute; left: -50%; top: var(--y); width: 200%; height: 22%;
  background: radial-gradient(ellipse 22% 50% at 25% 50%, rgb(255 236 226 / 0.28), transparent 70%),
              radial-gradient(ellipse 20% 45% at 70% 50%, rgb(255 236 226 / 0.22), transparent 70%);
  animation: rk-mgla var(--t) var(--d) linear infinite;
}
.reklama--majdanek .ptak { position: absolute; left: -6%; top: var(--y); width: calc(34px * var(--s)); color: #141a2a; animation: rk-ptak var(--t) var(--d) linear infinite; }
.reklama--majdanek .ptak svg { display: block; width: 100%; animation: rk-skrzydla .9s ease-in-out infinite alternate; transform-origin: center; }
@keyframes rk-niebo { from { opacity: .55; } to { opacity: 1; } }
@keyframes rk-wschod { from { transform: translateY(60%) scale(.85); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes rk-oddech { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes rk-snop { from { opacity: .18; } to { opacity: .5; } }
@keyframes rk-mgla { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes rk-ptak { from { transform: translate(0, 0); } 50% { transform: translate(60vw, -18px); } to { transform: translate(115vw, 6px); } }
@keyframes rk-skrzydla { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
.reklama--majdanek .reklama__zmienne span { animation-name: rk-zmiana-bok; color: #ffe6d4; }
@keyframes rk-zmiana-bok { 0% { opacity: 0; transform: translateX(-30px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateX(30px); } }

/* Pauza poza ekranem i „ogranicz ruch” */
.reklama--pauza *, .reklama--pauza *::before, .reklama--pauza *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .reklama *, .reklama *::before, .reklama *::after { animation: none !important; }
  .reklama__zmienne span:first-child { opacity: 1; }
}

/* Tablet i telefon: kolumna; hasło duże, przyciski obok siebie lub jeden pod drugim. */
@media (max-width: 61.99rem) {
  .reklama__srodek { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-height: 0; padding: 1.75rem 0 1rem; }
  .reklama__akcje { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-width: 0; }
  .reklama__scena::after { background: linear-gradient(180deg, rgb(6 8 12 / 0.35), rgb(6 8 12 / 0.7) 70%); }
  .reklama--unicka .znicz { opacity: .55; }
  .reklama--majdanek .slonce { left: 80%; }
}
@media (max-width: 29.99rem) {
  .reklama__akcje { grid-template-columns: minmax(0, 1fr); }
  .reklama__telefon { min-height: 3.4rem; }
  .reklama__opis { display: none; }
  .reklama__zmienne { min-height: 2.8em; }
}
@media print { .reklama { display: none; } }

/* ── Pokaz prawdziwych zdjęć: przenikanie kadrów + wolne filmowe przybliżanie (Ken Burns). ── */
.reklama--zdjecia { background: #0b0e12; }
.pokaz { position: absolute; inset: 0; }
.kadr {
  position: absolute; inset: 0; opacity: 0;
  animation: rk-kadr var(--t) calc((var(--i) * var(--t) / var(--n)) - var(--t)) linear infinite;
}
.kadr:first-child { opacity: 1; }
.kadr img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--p);
  transform-origin: var(--p);
  animation: rk-zblizenie var(--t) calc((var(--i) * var(--t) / var(--n)) - var(--t)) linear infinite;
}
.reklama--zdjecia .kadr:only-child { animation: none; opacity: 1; }
.reklama--zdjecia .kadr:only-child img { animation: rk-zblizenie-jedno 30s ease-in-out infinite alternate; }
@keyframes rk-kadr { 0% { opacity: 1; } 22% { opacity: 1; } 30% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rk-zblizenie { 0% { transform: scale(1.02); } 30% { transform: scale(1.14); } 100% { transform: scale(1.02); } }
@keyframes rk-zblizenie-jedno { from { transform: scale(1.02); } to { transform: scale(1.16); } }
.reklama--zdjecia .reklama__scena::after {
  background: linear-gradient(90deg, rgb(6 8 10 / 0.86) 0%, rgb(6 8 10 / 0.62) 42%, rgb(6 8 10 / 0.25) 72%, rgb(6 8 10 / 0.35) 100%),
              linear-gradient(0deg, rgb(6 8 10 / 0.7), transparent 40%);
}
.reklama--lipowa.reklama--zdjecia .lisc { z-index: 1; }
.reklama__podpis span { color: rgb(238 241 246 / 0.38); }
@media (max-width: 61.99rem) {
  .reklama--zdjecia .reklama__scena::after { background: linear-gradient(180deg, rgb(6 8 10 / 0.55), rgb(6 8 10 / 0.82) 60%); }
}
/* Na prawdziwych zdjęciach liście tylko jako delikatny akcent: bez rozmytych z przodu, mniejsze i jaśniejsze. */
.reklama--zdjecia .lisc--przod, .reklama--zdjecia .lisc--daleki:nth-of-type(odd) { display: none; }
.reklama--zdjecia .lisc--bliski { color: #dfe8b8; opacity: .7; width: calc(22px * var(--s)); }
.reklama--zdjecia .lisc--daleki { color: #b9c98f; opacity: .45; }
.reklama--zdjecia .promien, .reklama--zdjecia .swietlik { display: none; }
.reklama--zdjecia .reklama__telefon--drugi { background: rgb(10 12 16 / 0.55); border-color: rgb(255 255 255 / 0.45); }
/* Unicka na zdjęciach: tylko gwiazdy i księżyc nad prawdziwym zdjęciem — bez rysowanych zniczy. */
.reklama--unicka.reklama--zdjecia .znicz { display: none; }
.reklama--unicka.reklama--zdjecia .gwiazda { opacity: .5; }
.reklama--unicka.reklama--zdjecia .luna { opacity: .85; }
.reklama--unicka.reklama--zdjecia .luna, .reklama--unicka.reklama--zdjecia .gwiazda { display: none; }

/* Licznik odwiedzin na żywo (stopka, wszystkie przewodniki). Puls tylko transform/opacity. */
.licznik { font-size: .85em; opacity: .9; font-variant-numeric: tabular-nums; }
.licznik[hidden] { display: none; }
.licznik small { opacity: .7; }
.licznik__kropka { position: relative; display: inline-block; width: .55em; height: .55em; margin-right: .25em; border-radius: 50%; background: #2fa84f; vertical-align: .05em; }
.licznik__kropka::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: licznik-puls 2s ease-out infinite; }
@keyframes licznik-puls { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .licznik__kropka::after { animation: none; } }