/* PLC Expert – podgląd 10 stylów (?styl=1…10). Elementy oznacza pe-style.js:
 * .ps-row wiersz, .ps-card karta (zdjęcie + tekst), .ps-h nagłówek, .ps-p akapit, .ps-img zdjęcie,
 * .ps-box ramka z punktami, .ps-li punkt listy; .ps-l / .ps-r lewa / prawa kolumna; .ps-in = już widoczny. */

@property --pa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --pr { syntax: '<length>'; inherits: false; initial-value: 0px; }

.pe-styl { --e: cubic-bezier(.2, .75, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
/* Krótsze opóźnienia (2026-11-07, „animacje się lagują”): najwyżej 6 kroków po 50 ms zamiast 10 po 90 ms. */
.pe-styl .ps { --d: calc(min(var(--i, 0), 6) * 50ms); }

/* Treść pokazuje się dopiero, gdy skrypt ustawi stany początkowe (awaryjnie po 1 s). */
.pe-styl .entry-content { visibility: hidden; animation: ps-show 0s 1s forwards; overflow-x: clip; }
.pe-styl.ps-ready .entry-content { visibility: visible; animation: none; }
@keyframes ps-show { to { visibility: visible; } }

/* Wiersz zdjęcie + tekst bez ramki z punktami (np. „Prezes zarządu”) też jest kartą. */
.pe-styl .entry-content .kt-row-column-wrap.ps-card:not(:has(.pe-box)) { box-sizing: border-box; max-width: min(1200px, calc(100% - 32px)) !important; margin: 36px auto !important; padding: 32px !important; align-items: center; }

@media (prefers-reduced-motion: reduce) {
	.pe-styl .ps, .pe-styl .ps-card, .pe-styl .ps-row, .pe-styl .ps-c, .pe-styl .ps-wi { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; translate: none !important; }
}

/* Pasek wyboru stylu */
.ps-switch { position: fixed; left: 50%; bottom: 16px; z-index: 99999; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px; transform: translateX(-50%); background: #15191f; color: #fff; border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font: 500 14px/1 Inter, system-ui, sans-serif; box-sizing: border-box; }
.ps-switch a { color: #fff !important; text-decoration: none !important; }
.ps-switch__arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 18px; }
.ps-switch__arrow:hover { background: #e77a08; }
.ps-switch__name { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-switch__name b { color: #f5a04a; margin-right: 4px; }
.ps-switch__btn { padding: 11px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); white-space: nowrap; }
.ps-switch__btn:hover { background: rgba(255, 255, 255, .22); }
@media (max-width: 600px) {
	.ps-switch { font-size: 13px; gap: 4px; }
	.ps-switch__btn { padding: 10px; }
	.ps-switch__btn:last-child { display: none; }
}


/* =====================================================================
   1. Wjazd z boków – karty wjeżdżają na zmianę z lewej i prawej,
      w środku tekst z przeciwnych stron, punkty jeden po drugim.
   ===================================================================== */
.pe-styl-1 .entry-content .kt-row-column-wrap.ps-card { border: 0 !important; border-left: 8px solid #e77a08 !important; border-radius: 6px !important; box-shadow: 0 24px 60px rgba(21, 25, 31, .14) !important; background: #fff !important; }
.pe-styl-1 .pe-box .pe-box__label { background: none; color: #e77a08; padding: 0; letter-spacing: .16em; }
.pe-styl-1 .pe-box .pe-box__label::before { content: ""; display: inline-block; width: 28px; height: 3px; margin: 0 10px 3px 0; background: #e77a08; vertical-align: middle; }
.pe-styl-1 .pe-box .pe-box__list li { border-top: 0; border-bottom: 0 !important; }

.pe-styl-1 .ps-card, .pe-styl-1 .ps { transition: opacity .8s var(--e), transform 1s var(--e); }
.pe-styl-1 .ps { transition-delay: var(--d); }
.pe-styl-1 .ps-card:not(.ps-in) { opacity: 0; transform: translateX(calc(var(--side) * 220px)); }
.pe-styl-1 .ps:not(.ps-in) { opacity: 0; transform: translateX(-120px); }
.pe-styl-1 .ps-r:not(.ps-in) { transform: translateX(120px); }
.pe-styl-1 .ps-li:not(.ps-in) { transform: translateX(70px); }
.pe-styl-1 .ps-banner h1.ps { transition: opacity 1s, transform 1.2s var(--e), letter-spacing 1.4s var(--e); }
.pe-styl-1 .ps-banner h1.ps:not(.ps-in) { transform: translateX(-60vw); letter-spacing: .6em; }


/* =====================================================================
   2. Z góry – wszystko spada z góry i lekko odbija; kanciaste karty z grubym paskiem.
   ===================================================================== */
.pe-styl-2 .entry-content .kt-row-column-wrap.ps-card { border: 0 !important; border-top: 12px solid #e77a08 !important; border-radius: 0 !important; background: #f7f7f5 !important; box-shadow: 0 30px 0 -18px rgba(231, 122, 8, .25), 0 18px 40px rgba(0, 0, 0, .08) !important; }
.pe-styl-2 .pe-box .pe-box__label { background: #15191f; }
.pe-styl-2 .pe-box .pe-box__title { text-transform: uppercase; letter-spacing: .02em; }
.pe-styl-2 .pe-box .pe-box__list li { border-color: #d9d9d4; }

.pe-styl-2 .ps-card, .pe-styl-2 .ps { transition: opacity .5s ease, transform 1.1s var(--spring); }
.pe-styl-2 .ps { transition-delay: var(--d); }
.pe-styl-2 .ps-card:not(.ps-in) { opacity: 0; transform: translateY(-160px); }
.pe-styl-2 .ps:not(.ps-in) { opacity: 0; transform: translateY(-90px); }
.pe-styl-2 .ps-li:not(.ps-in) { transform: translateY(-50px) rotate(-4deg); }
.pe-styl-2 .ps-img:not(.ps-in) { transform: translateY(-140px) rotate(3deg); }
.pe-styl-2 .ps-banner h1.ps:not(.ps-in) { transform: translateY(-200px); }


/* =====================================================================
   3. Spirala – ramki, punkty i zdjęcia nadlatują po spirali i potem delikatnie unoszą się.
   ===================================================================== */
.pe-styl-3 .entry-content .kt-row-column-wrap.ps-card { overflow: visible !important; border: 0 !important; border-radius: 34px !important; background: linear-gradient(150deg, #fff 40%, #fff3e6) !important; box-shadow: 0 30px 70px -20px rgba(231, 122, 8, .35) !important; }
.pe-styl-3 .ps-card .wp-block-kadence-image, .pe-styl-3 .ps-card .wp-block-kadence-image img { border-radius: 34px; overflow: hidden; }
.pe-styl-3 .pe-box .pe-box__label { border-radius: 999px !important; padding: 7px 16px; }
.pe-styl-3 .pe-box .pe-box__list { display: flex; flex-wrap: wrap; gap: 10px; }
.pe-styl-3 .pe-box .pe-box__list li { padding: 10px 18px 10px 42px; border: 0 !important; border-radius: 999px; background: #fff; box-shadow: 0 8px 22px rgba(231, 122, 8, .18); font-size: 16px; }
.pe-styl-3 .pe-box .pe-box__list li::before { left: 14px; width: 20px; height: 20px; margin-top: -10px; }

.pe-styl-3 .ps-box, .pe-styl-3 .ps-li, .pe-styl-3 .ps-img, .pe-styl-3 .ps-h {
	transform: rotate(var(--pa)) translateX(var(--pr)) rotate(calc(var(--pa) * -1));
	transition: --pa 1.8s var(--e), --pr 1.8s var(--e), opacity 1s ease, scale 1.8s var(--e);
	transition-delay: var(--d);
}
.pe-styl-3 .ps:not(.ps-in) { opacity: 0; }
.pe-styl-3 :is(.ps-box, .ps-li, .ps-img, .ps-h):not(.ps-in) { --pa: var(--pa0); --pr: var(--pr0); scale: .25; }
.pe-styl-3 .ps-p { transition: opacity 1s ease, filter 1s ease; transition-delay: calc(var(--d) + .4s); }
.pe-styl-3 .ps-p:not(.ps-in) { filter: blur(8px); }
.pe-styl-3 .ps-li.ps-in, .pe-styl-3 .ps-img.ps-in { animation: ps-bob 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes ps-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }


/* =====================================================================
   4. Szkło – ciemne tło z wolno płynącymi poświatami, karty ze szkła, ostrość „wyostrza się”.
   ===================================================================== */
.pe-styl-4 .entry-content { position: relative; isolation: isolate; background: #0f1217; padding-bottom: 60px; }
.pe-styl-4 .entry-content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(40% 30% at 15% 20%, rgba(231, 122, 8, .35), transparent 70%), radial-gradient(35% 30% at 85% 55%, rgba(59, 130, 246, .25), transparent 70%), radial-gradient(30% 25% at 30% 90%, rgba(231, 122, 8, .22), transparent 70%);
	animation: ps-drift 18s ease-in-out infinite alternate; }
@keyframes ps-drift { to { transform: translate(3%, -4%) scale(1.08); } }
.pe-styl-4 .entry-content :is(h2, h3, h4, p, li, a, span) { color: #e9edf3 !important; }
.pe-styl-4 .entry-content .rank-math-breadcrumb a { color: #f5a04a !important; }
.pe-styl-4 .entry-content .kt-row-column-wrap.ps-card { border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 24px !important; background: rgba(255, 255, 255, .06) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12) !important; transition: box-shadow .4s, border-color .4s; }
.pe-styl-4 .entry-content .kt-row-column-wrap.ps-card:hover { border-color: rgba(245, 160, 74, .6) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 40px rgba(231, 122, 8, .25) !important; }
.pe-styl-4 .ps-card .kt-inside-inner-col { background: transparent !important; }
.pe-styl-4 .pe-box .pe-box__label { background: rgba(231, 122, 8, .2); color: #f5a04a !important; border: 1px solid rgba(231, 122, 8, .5); border-radius: 999px !important; }
.pe-styl-4 .pe-box .pe-box__list li { border-color: rgba(255, 255, 255, .1) !important; }
.pe-styl-4 .pe-box .pe-box__note { color: #f5a04a !important; }

.pe-styl-4 .ps-card, .pe-styl-4 .ps { transition: opacity 1.1s ease, transform 1.2s var(--e), filter 1.2s ease; }
.pe-styl-4 .ps { transition-delay: var(--d); }
.pe-styl-4 .ps-card:not(.ps-in) { opacity: 0; transform: translateY(60px) scale(.96); filter: blur(10px); }
.pe-styl-4 .ps:not(.ps-in) { opacity: 0; transform: translateY(30px); filter: blur(12px); }


/* =====================================================================
   5. Neo-brutalizm – grube czarne ramki, twardy pomarańczowy cień, elementy „wyskakują”.
   ===================================================================== */
.pe-styl-5 .entry-content .kt-row-column-wrap.ps-card { border: 3px solid #111 !important; border-radius: 0 !important; background: #fffaf0 !important; box-shadow: 12px 12px 0 #e77a08 !important; transition: transform .25s, box-shadow .25s, opacity .3s !important; }
.pe-styl-5 .entry-content .kt-row-column-wrap.ps-card.ps-in:hover { transform: translate(-5px, -5px); box-shadow: 18px 18px 0 #e77a08 !important; }
.pe-styl-5 .ps-card .kt-inside-inner-col { background: transparent !important; }
.pe-styl-5 .ps-card .wp-block-kadence-column:has(.wp-block-kadence-image) { border-right: 3px solid #111; }
.pe-styl-5 .entry-content :is(h2, h3, h4) { text-transform: uppercase; font-weight: 900 !important; letter-spacing: -.01em; }
.pe-styl-5 .pe-box .pe-box__label { background: #111; border-radius: 0 !important; transform: rotate(-2deg); }
.pe-styl-5 .pe-box .pe-box__list li { border: 0 !important; padding-left: 30px; }
.pe-styl-5 .pe-box .pe-box__list li::before { -webkit-mask: none; mask: none; width: 14px; height: 14px; margin-top: -7px; background: #111; box-shadow: 3px 3px 0 #e77a08; }
.pe-styl-5 .pe-box .pe-box__note { display: inline-block; padding: 8px 12px; background: #e77a08; color: #111 !important; border: 2px solid #111; }

.pe-styl-5 .ps-card:not(.ps-in) { opacity: 0; transform: scale(.85) rotate(calc(var(--side) * 3deg)); }
.pe-styl-5 .ps-card.ps-in { animation: ps-slam .6s var(--spring) both; }
@keyframes ps-slam { from { opacity: 0; transform: scale(.85) rotate(calc(var(--side) * 3deg)); } to { opacity: 1; transform: none; } }
.pe-styl-5 .ps { transition: opacity .2s, transform .55s cubic-bezier(.68, -0.6, .32, 1.6); transition-delay: calc(var(--d) + .2s); }
.pe-styl-5 .ps:not(.ps-in) { opacity: 0; transform: scale(.4) rotate(-8deg); }
.pe-styl-5 .ps-r:not(.ps-in) { transform: scale(.4) rotate(8deg); }
.pe-styl-5 .ps-h:not(.ps-in) { transform: scale(1.8); }


/* =====================================================================
   6. Obrót 3D – elementy obracają się w przestrzeni jak kartki; karta przechyla się za myszą.
   ===================================================================== */
.pe-styl-6 .entry-content .kt-row-column-wrap.ps-card { position: relative; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 20px 50px rgba(21, 25, 31, .12) !important; transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .3s ease-out, opacity .9s ease !important; }
.pe-styl-6 .entry-content .kt-row-column-wrap.ps-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 45%); opacity: 0; transition: opacity .3s; }
.pe-styl-6 .entry-content .kt-row-column-wrap.ps-card:hover::after { opacity: 1; }
.pe-styl-6 .pe-box .pe-box__label { background: linear-gradient(90deg, #e77a08, #f5a04a); border-radius: 999px !important; }
.pe-styl-6 .pe-box .pe-box__list li { margin: 0 0 8px !important; border: 0 !important; border-radius: 12px; background: #f6f7f9; padding-left: 40px; box-shadow: 0 3px 0 #e6e8ec; }
.pe-styl-6 .pe-box .pe-box__list li::before { left: 10px; }

.pe-styl-6 .ps-card:not(.ps-in) { opacity: 0; }
.pe-styl-6 .ps { transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d); backface-visibility: hidden; }
.pe-styl-6 .ps:not(.ps-in) { opacity: 0; transform: perspective(900px) rotateY(80deg); transform-origin: left center; }
.pe-styl-6 .ps-r:not(.ps-in) { transform: perspective(900px) rotateY(-80deg); transform-origin: right center; }
.pe-styl-6 .ps-h:not(.ps-in) { transform: perspective(700px) rotateX(-90deg); transform-origin: center top; }
.pe-styl-6 .ps-li:not(.ps-in) { transform: perspective(600px) rotateX(90deg); transform-origin: center bottom; }
.pe-styl-6 .ps-img:not(.ps-in) { transform: perspective(1000px) rotateY(-35deg) rotateX(18deg) scale(.8); transform-origin: center; }


/* =====================================================================
   7. Technika – tło jak rysunek techniczny, narożniki-celowniki, nagłówki pisane na żywo.
   ===================================================================== */
.pe-styl-7 .entry-content { background-color: #f5f8fc; background-image: linear-gradient(rgba(37, 99, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px); background-size: 28px 28px; padding-bottom: 60px; }
.pe-styl-7 .entry-content .kt-row-column-wrap.ps-card { position: relative; overflow: visible !important; border: 1px solid #c3cfdf !important; border-radius: 2px !important; background: #fff !important; box-shadow: none !important; }
.pe-styl-7 .ps-card::before, .pe-styl-7 .ps-card::after { content: ""; position: absolute; width: 0; height: 0; border: 0 solid #e77a08; transition: width .6s .3s var(--e), height .6s .3s var(--e); z-index: 2; }
.pe-styl-7 .ps-card::before { top: -6px; left: -6px; border-width: 3px 0 0 3px; }
.pe-styl-7 .ps-card::after { right: -6px; bottom: -6px; border-width: 0 3px 3px 0; }
.pe-styl-7 .ps-card.ps-in::before, .pe-styl-7 .ps-card.ps-in::after { width: 34px; height: 34px; }
.pe-styl-7 .pe-box .pe-box__label { background: none; color: #2563eb; padding: 0; font-family: Consolas, "Courier New", monospace; letter-spacing: .08em; }
.pe-styl-7 .pe-box .pe-box__label::before { content: "// "; color: #e77a08; }
.pe-styl-7 .pe-box .pe-box__list li { border-style: dashed !important; border-color: #c3cfdf !important; font-weight: 500; }
.pe-styl-7 .pe-box .pe-box__list li::before { -webkit-mask: none; mask: none; content: ">"; background: none; color: #e77a08; font: 700 18px/22px Consolas, monospace; }
.pe-styl-7 .pe-box .pe-box__note { font-family: Consolas, "Courier New", monospace; font-size: 15px; }

.pe-styl-7 .ps-card:not(.ps-in) { opacity: 0; }
.pe-styl-7 .ps-card { transition: opacity .4s; }
.pe-styl-7 .ps-h .ps-word { white-space: nowrap; }
.pe-styl-7 .ps-h:not(.ps-in) .ps-c { opacity: 0; }
.pe-styl-7 .ps-h.ps-in .ps-c { animation: ps-type 0s both; animation-delay: calc(var(--k) * 32ms); }
@keyframes ps-type { from { opacity: 0; } to { opacity: 1; } }
.pe-styl-7 .ps-h::after { content: "▌"; margin-left: 2px; color: #e77a08; font-weight: 400; opacity: 0; }
.pe-styl-7 .ps-h.ps-in::after { animation: ps-caret .8s steps(1) calc(var(--len, 0) * 32ms) 4 both; }
@keyframes ps-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
.pe-styl-7 .ps-p, .pe-styl-7 .ps-li { transition: opacity .3s, clip-path .9s steps(12); transition-delay: calc(var(--d) + .3s); }
.pe-styl-7 :is(.ps-p, .ps-li):not(.ps-in) { opacity: 0; clip-path: inset(0 100% 0 0); }
.pe-styl-7 :is(.ps-p, .ps-li).ps-in { clip-path: inset(0 0 0 0); }
.pe-styl-7 .ps-img { position: relative; transition: clip-path 1.3s var(--e); }
.pe-styl-7 .ps-img:not(.ps-in) { clip-path: inset(0 0 100% 0); }
.pe-styl-7 .ps-img.ps-in { clip-path: inset(0 0 0 0); }
.pe-styl-7 .ps-img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: #e77a08; box-shadow: 0 0 18px #e77a08; opacity: 0; }
.pe-styl-7 .ps-img.ps-in::after { animation: ps-scan 1.3s var(--e) both; }
@keyframes ps-scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }


/* =====================================================================
   8. Kurtyna – pomarańczowa kurtyna odsłania zdjęcia, tekst wyłania się spod krawędzi,
      zdjęcia przesuwają się wolniej niż strona.
   ===================================================================== */
.pe-styl-8 .entry-content .kt-row-column-wrap.ps-card { border: 1px solid #e2e6ec !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
.pe-styl-8 .pe-box .pe-box__label { background: none; color: #e77a08; padding: 0 0 6px; border-bottom: 2px solid #e77a08; border-radius: 0 !important; }
.pe-styl-8 .pe-box .pe-box__title { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.02em; }
.pe-styl-8 .ps-img { position: relative; overflow: hidden; }
.pe-styl-8 .ps-img img { transform: translateY(var(--py, 0px)) scale(1.18) !important; transition: none !important; }
.pe-styl-8 .ps-img::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #e77a08; transform-origin: right center; transition: transform 1.1s cubic-bezier(.77, 0, .18, 1); transition-delay: var(--d); }
.pe-styl-8 .ps-img.ps-in::after { transform: scaleX(0); }

.pe-styl-8 :is(.ps-h, .ps-p, .ps-li) { transition: clip-path 1s var(--e), transform 1s var(--e), opacity .6s; transition-delay: var(--d); }
.pe-styl-8 :is(.ps-h, .ps-p, .ps-li):not(.ps-in) { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(40px); }
.pe-styl-8 :is(.ps-h, .ps-p, .ps-li).ps-in { clip-path: inset(0 0 -10% 0); }
.pe-styl-8 .ps-box { transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1); transition-delay: var(--d); }
.pe-styl-8 .ps-box:not(.ps-in) { clip-path: inset(0 100% 0 0); }
.pe-styl-8 .ps-box.ps-in { clip-path: inset(0 0 0 0); }


/* =====================================================================
   9. Pływające karty – miękkie, zaokrąglone karty cały czas lekko unoszą się w powietrzu.
   ===================================================================== */
.pe-styl-9 .entry-content { position: relative; isolation: isolate; padding-bottom: 60px; }
.pe-styl-9 .entry-content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(35% 25% at 10% 40%, #ffe9d4, transparent 70%), radial-gradient(30% 25% at 90% 70%, #ffe1c2, transparent 70%); }
.pe-styl-9 .entry-content .kt-row-column-wrap.ps-card { border: 0 !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 40px 80px -30px rgba(231, 122, 8, .45), 0 10px 25px rgba(21, 25, 31, .06) !important; }
.pe-styl-9 .ps-card .wp-block-kadence-image img { border-radius: 22px; }
.pe-styl-9 .ps-card .wp-block-kadence-column:has(.wp-block-kadence-image) > .kt-inside-inner-col { padding: 14px !important; }
.pe-styl-9 .pe-box .pe-box__label { border-radius: 999px !important; padding: 7px 16px; box-shadow: 0 8px 18px rgba(231, 122, 8, .35); }
.pe-styl-9 .pe-box .pe-box__list li { border: 0 !important; margin-bottom: 6px !important; border-radius: 14px; background: #fff7ef; }
.pe-styl-9 .pe-box .pe-box__list li::before { left: 10px; }
.pe-styl-9 .pe-box .pe-box__list li { padding-left: 42px; }

.pe-styl-9 .ps-card { transition: opacity 1s ease, transform 1.3s var(--spring), box-shadow .4s; }
.pe-styl-9 .ps-card:not(.ps-in) { opacity: 0; transform: translateY(180px) scale(.7) rotate(calc(var(--side) * 6deg)); }
.pe-styl-9 .ps-card.ps-in { animation: ps-float 7s ease-in-out 1.3s infinite; }
.pe-styl-9 .entry-content .kt-row-column-wrap.ps-card:hover { box-shadow: 0 50px 90px -30px rgba(231, 122, 8, .6), 0 10px 25px rgba(21, 25, 31, .06) !important; }
@keyframes ps-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.pe-styl-9 .ps-li { transition: opacity .5s, transform .8s var(--spring); transition-delay: calc(var(--d) + .5s); }
.pe-styl-9 .ps-li:not(.ps-in) { opacity: 0; transform: scale(0) rotate(var(--rot)); }
.pe-styl-9 .ps-li.ps-in { animation: ps-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.pe-styl-9 :is(.ps-h, .ps-p):not(.ps-banner *) { transition: opacity .8s, transform .9s var(--e); transition-delay: calc(var(--d) + .3s); }
.pe-styl-9 :is(.ps-h, .ps-p):not(.ps-banner *):not(.ps-in) { opacity: 0; transform: translateY(24px); }
.pe-styl-9 .ps-banner h1.ps { transition: transform 1.2s var(--spring), opacity .8s; }
.pe-styl-9 .ps-banner h1.ps:not(.ps-in) { opacity: 0; transform: scale(.3); }


/* =====================================================================
   10. Szwajcarski – WYBRANY dla całego serwisu. Słowa nagłówków wjeżdżają z dołu, zdjęcia
       nabierają koloru, płaskie karty z liniami. Duże numery sekcji i rysujące się linie
       tylko na stronach z produktami (.ps-numery, atrybut data-ps-n z pe-style.js);
       duże numery 01, 02… usunięte na prośbę (nie zgadzały się z kodami stanowisk) – zostaje linia.
   ===================================================================== */
/* Wyższa szczegółowość niż karty katalogu (.pe-katalog … padding: 0 !important). */
.pe-styl-10.ps-numery .entry-content > .kb-row-layout-wrap.ps-row[data-ps-n] { position: relative; padding-top: 40px !important; }
.pe-styl-10 .ps-row[data-ps-n]::after { content: ""; position: absolute; top: 0; left: max(16px, calc(50% - 600px)); right: max(16px, calc(50% - 600px)); height: 2px; background: #15191f; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--e); }
.pe-styl-10 .ps-row[data-ps-n].ps-in::after { transform: scaleX(1); }
.pe-styl-10 .entry-content .kt-row-column-wrap.ps-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pe-styl-10 .ps-card .kt-inside-inner-col { background: transparent !important; }
.pe-styl-10 .entry-content :is(h2, h3) { font-weight: 800 !important; letter-spacing: -.03em; }
.pe-styl-10 .pe-box .pe-box__label { background: none; color: #e77a08; padding: 0; letter-spacing: .25em; }
.pe-styl-10 .pe-box .pe-box__title { font-size: clamp(28px, 3vw, 40px); }
.pe-styl-10 .pe-box .pe-box__list li { border-color: #15191f !important; font-weight: 500; }
/* Numerowane punkty tylko na stronach z produktami (tam, gdzie numery sekcji). */
.pe-styl-10.ps-numery .pe-box .pe-box__list { counter-reset: ps; }
.pe-styl-10.ps-numery .pe-box .pe-box__list li { counter-increment: ps; padding-left: 48px; }
.pe-styl-10.ps-numery .pe-box .pe-box__list li::before { -webkit-mask: none; mask: none; content: counter(ps, decimal-leading-zero); background: none; width: auto; height: auto; margin-top: -.7em; color: #e77a08; font: 800 15px/1.4 Inter, sans-serif; }

.pe-styl-10 .ps-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
/* Płynniej (2026-11-07): krótsze czasy i opóźnienia; zdjęcia bez animowanego filtra (szarość przeliczana
   w każdej klatce na dużych zdjęciach zacinała przewijanie) – tylko lekkie przybliżenie i pojawienie się. */
.pe-styl-10 .ps-wi { display: inline-block; transition: transform .6s var(--e); transition-delay: calc(min(var(--k), 8) * 40ms); }
.pe-styl-10 .ps-h:not(.ps-in) .ps-wi { transform: translateY(110%); }
.pe-styl-10 :is(.ps-p, .ps-li) { transition: opacity .5s, transform .6s var(--e); transition-delay: calc(var(--d) + .1s); }
.pe-styl-10 :is(.ps-p, .ps-li):not(.ps-in) { opacity: 0; transform: translateY(16px); }
.pe-styl-10 .ps-img img { transition: opacity .6s ease, transform .9s var(--e) !important; }
.pe-styl-10 .ps-img:not(.ps-in) img { opacity: .35; transform: scale(1.06); }