/*
 * Runtime-only performance rules. All visual effects remain intact while a
 * section is visible or approaching the viewport.
 */
.ndp-runtime .ndp-is-offscreen,
.ndp-runtime .ndp-is-offscreen *,
.ndp-runtime .ndp-is-offscreen::before,
.ndp-runtime .ndp-is-offscreen::after,
.ndp-runtime .ndp-is-offscreen *::before,
.ndp-runtime .ndp-is-offscreen *::after {
	-webkit-animation-play-state: paused !important;
	animation-play-state: paused !important;
	will-change: auto !important;
}

/* The social carousel uses transitions rather than CSS animations. Keep its
 * five filtered 3D cards cheap while the complete section is off-screen. */
.ndp-runtime .social-echo.ndp-is-offscreen .instagram-card {
	transition: none !important;
	filter: none !important;
	box-shadow: none !important;
}

.ndp-page-hidden body,
.ndp-page-hidden body *,
.ndp-page-hidden body::before,
.ndp-page-hidden body::after,
.ndp-page-hidden body *::before,
.ndp-page-hidden body *::after {
	-webkit-animation-play-state: paused !important;
	animation-play-state: paused !important;
}

/*
 * During an active touch/scroll gesture, temporarily stop decorative animation
 * work. Named targets avoid recalculating styles for every page descendant.
 * Everything resumes 160 ms after scrolling stops and no effect is removed.
 */
.ndp-is-scrolling .hero-image,
.ndp-is-scrolling .hero::before,
.ndp-is-scrolling .gold-trail,
.ndp-is-scrolling .scroll-cue i,
.ndp-is-scrolling .morocco-opportunities-orbit,
.ndp-is-scrolling .morocco-map-stage,
.ndp-is-scrolling .morocco-map-stage::before,
.ndp-is-scrolling .map-city i,
.ndp-is-scrolling .cta::after,
.ndp-is-scrolling .royal-vision::after,
.ndp-is-scrolling .royal-sheen,
.ndp-is-scrolling .record-stats::after,
.ndp-is-scrolling .record-heading h2 em,
.ndp-is-scrolling .record-grid::before,
.ndp-is-scrolling .record-stat.stat,
.ndp-is-scrolling .record-stat.stat strong,
.ndp-is-scrolling .salon-map-glow,
.ndp-is-scrolling .salon-map-grid::before,
.ndp-is-scrolling .salon-map-ring,
.ndp-is-scrolling .partner-orbit,
.ndp-is-scrolling .partner-marquee-track,
.ndp-is-scrolling .final-invitation-orbits span,
.ndp-is-scrolling .final-invitation-orbits > i,
.ndp-is-scrolling .final-invitation-stars {
	-webkit-animation-play-state: paused !important;
	animation-play-state: paused !important;
}

/* The parent switches to its mobile carousel layout at 820px. Keep the nearest
 * three cards visible there and avoid compositing the two hidden outer cards. */
@media (max-width: 820px) {
	.ndp-runtime .social-echo .instagram-card[data-position="-2"],
	.ndp-runtime .social-echo .instagram-card[data-position="2"] {
		visibility: hidden;
		opacity: 0 !important;
		pointer-events: none;
		transition: none !important;
		filter: none !important;
		box-shadow: none !important;
		will-change: auto !important;
	}
}

/* Keep fixed controls on compositor layers and avoid delayed progress updates. */
.ndp-runtime .site-header,
.ndp-runtime .nd-floating-actions,
.ndp-runtime .scroll-progress {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.ndp-runtime .scroll-progress {
	contain: layout paint style;
}

.ndp-runtime .scroll-progress i {
	transition: none !important;
	will-change: transform;
}