/* KONCEPTY HERO (18.10.2026, inc/wow.php ah_wow_hero_a/b, ?wow=1&hero=a|b). Ladowany tylko na glownej z parametrem hero. */

/* ===== A „Kolor, który się zmienia” (wzorzec: strony produktowe Apple - wideo produktu + ogromna typografia). Domyslne hero wariantu wow (18.10).
   Film gra sam od wczytania (petla, bez dzwieku); napis CHAMELEON w kolorze aktualnej klatki (plynne przejscie przez @property). ===== */
@property --ah-k1 { syntax: '<color>'; inherits: true; initial-value: #ff9f72; }
@property --ah-k2 { syntax: '<color>'; inherits: true; initial-value: #c88cff; }
.ah-ha { position: relative; background: #0b0b0b; --ah-k1: #ff9f72; --ah-k2: #c88cff; transition: --ah-k1 .6s linear, --ah-k2 .6s linear; }
.ah-ha__lep { position: relative; height: calc(100vh - 84px); height: calc(100svh - 84px); min-height: 620px; max-height: 1000px; overflow: hidden; }
.ah-ha__tlo { position: absolute; inset: -40px; background: var(--ah-poster) center / cover no-repeat; filter: blur(30px) brightness(.45) saturate(1.2); }
.ah-ha__v { position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 9 / 16; transform: translateX(-50%); object-fit: cover; }
.ah-ha__cien { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .5) 100%), linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .8) 56%, rgba(0, 0, 0, .95) 100%); }
.ah-ha__tx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; justify-items: center; text-align: center; padding: 0 24px 104px; } /* zapas na baner cookies (73 px) - stały, bez skoku */
.ah-ha__wielki { margin: 0 0 6px; font: 700 clamp(64px, 11vw, 190px)/.88 var(--p); letter-spacing: -.04em; text-transform: uppercase;
	background: linear-gradient(100deg, var(--ah-k1), var(--ah-k2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
.ah-ha__h { max-width: 22ch; font: 700 clamp(28px, 2.9vw, 44px)/1.15 var(--p); letter-spacing: -.5px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.ah-ha__zm { margin-top: 10px; max-width: 46ch; font: 400 18px/1.5 var(--l); color: #e6e6e6; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.ah-ha__zm strong { color: #fff; }
.ah-ha__akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 20px; }
.ah-ha__link { display: inline-flex; align-items: center; min-height: 48px; color: #fff; font: 600 17px/1.2 var(--p); text-decoration: none; border-bottom: 2px solid var(--pom); }
.ah-ha__link:hover { color: var(--pom); }
.ah-ha__pp { right: 12px; bottom: 12px; }
.ah-ha__pp[hidden] { display: none; }
.ah-ha__pp .ah-ha__ip { display: none; }
.ah-ha.is-gra .ah-ha__pp .ah-ha__ip { display: inline; }
.ah-ha.is-gra .ah-ha__pp .ah-ha__ig { display: none; }
.ah-ha.is-blok .ah-ha__pp { top: 36%; }
@media (max-width: 899px) {
	.ah-ha__lep { height: calc(100svh - 64px); min-height: 560px; }
	.ah-ha__v { left: 0; width: 100%; transform: none; aspect-ratio: auto; }
	.ah-ha__tlo { display: none; }
	.ah-ha__tx { padding: 110px 16px 28px; background: linear-gradient(to bottom, rgba(11, 11, 11, 0) 0, rgba(11, 11, 11, .82) 100px, rgba(11, 11, 11, .92) 100%); }
	.ah-ha__wielki { font-size: 13.2vw; letter-spacing: -.03em; }
	.ah-ha__h { font-size: clamp(22px, 6vw, 30px); max-width: 26ch; }
	.ah-ha__zm { font-size: 16px; }
	.ah-ha__akcje { gap: 6px 20px; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ah-ha { transition: none; } }

/* ===== B „Sciana filmow” (wzorzec: siatka profilu TikToka / mozaika wideo kampanii modowych) ===== */
.ah-hb { position: relative; height: calc(100vh - 84px); height: calc(100svh - 84px); min-height: 620px; overflow: hidden; background: #000; }
.ah-hb__sciana { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ah-hb__kol { overflow: hidden; }
.ah-hb__tasma { display: grid; gap: 6px; animation: ah-hb-gora 90s linear infinite; will-change: transform; }
.ah-hb__kol--2 .ah-hb__tasma, .ah-hb__kol--4 .ah-hb__tasma { animation-name: ah-hb-dol; animation-duration: 110s; }
.ah-hb__kol--3 .ah-hb__tasma { animation-duration: 100s; }
.ah-hb__kol--5 .ah-hb__tasma { animation-duration: 120s; }
@keyframes ah-hb-gora { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 3px)); } }
@keyframes ah-hb-dol { from { transform: translateY(calc(-50% - 3px)); } to { transform: translateY(0); } }
.ah-hb__kafel { aspect-ratio: 9 / 16; overflow: hidden; background: #111; }
.ah-hb__kafel img, .ah-hb__kafel .ah-wv { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.ah-hb__kafel img { filter: brightness(.8); }
.ah-hb__pas { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(11, 11, 11, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ah-hb__pas-in { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px 40px; }
.ah-hb__h { font: 700 clamp(28px, 3.2vw, 44px)/1.12 var(--p); letter-spacing: -.5px; color: #fff; }
.ah-hb__liczba { display: grid; justify-items: start; color: #fff; }
.ah-hb__liczba b { font: 700 clamp(44px, 5vw, 72px)/.95 var(--p); letter-spacing: -2px; color: var(--pom); }
.ah-hb__liczba span { margin-top: 4px; max-width: 16ch; font: 600 15px/1.3 var(--l); color: #e6e6e6; }
.ah-hb__stop { position: absolute; right: 12px; bottom: -44px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 13px/1 var(--l); cursor: pointer; }
.ah-hb__stop:focus-visible { outline: 2px solid var(--pom); outline-offset: 2px; }
.ah-hb.is-stop .ah-hb__tasma { animation-play-state: paused; }
@media (max-width: 999px) { .ah-hb__pas-in { grid-template-columns: minmax(0, 1fr) auto; } .ah-hb__pas-in .ah-btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 759px) {
	.ah-hb { height: calc(100svh - 64px); min-height: 560px; }
	.ah-hb__sciana { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
	.ah-hb__kol--3, .ah-hb__kol--4, .ah-hb__kol--5 { display: none; }
	.ah-hb__tasma { gap: 4px; animation-duration: 70s; }
	.ah-hb__kol--2 .ah-hb__tasma { animation-duration: 85s; }
	.ah-hb__pas { top: auto; bottom: 0; transform: none; background: linear-gradient(to bottom, rgba(11, 11, 11, .78), rgba(11, 11, 11, .94)); }
	.ah-hb__pas-in { width: calc(100% - 32px); padding: 22px 0 24px; grid-template-columns: 1fr; gap: 14px; }
	.ah-hb__h { font-size: 26px; min-height: 2.24em; }
	.ah-hb__liczba { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 12px; }
	.ah-hb__liczba b { font-size: 46px; }
	.ah-hb__liczba span { margin: 0 0 4px; }
	.ah-hb__pas-in .ah-btn { justify-self: stretch; }
	.ah-hb__stop { top: -46px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .ah-hb__tasma { animation: none; } .ah-hb__stop { display: none; } }
/* bez skoku przy podmianie fontu: tytul i zdanie maja zarezerwowane 2 linie (blok tekstu jest przyklejony do dolu) */
.ah-ha__h { min-height: 2.3em; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 900px) { .ah-ha__zm { min-height: 3em; } }
@media (min-width: 600px) and (max-width: 899px) { .ah-ha__tx { padding-bottom: 140px; } .ah-ha__zm { min-height: 4.5em; } } /* tablet: staly zapas na baner (107 px) */
/* 19.10 „Dobierz folię” w hero A: na telefonie trzy akcje jedna pod druga - zwarte odstepy (cel dotyku linkow 44 px) */
@media (max-width: 599px) { .ah-ha__akcje { gap: 0 20px; } .ah-ha__akcje .ah-ha__link { min-height: 44px; } }
/* waskie telefony (360): link „Dobierz folię…” nie wchodzi pod przycisk pauzy w prawym dolnym rogu */
@media (max-width: 599px) { .ah-ha__pp { right: 4px; bottom: 4px; } }
@media (max-width: 380px) { .ah-ha__akcje .ah-ha__link { font-size: 16px; } }