/* ============================================================
   MVCKO — slider hero
   assets/hero-slider.css
   ============================================================ */

.mvhero{
	--pink:#FF6A97;
	--bg:#161616;
	--line:rgba(255,255,255,.14);
	--txt:#F4F4F4;
	--max:1560px;

	position:relative;
	font-family:'DM Sans',system-ui,-apple-system,sans-serif;
	color:var(--txt);
	background:var(--bg);

	/* full-bleed — wychodzi poza kontener Elementora */
	width:100vw;max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);

	height:100vh;height:100dvh;
	min-height:560px;max-height:900px;
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
}
.mvhero *,.mvhero *::before,.mvhero *::after{box-sizing:border-box}

/* ---------- slajdy: przesuw z paralaksą ---------- */
.mvhero{--mvhero-wipe:800ms;--mvhero-speed:6000ms;--ease:cubic-bezier(.65,0,.35,1)}
.mvhero__track{position:absolute;inset:0;background:var(--bg);overflow:hidden}

.mvhero__slide{
	position:absolute;inset:0;
	display:flex;align-items:flex-end;
	visibility:hidden;z-index:1;
	overflow:hidden;               /* zdjęcie w paralaksie nie może wystawać poza kadr */
	will-change:transform;
}
.mvhero__slide.is-active {visibility:visible;z-index:3}
.mvhero__slide.is-leaving{visibility:visible;z-index:2}

/* nowy slajd wjeżdża z prawej, stary odjeżdża w lewo wolniej i gaśnie */
.mvhero__slide.is-entering{animation:mvheroIn var(--mvhero-wipe) var(--ease) both}
.mvhero__slide.is-leaving {animation:mvheroOut var(--mvhero-wipe) var(--ease) both}
.mvhero.is-back .mvhero__slide.is-entering{animation-name:mvheroInBack}
.mvhero.is-back .mvhero__slide.is-leaving {animation-name:mvheroOutBack}

/* paralaksa: zdjęcie w środku jedzie wolniej niż sam kadr */
.mvhero__slide.is-entering .mvhero__media{animation:mvheroPar var(--mvhero-wipe) var(--ease) both}
.mvhero.is-back .mvhero__slide.is-entering .mvhero__media{animation-name:mvheroParBack}
.mvhero__slide.is-leaving .mvhero__media{animation:mvheroDim var(--mvhero-wipe) var(--ease) both}

