/*
 * Animacje sekcji przy przewijaniu (assets/js/animations.js przypisuje
 * efekty przez data-reveal i dodaje .is-revealed, gdy element wjedzie na
 * ekran). Wszystko pod html.fotolady-anim — bez JS, przy "ogranicz
 * animacje" i w edytorze treść jest od razu widoczna.
 *
 * Efekty przesuwają przez osobne właściwości translate / scale, nie przez
 * transform — dzięki temu nie gryzą się z przechyleniem zdjęć ani z hoverem
 * kart. Po zakończeniu (data-reveal-done) reguły przestają działać i element
 * wraca do własnych przejść.
 */

/* Przejścia efektów razem z przejściami hovera (uniesienie, cień, ramka,
 * tło) — gdyby efekt je zastąpił, hover w trakcie animacji wejścia
 * przeskakiwałby bez płynnego przejścia. Opóźnienie kaskady dotyczy tylko
 * efektów. */
html.fotolady-anim [data-reveal]:not([data-reveal-done]) {
	--fotolady-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fotolady-hover-transitions:
		transform 0.4s var(--fotolady-hover-ease, ease) 0s,
		box-shadow 0.4s var(--fotolady-hover-ease, ease) 0s,
		border-color 0.4s var(--fotolady-hover-ease, ease) 0s,
		background-color 0.2s ease 0s,
		color 0.2s ease 0s;
	transition:
		opacity 0.7s var(--fotolady-ease) var(--fotolady-reveal-delay, 0ms),
		translate 0.7s var(--fotolady-ease) var(--fotolady-reveal-delay, 0ms),
		scale 0.7s var(--fotolady-ease) var(--fotolady-reveal-delay, 0ms),
		filter 0.9s var(--fotolady-ease) var(--fotolady-reveal-delay, 0ms),
		var(--fotolady-hover-transitions);
}

/* --- Wejście od dołu (domyślny) ----------------------------------------- */

html.fotolady-anim [data-reveal="rise"]:not(.is-revealed) {
	opacity: 0;
	translate: 0 28px;
}

/* --- Wjazd z boku (lista usług, pas negatywu) ---------------------------- */

html.fotolady-anim [data-reveal="slide"]:not(.is-revealed) {
	opacity: 0;
	translate: 40px 0;
}

/* --- Wyskok (pas liczb, koralowa karta, numer 404) ---------------------- */

html.fotolady-anim [data-reveal="pop"]:not(.is-revealed) {
	opacity: 0;
	scale: 0.94;
}

/* --- Nagłówek sekcji łapie ostrość jak obiektyw ------------------------- */

html.fotolady-anim [data-reveal="heading"]:not(.is-revealed) {
	opacity: 0;
	translate: 0 0.6em;
	filter: blur(10px);
}

html.fotolady-anim [data-reveal="heading"].is-revealed:not([data-reveal-done]) {
	filter: blur(0);
}

/* --- Zdjęcie się "wywołuje" jak odbitka w ciemni: najpierw szybko pojawia
 * się jasna, szara i nieostra, potem powoli nabiera koloru, kontrastu
 * i ostrości, a kadr lekko się oddala. Kolor i ostrość ruszają chwilę po
 * pojawieniu się i idą płynnie (ease-in-out) — inaczej cała zmiana działa
 * się jeszcze w przezroczystym zdjęciu i efekt wyglądał jak mignięcie. */

html.fotolady-anim [data-reveal="develop"]:not([data-reveal-done]) {
	transition:
		opacity 0.45s ease-out var(--fotolady-reveal-delay, 0ms),
		var(--fotolady-hover-transitions);
}

html.fotolady-anim [data-reveal="develop"]:not([data-reveal-done]) img {
	transition:
		filter 2s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--fotolady-reveal-delay, 0ms) + 250ms),
		scale 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) var(--fotolady-reveal-delay, 0ms),
		transform 0.7s var(--fotolady-hover-ease, ease) 0s;
	will-change: filter, scale;
}

html.fotolady-anim [data-reveal="develop"]:not(.is-revealed) {
	opacity: 0;
}

html.fotolady-anim [data-reveal="develop"]:not(.is-revealed) img {
	scale: 1.12;
	filter: grayscale(1) blur(10px) brightness(1.55) contrast(0.7);
}

html.fotolady-anim [data-reveal="develop"].is-revealed:not([data-reveal-done]) img {
	scale: 1;
	filter: grayscale(0) blur(0) brightness(1) contrast(1);
}

/* --- Zdjęcie odsłaniane kurtyną od lewej (sekcja pakietów) ---------------
 * Przycina się zawartość, nie sam obserwowany element — element przycięty
 * do zera IntersectionObserver uznaje za niewidoczny. */

html.fotolady-anim [data-reveal="wipe"]:not([data-reveal-done]) > * {
	transition: clip-path 1.1s var(--fotolady-ease);
	transition-delay: var(--fotolady-reveal-delay, 0ms);
}

html.fotolady-anim [data-reveal="wipe"]:not(.is-revealed) > * {
	clip-path: inset(0 0 0 100%);
}

html.fotolady-anim [data-reveal="wipe"].is-revealed:not([data-reveal-done]) > * {
	clip-path: inset(0);
}

/* --- Krok: najpierw rysuje się kreska, potem numer, tytuł i opis -------- */

html.fotolady-anim [data-reveal="line"]:not([data-reveal-done]) {
	border-top-color: transparent !important;
	background: linear-gradient(currentColor, currentColor) 0 0 / 0 2px no-repeat border-box;
	transition: background-size 0.8s var(--fotolady-ease);
	transition-delay: var(--fotolady-reveal-delay, 0ms);
}

html.fotolady-anim [data-reveal="line"].is-revealed:not([data-reveal-done]) {
	background-size: 100% 2px;
}

html.fotolady-anim [data-reveal="line"]:not([data-reveal-done]) > * {
	transition:
		opacity 0.6s var(--fotolady-ease),
		translate 0.6s var(--fotolady-ease);
	transition-delay: calc(var(--fotolady-reveal-delay, 0ms) + 250ms);
}

html.fotolady-anim [data-reveal="line"]:not([data-reveal-done]) > :nth-child(2) {
	transition-delay: calc(var(--fotolady-reveal-delay, 0ms) + 350ms);
}

html.fotolady-anim [data-reveal="line"]:not([data-reveal-done]) > :nth-child(n + 3) {
	transition-delay: calc(var(--fotolady-reveal-delay, 0ms) + 450ms);
}

html.fotolady-anim [data-reveal="line"]:not(.is-revealed) > * {
	opacity: 0;
	translate: 0 14px;
}