/******************************************************************
Stylesheet: Motion (style handle mediaschneider-motion)

The scroll motion of the whole site, driven by library/js/motion.js:
- parallax: pictures move inside their fixed mask (motion.js sets --ms-py);
- the titles on the blue squares further down (Bildteaser, Kontakt) glide in
  from the left, coupled to the scroll position (motion.js sets --ms-hx);
- scroll reveals of lists (key figures, Akkordeon, cards, team): from below,
  staggered (motion.js sets data-ms-reveal, --ms-i and .is-in).
The text sections (Agentur, Text, Kunden, Partner, Einblicke) stay still on
purpose (calmer). The homepage intro is in hero/style.css and header/style.css,
the key figures in agentur/style.css, the card hover in library/css/cards.css.

Everything here applies only with JavaScript (html.ms-motion, set inline in
the <head>, see mediaschneider_motion_class()) and without "reduce motion":
without them nothing is hidden and nothing moves.
Tokens (speed, easing, distances, parallax size): library/css/style.css.
******************************************************************/

@media (prefers-reduced-motion: no-preference) {

	/*********************
	PARALLAX
	Masks: Einstieg, Bildteaser, Kontakt (from 48rem) and the picture of a post
	clip themselves; team photos and the Seiteneinstieg have a .ms-media mask.
	The picture is larger than its mask (--ms-parallax-scale), so the movement
	never shows an edge.
	*********************/

	.ms-motion [data-ms-parallax] {
		scale: var(--ms-parallax-scale);
		translate: 0 var(--ms-py, 0);
		will-change: translate;
	}

	.ms-motion .ms-team__photo[data-ms-parallax] {
		--ms-parallax-scale: 1.1;
	}

	/* Mobile: the Kontakt picture sits above the blue area, without a mask, and stands still. */
	@media (width < 48rem) {
		.ms-motion .ms-kontakt__image[data-ms-parallax] {
			scale: none;
			translate: none;
			will-change: auto;
		}
	}


	/*********************
	SQUARE TITLES (Bildteaser, Kontakt)
	The square, its text and its link stand still; only the title glides from
	the left to its place while the square scrolls into the screen.
	*********************/

	.ms-motion :is(.ms-teaser__title, .ms-kontakt__title) {
		translate: var(--ms-hx, 0) 0;
		will-change: translate;
	}


	/*********************
	SCROLL REVEALS
	*********************/

	.ms-motion [data-ms-reveal] {
		opacity: 0;
		translate: 0 var(--ms-reveal-distance);
		transition:
			opacity var(--ms-reveal-duration) var(--ms-ease-out),
			translate var(--ms-reveal-duration) var(--ms-ease-out);
		transition-delay: calc(var(--ms-i, 0) * var(--ms-stagger));
	}

	/* Section titles (Team, post): a slow fade-in from a little to the left */
	.ms-motion [data-ms-reveal="head"] {
		translate: var(--ms-head-distance) 0;
		transition:
			opacity var(--ms-head-duration) var(--ms-ease-soft),
			translate var(--ms-head-duration) var(--ms-ease-soft);
	}

	.ms-motion [data-ms-reveal].is-in {
		opacity: 1;
		translate: 0 0;
	}
}