@keyframes mvheroIn     {from{transform:translateX(100%)} to{transform:translateX(0)}}
@keyframes mvheroInBack {from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes mvheroOut    {from{transform:translateX(0)}    to{transform:translateX(-30%)}}
@keyframes mvheroOutBack{from{transform:translateX(0)}    to{transform:translateX(30%)}}
@keyframes mvheroPar    {from{transform:translateX(-45%)} to{transform:translateX(0)}}
@keyframes mvheroParBack{from{transform:translateX(45%)}  to{transform:translateX(0)}}
@keyframes mvheroDim    {from{filter:brightness(1)}       to{filter:brightness(.4)}}

.mvhero__slide.is-leaving .mvhero__inner{opacity:0;transition:opacity .25s ease}

.mvhero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.mvhero__media img{
	width:100%;height:100%;object-fit:cover;display:block;
	transform:scale(1.08);
}
/* po wejściu zdjęcie powoli dojeżdża do spoczynku, aż do zmiany slajdu */
.mvhero__slide.is-active .mvhero__media img{
	transform:scale(1.01);
	transition:transform var(--mvhero-speed) cubic-bezier(.2,.7,.2,1);
}
.mvhero:not(.is-ready) .mvhero__media img{transition:none}



.mvhero__veil{
	position:absolute;inset:0;z-index:1;
	background:
		linear-gradient(180deg, rgba(22,22,22,.55) 0%, rgba(22,22,22,0) 35%, rgba(22,22,22,.88) 100%),
		linear-gradient(90deg, rgba(22,22,22,.72) 0%, rgba(22,22,22,0) 60%);
}

/* ---------- treść ---------- */
.mvhero__inner{
	position:relative;z-index:2;
	width:100%;max-width:var(--max);
	margin:0 auto;padding:0 32px 96px;
}
/* elementy treści startują schowane, wchodzą po cięciu */
.mvhero__eyebrow,
.mvhero__lead,
.mvhero__cta{opacity:0;transform:translateY(16px)}

.mvhero__slide.is-active .mvhero__eyebrow{
	animation:mvheroUp .6s cubic-bezier(.2,.8,.2,1) calc(var(--mvhero-wipe) * .55) both;
}
.mvhero__slide.is-active .mvhero__lead{
	animation:mvheroUp .7s cubic-bezier(.2,.8,.2,1) calc(var(--mvhero-wipe) * .6 + var(--words,3) * 70ms + 120ms) both;
}
.mvhero__slide.is-active .mvhero__cta{
	animation:mvheroUp .7s cubic-bezier(.2,.8,.2,1) calc(var(--mvhero-wipe) * .6 + var(--words,3) * 70ms + 240ms) both;
}
@keyframes mvheroUp{
	from{opacity:0;transform:translateY(16px)}
	to{opacity:1;transform:translateY(0)}
}

/* tytuł: każde słowo w okienku, wyjeżdża od dołu zza krawędzi */
.mvhero__w{
	display:inline-block;overflow:hidden;
	vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em;
}
.mvhero__wi{
	display:inline-block;
	transform:translateY(110%) rotate(4deg);
	transform-origin:0 100%;
}
.mvhero__slide.is-active .mvhero__wi{
	animation:mvheroWord .8s cubic-bezier(.2,.9,.2,1) both;
	animation-delay:calc(var(--mvhero-wipe) * .5 + var(--i) * 70ms);
}
@keyframes mvheroWord{
	from{transform:translateY(110%) rotate(4deg)}
	to{transform:translateY(0) rotate(0)}
}

/* pierwszy slajd przy starcie strony: treść wchodzi od razu, bez czekania na cięcie */
.mvhero:not(.is-ready) .mvhero__slide.is-active .mvhero__wi,
.mvhero:not(.is-ready) .mvhero__slide.is-active .mvhero__eyebrow,
.mvhero:not(.is-ready) .mvhero__slide.is-active .mvhero__lead,
.mvhero:not(.is-ready) .mvhero__slide.is-active .mvhero__cta{animation:none;opacity:1;transform:none}

.mvhero__eyebrow{
	display:block;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:10px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--pink);margin-bottom:12px;
}
.mvhero__title{
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:clamp(34px,6vw,84px);line-height:.98;
	letter-spacing:-.035em;text-transform:uppercase;
	margin:0 0 18px;color:var(--txt);
}
.mvhero__lead{
	font-size:16px;line-height:1.6;color:#D8D8DA;
	max-width:46ch;margin:0 0 28px;
}
.mvhero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- przyciski (liquid glass) ---------- */
.mvhero__btn{
	position:relative;overflow:hidden;isolation:isolate;
	display:inline-grid;place-items:center;
	height:52px;padding:0 30px;border-radius:12px;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:11px;letter-spacing:.14em;text-transform:uppercase;
	text-decoration:none !important;cursor:pointer;white-space:nowrap;
	transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;
}
.mvhero__btn--primary{
	color:#161616 !important;
	border:1.5px solid rgba(255,255,255,.28);
	background:
		radial-gradient(120% 160% at 12% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%),
		radial-gradient(120% 160% at 88% 100%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
		var(--pink);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		inset 0 -2px 4px rgba(0,0,0,.18),
		0 12px 28px rgba(255,106,151,.30);
}
.mvhero__btn--primary::after{
	content:'';position:absolute;inset:-40% -25%;z-index:-1;pointer-events:none;
	background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.18) 54%,transparent 66%);
	transform:translateX(-32%);
	animation:mvheroSheen 5.5s ease-in-out infinite;
}
.mvhero__btn--primary:hover{
	transform:translateY(-2px);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 18px 38px rgba(255,106,151,.44);
}
.mvhero__btn--ghost{
	color:var(--txt) !important;
	border:1px solid var(--line);
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 58%),
		rgba(255,255,255,.04);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.mvhero__btn--ghost:hover{
	transform:translateY(-1px);
	color:var(--pink) !important;border-color:rgba(255,106,151,.5);
}
@keyframes mvheroSheen{
	0%,100%{transform:translateX(-32%)}
	50%    {transform:translateX(32%)}
}

