/*
 * Motion: scroll reveals and the sticky nav.
 * Everything is progressive enhancement: elements are only hidden once
 * assets/js/motion.js has tagged them, and reduced-motion visitors see
 * the final state with no animation.
 */

:root {
	--muzzi-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Scroll reveals ---------- */

[data-reveal] {
	opacity: 0;
	transition: opacity 0.7s var(--muzzi-ease), transform 0.7s var(--muzzi-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

[data-reveal="up"] {
	transform: translateY(24px);
}

[data-reveal="scale"] {
	transform: scale(0.97);
}

[data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Photos ease out of a slight zoom as their frame reveals. */
.muzzi-media,
.muzzi-pdetail__image,
.muzzi-card__media {
	overflow: hidden;
	border-radius: var(--muzzi-radius);
}

.muzzi-media[data-reveal] img,
.muzzi-pdetail__image[data-reveal] img {
	transform: scale(1.08);
	transition: transform 1.3s var(--muzzi-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.muzzi-media[data-reveal].is-in img,
.muzzi-pdetail__image[data-reveal].is-in img {
	transform: none;
}

/* ---------- Sticky nav: hides on scroll down, returns on scroll up ---------- */

nav.muzzi-nav {
	transition: transform 0.35s var(--muzzi-ease), box-shadow 0.35s ease, background-color 0.2s ease;
}

body.nav-stuck .muzzi-header {
	padding-top: calc(32px + var(--nav-h, 67px));
}

body.nav-stuck nav.muzzi-nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0;
	padding-inline: max(var(--muzzi-pad-inline), calc((100% - 1500px) / 2));
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-110%);
}

body.nav-stuck.nav-show nav.muzzi-nav {
	transform: none;
}

/* A transformed ancestor would trap the full-screen mobile menu: keep it flat while open. */
html.has-modal-open nav.muzzi-nav {
	transform: none !important;
}

.admin-bar.nav-stuck nav.muzzi-nav {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.nav-stuck nav.muzzi-nav {
		top: 46px;
	}
}

@media (max-width: 781px) {
	body.nav-stuck .muzzi-header {
		padding-top: calc(16px + var(--nav-h, 58px));
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal].is-in,
	.muzzi-media[data-reveal] img,
	.muzzi-pdetail__image[data-reveal] img {
		opacity: 1;
		transform: none;
		transition: none;
	}

	nav.muzzi-nav {
		transition: none;
	}
}