/* =========================================================
   Alex Paciorkiewicz — motyw (poziomy scroll, dark + gold)
   ========================================================= */

:root {
	/* Wysokość headera = padding (30+30) + wysokość linii menu. Używana do
	   odsunięcia treści sekcji od górnego paska. */
	--ap-header-h: 76px;
	--ap-bg: #0c0e0c;
	--ap-gold: #e0a526;
	--ap-gold-soft: rgba(224, 165, 38, 0.85);
	--ap-white: #ffffff;
	--ap-muted: rgba(255, 255, 255, 0.58);
	--ap-dark: #14160f;
	--ap-card-bg: rgba(10, 12, 8, 0.55);
	--ap-card-border: rgba(224, 165, 38, 0.35);
	--ap-content-max: 1280px;
	--ap-ease: cubic-bezier(0.7, 0, 0.2, 1);
	--ap-duration: 800ms;
	--ap-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--ap-font);
	color: var(--ap-white);
	background: var(--ap-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/* ---------- Typografia wspólna ---------- */
.ap-title-white {
	color: var(--ap-white);
	-webkit-text-fill-color: var(--ap-white);
}

.ap-title-gold {
	color: var(--ap-gold);
	-webkit-text-fill-color: var(--ap-gold);
}

/* Płaski kolor (bez gradientu) + czarny cień dla czytelności na tle. */
.ap-hero__title,
.ap-cta__title,
.ap-section-head__title,
.ap-about__title,
.ap-default__title,
.ap-title-white,
.ap-title-gold {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ap-overline {
	margin: 0 0 1rem;
	color: var(--ap-gold);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.45em;
	text-transform: uppercase;
}

.ap-rule {
	display: block;
	width: 64px;
	height: 3px;
	margin: 1.4rem 0;
	background: var(--ap-gold);
}

.ap-rule--center {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Dostępność ---------- */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.ap-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: #fff;
	color: #000;
}

/* ---------- Header / menu ---------- */
.ap-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px clamp(20px, 4vw, 64px);
	background: rgba(8, 10, 8, 0.55);
	border-bottom: 1px solid rgba(224, 165, 38, 0.22);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Pasek admina WP spycha stronę — przesuń też nasz stały pasek (AP + X + muzyka),
   żeby nie chował się pod paskiem admina. Po „Ukryj pasek admina" wraca na 0. */
.admin-bar .ap-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ap-site-header {
		top: 46px;
	}
}

html.ap-adminbar-hidden .ap-site-header {
	top: 0;
}

.ap-site-header a,
.ap-site-header .ap-menu,
.ap-site-header .ap-nav-toggle {
	pointer-events: auto;
}

/* Hamburger (ukryty na desktopie) */
.ap-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.ap-nav-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto;
	background: #fff;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.ap-nav-open .ap-nav-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ap-nav-open .ap-nav-toggle span:nth-child(2) {
	opacity: 0;
}

