/*
 * Entrances on scroll (user, 2026-11-02: „animacje na wzór amerlink.com.pl,
 * ciut subtelniejsze”), after the Amerlink theme (assets/css/home-motion.css
 * there) with shorter moves, no turn of the cards and slightly shorter
 * times. assets/js/motion.js arms the blocks that are still below the screen;
 * nothing here hides anything on its own, so a visitor without JS or with
 * reduced motion sees the page as it is. The entrances use the separate
 * translate and scale properties, so a transform from a section stylesheet
 * stays untouched; after its entrance a block drops these classes.
 *
 * Kinds: text rises (soft), a large block rises with a hint of zoom (lg), a
 * photo beside the text comes from its own side (left, right; on phones it
 * rises), cards rise with a slight zoom (deal), list items come from the left
 * (step). Items in a row come one after another, smoothly with a long soft
 * fade (seq, „Dla organizatorów”) or a little quicker (row, the FAQ
 * questions), or from both sides towards the middle (converge, the Miejsce
 * icon strip); the user asked for these on 2026-11-02, also on phones. The move and the fade
 * are two animations: the fade is shorter, the move slows down gently, so a
 * block is seen arriving instead of appearing at once.
 */

:root
{
	--hf-motion-ease: cubic-bezier(0.25, 1, 0.5, 1); /* easeOutQuart */
	--hf-motion-soft: 18px;
	--hf-motion-lg: 26px;
	--hf-motion-side: 28px;
	--hf-motion-deal: 22px;
	--hf-motion-step: 16px;
	--hf-motion-seq: 14px;
	--hf-motion-row: 12px;
}

/* Shorter moves on phones: the same distance reads as a jump there. */
@media (max-width: 40em)
{
	:root
	{
		--hf-motion-soft: 12px;
		--hf-motion-lg: 16px;
		--hf-motion-seq: 10px;
	}
}

/* The start pose holds only until the entrance begins (.hf-motion-in); the
   animations then run from their `from` frame to the block's own values (no
   `to` frame), so nothing waits hidden and jumps in at the end. */
.hf-motion-armed:not(.hf-motion-in)
{
	opacity: 0;
}

.hf-motion-armed.hf-motion-soft:not(.hf-motion-in)
{
	translate: 0 var(--hf-motion-soft);
}

.hf-motion-armed.hf-motion-lg:not(.hf-motion-in)
{
	translate: 0 var(--hf-motion-lg);
	scale: 0.985;
}

.hf-motion-armed.hf-motion-left:not(.hf-motion-in)
{
	translate: calc(-1 * var(--hf-motion-side)) 0;
}

.hf-motion-armed.hf-motion-right:not(.hf-motion-in)
{
	translate: var(--hf-motion-side) 0;
}

.hf-motion-armed.hf-motion-deal:not(.hf-motion-in)
{
	translate: 0 var(--hf-motion-deal);
	scale: 0.97;
}

.hf-motion-armed.hf-motion-step:not(.hf-motion-in)
{
	translate: calc(-1 * var(--hf-motion-step)) 0;
}

.hf-motion-armed.hf-motion-seq:not(.hf-motion-in)
{
	translate: 0 var(--hf-motion-seq);
}

.hf-motion-armed.hf-motion-row:not(.hf-motion-in)
{
	translate: 0 var(--hf-motion-row);
}

.hf-motion-armed.hf-motion-in.hf-motion-soft
{
	animation: hf-motion-soft 0.8s var(--hf-motion-ease) both, hf-motion-fade 0.5s linear both;
}

.hf-motion-armed.hf-motion-in.hf-motion-lg
{
	animation: hf-motion-lg 0.95s var(--hf-motion-ease) both, hf-motion-fade 0.6s linear both;
}

.hf-motion-armed.hf-motion-in.hf-motion-left
{
	animation: hf-motion-left 0.95s var(--hf-motion-ease) both, hf-motion-fade 0.6s linear both;
}

.hf-motion-armed.hf-motion-in.hf-motion-right
{
	animation: hf-motion-right 0.95s var(--hf-motion-ease) both, hf-motion-fade 0.6s linear both;
}

.hf-motion-armed.hf-motion-in.hf-motion-deal
{
	animation: hf-motion-deal 0.85s var(--hf-motion-ease) both, hf-motion-fade 0.5s linear both;
}

.hf-motion-armed.hf-motion-in.hf-motion-step
{
	animation: hf-motion-step 0.75s var(--hf-motion-ease) both, hf-motion-fade 0.45s linear both;
}

/* One after another, smoothly: a long fade that eases out. */
.hf-motion-armed.hf-motion-in.hf-motion-seq
{
	animation: hf-motion-seq 1s var(--hf-motion-ease) both, hf-motion-fade 0.8s cubic-bezier(0.33, 0, 0.2, 1) both;
}

/* One after another, a little quicker than seq (slowed down on the user's
   request, 2026-11-02: 0.55 s → 0.85 s, fade 0.35 s → 0.6 s). */
