/*
 * The motion layer.
 *
 * Three effects, no more, and each of them says something the layout cannot:
 *
 *   rise   — text and lists arrive from below, so a chapter assembles rather
 *            than appears.
 *   plate  — photographs wipe open from the bottom edge, which reads as a
 *            printed plate being uncovered rather than as a slide.
 *   track  — the wall moves on its own, defined in base.css because it is a
 *            layout behaviour, not a scroll effect.
 *
 * This file always loads, even with motion switched off in the Customizer: it
 * also carries the reduced-motion rules, and those have to apply whether or
 * not the effect is on. With motion off, `body` has no .me-motion class and
 * nothing below matches, so the cost is an unused stylesheet rather than a
 * broken one.
 *
 * Nothing here hides content on its own. The classes are applied by
 * assets/js/motion.js, so if the script never runs nothing is ever hidden — the
 * failure mode of a reveal that hides content in CSS is a blank page on a phone
 * with a slow connection, which is not a trade worth making.
 */

.me-motion [data-me-motion="rise"] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--me-speed-slow) var(--me-ease-enter),
		transform var(--me-speed-slow) var(--me-ease-enter);
	transition-delay: var(--me-delay, 0ms);
}

.me-motion [data-me-motion="rise"].is-visible {
	opacity: 1;
	transform: none;
}

/*
 * The plate wipes open. clip-path rather than a transform, because a translate
 * on a photograph in a grid pulls the caption with it and leaves a gap above
 * the frame; clipping keeps the box where the layout put it.
 */
.me-motion [data-me-motion="plate"] .me-plate__frame,
.me-motion [data-me-motion="plate"] > .me-lot__media,
.me-motion [data-me-motion="plate"] > .me-entry__media {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s var(--me-ease-enter);
	transition-delay: var(--me-delay, 0ms);
}

.me-motion [data-me-motion="plate"].is-visible .me-plate__frame,
.me-motion [data-me-motion="plate"].is-visible > .me-lot__media,
.me-motion [data-me-motion="plate"].is-visible > .me-entry__media {
	clip-path: inset(0 0 0 0);
}

.me-motion [data-me-motion="plate"] .me-plate__frame img,
.me-motion [data-me-motion="plate"] > .me-lot__media img {
	transform: scale(1.06);
	transition: transform 1.4s var(--me-ease-enter);
	transition-delay: var(--me-delay, 0ms);
}

.me-motion [data-me-motion="plate"].is-visible .me-plate__frame img,
.me-motion [data-me-motion="plate"].is-visible > .me-lot__media img {
	transform: none;
}

/*
 * The cover is the one place in this theme where a headline is allowed to
 * arrive rather than simply be there, and the exception is deliberate: a
 * section head animates while somebody is scrolling towards it, which is
 * exactly when a reader wants to be reading, while the cover animates the
 * moment the page opens, in front of an audience that is looking at it anyway.
 * The whole first screen assembles in about a second.
 *
 * The stage wipes rather than fades, because the photographs behind it are
 * already drifting: a fade on top of a drift is two motions saying the same
 * thing. Full-bleed, so the wipe is a curtain drawn down the page.
 *
 * The attribute is on the section and the clip is on the stage, and that split
 * is not cosmetic. An IntersectionObserver measures the clipped rectangle, so
 * an element that is clipped to nothing never intersects, never receives
 * .is-visible, and stays clipped — the cover photograph would be invisible
 * forever, with no error anywhere to explain it. The observed element has to
 * be the one that is not being clipped.
 */
.me-motion .me-hero[data-me-motion="plate"] .me-hero__stage {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.5s var(--me-ease-enter);
}

.me-motion .me-hero[data-me-motion="plate"].is-visible .me-hero__stage {
	clip-path: inset(0 0 0 0);
}

/*
 * A section's own head is never animated. The running head and the headline are
 * the thing the reader came for; making them fade in means the page is at its
 * least readable exactly when someone is deciding whether to stay.
 */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.me-motion [data-me-motion="rise"],
	.me-motion [data-me-motion="plate"] .me-plate__frame,
	.me-motion [data-me-motion="plate"] > .me-lot__media,
	.me-motion [data-me-motion="plate"] > .me-entry__media,
	.me-motion .me-hero[data-me-motion="plate"] .me-hero__stage {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	/*
	 * The drift stops too. It is not a reveal — it is a background that never
	 * settles, which is precisely what this preference is asking not to have.
	 */
	.me-hero__slide.is-active img {
		animation: none;
	}

	.me-motion .me-wall__track {
		animation: none;
	}

	.me-card__media img,
	.me-lot__media img,
	.me-entry__media img {
		transition: none;
	}

	.me-scroll-cue::after {
		animation: none;
	}

	.me-hero__slide {
		transition: none;
	}
}