/* =========================================================================
   ICF Karting — v4 (the masterpiece, final pass)
   Wczytywany PO style.css, style-v2.css, style-v3.css.
   Dodaje: logo branding, video hero, kinetic typography, card spotlight,
   sticky chapter nav, live indicator, top scroll progress bar,
   refined motion choreography.
   ========================================================================= */

:root {
	--c-live: #2ee06b;
	--ease-fluid: cubic-bezier(.22, 1, .36, 1);
	--ease-luxe:  cubic-bezier(.6, 0, .2, 1);
}

/* Smoother body baseline */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }

/* ===========================================================
   TOP PROGRESS BAR — page scroll indicator
   =========================================================== */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	width: 0%;
	background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
	z-index: 1000;
	transition: width .08s linear;
	pointer-events: none;
	box-shadow: 0 0 12px var(--c-accent);
}

/* ===========================================================
   LOGO refinements
   =========================================================== */
.site-logo img {
	height: 38px; width: auto;
	display: block;
	transition: opacity .3s var(--ease-soft);
}
.site-logo--hero img { height: 48px; }
.site-header.is-scrolled .site-logo img { height: 32px; }

/* Hide text fallback when img is present */
.site-logo:has(img) .site-logo__text { display: none; }

/* ===========================================================
   LIVE INDICATOR — "otwarte teraz" w headerze
   =========================================================== */
.live-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px 6px 10px;
	background: rgba(46, 224, 107, .12);
	border: 1px solid rgba(46, 224, 107, .35);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--c-live);
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.live-pill__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-live);
	box-shadow: 0 0 8px var(--c-live);
	animation: livePulse 2s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes livePulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.5; }
}

@media (max-width: 880px) {
	.live-pill { display: none; }
}

/* ===========================================================
   HERO — VIDEO version, full bleed
   =========================================================== */
.hero-mega--video .hero-mega__media {
	background: #000;
}
.hero-mega--video video {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: heroVideoFade 1.6s var(--ease-fluid) forwards;
}
@keyframes heroVideoFade {
	from { opacity: 0; transform: scale(1.12); }
	to   { opacity: 1; transform: scale(1.05); }
}

/* Kinetic background type — wielki napis "ICF" w tle hero */
.hero-mega__kinetic {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.hero-mega__kinetic-text {
	font-size: clamp(20rem, 36vw, 44rem);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.08);
	text-stroke: 1px rgba(255,255,255,.08);
	white-space: nowrap;
	user-select: none;
	transform: translateY(20%);
}

/* Hero overlay refinement — ciemniejszy gradient */
.hero-mega--video .hero-mega__overlay {
	background:
		radial-gradient(ellipse at 25% 100%, rgba(0,0,0,.92) 0%, transparent 65%),
		linear-gradient(180deg, rgba(6,6,8,.45) 0%, rgba(6,6,8,.65) 50%, rgba(6,6,8,.95) 100%);
}

/* ===========================================================
   STICKY CHAPTER NAV — boczny indicator po lewej
   =========================================================== */
.chapter-nav {
	position: fixed;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: none;
}
@media (min-width: 1280px) { .chapter-nav { display: flex; flex-direction: column; gap: 14px; } }

.chapter-nav__dot {
	display: block;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background .25s var(--ease-soft), transform .25s var(--ease-spring);
	position: relative;
}
.chapter-nav__dot:hover {
	background: rgba(255,255,255,.4);
	transform: scale(1.3);
}
.chapter-nav__dot.is-active {
	background: var(--c-accent);
	transform: scale(1.4);
}
.chapter-nav__label {
	position: absolute;
	left: 22px; top: 50%;
	transform: translateY(-50%);
	background: rgba(15,15,18,.92);
	color: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--ease-soft), transform .2s var(--ease-spring);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.12);
}
.chapter-nav__dot:hover .chapter-nav__label {
	opacity: 1;
	transform: translateY(-50%) translateX(4px);
}

/* ===========================================================
   CARD SPOTLIGHT — Linear-style cursor follow
   =========================================================== */
.spotlight {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.spotlight::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 45, 32, 0.18) 0%,
		transparent 50%);
	opacity: 0;
	transition: opacity .35s var(--ease-soft);
	pointer-events: none;
	z-index: 0;
}
.spotlight:hover::before { opacity: 1; }

/* Apply to bento and persona cards by default */
.bento-cell, .persona, .compare__col, .testimonial-v2, .feature, .timeline__step {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.bento-cell::before, .persona::before, .compare__col::before, .testimonial-v2::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 45, 32, 0.16) 0%,
		transparent 55%);
	opacity: 0;
	transition: opacity .35s var(--ease-soft);
	pointer-events: none;
	z-index: 0;
}
.bento-cell:hover::before, .persona:hover::before, .compare__col:hover::before, .testimonial-v2:hover::before {
	opacity: 1;
}
.bento-cell > *, .persona > *, .compare__col > *, .testimonial-v2 > * { position: relative; z-index: 1; }
.bento-cell__media, .persona__media { z-index: -1 !important; }

/* ===========================================================
   VIDEO TILE — w bento i innych miejscach
   =========================================================== */
.bento-cell--video {
	background: #000;
}
.bento-cell--video .bento-cell__media video {
	width: 100%; height: 100%;
	object-fit: cover;
}
.bento-cell--video .bento-cell__media::after {
	background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
}

/* Mini "▶" badge na video tile */
.video-badge {
	position: absolute;
	top: 16px; left: 16px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px 5px 8px;
	background: rgba(0,0,0,.55);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.04em;
	backdrop-filter: blur(8px);
	z-index: 1;
	text-transform: uppercase;
}
.video-badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 6px var(--c-accent);
	animation: livePulse 2s ease-in-out infinite;
}