.ap-nav-open .ap-nav-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.ap-menu {
	display: flex;
	gap: clamp(18px, 2.4vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-menu a {
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ap-muted);
	transition: color 0.2s ease;
}

.ap-menu a:hover,
.ap-menu a.is-active,
.ap-menu .current-menu-item > a {
	color: var(--ap-gold);
}

/* Marka „AP" w pasku — domyślnie ukryta na desktopie (pełne menu jest
   wyśrodkowane). Pojawia się w trybie hamburgera (≤1024), patrz responsywność. */
.ap-brand {
	display: none;
	position: absolute;
	left: clamp(16px, 4vw, 32px);
	top: 50%;
	transform: translateY(-50%);
	font-weight: 800;
	font-size: 1.1rem;
	letter-spacing: 0.12em;
	color: var(--ap-white);
	text-decoration: none;
	/* nad panelem menu (z-index 58) — inaczej drawer zakrywa logo AP */
	z-index: 70;
}

/* ---------- Tryb poziomy: bez natywnych suwaków ---------- */
.ap-horizontal-mode {
	overflow: hidden;
	height: 100vh;
	height: 100svh;
}

.ap-horizontal-mode,
.ap-horizontal-mode .ap-stage {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.ap-horizontal-mode::-webkit-scrollbar,
.ap-horizontal-mode .ap-stage::-webkit-scrollbar {
	display: none; /* WebKit */
	width: 0;
	height: 0;
}

/* ---------- Scena pozioma ---------- */
.ap-stage {
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.ap-track {
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	will-change: transform;
	transition: transform var(--ap-duration) var(--ap-ease);
}

/* ---------- Sekcja + tło ---------- */
.ap-section {
	position: relative;
	flex: 0 0 100vw;
	width: 100vw;
	height: 100%;
	overflow: hidden;
}

.ap-section--dark {
	color: var(--ap-dark);
}

.ap-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	/* Przyciemnienie (apla) wpięte w warstwę tła jako brightness — matematycznie
	   identyczne z czarną nakładką o danym opacity (brightness(1-ov) == black @ ov),
	   ale rysowane RAZEM z obrazkiem/wideo. Na iOS Safari nie ma osobnej nakładki,
	   która malowałaby się klatkę później („jasny → ładuje się przyciemnienie"). */
	filter: brightness(calc(1 - var(--ap-ov, 0.45)));
	/* Własna warstwa GPU — w trakcie przejazdu toru (transform na .ap-track)
	   iOS/Safari przerasteryzowuje warstwę z filtrem klatkę po klatce, co daje
	   „mignięcie" tła. translateZ + backface-visibility przybijają tło do osobnej
	   warstwy kompozytora, więc jedzie razem z sekcją bez przemalowań. */
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ap-bg__video,
.ap-bg__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* To samo co wyżej — żeby sam obrazek/wideo nie migał przy zmianie sekcji. */
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* iOS Safari potrafi nałożyć na tło-wideo wielki natywny „play" na środku, gdy
   zablokuje autoplay (np. tryb oszczędzania energii). Tło i tak rusza przy
   pierwszym geście (obsługuje JS), więc chowamy tę natywną nakładkę. */
.ap-bg__video::-webkit-media-controls,
.ap-bg__video::-webkit-media-controls-start-playback-button,
.ap-bg__video::-webkit-media-controls-panel {
	display: none !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Zapętlone animacje na własnej warstwie GPU — żeby ich ciągłe przemalowania
   nie powodowały migotania sąsiednich napisów (h1) na iOS (np. JOIN, JOURNEY). */
.ap-btn--lg,
.ap-timeline__dot::after,
.ap-scroll-hint__inner,
.ap-more__chev {
	will-change: transform;
}

.ap-section__inner {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 100%;
	padding: calc(var(--ap-header-h) + 24px) clamp(20px, 6vw, 110px) clamp(56px, 9vh, 110px);
}

/* Sekcja z pionowym scrollem treści (np. Featured) */
.ap-section__inner--scroll {
	display: block;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* większy bufor na dole — nie przeskakuje do następnej sekcji od razu */
	padding-bottom: clamp(140px, 22vh, 260px);
}

.ap-section__inner--scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* ============================================================
   LAYOUT: HERO
   ============================================================ */
.ap-hero {
	position: relative;
	margin: auto;
	text-align: center;
	max-width: var(--ap-content-max);
}

.ap-hero__title {
	margin: 0;
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	font-size: clamp(2.6rem, 9vw, 8rem);
}

/* Wariant „duży" (np. THINK BIG) */
.ap-hero--lg .ap-hero__title {
	line-height: 0.92;
	font-size: clamp(3.2rem, 12vw, 11rem);
}

/* Wariant „pierwszy wyraz duży" (np. START): jeden biały napis — pierwszy
   wyraz duży, reszta mniejsza (oba białe). */
.ap-hero--split .ap-hero__lg {
	font-size: clamp(3.2rem, 12vw, 11rem);
	line-height: 0.9;
}

.ap-hero--split .ap-hero__sm {
	font-size: clamp(2.6rem, 9vw, 8rem);
	line-height: 0.95;
}

.ap-hero__title span {
	display: block;
}

.ap-hero__subtitle {
	margin: 1.4rem 0 0;
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 500;
	color: var(--ap-muted);
}

.ap-scroll-hint {
	display: inline-block;
	margin-top: clamp(28px, 5vh, 56px);
	padding: 0;
	background: none;
	border: none;
	color: var(--ap-muted);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease;
}

.ap-scroll-hint:hover {
	color: var(--ap-gold);
}

/* Wewnętrzny element nuży lewo-prawo (cały hint), niezależnie od animacji wejścia. */
.ap-scroll-hint__inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	animation: ap-nudge 1.6s var(--ap-ease) infinite;
}

.ap-scroll-hint__arrow {
	font-size: 1.4rem;
	line-height: 1;
}

@keyframes ap-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(6px); }
}

/* „TAP FOR SOUND" pod scrollem — tylko mobile (desktop ma panel w rogu). */
.ap-hero__sound {
	display: none;
}

@media (max-width: 768px) {
	.ap-hero__sound {
		/* Pozycja absolutna POD hero — nie powiększa wysokości bloku hero, więc
		   tytuł zostaje wyśrodkowany identycznie jak na preloaderze (który ma
		   tylko „ghost SCROLL"). Centrowanie przez left/right, bo transform jest
		   zarezerwowany dla animacji [data-ap-reveal]. */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: 16px;
	}
}

/* Mini kreska nad napisem. */
.ap-hero__sound-rule {
	width: 30px;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
}

.ap-sound-hint {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 4px 6px;
	background: none;
	border: none;
	color: var(--ap-muted);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease;
}

.ap-sound-hint__icon {
	line-height: 0;
	color: var(--ap-gold);
}

/* Fale ściszone, gdy nic nie gra (autoplay wyciszony / pauza). */
.ap-sound-hint .ap-wave {
	opacity: 0.25;
	transition: opacity 0.3s ease;
}

/* Słychać → fale głośniczka pulsują kolejno. */
.ap-sound-hint.is-playing {
	color: var(--ap-gold);
}

.ap-sound-hint.is-playing .ap-wave {
	animation: ap-sound-wave 1.2s ease-in-out infinite;
}

.ap-sound-hint.is-playing .ap-wave--2 {
	animation-delay: 0.2s;
}

@keyframes ap-sound-wave {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ap-sound-hint.is-playing .ap-wave {
		animation: none;
		opacity: 1;
	}
}

/* ============================================================
   Nagłówek sekcji (journey / cards)
   ============================================================ */
.ap-section-head {
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
}

.ap-section-head__title {
	margin: 0;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	font-size: clamp(2rem, 6vw, 5rem);
	white-space: nowrap; /* tytuł w jednej linii */
}

@media (max-width: 640px) {
	.ap-section-head__title {
		white-space: normal; /* na małych ekranach pozwól zawinąć */
	}
}

.ap-section-head__subtitle {
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 500;
	color: var(--ap-muted);
}

/* ============================================================
   LAYOUT: ABOUT
   ============================================================ */
/* About zajmuje pełną szerokość — zdjęcie sięga lewej krawędzi (bez marginesu) */
.ap-section--about .ap-section__inner {
	padding-left: 0;
}

.ap-about {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
	width: 100%;
	max-width: none;
	margin: 0;
	height: 100%;
}

/* Na desktopie wrapper tekstu jest „przezroczysty" — nie zmienia układu
   (tekst zachowuje się jak dotąd: bezpośrednio w prawej kolumnie). Na mobile
   (niżej) staje się realnym blokiem dla układu liczby+zdjęcie obok siebie. */
.ap-about__text {
	display: contents;
}

/* min-width:0 — żeby rosnący licznik NIE rozpychał kolumny siatki i nie
   przesuwał/zmieniał zdjęcia (to był ten „macha"). */
.ap-about__content,
.ap-about__media {
	min-width: 0;
}

.ap-about__media {
	align-self: end;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center; /* zdjęcie wyśrodkowane w lewej kolumnie */
	/* dosuń zdjęcie do samego dołu ekranu (skasuj dolny padding sekcji) */
	margin-bottom: calc(-1 * clamp(56px, 9vh, 110px));
}

.ap-about__media img {
	max-height: 96vh;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
	/* Własna warstwa GPU + izolacja — gdy obok lecą liczniki (tekst zmienia się
	   co klatkę), zdjęcie nie jest przemalowywane razem z nimi i nie miga. */
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Kontener zdjęcia odcięty jako osobna warstwa kompozytora. */
.ap-about__media {
	isolation: isolate;
}

/* Pionowa kreska między zdjęciem a treścią */
.ap-about__content {
	border-left: 1px solid rgba(224, 165, 38, 0.35);
	padding-left: clamp(24px, 4vw, 64px);
}

.ap-about__title {
	margin: 0;
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	font-size: clamp(2rem, 4.5vw, 4rem);
}

.ap-about__body {
	max-width: 36em;
	color: var(--ap-white);
	font-weight: 300;
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.7;
}

.ap-about__body p {
	margin: 0 0 1em;
}
@media (max-width: 900px) {
	.ap-about__body {
		max-width: 100%;
		font-size: clamp(0.75rem, 1.1vw, 0.95rem);
		line-height: 1.5;
	}
}
/* Liczniki */
.ap-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 64px);
	margin-top: clamp(28px, 4vh, 48px);
}