.hf-motion-armed.hf-motion-in.hf-motion-row
{
	animation: hf-motion-row 0.85s var(--hf-motion-ease) both, hf-motion-fade 0.6s cubic-bezier(0.33, 0, 0.2, 1) both;
}

@keyframes hf-motion-fade
{
	from
	{
		opacity: 0;
	}
}

@keyframes hf-motion-soft
{
	from
	{
		translate: 0 var(--hf-motion-soft);
	}
}

@keyframes hf-motion-lg
{
	from
	{
		translate: 0 var(--hf-motion-lg);
		scale: 0.985;
	}
}

@keyframes hf-motion-left
{
	from
	{
		translate: calc(-1 * var(--hf-motion-side)) 0;
	}
}

@keyframes hf-motion-right
{
	from
	{
		translate: var(--hf-motion-side) 0;
	}
}

@keyframes hf-motion-deal
{
	from
	{
		translate: 0 var(--hf-motion-deal);
		scale: 0.97;
	}
}

@keyframes hf-motion-step
{
	from
	{
		translate: calc(-1 * var(--hf-motion-step)) 0;
	}
}

@keyframes hf-motion-seq
{
	from
	{
		translate: 0 var(--hf-motion-seq);
	}
}

@keyframes hf-motion-row
{
	from
	{
		translate: 0 var(--hf-motion-row);
	}
}

/*
 * Hero on load (Home; the page hero of the subpages, e.g. O nas; the
 * intros of Wydarzenia, Inspiracje, Kontakt and the page not found, there
 * with its search and buttons; the header of an event and of a post): it is
 * on screen from the first paint, so it comes in here, without the script (a
 * visitor without JS sees the same; the photo, the largest element, is not
 * animated). Filled backwards only: after the entrance nothing holds these
 * properties. The heading is painted at once and only glides into place, so
 * it does not wait for a fade.
 */