/* ---------- strzałki ---------- */
.mvhero__arrow{
	position:absolute;top:50%;transform:translateY(-50%);z-index:5;
	width:52px;height:52px;display:grid;place-items:center;
	border-radius:50%;
	border:1px solid var(--line);
	background:rgba(255,255,255,.06);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	color:var(--txt);cursor:pointer;padding:0;
	transition:.22s cubic-bezier(.2,.8,.2,1);
}
.mvhero__arrow svg{width:22px;height:22px}
.mvhero__arrow:hover{color:var(--pink);border-color:rgba(255,106,151,.55)}
.mvhero__arrow--prev{left:24px}
.mvhero__arrow--next{right:24px}
.mvhero__arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
.mvhero__arrow--next:hover{transform:translateY(-50%) translateX(3px)}

/* ---------- kropki: pasek postępu ---------- */
.mvhero__dots{
	position:absolute;left:0;right:0;bottom:32px;z-index:5;
	display:flex;justify-content:center;gap:10px;
}
.mvhero__dot{
	position:relative;overflow:hidden;
	width:34px;height:4px;padding:0;
	border:0;border-radius:100px;
	background:rgba(255,255,255,.26);
	cursor:pointer;
	transition:width .45s var(--ease),background .25s;
}
.mvhero__dot:hover{background:rgba(255,255,255,.5)}
.mvhero__dot.is-active{width:72px;background:rgba(255,255,255,.22)}

.mvhero__dot::after{
	content:'';position:absolute;inset:0;
	background:var(--pink);border-radius:inherit;
	transform:scaleX(0);transform-origin:0 50%;
}
/* bez autoplay kropka jest po prostu różowa */
.mvhero__dot.is-active::after{transform:scaleX(1)}
.mvhero.is-playing .mvhero__dot.is-active::after{
	transform:scaleX(0);
	animation:mvheroFill var(--mvhero-speed) linear forwards;
}
.mvhero.is-paused .mvhero__dot.is-active::after{animation-play-state:paused}
@keyframes mvheroFill{to{transform:scaleX(1)}}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:960px){
	.mvhero{min-height:520px}
	.mvhero__inner{padding:0 16px 84px}
	.mvhero__lead{font-size:14px;margin-bottom:22px}
	.mvhero__cta{flex-direction:column;align-items:stretch}
	.mvhero__btn{width:100%}
	.mvhero__arrow{display:none}
	.mvhero__dots{bottom:24px}
}

@media (prefers-reduced-motion:reduce){
	.mvhero__slide,
	.mvhero__slide.is-active,
	.mvhero__media img{transition:none !important}
	.mvhero__slide.is-entering,
	.mvhero__slide.is-leaving,
	.mvhero__slide .mvhero__media{animation:none !important}
	.mvhero__wi,
	.mvhero__eyebrow,
	.mvhero__lead,
	.mvhero__cta{animation:none !important;opacity:1 !important;transform:none !important}
	.mvhero__btn--primary::after{animation:none}
	.mvhero.is-playing .mvhero__dot.is-active::after{animation:none;transform:scaleX(1)}
}