.ap-stat {
	display: flex;
	flex-direction: column;
}

.ap-stat__number {
	color: var(--ap-gold);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 4px 26px rgba(224, 165, 38, 0.5);
	/* licząca się liczba na własnej warstwie — repainty nie ruszają sąsiadów */
	transform: translateZ(0);
	will-change: contents;
	/* równa szerokość cyfr → mniej skakania szerokości w trakcie liczenia */
	font-variant-numeric: tabular-nums;
}

.ap-stat__label {
	margin-top: 0.6rem;
	max-width: 10ch; /* łamie opis na dwie linie */
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ap-muted);
}

/* ============================================================
   LAYOUT: JOURNEY (oś czasu)
   ============================================================ */
.ap-journey {
	width: 100%;
	max-width: var(--ap-content-max);
	margin: auto;
}

.ap-timeline {
	position: relative;
	display: flex;
	gap: clamp(16px, 1.6vw, 28px);
	margin-top: clamp(36px, 6vh, 72px);
}

/* Pozioma linia łącząca kropki (desktop) */
.ap-timeline__line {
	position: absolute;
	left: 8%;
	right: 8%;
	top: 65px; /* = wysokość labela (34) + margines kropki (14) + połowa kropki (17) */
	height: 1px;
	background: rgba(224, 165, 38, 0.4);
}

.ap-titem {
	flex: 1;
	display: grid;
	grid-template-rows: auto auto 1fr;
	justify-items: center;
	text-align: center;
}

.ap-titem__label {
	min-height: 34px;
	display: flex;
	align-items: flex-end;
	color: var(--ap-gold);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ap-titem__dot {
	margin: 14px 0;
	z-index: 1;
}

.ap-timeline__dot {
	position: relative;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ap-gold);
	border-radius: 50%;
	background: transparent;
}

/* Pulsujące złote kółko w środku */
.ap-timeline__dot::after {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--ap-gold);
	animation: ap-dot-pulse 1.9s ease-out infinite;
}

@keyframes ap-dot-pulse {
	0% {
		transform: scale(0.6);
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(224, 165, 38, 0.55);
	}
	70% {
		transform: scale(1);
		opacity: 0.55;
		box-shadow: 0 0 0 13px rgba(224, 165, 38, 0);
	}
	100% {
		transform: scale(0.6);
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(224, 165, 38, 0);
	}
}

.ap-titem__card {
	margin-top: clamp(20px, 3vh, 40px);
	padding: clamp(18px, 1.6vw, 28px);
	background: var(--ap-card-bg);
	border: 1px solid rgba(224, 165, 38, 0.25);
	border-radius: 10px;
	backdrop-filter: blur(6px);
}

.ap-titem__title {
	margin: 0 0 0.6em;
	color: var(--ap-gold);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ap-titem__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--ap-muted);
}

/* Mobile: timeline pionowy — kropki + linia po lewej, treść po prawej */
@media (max-width: 768px) {
	.ap-timeline {
		flex-direction: column;
		gap: 0;
		margin-top: clamp(24px, 4vh, 40px);
	}

	.ap-timeline__line {
		display: none;
	}

	.ap-titem {
		position: relative;
		grid-template-columns: 34px 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas: "dot label" "dot card";
		column-gap: 16px;
		text-align: left;
		padding-bottom: clamp(20px, 4vh, 36px);
	}

	.ap-titem__label {
		grid-area: label;
		min-height: 0;
		align-items: center;
	}

	.ap-titem__dot {
		grid-area: dot;
		margin: 2px 0 0;
		align-self: start;
		justify-self: center;
	}

	.ap-titem__card {
		grid-area: card;
		margin-top: 10px;
	}

	/* pionowa linia łącząca kropki */
	.ap-titem::before {
		content: "";
		position: absolute;
		left: 17px;
		top: 38px;
		bottom: 0;
		width: 1px;
		background: rgba(224, 165, 38, 0.4);
	}

	.ap-titem:last-child::before {
		display: none;
	}
}

/* ============================================================
   LAYOUT: CARDS (siatka)
   ============================================================ */
.ap-cards {
	width: 100%;
	max-width: var(--ap-content-max);
	margin: auto;
}

.ap-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(16px, 1.8vw, 28px);
	margin-top: clamp(36px, 6vh, 72px);
}

.ap-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	/* stała wysokość — rozwinięcie opisu i powiększenie nie ruszają sąsiadów */
	height: clamp(200px, 26vh, 260px);
	padding: 28px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	backdrop-filter: blur(8px);
	transition: transform 0.28s var(--ap-ease), border-color 0.25s ease, background 0.25s ease;
}

.ap-card:hover {
	/* skala zamiast zmiany layoutu — kafelek rośnie, reszta stoi w miejscu */
	transform: scale(1.07);
	z-index: 2;
	border-color: rgba(224, 165, 38, 0.65);
	background: rgba(224, 165, 38, 0.08);
}

.ap-card__icon {
	color: var(--ap-gold);
	line-height: 0;
}

/* Ikona „serce" — delikatne bicie; po najechaniu szybsze. */
.ap-icon--heart {
	transform-origin: center;
	animation: ap-heartbeat 1.6s var(--ap-ease) infinite;
}