/* ===========================================================
   AMBIENT VIDEO SECTION — pełnoekranowy między-przerywnik
   =========================================================== */
.ambient {
	position: relative;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: #000;
}
.ambient video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.85;
}
.ambient::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, transparent 30%, transparent 70%, var(--c-bg-deep) 100%);
	pointer-events: none;
}
.ambient__quote {
	position: absolute;
	left: 0; right: 0; bottom: 12%;
	z-index: 2;
	text-align: center;
	padding: 0 var(--gutter);
}
.ambient__quote h2 {
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
	color: #fff;
	max-width: 18ch;
	margin-inline: auto;
	text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.ambient__quote h2 em { color: var(--c-accent); font-style: normal; }

/* ===========================================================
   FLEET SHOWCASE — refinement (3 karty z głębią)
   =========================================================== */
.fleet-counter {
	display: inline-flex; align-items: baseline; gap: 12px;
	font-family: var(--font-sans);
	margin-bottom: 16px;
}
.fleet-counter__big {
	font-size: clamp(4rem, 8vw, 6.4rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
	background: linear-gradient(180deg, #fff, #888);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fleet-counter__label {
	font-size: 1rem;
	color: var(--c-text-2);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.fleet-breakdown {
	display: flex; gap: 14px; flex-wrap: wrap;
	margin-top: 24px;
}
.fleet-breakdown span {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 999px;
	font-size: 0.88rem;
	color: var(--c-text);
	font-weight: 500;
}
.fleet-breakdown strong { color: var(--c-accent); font-weight: 700; }

/* ===========================================================
   KARNETY/PASS — nowa sekcja z pakietami przejazdów
   =========================================================== */
.passes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}
@media (max-width: 880px) { .passes { grid-template-columns: 1fr; } }
.pass {
	padding: 32px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	display: flex; flex-direction: column;
	transition: border-color .3s, transform .4s var(--ease-apple);
	position: relative;
}
.pass:hover { border-color: rgba(255,45,32,0.3); transform: translateY(-4px); }
.pass--feat {
	background: linear-gradient(180deg, rgba(255,45,32,0.1) 0%, rgba(255,255,255,.01) 100%);
	border-color: rgba(255,45,32,0.3);
}
.pass__num {
	font-size: 3.6rem; font-weight: 800;
	letter-spacing: -0.045em; line-height: 1;
	color: #fff;
	margin: 0 0 4px;
}
.pass__num em {
	color: var(--c-text-3); font-style: normal; font-size: 1.4rem;
	font-weight: 600; margin-left: 4px;
}
.pass__name { color: var(--c-text-2); font-size: 0.95rem; margin-bottom: 18px; }
.pass__price { font-size: 1.6rem; font-weight: 700; color: var(--c-accent); margin: 0 0 4px; letter-spacing: -0.02em; }
.pass__per { color: var(--c-text-3); font-size: 0.85rem; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.pass__save {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.08);
	font-size: 0.85rem;
	color: var(--c-live);
	font-weight: 600;
}
.pass__save::before { content: '↓ '; }

/* ===========================================================
   STAT REFINEMENT — bigger, more impact
   =========================================================== */
.stat__num {
	font-size: clamp(3.6rem, 8vw, 6.4rem);
}

/* ===========================================================
   HERO refinements — eyebrow with live indicator
   =========================================================== */
.hero-mega__eyebrow--live::before {
	background: var(--c-live);
	box-shadow: 0 0 12px var(--c-live);
}

/* Hero title — better legibility on video */
.hero-mega--video .hero-mega__title {
	text-shadow: 0 4px 40px rgba(0,0,0,.5);
}

/* ===========================================================
   PRICING TABLE LE MANS — polished
   =========================================================== */
.lemans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 720px) { .lemans-grid { grid-template-columns: 1fr; } }
.lemans-card {
	padding: 32px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	transition: border-color .3s, transform .4s var(--ease-apple);
}
.lemans-card:hover { border-color: rgba(255,45,32,0.3); transform: translateY(-4px); }
.lemans-card__time {
	font-size: 3rem; font-weight: 800;
	letter-spacing: -0.04em;
	color: #fff;
	margin: 0 0 8px;
}
.lemans-card__time em { color: var(--c-accent); font-style: normal; }
.lemans-card__row {
	display: flex; justify-content: space-between; padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 0.95rem;
}
.lemans-card__row:last-child { border-bottom: 0; }
.lemans-card__row strong { color: var(--c-text-3); font-weight: 500; }

/* ===========================================================
   Final spacing tweaks
   =========================================================== */
.hero-mega__features { gap: 24px; }
.hero-mega__feature { font-size: 0.88rem; }
.hero-mega__lead { font-weight: 400; line-height: 1.5; }

/* Smoother transition on header */
.site-header { transition: padding .35s var(--ease-fluid), background .3s var(--ease-soft); }
.site-header.is-scrolled { padding: 4px 0; }
.site-header__inner { min-height: 64px; }

/* Card-XL refinement w v4 — less padding, more elegant */
.card-xl { background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%); }
.card-xl__name { font-size: 1.45rem; font-weight: 700; }

/* Big quote refinement */
.big-quote::before {
	background: radial-gradient(circle, rgba(255,45,32,0.16) 0%, transparent 45%);
}
.big-quote__text {
	font-weight: 500;
}

/* CTA Final — bigger */
.cta-final {
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #200a0a 100%);
}

/* Footer w v4 */
.site-footer { padding-top: clamp(60px, 8vw, 100px); }
.site-footer__logo img { height: 44px; width: auto; }