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

/* Hero copy is revealed by the intro timeline; hide it until then to avoid a flash. */
.nb-motion .nb-hero__copy,
.nb-motion .nb-hero__credit {
	visibility: hidden;
}

.nb-motion .nb-hero__media {
	transform: scale(1.08);
}

/* Rows whose top rule is redrawn as a pseudo-element so it can grow from the left. */
.nb-motion .nb-numbers__item,
.nb-motion .nb-itinerary__row,
.nb-motion .nb-departures__row:not(.nb-departures__row--head) {
	position: relative;
	border-top-color: transparent;
}

.nb-motion .nb-numbers__item::before,
.nb-motion .nb-itinerary__row::before,
.nb-motion .nb-departures__row:not(.nb-departures__row--head)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--nb-line);
	transform: scaleX(var(--nb-draw, 1));
	transform-origin: 0 50%;
}

/* Itinerary: the day being read lights up. */
.nb-motion .nb-itinerary__days {
	transition: color 0.3s ease;
}

.nb-motion .nb-itinerary__row.is-active .nb-itinerary__days {
	color: var(--nb-c-accent);
}

/* Departures: "few places left" pulses three times once the table is in view. */
.nb-motion .nb-departures__status--few.is-pulsing::before {
	animation: nb-pulse 1.4s ease-out 3;
}

@keyframes nb-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(242, 179, 61, 0.55);
	}

	100% {
		box-shadow: 0 0 0 8px rgba(242, 179, 61, 0);
	}
}

/* Inquiry and confirmation sit at the top of the page: hidden until the intro runs. */
.nb-motion .nb-booking__inner {
	visibility: hidden;
}

.nb-motion .nb-booking__media {
	clip-path: inset(0% 100% 0% 0%);
}

/*
 * Card and gallery images zoom and pan through custom properties on the individual
 * scale / translate properties, so the existing hover transform still applies on top.
 */
.nb-motion .nb-card__media img,
.nb-motion .nb-note__media img,
.nb-motion .nb-gallery__item img,
.nb-motion .nb-photo-story__media img {
	scale: var(--nb-zoom, 1);
	translate: var(--nb-pan, 0%) 0;
}

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

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

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

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

/* On the journey gallery the progress line sits under the sticky title bar. */
.nb .nb-progress--bar,
.admin-bar .nb-progress--bar {
	position: absolute;
	top: auto;
	bottom: -1px;
}