.ap-card:hover .ap-icon--heart,
.ap-card:focus-within .ap-icon--heart {
	animation-duration: 0.85s;
}

@keyframes ap-heartbeat {
	0%, 30%, 100% { transform: scale(1); }
	10% { transform: scale(1.18); }
	20% { transform: scale(1.1); }
}

/* Pozostałe ikony — każda ma własny, pasujący do niej ruch.
   Spokojny „idle" cały czas, żywszy po najechaniu na kafelek. */
.ap-icon--star {
	transform-origin: center;
	animation: ap-twinkle 3s ease-in-out infinite;
}

.ap-icon--travel {
	transform-origin: center;
	animation: ap-spin 14s linear infinite;
}

.ap-icon--games {
	transform-origin: center;
	animation: ap-wiggle 3.5s ease-in-out infinite;
}

.ap-icon--sport {
	transform-origin: center;
	animation: ap-ride 2.6s ease-in-out infinite;
}

.ap-icon--reading {
	transform-origin: center;
	animation: ap-bob 3.2s ease-in-out infinite;
}

.ap-card:hover .ap-icon--travel,
.ap-card:focus-within .ap-icon--travel {
	animation-duration: 6s;
}

.ap-card:hover .ap-icon--games,
.ap-card:focus-within .ap-icon--games,
.ap-card:hover .ap-icon--sport,
.ap-card:focus-within .ap-icon--sport {
	animation-duration: 1.2s;
}

.ap-card:hover .ap-icon--star,
.ap-card:focus-within .ap-icon--star {
	animation-duration: 1.5s;
}

@keyframes ap-twinkle {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50% { transform: scale(1.12); opacity: 1; }
}

@keyframes ap-spin {
	to { transform: rotate(360deg); }
}

@keyframes ap-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-7deg); }
	75% { transform: rotate(7deg); }
}

@keyframes ap-ride {
	0%, 100% { transform: translateX(-2px) rotate(-2deg); }
	50% { transform: translateX(2px) rotate(2deg); }
}

@keyframes ap-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

/* Dostępność: kto ma wyłączone animacje w systemie — ikony stoją. */
@media (prefers-reduced-motion: reduce) {
	.ap-icon {
		animation: none;
	}
}

.ap-card__label {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Opis pojawiający się po najechaniu */
.ap-card__desc {
	max-width: 24ch;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5;
	text-align:center;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ap-muted);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(6px);
	transition: opacity 0.3s ease, max-height 0.35s var(--ap-ease), transform 0.3s ease;
}

.ap-card:hover .ap-card__desc,
.ap-card:focus-within .ap-card__desc {
	opacity: 1;
	max-height: 140px;
	transform: translateY(0);
}

/* Dotyk: brak hovera — pokaż opis od razu. */
@media (hover: none) {
	.ap-card__desc {
		opacity: 1;
		max-height: 140px;
		transform: none;
	}
}

/* ============================================================
   LAYOUT: DEFAULT
   ============================================================ */
.ap-default {
	max-width: 820px;
	margin: auto;
}

.ap-default__title {
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 0.6em;
}

.ap-default__body {
	color: var(--ap-muted);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.7;
}

/* ============================================================
   Dolny suwak (postęp) — przykuty do dołu, pełna szerokość
   ============================================================ */
.ap-scrollbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
	width: 100%;
	height: 8px;
	background: #000;
	overflow: hidden;
}

.ap-scrollbar__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ap-gold);
	border-radius: 0 999px 999px 0;
	transition: width var(--ap-duration) var(--ap-ease);
}

/* ---------- Przyciski / pusty stan ---------- */
.ap-btn {
	display: inline-block;
	margin-top: 1em;
	padding: 13px 30px;
	background: var(--ap-gold);
	color: #111;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ap-btn:hover {
	transform: translateY(-2px);
}

.ap-section--empty {
	background: var(--ap-bg);
}

/* ============================================================
   Preloader (panele „blinds" + monogram AP + złoty pasek + licznik)
   ============================================================ */
html.ap-preloading,
html.ap-preloading body {
	overflow: hidden;
}

.ap-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* DOKŁADNIE ta sama wysokość co scena (.ap-stage używa 100svh) — inaczej
	   środek (a więc i napis) wypada gdzie indziej niż tytuł hero. */
	height: 100vh;
	height: 100svh;
	z-index: 100001;
	display: flex;
	/* ten sam padding co .ap-section__inner — by napis był w tym samym miejscu co hero */
	padding: calc(var(--ap-header-h) + 24px) clamp(20px, 6vw, 110px) clamp(56px, 9vh, 110px);
	/* pełne krycie — hero nie prześwituje (żadnego „podwójnego" napisu) */
	background: #000;
	transition: opacity 0.7s ease;
}

/* Zalogowany pasek admina WP przesuwa stronę w dół — preloader (fixed) musi
   zejść tak samo, żeby jego napis pokrył się z tytułem hero. Po ukryciu paska
   (przycisk „Ukryj pasek admina") wraca do top:0. */
.admin-bar .ap-preloader {
	top: 46px;
}

@media screen and (min-width: 783px) {
	.admin-bar .ap-preloader {
		top: 32px;
	}
}

html.ap-adminbar-hidden .ap-preloader {
	top: 0;
}

.ap-preloader.is-done {
	opacity: 0;
	pointer-events: none;
}

.ap-preloader.is-hidden {
	display: none;
}

/* Napis = ten sam rozmiar/pozycja co hero (split). Ładowanie = wypełnianie
   liter białym kolorem od lewej (baza przygaszona, oba kolory kryjące — nie
   prześwituje, bez efektu 3d). Po pełnym wypełnieniu tło znika i zostaje strona. */
.ap-preloader .ap-hero__title {
	text-shadow: none;
}

