/* Enklawa – animacje i interakcje (enklawa-core) */
:root {
	--ek-ease: cubic-bezier(.25, .65, .3, 1);
	--ek-ease-out: cubic-bezier(.22, .8, .24, 1);
	--ek-ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 4. Pojawianie przy przewijaniu ---------- */
html.ek-anim body .ek-r {
	opacity: 0;
	translate: 0 36px;
	transition: opacity 1.1s var(--ek-ease-soft), translate 1.3s var(--ek-ease);
	will-change: opacity, translate;
}
html.ek-anim body .ek-r.ek-in {
	opacity: 1;
	translate: none;
}
html.ek-anim body .ek-r-img {
	clip-path: inset(10% 5% 10% 5% round var(--ek-r, 24px));
	transition: clip-path 1.6s var(--ek-ease);
}
html.ek-anim body .ek-r-img.ek-in {
	clip-path: inset(0 0 0 0 round var(--ek-r, 24px));
}

/* ---------- 1. Tytuł hero – słowa wyostrzają się z rozmycia ---------- */
html.ek-anim body #hero .hero__title:not(.ek-split) {
	opacity: 0;
}
.ek-anim .hero__title .ek-w {
	display: inline-block;
	opacity: 0;
	filter: blur(12px);
	translate: 0 .25em;
	transition: opacity 1.1s var(--ek-ease-soft), filter 1.2s var(--ek-ease-soft), translate 1.2s var(--ek-ease);
}
.ek-anim .hero__title.ek-in .ek-w {
	opacity: 1;
	filter: blur(0);
	translate: none;
}

/* ---------- 2. Oś etapów – linia rysuje się, flagi wskakują ---------- */
@keyframes ek-draw {
	from { clip-path: inset(0 calc(100% - 8px) 0 0 round 4px); }
	to { clip-path: inset(0 0 0 0 round 4px); }
}
@keyframes ek-pop {
	0% { opacity: 0; translate: 0 -14px; }
	60% { opacity: 1; translate: 0 2px; }
	100% { opacity: 1; translate: 0 0; }
}
.ek-anim .hero__axis.ek-axis .hero__bar,
.ek-anim .osb.ek-axis .osb__track {
	clip-path: inset(0 calc(100% - 8px) 0 0 round 4px);
}
.ek-anim .hero__axis.ek-axis .stage__flag,
.ek-anim .osb.ek-axis .osb__flag {
	opacity: 0;
}
.ek-anim .hero__axis.ek-axis.ek-in .hero__bar,
.ek-anim .osb.ek-axis.ek-in .osb__track {
	animation: ek-draw 1.9s var(--ek-ease-out) both;
}
.ek-anim .hero__axis.ek-axis.ek-in .stage__flag,
.ek-anim .osb.ek-axis.ek-in .osb__flag {
	animation: ek-pop .8s var(--ek-ease) both;
}
.ek-anim .ek-axis.ek-in .stage--1 .stage__flag, .ek-anim .ek-axis.ek-in .osb__stop--1 .osb__flag { animation-delay: .35s; }
.ek-anim .ek-axis.ek-in .stage--2 .stage__flag, .ek-anim .ek-axis.ek-in .osb__stop--2 .osb__flag { animation-delay: .75s; }
.ek-anim .ek-axis.ek-in .stage--3 .stage__flag, .ek-anim .ek-axis.ek-in .osb__stop--3 .osb__flag { animation-delay: 1.15s; }
.ek-anim .ek-axis.ek-in .stage--4 .stage__flag, .ek-anim .ek-axis.ek-in .osb__stop--4 .osb__flag { animation-delay: 1.55s; }
.ek-anim .ek-axis.ek-done .hero__bar,
.ek-anim .ek-axis.ek-done .osb__track { clip-path: none; animation: none; }
.ek-anim .ek-axis.ek-done .stage__flag,
.ek-anim .ek-axis.ek-done .osb__flag { opacity: 1; animation: none; }

/* ---------- 6. Przyciski – połysk + strzałka ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* połysk jako przesuwające się tło – bez przycinania zawartości przycisku */
	.btn {
		background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 62%);
		background-size: 260% 100%;
		background-repeat: no-repeat;
		background-position: 130% 0;
		transition: background-color .2s, color .2s, border-color .2s, transform .2s, background-position 0s;
	}
	.btn:hover {
		background-position: -30% 0;
		transition: background-color .2s, color .2s, border-color .2s, transform .2s, background-position 1.1s var(--ek-ease-soft);
	}
	.btn img {
		transition: translate .5s var(--ek-ease), filter .2s;
	}
	.btn:hover img {
		translate: 5px 0;
	}
	.btn:active {
		scale: .97;
	}
}

