/* Kreatywne 3D Scroll — frontend */

.k3ds {
	position: relative;
	width: 100%;
	height: var(--k3ds-height, 400vh);
	background: var(--k3ds-bg, #000);
	color: #fff;
	display: block;
	min-height: var(--k3ds-height, 400vh);
	/* UWAGA: brak isolation: isolate — chcemy żeby z-index stage'a uciekał
	   ponad theme header, a stacking context by to zablokował. */
}

.k3ds-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: block;
	/* Wysoki z-index — przykrywa theme headery (zwykle z-index 100–10000).
	   Admin bar WP ma z-index 99999, więc 99998 zostawia go widocznym. */
	z-index: 99998;
}

/* Kompensacja paska admin WordPress — żeby stage nie chował się pod nim */
.admin-bar .k3ds-stage {
	top: 32px;
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
	.admin-bar .k3ds-stage {
		top: 46px;
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}
}
/* Gdy admin bar jest schowany na małym ekranie (WP go ukrywa < 600px logged out) */
@media screen and (max-width: 600px) {
	html:not(.admin-bar-fixed) .k3ds-stage {
		top: 0;
		height: 100vh;
		height: 100dvh;
	}
}

.k3ds-canvas-wrap {
	position: absolute;
	inset: 0;
	background: var(--k3ds-bg, #000);
}

.k3ds-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Overlays layer */
.k3ds-overlays {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}
.k3ds-overlay {
	position: absolute;
	transform: translate(-50%, -50%);
	max-width: 90%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease;
	will-change: opacity;
}
.k3ds-overlay > * {
	margin: 0;
	line-height: 1.15;
	font-family: inherit;
	display: inline-block;
}
.k3ds-overlay h1,
.k3ds-overlay h2,
.k3ds-overlay h3,
.k3ds-overlay h4 {
	font-weight: 800;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.k3ds-overlay p,
.k3ds-overlay span,
.k3ds-overlay div {
	font-weight: 400;
}
.k3ds-overlay .k3ds-ov-btn {
	display: inline-block;
	padding: 0.7em 1.4em;
	background: #fff;
	color: #000;
	text-decoration: none;
	border-radius: 999px;
	font-weight: 600;
	transition: transform 200ms ease, background 200ms ease;
	pointer-events: auto;
}
.k3ds-overlay .k3ds-ov-btn:hover {
	transform: translateY(-2px);
	background: #f0f0f0;
}

/* Loader */
.k3ds-loader {
	position: absolute;
	left: 50%;
	bottom: 8%;
	transform: translateX(-50%);
	width: min(420px, 70%);
	z-index: 10;
	transition: opacity 500ms ease;
}
.k3ds-loader-done {
	opacity: 0;
	pointer-events: none;
}
.k3ds-loader-bar {
	height: 2px;
	background: rgba(255,255,255,0.15);
	overflow: hidden;
	border-radius: 2px;
}
.k3ds-loader-fill {
	height: 100%;
	width: 0%;
	background: #fff;
	transition: width 200ms ease;
}
.k3ds-loader-text {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 11px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}

/* ============================================================
   TEMPLATE: Classic — pełnoekranowy canvas (default)
   ============================================================ */
/* Domyślnie canvas-wrap pokrywa cały stage (inset:0) — nic do dodania */

/* ============================================================
   TEMPLATE: Split — canvas + boczna kolumna na overlay'e
   ============================================================ */
.k3ds-tpl-split-left .k3ds-canvas-wrap {
	left: 50%;
	right: 0;
}
.k3ds-tpl-split-right .k3ds-canvas-wrap {
	left: 0;
	right: 50%;
}
.k3ds-side { display: none; }

/* Mobile: stack split — canvas na pełną szerokość */
@media (max-width: 768px) {
	.k3ds-tpl-split-left .k3ds-canvas-wrap,
	.k3ds-tpl-split-right .k3ds-canvas-wrap {
		left: 0;
		right: 0;
	}
}

/* ============================================================
   TEMPLATE: Pinned Hero — canvas + większy oddech na text
   ============================================================ */
.k3ds-tpl-pinned-hero .k3ds-overlay h1,
.k3ds-tpl-pinned-hero .k3ds-overlay h2 {
	text-shadow: 0 4px 60px rgba(0,0,0,0.8);
}

/* ============================================================
   RESPONSYWNOŚĆ — mniejszy tekst overlay'ów na mobile
   ============================================================ */
@media (max-width: 768px) {
	.k3ds-overlay > * {
		font-size: 0.65em !important;
	}
	.k3ds-overlay .k3ds-ov-btn {
		font-size: 14px !important;
	}
}
@media (max-width: 480px) {
	.k3ds-overlay > * {
		font-size: 0.5em !important;
	}
}

/* Reduce motion — show first frame static */
@media (prefers-reduced-motion: reduce) {
	.k3ds {
		height: 100vh !important;
		height: 100dvh !important;
	}
	.k3ds-stage {
		position: relative;
	}
	.k3ds-overlay {
		opacity: 1 !important;
		visibility: visible !important;
		position: static;
		transform: none;
		display: block;
		margin: 1em auto;
		text-align: center;
	}
}