.ap-preloader .ap-title-white {
	background-image: linear-gradient(90deg, #ffffff 50%, #565651 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	text-shadow: none;
	animation: ap-pre-load 2s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

@keyframes ap-pre-load {
	to {
		background-position: 0% 0;
	}
}

/* Ghost „SCROLL" — tylko rezerwuje miejsce, żeby tytuł był jak w hero */
.ap-preloader__ghost {
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 768px) {
	.ap-preloader {
		/* mobile = ten sam padding co sekcja (z wróconym paskiem AP),
		   żeby napis preloadera był DOKŁADNIE tam, gdzie tytuł hero
		   (bez skoku i bez chowania się pod paskiem). */
		padding: clamp(62px, 11vh, 80px) 18px 64px;
	}
}

/* ---------- Przycisk: ukryj pasek admina (tylko zalogowani) ---------- */
.ap-adminbar-toggle {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 100000;
	padding: 8px 14px;
	font-family: inherit;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(224, 165, 38, 0.5);
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ap-adminbar-toggle:hover {
	background: var(--ap-gold);
	border-color: var(--ap-gold);
	color: #111;
}

html.ap-adminbar-hidden #wpadminbar {
	display: none !important;
}

html.ap-adminbar-hidden {
	margin-top: 0 !important;
}

/* ---------- Stopka ---------- */
.ap-site-footer {
	padding: 24px;
	text-align: center;
	opacity: 0.6;
	font-size: 0.8rem;
}

.ap-horizontal-mode .ap-site-footer {
	display: none;
}

/* ---------- Strony standardowe (fallback) ---------- */
.ap-page__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: calc(var(--ap-header-h) + 40px) 20px 80px;
}

.ap-entry__title {
	font-size: clamp(2rem, 5vw, 3rem);
	text-transform: uppercase;
	font-weight: 900;
}

/* ============================================================
   Responsywność
   ============================================================ */
@media (max-width: 1024px) {
	/* WAŻNE: backdrop-filter na pasku tworzy „containing block" dla elementów
	   position:fixed, przez co wysuwane menu (fixed) pozycjonowało się względem
	   paska (~50px), a nie całego ekranu — panel był obcięty. Tu go zdejmujemy,
	   a czytelność paska dajemy mocniejszym tłem. */
	.ap-site-header {
		background: rgba(8, 10, 8, 0.88);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Marka „AP" widoczna w pasku obok hamburgera. */
	.ap-brand {
		display: block;
	}

	.ap-nav-toggle {
		display: flex;
		position: absolute;
		right: clamp(16px, 4vw, 32px);
		top: 50%;
		transform: translateY(-50%);
		/* MUSI być nad panelem menu (z-index 58) — hamburger i panel to
		   rodzeństwo w tej samej belce, więc panel zamalowywał „X". */
		z-index: 70;
	}

	/* Menu jako panel wjeżdżający z prawej do lewej. Pozycje od góry,
	   muzyka na samym dole. Większy zapas góra/dół. */
	.ap-site-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 58;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		margin: 0;
		padding: clamp(104px, 20vh, 168px) clamp(28px, 9vw, 52px) clamp(56px, 9vh, 92px);
		background: rgba(8, 10, 8, 0.98);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.38s var(--ap-ease), visibility 0.38s var(--ap-ease);
	}

	.ap-nav-open .ap-site-nav {
		transform: translateX(0);
		visibility: visible;
		/* przyciemnienie reszty ekranu (lewy pasek) bez osobnego elementu */
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
	}

	.ap-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(24px, 4.5vh, 44px);
		width: 100%;
	}

	.ap-menu a {
		font-size: 1.2rem;
		letter-spacing: 0.16em;
	}

	/* Aktywna pozycja z myślnikiem — jak w projekcie (— FEATURED IN). */
	.ap-menu a.is-active::before,
	.ap-menu .current-menu-item > a::before {
		content: "— ";
	}
}