/* ---------- 7. Zdjęcia – delikatny zoom po najechaniu ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ek-zoom img,
	.offer-card .offer-card__img,
	.post-card .post-card__img {
		transition: scale 1.4s var(--ek-ease), opacity 1s var(--ek-ease-soft), transform 2s var(--ek-ease);
	}
	.ek-zoom:hover img,
	.offer-card:hover .offer-card__img,
	.post-card:hover .post-card__img {
		scale: 1.06;
		transform: none;
	}
	#hero .hero__media:hover .hero__img { scale: 1.04; }
	.offer-card .offer-card__body { transition: translate .8s var(--ek-ease); }
	.offer-card:hover .offer-card__body { translate: 0 -6px; }
	.offer-card .link-arrow img,
	.post-card .link-arrow img { transition: translate .6s var(--ek-ease), transform .6s var(--ek-ease); }
	.offer-card:hover .link-arrow img { translate: 6px 0; }
}

/* ---------- 7b. Kafelki „Pierwsze zajęcia są bezpłatne” – pasek ---------- */
.step-card {
	position: relative;
	overflow: hidden;
}
.step-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--e-orange, #F7883A);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .9s var(--ek-ease);
	pointer-events: none;
}
.step-card:hover::after {
	transform: scaleX(1);
}

/* ---------- 8. Karty – lekkie 3D za kursorem ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.offer-card.ek-tilt {
		transform: perspective(1000px) rotateX(var(--ek-rx, 0deg)) rotateY(var(--ek-ry, 0deg));
		transition: transform .6s var(--ek-ease), opacity 1.1s var(--ek-ease-soft), translate 1.3s var(--ek-ease);
		will-change: transform;
	}
}

/* ---------- 9. Paralaksa zdjęć ---------- */
.ek-par {
	will-change: translate;
}

/* ---------- 10. Menu przy przewijaniu (biały pasek, płynniej) ---------- */
@media (prefers-reduced-motion: no-preference) {
	#brx-header.brx-sticky {
		transition: background-color .2s, transform .55s var(--ek-ease);
	}
}

/* ---------- 11. FAQ – płynniej + ikona ---------- */
@keyframes ek-icon {
	from { opacity: .2; rotate: -90deg; scale: .8; }
	to { opacity: 1; rotate: 0deg; scale: 1; }
}
.faq-acc .faq-item.ek-touched .faq-icon {
	animation: ek-icon .5s var(--ek-ease) both;
}
.faq-acc .faq-item .accordion-content-wrapper > * {
	transition: opacity .6s var(--ek-ease-soft), translate .7s var(--ek-ease);
}
.faq-acc .faq-item:not(.brx-open) .accordion-content-wrapper > * {
	opacity: 0;
	translate: 0 -6px;
}

/* ---------- Bezpieczeństwo: ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
	.ek-anim .ek-r, .ek-anim .ek-r-img, .ek-anim .hero__title .ek-w {
		opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important;
	}
}

/* ---------- Hero strony głównej: zmiana etapu, odstępy, podpis osi, oś mobile (1.0.6) ---------- */
/* 1) mniejszy odstęp tytuł → przycisk, oś wyżej (desktop/tablet) */
@media (min-width: 1280px), (min-width: 992px) and (min-height: 921px) {
  html body #hero#hero .hero-panel__btn.hero-panel__btn { margin-top: 28px; }
  html body #hero#hero .hero__axis.hero__axis { margin-top: 44px; }
}
/* 2) podpis aktywnego etapu rośnie od środka – skala zamiast zmiany rozmiaru czcionki */
@media (min-width: 768px) {
  html body #hero#hero .hero__stops .stage .stage__label {
    font-size: 20px; font-weight: 600; transform-origin: 50% 0;
    transition: transform .45s cubic-bezier(.25,.65,.3,1), color .3s;
  }
  html body #hero#hero[data-etap="1"] .hero__stops .stage--1 .stage__label,
  html body #hero#hero[data-etap="2"] .hero__stops .stage--2 .stage__label,
  html body #hero#hero[data-etap="3"] .hero__stops .stage--3 .stage__label,
  html body #hero#hero[data-etap="4"] .hero__stops .stage--4 .stage__label {
    font-size: 20px; color: var(--e-black); transform: scale(1.2); text-shadow: 0 0 .6px var(--e-black);
  }
  html body #hero#hero .hero__stops .stage .stage__sub { transition: transform .45s cubic-bezier(.25,.65,.3,1); }
  html body #hero#hero[data-etap="1"] .stage--1 .stage__sub, html body #hero#hero[data-etap="2"] .stage--2 .stage__sub,
  html body #hero#hero[data-etap="3"] .stage--3 .stage__sub, html body #hero#hero[data-etap="4"] .stage--4 .stage__sub { transform: translateY(5px); }
}
@media (min-width: 1200px) and (max-width: 1299px) { html body #hero#hero .hero__stops .stage .stage__label { font-size: 17px; } html body #hero#hero[data-etap] .hero__stops .stage .stage__label { font-size: 17px; } }
@media (min-width: 992px) and (max-width: 1199px) { html body #hero#hero .hero__stops .stage .stage__label { font-size: 15px; } html body #hero#hero[data-etap] .hero__stops .stage .stage__label { font-size: 15px; } }
/* 3) zmiana etapu: stary tekst znika szybko, nowy wchodzi dopiero po nim (bez „cienia”) */
html body #hero#hero .hero-panel {
  transition: opacity .16s ease-out, visibility 0s linear .16s;
}
html body #hero#hero[data-etap="1"] .hero-panel--1, html body #hero#hero[data-etap="2"] .hero-panel--2,
html body #hero#hero[data-etap="3"] .hero-panel--3, html body #hero#hero[data-etap="4"] .hero-panel--4 {
  transition: opacity .4s cubic-bezier(.4,0,.2,1) .16s, visibility 0s linear .16s;
}
html body #hero#hero .hero-panel .hero-panel__title, html body #hero#hero .hero-panel .hero-panel__btn {
  translate: 0 12px; transition: translate .5s cubic-bezier(.25,.65,.3,1) 0s;
}
html body #hero#hero[data-etap="1"] .hero-panel--1 :is(.hero-panel__title,.hero-panel__btn),
html body #hero#hero[data-etap="2"] .hero-panel--2 :is(.hero-panel__title,.hero-panel__btn),
html body #hero#hero[data-etap="3"] .hero-panel--3 :is(.hero-panel__title,.hero-panel__btn),
html body #hero#hero[data-etap="4"] .hero-panel--4 :is(.hero-panel__title,.hero-panel__btn) { translate: none; }
html body #hero#hero[data-etap] .hero-panel .hero-panel__title { transition-delay: .16s; }
html body #hero#hero[data-etap] .hero-panel .hero-panel__btn { transition-delay: .24s; }
html body #hero#hero .hero__img { transition: opacity .6s cubic-bezier(.4,0,.2,1), transform 1.6s cubic-bezier(.25,.65,.3,1), scale 1.4s cubic-bezier(.25,.65,.3,1); }

