/*
 * TheSybin — animacje wejścia (zob. assets/js/reveal.js).
 * Stan początkowy tylko gdy: JS działa (html.ts-motion ustawia reveal.js) i system nie ogranicza ruchu.
 * html.ts-reveal-done (awaryjnie po 4 s albo przy ograniczeniu ruchu) pokazuje wszystko.
 */

.ts-split__word,
.ts-split__char {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	/* Nagłówki do podziału: ukryte, dopóki reveal.js ich nie podzieli (bez mignięcia). */
	html.ts-motion:not(.ts-reveal-done) :is(.ts-reveal-words, .ts-reveal-chars, .ts-reveal-chars-back):not([data-ts-split]) {
		opacity: 0;
	}

	html.ts-motion:not(.ts-reveal-done) .ts-reveal:not(.is-revealed) {
		opacity: 0;
		transform: translate3d(0, 60px, 0);
	}

	html.ts-motion .ts-reveal {
		transition:
			opacity 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ts-delay, 0ms),
			transform 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ts-delay, 0ms);
	}

	/* Fokus z klawiatury w elemencie, który jeszcze czeka na animację (przycisk, akordeon, link): pokaż go od razu,
	   bez 1,25 s zanikania — pierścień fokusu widoczny natychmiast (2.4.7). */
	html.ts-motion:not(.ts-reveal-done) .ts-reveal:not(.is-revealed):focus-within {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Słowa: x 20px + zanikanie, stagger 50 ms, opóźnienie 0,5 s (heading-style-1) */
	html.ts-motion:not(.ts-reveal-done) .ts-reveal-words:not(.is-revealed) .ts-split__word {
		opacity: 0;
		transform: translate3d(20px, 0, 0);
	}

	html.ts-motion .ts-reveal-words .ts-split__word {
		transition:
			opacity 1s ease-out calc(500ms + var(--ts-delay, 0ms) + var(--ts-i, 0) * 50ms),
			transform 1s ease-out calc(500ms + var(--ts-delay, 0ms) + var(--ts-i, 0) * 50ms);
	}

	/* Litery: x 20px, stagger 30 ms, opóźnienie 0,1 s, power2.out (heading-style-2) */
	html.ts-motion:not(.ts-reveal-done) .ts-reveal-chars:not(.is-revealed) .ts-split__char {
		opacity: 0;
		transform: translate3d(20px, 0, 0);
	}

	html.ts-motion .ts-reveal-chars .ts-split__char {
		transition:
			opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(100ms + var(--ts-delay, 0ms) + var(--ts-i, 0) * 30ms),
			transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(100ms + var(--ts-delay, 0ms) + var(--ts-i, 0) * 30ms);
	}

	/* Litery z odbiciem: x 50px, stagger 20 ms, Back.easeOut (heading-style-3) */
	html.ts-motion:not(.ts-reveal-done) .ts-reveal-chars-back:not(.is-revealed) .ts-split__char {
		opacity: 0;
		transform: translate3d(50px, 0, 0);
	}

	html.ts-motion .ts-reveal-chars-back .ts-split__char {
		transition:
			opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--ts-delay, 0ms) + var(--ts-i, 0) * 20ms),
			transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--ts-delay, 0ms) + var(--ts-i, 0) * 20ms);
	}

	/* Obraz: clip-path od lewej, 1,5 s power2.out (image-style-1) */
	html.ts-motion:not(.ts-reveal-done) .ts-reveal-image:not(.is-revealed) img {
		clip-path: inset(0 100% 0 0);
	}

	html.ts-motion .ts-reveal-image img {
		transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ts-delay, 0ms);
	}
}

/* ==========================================================================
   Komponenty (C6, C10, C11) — ruch tylko przy no-preference; w reduce stan końcowy bez animacji.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* C10 odznaka: jeden obrót −90° → 0° w 5 s po wejściu w widok (D4, 2.2.2). Stan końcowy = wzorzec. */
	html.ts-motion:not(.ts-reveal-done) .ts-badge-rotate:not(.is-revealed) {
		transform: rotate(-90deg);
	}

	html.ts-motion .ts-badge-rotate {
		transition: transform 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ts-delay, 0ms);
	}

	/* C11 przycisk wideo: jeden cykl pulsowania (3 s) po wejściu w widok oraz przy najechaniu/fokusie */
	html.ts-motion .ts-video-btn.is-revealed::after {
		animation: ts-ripple 3s ease 0.3s 1;
	}

	html.ts-motion .ts-video-btn.is-revealed::before {
		animation: ts-ripple 3s ease 0.9s 1;
	}

	html.ts-motion .ts-video-btn.is-revealed .ts-video-btn__icon::after {
		animation: ts-ripple 3s ease 0s 1;
	}

	.ts-video-btn:is(:hover, :focus-visible)::after {
		animation: ts-ripple-again 3s ease 0.3s 1;
	}

	.ts-video-btn:is(:hover, :focus-visible)::before {
		animation: ts-ripple-again 3s ease 0.9s 1;
	}

	.ts-video-btn:is(:hover, :focus-visible) .ts-video-btn__icon::after {
		animation: ts-ripple-again 3s ease 0s 1;
	}

	@keyframes ts-ripple {
		70% {
			box-shadow: 0 0 0 15px currentColor;
			opacity: 0;
		}

		100% {
			box-shadow: 0 0 0 0 currentColor;
			opacity: 0;
		}
	}

	@keyframes ts-ripple-again {
		70% {
			box-shadow: 0 0 0 15px currentColor;
			opacity: 0;
		}

		100% {
			box-shadow: 0 0 0 0 currentColor;
			opacity: 0;
		}
	}
}

/* Pierścienie pulsowania są białe niezależnie od koloru ikony */
.ts-video-btn::before,
.ts-video-btn::after,
.ts-video-btn__icon::after {
	color: var(--wp--preset--color--white);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* Błysk „shiny glass” na zdjęciu: .ts-shine (obraz, grupa) i obraz w karcie wpisu (600 ms linear) */
	:is(.ts-shine, .ts-post-card .wp-block-post-featured-image) {
		position: relative;
		overflow: hidden;
	}

	:is(.ts-shine, .ts-post-card .wp-block-post-featured-image)::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 200%;
		height: 0;
		background-color: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%) rotate(-45deg);
		pointer-events: none;
	}

	:is(.ts-shine:hover, .ts-post-card:hover .wp-block-post-featured-image)::after {
		height: 250%;
		background-color: transparent;
		transition: all 600ms linear;
	}

	/* Powiększenie zdjęcia w karcie wpisu */
	.ts-post-card .wp-block-post-featured-image img {
		transition: transform 0.5s ease-in-out;
	}

	.ts-post-card:hover .wp-block-post-featured-image img {
		transform: scale(1.1);
	}

	/* Powiększenie zdjęcia w kaflu (.ts-zoom — image-box) */
	.ts-zoom img {
		transition: transform 0.4s ease;
	}

	.ts-zoom:hover img {
		transform: scale(1.1);
	}
}