@media (max-width: 900px) {
	.ap-section--about .ap-section__inner {
		padding-left: clamp(20px, 6vw, 110px); /* przywróć padding w pionie */
	}

	.ap-about {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 0px;
		height: auto; /* rośnie z treścią → scroll wewnątrz sekcji */
	}

	.ap-about__media {
		order: -1;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
	}

	.ap-about__media img {
		max-height: 42vh;
	}

	.ap-about__content {
		border-left: none;
		padding-left: 0;
	}

	.ap-stats {
		justify-content: center;
		gap: clamp(28px, 0vw, 64px);
		margin-top: clamp(0px, 0vh, 48px);
	}

	.ap-rule {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	/* Mobile = ten sam poziomy slajder co desktop (swipe w bok + animacja).
	   Górny pasek (AP + hamburger) wraca, menu wjeżdża z prawej (patrz ≤1024). */

	/* pasek na mobile — większy oddech góra/dół (było ściśnięte) */
	.ap-site-header {
		padding: 20px clamp(16px, 5vw, 24px);
	}

	/* brak systemowych suwaków */
	html,
	body {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	html::-webkit-scrollbar,
	body::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* nadmiar treści → pionowy scroll wewnątrz sekcji (bez widocznego suwaka) */
	.ap-section__inner,
	.ap-section__inner--scroll {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* górny padding odsuwa treść spod wróconego paska AP + hamburger */
		padding: clamp(62px, 11vh, 80px) 18px 64px;
	}

	.ap-section__inner::-webkit-scrollbar,
	.ap-section__inner--scroll::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* centruj treść, gdy się mieści; pozwól scrollować, gdy nie */
	.ap-section__inner > *,
	.ap-section__inner--scroll > * {
		margin-top: auto;
		margin-bottom: auto;
		flex-shrink: 0;
	}

	/* About: wszystko na jednym ekranie. Tekst (tytuł + opis) zostaje u góry,
	   a liczniki i zdjęcie lądują POD nim w jednym rzędzie — obok siebie. */
	.ap-section--about .ap-section__inner > * {
		margin: 0;
	}

	.ap-about {
		display: grid;
		/* STAŁA szerokość kolumny liczb (niezależna od treści) — żeby rosnący
		   licznik nie zmieniał układu i nie ruszał zdjęcia. */
		/* wąska kolumna liczb → zdjęcie dostaje więcej szerokości (= jest wyższe) */
		grid-template-columns: clamp(72px, 21vw, 100px) 1fr;
		/* tekst u góry (auto), a rząd liczby|zdjęcie wypełnia resztę (1fr),
		   dzięki czemu zdjęcie może zejść do samego dołu. */
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"text  text"
			"stats media";
		column-gap: clamp(10px, 3vw, 18px);
		row-gap: clamp(12px, 2.5vh, 24px);
		min-height: 100%;
		height: auto;
	}

	/* content znika z układu — jego dzieci (tekst, liczniki) trafiają wprost
	   do siatki .ap-about, więc liczniki mogą stanąć obok zdjęcia. */
	.ap-about__content {
		display: contents;
	}

	.ap-about__text {
		display: block;
		grid-area: text;
		align-self: start;
		/* tytuł/opis i złota kreska wyśrodkowane */
		text-align: center;
	}

	.ap-stats {
		grid-area: stats;
		align-self: center;
		min-width: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		/* równe liczniki — wyśrodkowane w kolumnie (liczba + podpis) */
		align-items: center;
		text-align: center;
		gap: clamp(16px, 3vh, 30px);
		margin: 0;
	}

	.ap-about__media {
		grid-area: media;
		min-width: 0;
		height: auto;
		align-self: end;
		justify-content: flex-end;
		/* dochodzi do prawej krawędzi (kasuje prawy padding). Dół tylko lekko
		   poniżej krawędzi (-10px) — wcześniej -64px ucinało postać; teraz
		   zdjęcie siedzi wyżej i widać je w całości. */
		margin: 0 -18px -10px 0;
	}

	/* zdjęcie wysokie i dosunięte do dołu (object-position: bottom z bazy) */
	.ap-about__media img {
		max-height: clamp(440px, 72vh, 760px);
	}

	/* liczniki dopasowane do węższej kolumny obok zdjęcia */
	.ap-stat__number {
		font-size: clamp(1.45rem, 5.8vw, 2rem);
	}

	.ap-stat__label {
		max-width: 14ch;
	}

	/* złota kreska pod tytułem na środku */
	.ap-rule {
		margin-left: auto;
		margin-right: auto;
	}

	/* Beyond Work: kafelki na całą szerokość — ikona z lewej, tekst z prawej */
	.ap-cards__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ap-card {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: "icon label" "icon desc";
		align-items: center;
		column-gap: 18px;
		row-gap: 6px;
		height: auto;
		min-height: 0;
		padding: 22px 24px;
		text-align: left;
	}

	.ap-card__icon {
		grid-area: icon;
	}

	.ap-card__label {
		grid-area: label;
	}

	.ap-card__desc {
		grid-area: desc;
		max-width: none;
		text-align:left;
	}

	.ap-card:hover {
		transform: none; /* bez scale na dotyku */
	}
}

/* ============================================================
   Animacje wejścia (reveal)
   ============================================================ */
[data-ap-reveal] {
	opacity: 0;
	transform: translateY(44px) scale(0.96);
	transition: opacity 0.8s var(--ap-ease), transform 0.8s var(--ap-ease);
	transition-delay: 0ms;
}

.ap-section.is-active [data-ap-reveal] {
	opacity: 1;
	transform: none;
}

/* About: wyraźniejsze wejście — większy zjazd i lekki „pop" liczników. */
.ap-section--about.is-active .ap-about__title[data-ap-reveal],
.ap-section--about.is-active .ap-about__media[data-ap-reveal] {
	transition-duration: 0.9s;
}

.ap-section--about:not(.is-active) .ap-stat[data-ap-reveal] {
	transform: translateY(34px) scale(0.85);
}

/* Stagger: kolejne elementy/karty wchodzą z opóźnieniem. */
.ap-section.is-active [data-ap-reveal] { transition-delay: 60ms; }
.ap-section.is-active .ap-overline[data-ap-reveal] { transition-delay: 0ms; }
.ap-section.is-active .ap-about__title[data-ap-reveal] { transition-delay: 120ms; }
.ap-section.is-active .ap-rule[data-ap-reveal] { transition-delay: 200ms; }
.ap-section.is-active .ap-about__body[data-ap-reveal] { transition-delay: 280ms; }
.ap-section.is-active .ap-stat[data-ap-reveal]:nth-child(1) { transition-delay: 360ms; }
.ap-section.is-active .ap-stat[data-ap-reveal]:nth-child(2) { transition-delay: 440ms; }
.ap-section.is-active .ap-stat[data-ap-reveal]:nth-child(3) { transition-delay: 520ms; }

.ap-section.is-active .ap-hero__subtitle[data-ap-reveal] { transition-delay: 180ms; }
.ap-section.is-active .ap-scroll-hint[data-ap-reveal] { transition-delay: 360ms; }

.ap-section.is-active [data-ap-reveal]:nth-child(1) { transition-delay: 80ms; }
.ap-section.is-active [data-ap-reveal]:nth-child(2) { transition-delay: 160ms; }
.ap-section.is-active [data-ap-reveal]:nth-child(3) { transition-delay: 240ms; }
.ap-section.is-active [data-ap-reveal]:nth-child(4) { transition-delay: 320ms; }
.ap-section.is-active [data-ap-reveal]:nth-child(5) { transition-delay: 400ms; }
.ap-section.is-active [data-ap-reveal]:nth-child(6) { transition-delay: 480ms; }

/* ============================================================
   LAYOUT: FEATURED
   ============================================================ */
.ap-featured {
	width: 100%;
	max-width: 1040px; /* węziej i na środku — widać trochę tła po bokach */
	margin: auto;
	text-align: center;
}

.ap-featured__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 5vw, 72px);
	margin: clamp(20px, 3vh, 36px) 0 clamp(24px, 3.5vh, 40px);
	padding-bottom: clamp(20px, 3vh, 36px);
	/* delikatna kreska oddzielająca loga od artykułów */
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ap-logo {
	display: inline-flex;
	font-size: clamp(1.2rem, 2vw, 1.8rem);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
	opacity: 0.6; /* lekkie opacity na loga */
	transition: opacity 0.35s var(--ap-ease), transform 0.35s var(--ap-ease);
}

/* Po najechaniu: znika przygaszenie (pełna widoczność) + lekki scale. */
.ap-logo:hover {
	opacity: 1;
	transform: scale(1.08);
}

.ap-logo img {
	max-height: 34px;
	width: auto;
	filter: grayscale(1) brightness(1.6);
	transition: filter 0.35s var(--ap-ease);
}

.ap-logo:hover img {
	filter: grayscale(0) brightness(1);
}

/* Na dotyku (mobile) brak hovera — loga w pełni widoczne od razu. */
@media (hover: none) {
	.ap-logo {
		opacity: 0.85;
	}
}

.ap-featured__grid {
	display: grid;
	gap: clamp(14px, 1.4vw, 22px);
}

.ap-featured__grid--articles {
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(22px, 2.6vw, 48px); /* większe odstępy → węższe kafelki */
}

.ap-featured__grid--social {
	grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(16px, 2vh, 24px);
}

.ap-fcard,
.ap-scard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 12px;
	text-decoration: none;
	text-align: left;
	background: #1a1c16;
	min-height: 178px;
	box-shadow: inset 0 0 0 0 rgba(224, 165, 38, 0);
	transition: transform 0.3s var(--ap-ease), box-shadow 0.35s ease;
}