/* 4) mobile: oś do przesuwania palcem + płynne rozwijanie etapu */
@media (max-width: 767px) {
  html body #hero#hero .m-stage .m-stage__body {
    display: flex; max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height .55s cubic-bezier(.25,.65,.3,1), opacity .3s ease, margin-top .55s cubic-bezier(.25,.65,.3,1);
  }
  html body #hero#hero[data-etap="1"] .m-stage--1 .m-stage__body, html body #hero#hero[data-etap="2"] .m-stage--2 .m-stage__body,
  html body #hero#hero[data-etap="3"] .m-stage--3 .m-stage__body, html body #hero#hero[data-etap="4"] .m-stage--4 .m-stage__body {
    max-height: 420px; opacity: 1; margin-top: 12px; transition-delay: 0s, .12s, 0s;
  }
  html body #hero#hero .m-stage__title { transition: font-size .35s cubic-bezier(.25,.65,.3,1); }
  html body #hero#hero .m-stage__flag { transition: transform .35s cubic-bezier(.25,.65,.3,1); }
  /* strefa osi: pionowe przeciąganie zamiast przewijania strony */
  html body #hero#hero .ek-rail {
    position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 84px;
    touch-action: none; cursor: grab;
  }
  html body #hero#hero .ek-rail.is-drag { cursor: grabbing; }
  html body #hero#hero .ek-rail__hint {
    position: absolute; left: 50%; translate: -50% 0; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(17,17,17,.18); display: grid; place-items: center;
    opacity: 0; transition: opacity .3s, top .45s cubic-bezier(.25,.65,.3,1); pointer-events: none;
  }
  html body #hero#hero .ek-rail__hint::before, html body #hero#hero .ek-rail__hint::after {
    content: ""; position: absolute; left: 50%; width: 7px; height: 7px; border: solid var(--e-black); border-width: 2px 2px 0 0;
  }
  html body #hero#hero .ek-rail__hint::before { top: 5px; translate: -50% 0; rotate: -45deg; }
  html body #hero#hero .ek-rail__hint::after { bottom: 5px; translate: -50% 0; rotate: 135deg; }
  html body #hero#hero .ek-rail.is-drag .ek-rail__hint { opacity: 1; }
  @keyframes ek-nudge { 0%,100% { translate: 0 0; } 30% { translate: 0 -6px; } 60% { translate: 0 4px; } }
  html body #hero#hero .ek-rail.is-hint ~ .m-stage .m-stage__flag { animation: ek-nudge 1.4s ease-in-out 2; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #hero#hero .hero__img { transform: scale(1.06); }
  html body #hero#hero[data-etap="1"] .hero__img--1,
  html body #hero#hero[data-etap="2"] .hero__img--2,
  html body #hero#hero[data-etap="3"] .hero__img--3,
  html body #hero#hero[data-etap="4"] .hero__img--4 { transform: scale(1); }
  html body #hero#hero .stage__flag { transition: transform .5s cubic-bezier(.25,.65,.3,1); }
}