/* container */
.ingredient-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-l);
}

.ingredient-wrapper h2{
	font-size: clamp(2rem, 4vw, 6rem);
	max-width: 12ch;
	line-height: 100%;
	text-align: center;
	color: var(--c-green-50);
	padding-bottom: var(--pad-m-res);
	font-weight: 700;
}

.ingredient-ticker{
	--ingredient-item-gap: var(--gap-m-res);
	--ingredient-row-gap: var(--gap-m-res);

	display:grid;
	grid-template-rows:repeat(3,auto);
	row-gap:var(--ingredient-row-gap);
	overflow:clip;
	width:100%;
}

/* rows */

.ingredient-ticker__row{
	overflow:clip;
}

/* track */

.ingredient-ticker__track{
	display:flex;
	width:max-content;
	align-items:center;
	will-change:transform;

	animation-duration:var(--ingredient-speed);
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-name:ingredientTickerLeft;
}

/* reverse row */

.ingredient-ticker__row--right .ingredient-ticker__track{
	animation-name:ingredientTickerRight;
}

/* duplicated group */

.ingredient-ticker__group{
	display:flex;
	gap:var(--ingredient-item-gap);
	padding-inline-end:var(--ingredient-item-gap);
	flex-shrink:0;
	min-width:max-content;
}

/* item */

.ingredient-ticker__item{
	white-space:nowrap;
	text-decoration:none;
	line-height:1;
	display:inline-flex;
	align-items:center;
	color: var(--h-eggshell);
	background-color: var(--c-green-50);
	padding:0.5rem 0.8rem;
	border-radius: var(--rad-pill);
	font-size: var(--body-f-size);
	transition: transform .2s ease-out!important;
}

.ingredient-ticker__item:hover{
	transform: scale(1.05);
	color: var(--h-eggshell);
}

.ingredient-ticker__item{
	color: var(--h-eggshell)!important;
}


.ingredient-ticker__row, .ingredient-ticker__track, .ingredient-ticker {
	overflow: visible;
}

/* animations */

@keyframes ingredientTickerLeft{

	from{
		transform:translate3d(0,0,0);
	}

	to{
		transform:translate3d(-50%,0,0);
	}

}

@keyframes ingredientTickerRight{

	from{
		transform:translate3d(-50%,0,0);
	}

	to{
		transform:translate3d(0,0,0);
	}

}

/* accessibility */

@media (prefers-reduced-motion:reduce){

	.ingredient-ticker__track{
		animation:none;
		transform:none;
	}

}