/* artykuły: wyższe (portretowe) */
.ap-fcard {
	min-height: 300px;
}

.ap-scard {
	min-height: 178px;
}

/* hover: artykuły — czarny cień + zoom zdjęcia + animowany złoty border */
.ap-fcard:hover {
	box-shadow: inset 0 0 0 2px var(--ap-gold), 0 18px 44px rgba(0, 0, 0, 0.55);
}

.ap-fcard:hover .ap-fcard__media {
	transform: scale(1.08);
}

/* hover: social — lekki scale kafelka + animowany złoty border */
.ap-scard:hover {
	transform: scale(1.04);
	box-shadow: inset 0 0 0 2px var(--ap-gold), 0 14px 34px rgba(0, 0, 0, 0.45);
}

.ap-fcard__media,
.ap-scard__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s var(--ap-ease);
}

/* miniatury social pozycjonowane nieco wyżej */
.ap-scard__media {
	background-position: center 25%;
}

.ap-fcard::after,
.ap-scard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 18%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05));
}

/* social: czarne tło krótsze, ale mocniejsze (większe opacity u dołu) */
.ap-scard::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 12%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0) 62%);
}

.ap-fcard__body,
.ap-scard__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(14px, 1.2vw, 20px);
}

.ap-fcard__cat,
.ap-scard__cat {
	color: var(--ap-gold);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ap-fcard__title,
.ap-scard__title {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
}

.ap-scard__title {
	font-size: 0.85rem;
}

.ap-fcard__more {
	margin-top: 6px;
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ap-muted);
}

.ap-fcard:hover .ap-fcard__more {
	color: var(--ap-gold);
	animation: ap-nudge 1.2s var(--ap-ease) infinite;
}

.ap-scard__meta {
	font-size: 0.72rem;
	color: var(--ap-muted);
}

.ap-featured__sochead {
	margin: clamp(28px, 4vh, 44px) 0 clamp(14px, 2vh, 20px);
	text-align: center;
}

/* Wariant „ciemny" nadtytułu (np. Videos & Podcasts) — przygaszony, nie złoty. */
.ap-featured__sochead--dark {
	color: rgba(255, 255, 255, 0.42);
}

.ap-featured__more {
	margin-top: clamp(20px, 3vh, 32px);
}

.ap-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ap-gold);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.ap-more:hover {
	gap: 12px;
}

.ap-more__chev {
	display: block;
	animation: ap-more-bob 1.6s ease-in-out infinite;
}

@keyframes ap-more-bob {
	0%, 100% { transform: translateY(-2px); }
	50% { transform: translateY(3px); }
}

/* Stan „rozwinięte" → etykieta LESS, strzałka do góry (bez bujania). */
.ap-more.is-expanded .ap-more__chev {
	animation: none;
	transform: rotate(180deg);
}

/* Load more — ukryte karty i animacja doładowania */
.ap-load-hidden {
	display: none;
}

@keyframes ap-fade-up {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ap-load-in {
	animation: ap-fade-up 0.6s var(--ap-ease) both;
}

/* ============================================================
   FEATURED: Videos & Podcasts (miniatura + złoty play na środku)
   ============================================================ */
/* Sekcja chowana/odsłaniana przyciskiem MORE/LESS. */
.ap-featured__videos[hidden] {
	display: none;
}

.ap-featured__videos:not([hidden]) {
	animation: ap-fade-up 0.45s var(--ap-ease) both;
}

.ap-featured__grid--videos {
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2vw, 24px);
	margin-top: clamp(14px, 2vh, 20px);
}

.ap-vcard {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 12px;
	background: #1a1c16;
	text-decoration: none;
	transition: transform 0.3s var(--ap-ease), box-shadow 0.35s ease;
}

.ap-vcard:hover {
	transform: scale(1.03);
	box-shadow: inset 0 0 0 2px var(--ap-gold), 0 14px 34px rgba(0, 0, 0, 0.45);
}

.ap-vcard__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s var(--ap-ease);
}

.ap-vcard:hover .ap-vcard__media {
	transform: scale(1.08);
}

.ap-vcard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 6%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}

/* Złote kółko z czarnym trójkątem — na środku miniatury. */
.ap-vcard__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: auto;
	width: clamp(40px, 6vw, 56px);
	height: clamp(40px, 6vw, 56px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ap-gold);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
	transition: transform 0.25s var(--ap-ease), box-shadow 0.25s ease;
}

.ap-vcard:hover .ap-vcard__play {
	transform: scale(1.12);
	box-shadow: 0 10px 30px rgba(224, 165, 38, 0.5);
}

.ap-vcard__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 3px; /* optyczne wyśrodkowanie trójkąta */
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #0c0e0c;
}

.ap-vcard__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: clamp(10px, 1.2vw, 16px);
	text-align: left;
}

