/* =========================================================================
   ICF Karting — v21 (Apple Scale-on-Scroll + Smart Cursor)
   - Scale-on-scroll: obrazy rosną gdy scrollujesz w nie (Apple iPhone style)
   - Smart cursor: różny dla różnych typów elementów (button/image/video/text)
   - Reveal-on-scroll fade+slide (mocniejszy)
   ========================================================================= */

/* ===========================================================
   SCALE-ON-SCROLL — Apple iPhone product page effect
   =========================================================== */
.zoom-on-scroll {
	overflow: hidden;
	position: relative;
}
.zoom-on-scroll img,
.zoom-on-scroll video {
	transition: transform .4s var(--ease-fluid);
	will-change: transform;
}

/* Pomoc — przygotuj parent containers do zoom */
.bento-cell, .persona, .card-xl, .voucher-hero,
.split__media, .gallery-mag__item, .article-card,
.fleet-card, .blog-feat-hero, .blog-feat-side__media {
	overflow: hidden;
	position: relative;
}

/* Dodatkowo bg na hero parallax — wymuś przygotowanie do scroll-zoom */
.hero-mega__media,
.page-hero,
.article-hero {
	overflow: hidden;
}

/* ===========================================================
   IMAGE STACK / Pinned reveal — Apple-style overlap
   =========================================================== */
.stack-pin {
	position: relative;
	min-height: 200vh;
	background: var(--c-bg-deep);
}
.stack-pin__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.stack-pin__layer {
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	transition: opacity .9s var(--ease-fluid), transform 1.2s var(--ease-fluid);
}
.stack-pin__layer img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
	border-radius: 24px;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}

/* ===========================================================
   SMART CURSOR v21 — kontekstowy
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	* { cursor: none !important; }
	input, textarea, select, [contenteditable] { cursor: text !important; }

	.cursor-dot {
		display: block !important;
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 8px !important; height: 8px !important;
		background: var(--c-accent) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999999 !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		box-shadow: 0 0 8px rgba(255,45,32,.9), 0 0 16px rgba(255,45,32,.4) !important;
		transform: translate3d(-50%, -50%, 0);
		transition: width .25s var(--ease-spring), height .25s var(--ease-spring),
		            background .2s, opacity .2s !important;
		will-change: transform;
	}

	.cursor-ring {
		display: block !important;
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 36px !important; height: 36px !important;
		border: 1.5px solid rgba(255, 45, 32, 0.55) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999998 !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		transform: translate3d(-50%, -50%, 0);
		transition: width .35s var(--ease-spring), height .35s var(--ease-spring),
		            border-color .25s, background-color .25s !important;
		will-change: transform;
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-size: 0.65rem;
		font-weight: 700;
		font-family: var(--font-display);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: transparent;
	}

	/* HOVER STATES — kontekstowe */

	/* CTA / Buttons — ring rośnie */
	.cursor-ring.is-cta {
		width: 64px !important; height: 64px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.18);
		border-width: 2px !important;
	}
	.cursor-dot.is-cta {
		width: 0 !important; height: 0 !important;
	}

	/* Image / Photo — pokaż ikonę powiększenia */
	.cursor-ring.is-image {
		width: 70px !important; height: 70px !important;
		border-color: rgba(255, 255, 255, 0.7) !important;
		background: rgba(0, 0, 0, 0.35);
		color: #fff !important;
		backdrop-filter: blur(8px);
	}
	.cursor-ring.is-image::before {
		content: 'Zoom';
		color: #fff;
	}
	.cursor-dot.is-image { width: 0 !important; height: 0 !important; }

	/* Video — pokaż "PLAY" */
	.cursor-ring.is-video {
		width: 80px !important; height: 80px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.25);
		color: #fff !important;
	}
	.cursor-ring.is-video::before {
		content: '▶ Live';
		color: #fff;
	}
	.cursor-dot.is-video { width: 0 !important; height: 0 !important; }

	/* Card / Persona — "Czytaj" */
	.cursor-ring.is-card {
		width: 70px !important; height: 70px !important;
		border-color: rgba(255,255,255,.6) !important;
		background: rgba(255, 45, 32, 0.12);
		color: #fff !important;
	}
	.cursor-ring.is-card::before {
		content: 'Wejdź';
		color: #fff;
	}
	.cursor-dot.is-card { width: 0 !important; height: 0 !important; }

	/* Article / Blog cards */
	.cursor-ring.is-article::before { content: 'Czytaj'; }

	/* Map */
	.cursor-ring.is-map::before { content: 'Trasa'; }

	/* Phone */
	.cursor-ring.is-phone::before { content: 'Zadzwoń'; }

	/* Email */
	.cursor-ring.is-email::before { content: 'Napisz'; }

	/* Form input fields — schowaj cursor (native text) */
	.cursor-dot.is-text, .cursor-ring.is-text {
		opacity: 0 !important;
	}

	/* Drag/scroll hint */
	.cursor-ring.is-scroll {
		width: 64px !important; height: 64px !important;
		border-color: rgba(255,255,255,.5) !important;
		color: rgba(255,255,255,.85) !important;
	}
	.cursor-ring.is-scroll::before { content: 'Przewiń'; }
}

/* Mobile/touch — none */
@media (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring { display: none !important; }
}

/* ===========================================================
   REVEAL-ON-SCROLL stronger (Apple-style fade+slide)
   =========================================================== */
.reveal-strong {
	opacity: 0;
	transform: translateY(80px) scale(0.94);
	transition: opacity 1.1s var(--ease-fluid), transform 1.2s var(--ease-fluid);
	will-change: opacity, transform;
}
.reveal-strong.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ===========================================================
   IMAGE GROW — Apple-style scroll-triggered scale up
   =========================================================== */
.scroll-grow {
	overflow: hidden;
	position: relative;
}
.scroll-grow img,
.scroll-grow video {
	transform: scale(1.18);
	transition: transform 1.5s var(--ease-fluid);
	will-change: transform;
}
.scroll-grow.in-view img,
.scroll-grow.in-view video {
	transform: scale(1);
}
.scroll-grow.in-view-passed img,
.scroll-grow.in-view-passed video {
	transform: scale(1.08);
}

/* ===========================================================
   FORCE PARALLAX — silniejszy efekt na elementach
   =========================================================== */
.parallax-strong {
	will-change: transform;
}

/* ===========================================================
   Sticky scroll moments — overlap effect (Apple-style)
   =========================================================== */
.overlap-section {
	position: relative;
	margin-top: -10vh; /* nieco nakłada się na poprzednią sekcję */
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	overflow: hidden;
	z-index: 2;
}
@media (max-width: 720px) {
	.overlap-section { margin-top: -5vh; border-top-left-radius: 24px; border-top-right-radius: 24px; }
}