/* ------------------------------------------------------------------ */
/* Scroll motion (assets/js/motion.js)                                */
/* Everything here waits for html.sl-motion, which inc/setup.php sets  */
/* only when motion is allowed, so the page is static without it.      */
/* ------------------------------------------------------------------ */

/* Hero and application sit at the top of the page: hidden until their intro runs. */
.sl-motion .sl-hero__copy,
.sl-motion .sl-hero__credit,
.sl-motion .sl-application__inner,
.sl-motion .sl-gallery-grid__head {
	visibility: hidden;
}

.sl-motion .sl-hero__photo {
	opacity: 0;
	transform: scale(1.06);
}

.sl-motion .sl-application__photo {
	clip-path: inset(0% 100% 0% 0%);
}

/* Heading lines rise out of a mask; the mask is padded so Italiana's descenders are not cut. */
.sl-motion .sl-line-mask {
	padding-block: 0.14em;
	margin-block: -0.14em;
}

/* Rows whose top rule is redrawn as a pseudo-element so it can grow from the left. */
.sl-motion .sl-dayplan__day,
.sl-motion .sl-mentors__person {
	position: relative;
	border-top-color: transparent;
}

.sl-motion .sl-dayplan__day::before,
.sl-motion .sl-mentors__person::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--sl-line);
	transform: scaleX(var(--sl-draw, 1));
	transform-origin: 0 50%;
}

/*
 * Photos zoom and pan through custom properties on the individual scale / translate
 * properties, so the existing hover transform still applies on top.
 */
.sl-motion .sl-journeys__photo img,
.sl-motion .sl-notes__photo img,
.sl-motion .sl-mosaic__item img,
.sl-motion .sl-strip__photo img,
.sl-motion .sl-gallery-grid__photo img {
	scale: var(--sl-zoom, 1);
	translate: var(--sl-pan, 0%) 0;
}

@media (min-width: 1025px) {
	/* Headroom for the scroll-linked pan. */
	.sl-motion .sl-mosaic__item img,
	.sl-motion .sl-strip__photo img {
		scale: calc(var(--sl-zoom, 1) * 1.1);
	}
}

/* Light schedule: the sun that travels along the curve. */
.sl-light__sun {
	fill: var(--sl-c-gold);
	stroke: var(--sl-bg, #fafafa);
	stroke-width: 3;
}

/* Reading progress along the top of the viewport. */
.sl-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 150;
	height: 2px;
	background: var(--sl-c-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

.admin-bar .sl-progress {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sl-progress {
		top: 46px;
	}
}