.ap-vcard__cat {
	color: var(--ap-gold);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ap-vcard__title {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ============================================================
   LAYOUT: CTA / JOIN
   ============================================================ */
.ap-cta {
	margin: auto;
	text-align: center;
	max-width: var(--ap-content-max);
}

.ap-cta__title {
	margin: 0 0 clamp(28px, 4vh, 44px);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	font-size: clamp(2.6rem, 8vw, 7rem);
}

/* Wariant „duży" */
.ap-cta--lg .ap-cta__title {
	line-height: 0.92;
	font-size: clamp(3.2rem, 11vw, 9.5rem);
}

.ap-cta__title span {
	display: block;
}

.ap-btn--lg {
	padding: 20px 56px;
	font-size: 1rem;
	box-shadow: 0 10px 28px rgba(224, 165, 38, 0.22);
	animation: ap-float 3s ease-in-out infinite;
	transition: transform 0.28s var(--ap-ease), box-shadow 0.28s ease;
}

.ap-btn--lg:hover {
	transform: scale(1.08);
	box-shadow: 0 20px 55px rgba(224, 165, 38, 0.55);
	animation-play-state: paused;
}

@keyframes ap-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.ap-cta__subtitle {
	max-width: 36em;
	margin: clamp(24px, 4vh, 40px) auto 0;
	color: var(--ap-muted);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.6;
}

.ap-socials {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: clamp(28px, 4vh, 44px);
}

.ap-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ap-social:hover {
	background: rgba(224, 165, 38, 0.18);
	border-color: var(--ap-gold);
	color: var(--ap-gold);
	transform: scale(1.18);
}

/* Kontakt pod ikonami social: „Want to collab?" + e-mail */
.ap-cta__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: clamp(22px, 3.2vh, 34px) 0 0;
}

.ap-cta__contact-text {
	color: var(--ap-muted);
	font-size: clamp(0.8rem, 1vw, 0.9rem);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ap-cta__contact-email {
	position: relative;
	color: var(--ap-gold);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.ap-cta__contact-email::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.28s var(--ap-ease);
}

.ap-cta__contact-email:hover,
.ap-cta__contact-email:focus-visible {
	color: var(--ap-white);
}

.ap-cta__contact-email:hover::after,
.ap-cta__contact-email:focus-visible::after {
	transform: scaleX(1);
}

/* Featured / CTA — responsywność */
@media (max-width: 900px) {
	.ap-featured__grid--articles,
	.ap-featured__grid--social {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ap-featured__grid--articles,
	.ap-featured__grid--social {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ap-track,
	.ap-scrollbar__fill,
	.ap-scroll-hint__inner,
	.ap-btn--lg,
	.ap-more__chev,
	.ap-timeline__dot::after,
	.ap-featured__videos:not([hidden]),
	.ap-card {
		transition: none;
		animation: none;
	}

	[data-ap-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.ap-music__eq span {
		animation: none !important;
	}
}

/* ============================================================
   Panel muzyki — dyskretny przełącznik w lewym dolnym rogu
   ============================================================ */
.ap-music {
	position: fixed;
	left: clamp(14px, 3vw, 28px);
	/* nad dolnym paskiem postępu (8px) */
	bottom: clamp(18px, 3vh, 28px);
	z-index: 60;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

/* Pojawia się dopiero po inicjalizacji JS (żeby nie błyskał na starcie). */
.ap-music.is-ready {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.ap-music__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 16px 0 13px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(12, 14, 12, 0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--ap-white);
	cursor: pointer;
	font-family: var(--ap-font);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.ap-music__btn:hover,
.ap-music__btn:focus-visible {
	border-color: var(--ap-gold);
	color: var(--ap-gold);
	background: rgba(12, 14, 12, 0.7);
	outline: none;
}

/* Equalizer — 4 słupki. Statyczne (niskie) gdy wyłączone, animowane gdy gra. */
.ap-music__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	width: 16px;
	height: 14px;
	flex: 0 0 auto;
}

.ap-music__eq span {
	flex: 1 1 0;
	height: 100%;
	background: currentColor;
	border-radius: 1px;
	transform: scaleY(0.28);
	transform-origin: bottom;
	will-change: transform;
}

/* Animacja gra, gdy przycisk ma stan is-playing (nadawany przez JS na KAŻDY
   przełącznik — róg i menu — żeby były zsynchronizowane). */
.ap-music__btn.is-playing .ap-music__eq span {
	animation: ap-eq 0.9s ease-in-out infinite;
}

.ap-music__btn.is-playing .ap-music__eq span:nth-child(2) { animation-delay: 0.15s; }
.ap-music__btn.is-playing .ap-music__eq span:nth-child(3) { animation-delay: 0.3s; }
.ap-music__btn.is-playing .ap-music__eq span:nth-child(4) { animation-delay: 0.45s; }

@keyframes ap-eq {
	0%, 100% { transform: scaleY(0.28); }
	50% { transform: scaleY(1); }
}

.ap-music__txt {
	white-space: nowrap;
}

/* Muzyka na belce — domyślnie ukryta (desktop ma panel w rogu). Pozycja
   ustawiona już w bazie, żeby pokazanie w trybie hamburgera (niżej) wygrało
   kolejnością źródła. */
.ap-bar-music {
	display: none;
	position: absolute;
	right: calc(clamp(16px, 4vw, 32px) + 54px); /* po lewej od hamburgera, bez nachodzenia */
	top: 50%;
	transform: translateY(-50%);
	z-index: 70; /* nad panelem menu, jak hamburger */
}

/* Kompaktowy przycisk na belce — sam equalizer, BEZ kółka (border/tło). */
.ap-music__btn--bar {
	width: 38px;
	height: 38px;
	padding: 0;
	gap: 0;
	justify-content: center;
	border: none;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ap-music__btn--bar:hover,
.ap-music__btn--bar:focus-visible {
	/* bez kółka również na hover — tylko equalizer złocieje (color z bazy) */
	border-color: transparent;
	background: none;
}

.ap-music__btn--bar .ap-music__txt {
	display: none;
}

.ap-music__btn--bar .ap-music__eq {
	width: 20px;
	height: 17px;
}

/* Tryb hamburgera (≤1024): muzyka na belce, róg ukryty. */
@media (max-width: 1024px) {
	.ap-music {
		display: none;
	}

	.ap-bar-music {
		display: block;
	}
}

/* Nie zasłaniaj panelu w rogu, gdy otwarte jest menu (dotyczy desktopu). */
.ap-nav-open .ap-music {
	opacity: 0;
	pointer-events: none;
}

/* Dla zalogowanych: nad przyciskiem „ukryj pasek admina" (też w lewym dolnym
   rogu), żeby się nie nakładały. */
.admin-bar .ap-music {
	bottom: clamp(58px, 9vh, 70px);
}