/* ==========================================================================
   Entrance animations as you scroll (assets/js/motion.js) — home, About,
   Services, Portfolio, FAQ, Contact, the legal pages and the case studies
   --------------------------------------------------------------------------
   Only with html.has-motion (set by the script, so nothing is hidden without
   JavaScript or with reduced motion). Until an item scrolls in it's hidden;
   on .is-in it plays its entrance once, then goes back to its own styles
   (fill "backwards"), so hover effects keep working afterwards. Items in a
   group follow one another (--i).
   ========================================================================== */

.has-motion [data-motion]:not(.is-in) {
	opacity: 0;
}

.has-motion [data-motion].is-in {
	--m-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--m-delay: calc(var(--i, 0) * 0.09s);
}

/* Text — fades up. */
.has-motion [data-motion="text"].is-in {
	animation: dd-m-text 0.8s var(--m-ease) var(--m-delay) backwards;
}

@keyframes dd-m-text {
	from {
		opacity: 0;
		translate: 0 24px;
	}
}

/* Images and cards — "lift and settle": rise 48px into place. Nothing is
   clipped, so the card's shadow travels with it (the old bottom-up reveal
   clipped the shadow, which then popped on as the entrance ended). The fade
   is over by 35%, so frosted panels look the same for the rest of the move
   as after it. Chosen 21 Oct 2026 (design-choice D2). */
.has-motion [data-motion="image"].is-in {
	animation: dd-m-image 1.1s var(--m-ease) var(--m-delay) backwards;
}

@keyframes dd-m-image {
	from {
		opacity: 0;
		translate: 0 48px;
	}

	35% {
		opacity: 1;
	}
}

/* Rows — slide in from the side (left by default). */
.has-motion [data-motion="row"].is-in {
	animation: dd-m-row-left 0.9s var(--m-ease) var(--m-delay) backwards;
}

.has-motion [data-motion="row"][data-motion-from="right"].is-in,
.has-motion .t2-work-list__row[data-motion].is-in {
	animation-name: dd-m-row-right;
}

@keyframes dd-m-row-left {
	from {
		opacity: 0;
		translate: -80px 0;
	}
}

@keyframes dd-m-row-right {
	from {
		opacity: 0;
		translate: 80px 0;
	}
}

/* Tags — like text, quicker one after another. */
.has-motion [data-motion="tag"].is-in {
	animation: dd-m-text 0.6s var(--m-ease) calc(var(--i, 0) * 0.03s) backwards;
}

/* Small cards — rise from a little smaller. */
.has-motion [data-motion="pop"].is-in {
	animation: dd-m-pop 0.9s var(--m-ease) calc(var(--i, 0) * 0.12s) backwards;
}

@keyframes dd-m-pop {
	from {
		opacity: 0;
		scale: 0.88;
		translate: 0 30px;
	}
}

/* Sheets — fall onto the desk from above, one after another, settling into
   their own tilt (the case study overview). */
.has-motion [data-motion="drop"].is-in {
	animation: dd-m-drop 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--i, 0) * 0.18s) backwards;
}

@keyframes dd-m-drop {
	from {
		opacity: 0;
		translate: 0 -70px;
		rotate: 6deg;
		scale: 1.04;
	}

	40% {
		opacity: 1;
	}
}

/* Hidden at this screen size when the page loaded: no entrance. */
.has-motion [data-motion].is-skipped {
	animation: none;
}