/*
 * Opt-in helper classes for interactions core Gutenberg blocks can't do on
 * their own (infinite marquee, portfolio hover overlay). Apply from any
 * block's own editor: select the block -> Advanced panel -> "Additional
 * CSS class(es)" -> type the class name below. No custom block needed.
 *
 * adsnxt-marquee        - put on a Group wrapping a flex row of logos/text;
 *                          scrolls its content infinitely, pauses on hover.
 * adsnxt-marquee__track - put on the direct flex child inside the group
 *                          above (the row that actually repeats/scrolls).
 * adsnxt-masonry-item    - put on an Image or Group in the portfolio grid
 *                          to get the dark hover overlay + "expand" chip.
 * adsnxt-masonry-item__overlay / __chip - the overlay content elements inside it.
 */

@keyframes adsnxt-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.adsnxt-marquee {
	overflow: hidden;
}

.adsnxt-marquee__track {
	display: flex;
	width: max-content;
	animation: adsnxt-marquee-scroll 32s linear infinite;
}

.adsnxt-marquee:hover .adsnxt-marquee__track {
	animation-play-state: paused;
}

.adsnxt-masonry-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.adsnxt-masonry-item__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 18px;
	background: rgba(0, 0, 0, 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.adsnxt-masonry-item:hover .adsnxt-masonry-item__overlay {
	opacity: 1;
	background: rgba(0, 0, 0, 0.45);
	pointer-events: auto;
}

.adsnxt-masonry-item__chip {
	position: absolute;
	top: 14px;
	right: 14px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.adsnxt-masonry-item:hover .adsnxt-masonry-item__chip {
	opacity: 1;
}

/* Sticky header: put on the header wrapper to get a soft shadow that
   strengthens once the page has scrolled past ~12px. The threshold is
   applied by adsnxt-interactions.js via the .is-scrolled class below. */
.adsnxt-sticky-shadow {
	transition: box-shadow 0.2s ease;
}

.adsnxt-sticky-shadow.is-scrolled {
	box-shadow: 0 8px 28px rgba(21, 22, 27, 0.12);
}

@media (max-width: 768px) {
	.adsnxt-masonry-item__overlay {
		opacity: 1;
		background: rgba(0, 0, 0, 0.35);
	}

	.adsnxt-masonry-item__chip {
		opacity: 1;
	}
}