@media (prefers-reduced-motion: no-preference)
{
	.hf-hero__eyebrow,
	.hf-hero__lead,
	.hf-hero__actions,
	.hf-page-hero__eyebrow,
	.hf-page-hero__tagline,
	.hf-page-hero__lead,
	.hf-page-hero__actions,
	.hf-page-hero__more,
	.hf-events-intro__eyebrow,
	.hf-events-intro__lead,
	.hf-event-header__back,
	.hf-event-header__facts,
	.hf-page-intro__eyebrow,
	.hf-page-intro__lead,
	.hf-page-intro__search,
	.hf-page-intro__actions,
	.hf-breadcrumbs,
	.hf-post-header__eyebrow,
	.hf-post-header__lead,
	.hf-post-actions
	{
		animation: hf-motion-soft 0.85s var(--hf-motion-ease) backwards, hf-motion-fade 0.55s linear backwards;
	}

	.hf-hero__title,
	.hf-page-hero__title,
	.hf-events-intro__title,
	.hf-event-header__title,
	.hf-page-intro__title,
	.hf-post-header__title
	{
		animation: hf-motion-soft 0.9s var(--hf-motion-ease) 0.06s backwards;
	}

	.hf-page-hero__tagline
	{
		animation-delay: 0.14s;
	}

	.hf-post-header__eyebrow
	{
		animation-delay: 0.04s;
	}

	.hf-hero__lead,
	.hf-page-hero__lead,
	.hf-events-intro__lead,
	.hf-event-header__facts,
	.hf-page-intro__lead,
	.hf-post-header__lead
	{
		animation-delay: 0.18s;
	}

	.hf-hero__actions,
	.hf-page-hero__actions,
	.hf-page-intro__search,
	.hf-post-actions
	{
		animation-delay: 0.28s;
	}

	.hf-page-hero__more,
	.hf-page-intro__actions
	{
		animation-delay: 0.36s;
	}

	/* The Miejsce icon strip right under the page hero (rows of three below
	   64em): the outer items from their sides first, the middle one rising.
	   Not for an item the script has armed (below the screen) or already
	   brought in: the same animation names would not run again, so its
	   entrance on scroll was skipped (2026-11-02). */
	.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):nth-child(3n + 1)
	{
		animation: hf-motion-left 1.4s var(--hf-motion-ease) 0.35s backwards, hf-motion-fade 1s cubic-bezier(0.33, 0, 0.2, 1) 0.35s backwards;
	}

	.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):nth-child(3n + 2)
	{
		animation: hf-motion-soft 1.4s var(--hf-motion-ease) 0.65s backwards, hf-motion-fade 1s cubic-bezier(0.33, 0, 0.2, 1) 0.65s backwards;
	}

	.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):nth-child(3n)
	{
		animation: hf-motion-right 1.4s var(--hf-motion-ease) 0.35s backwards, hf-motion-fade 1s cubic-bezier(0.33, 0, 0.2, 1) 0.35s backwards;
	}

	/* One row of six: the left three from the left, the right three from the
	   right, in pairs from the edges to the middle. */
	@media (min-width: 64em)
	{
		.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):nth-child(-n + 3)
		{
			animation-name: hf-motion-left, hf-motion-fade;
		}

		.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):nth-child(n + 4)
		{
			animation-name: hf-motion-right, hf-motion-fade;
		}

		.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):is(:nth-child(1), :nth-child(6))
		{
			animation-delay: 0.35s;
		}

		.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):is(:nth-child(2), :nth-child(5))
		{
			animation-delay: 0.65s;
		}

		.hf-place-features__item:not(.hf-motion-armed, .hf-motion-done):is(:nth-child(3), :nth-child(4))
		{
			animation-delay: 0.95s;
		}
	}

	/* Kontakt, „Napisz lub zadzwoń” right under the page intro (user,
	   2026-11-03: „animuj napisy”): its texts come in after the intro, both
	   headings (the contact details and the form) together, then the text,
	   the contact items from the left one after another and the social
	   icons. The box and the rest of the form stay still; the form heading
	   only here, not in the same form on Home. As the strip above: not for a
	   block the script has armed (below the screen) or already brought in,
	   nor for the heading of a form the script brings in (below the screen
	   on tablets and phones, the heading comes with its form). */
	.hf-contact-inquiry__title:not(.hf-motion-armed, .hf-motion-done),
	.hf-contact-inquiry__text:not(.hf-motion-armed, .hf-motion-done),
	.hf-contact-inquiry__social:not(.hf-motion-armed, .hf-motion-done),
	.hf-contact-inquiry__form:not(.hf-motion-armed, .hf-motion-done) .hf-contact-form__heading
	{
		animation: hf-motion-soft 0.85s var(--hf-motion-ease) 0.3s backwards, hf-motion-fade 0.55s linear 0.3s backwards;
	}

	.hf-contact-inquiry__text:not(.hf-motion-armed, .hf-motion-done)
	{
		animation-delay: 0.42s;
	}

	.hf-contact-inquiry__item:not(.hf-motion-armed, .hf-motion-done)
	{
		animation: hf-motion-step 0.75s var(--hf-motion-ease) 0.54s backwards, hf-motion-fade 0.45s linear 0.54s backwards;
	}

	.hf-contact-inquiry__item:not(.hf-motion-armed, .hf-motion-done):nth-child(2)
	{
		animation-delay: 0.66s;
	}

	.hf-contact-inquiry__item:not(.hf-motion-armed, .hf-motion-done):nth-child(3)
	{
		animation-delay: 0.78s;
	}

	.hf-contact-inquiry__social:not(.hf-motion-armed, .hf-motion-done)
	{
		animation-delay: 0.9s;
	}

	/* The page not found (user, 2026-11-03, after the texts of Kontakt): it
	   fits on the first screen, so its pointers (at most three) come in here
	   too, after the intro with its search and buttons, smoothly one after
	   another as the pointers elsewhere on scroll. As the strip above: not
	   for one the script has armed (below the screen on phones) or already
	   brought in. */
	.error404 .hf-pointers__item:not(.hf-motion-armed, .hf-motion-done)
	{
		animation: hf-motion-seq 1s var(--hf-motion-ease) 0.5s backwards, hf-motion-fade 0.8s cubic-bezier(0.33, 0, 0.2, 1) 0.5s backwards;
	}

	.error404 .hf-pointers__item:not(.hf-motion-armed, .hf-motion-done):nth-child(2)
	{
		animation-delay: 0.76s;
	}

	.error404 .hf-pointers__item:not(.hf-motion-armed, .hf-motion-done):nth-child(3)
	{
		animation-delay: 1.02s;
	}
}

/*
 * Items that come in from both sides at once, towards the middle, the outer
 * ones first (converge in assets/js/motion.js; the Miejsce icon strip, user
 * 2026-11-02: „równocześnie od lewej i prawej idąc do środka”): a longer way
 * than a photo from the side. The strip clips what sticks out while they
 * slide in, so the page does not scroll sideways (clip: no scroll box).
 */
.hf-motion-converge,
.hf-place-features__item
{
	--hf-motion-side: 40px;
}

.hf-place-features__items
{
	overflow-x: clip;
}

/* Slower than a photo from the side (user, 2026-11-02: „za szybko”): a
   1.4 s move and a 1 s fade that eases out; the pairs 0.3 s apart. */
.hf-motion-armed.hf-motion-in.hf-motion-converge
{
	animation-duration: 1.4s, 1s;
	animation-timing-function: var(--hf-motion-ease), cubic-bezier(0.33, 0, 0.2, 1);
}

@media (max-width: 40em)
{
	.hf-motion-converge,
	.hf-place-features__item
	{
		--hf-motion-side: 24px;
	}
}

/* A printed page shows everything (the script also drops the classes). */
@media print
{
	.hf-motion-armed:not(.hf-motion-in)
	{
		opacity: 1;
		translate: none;
		scale: none;
	}
}