/* Haags.nl — hero: globale CSS die NIET aan één class-block hangt en dus niet als
 * losse Etch-stijl kan (fonts-@import, de cursor-beeld-trail met attribuut-states,
 * en de oker-achtergrond van de sectie ná de hero). Wordt als globale Etch-
 * stylesheet geregistreerd (HaagsHero-pattern) zodat 'ie site-breed + in de
 * builder-canvas laadt. */


/* De section ná de hero (de shop-producten) schuift bij het scrollen over de hero
 * heen: hogere z-index + een DEKKENDE oker-rasterachtergrond (zelfde look als de
 * body) zodat de groene hero eronder wordt afgedekt. De message-section
 * (.hero-message, groen) en de "Ons verhaal"-section (.hg-story, geel) hebben een
 * eigen achtergrond en zijn daarom uitgesloten. */
main > section:not(.scroll-section):not(.hero-message):not(.hg-story) {
	position: relative;
	z-index: 1;
	background-color: #e6c044;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size:
		100px 100%,
		20px 100%;
	background-position:
		-2px 0,
		-1px 0;
}

/* ============================================
   Rotating Image Trail (cursor animation)
   ============================================ */

.rotating-image-trail {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
}

.rotating-image-trail__collection {
	opacity: 0;
	pointer-events: none;
}

.rotating-image-trail__list {
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	flex-flow: wrap;
	display: flex;
}

.rotating-image-trail__item {
	z-index: 10;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.rotating-image-trail__card {
	aspect-ratio: 1 / 1;
	width: clamp(8rem, 13vw, 13rem);
	position: relative;
}

.rotating-image-trail__card-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

[data-trail-item="hidden"] {
	transform: translate(-50%, -50%) scale(0) rotate(-20deg);
	position: absolute;
}

[data-trail-item="visible"] {
	transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
	transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
	position: absolute;
}

[data-trail-item="transition-out"] {
	transform: translate(-50%, -50%) scale(0) rotate(180deg);
	transition: transform 0.8s cubic-bezier(0.625, 0, 0.875, 0);
	position: absolute;
}

@media (prefers-reduced-motion: reduce) {
	[data-trail-item="visible"],
	[data-trail-item="transition-out"] {
		transition: none;
	}
}

/* In de Etch-builder is er geen scroll-reveal. De sticky 100vh-hero zou daar het
 * hele canvas vullen en de secties eronder (producten + titel, bericht) buiten
 * beeld duwen. Zet 'm in de builder statisch zodat alle secties netjes onder
 * elkaar staan en bereikbaar/bewerkbaar zijn. De body-class hg-etch-builder wordt
 * in de canvas gezet door EtchBuilderPreview.js; op de frontend geldt dit niet. */
body.hg-etch-builder .scroll-section {
	position: relative;
	height: auto;
	min-height: 80vh;
}