@layer ods {

.ods-card-enter {
	opacity: 0;
	transform: translateY(10px);
	animation: odsCardEnter 0.42s ease forwards;
	animation-delay: calc(var(--ods-stagger-index, 0) * 35ms);
}

@keyframes odsCardEnter {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#loading-grid {
	transition: opacity 0.28s ease;
}

#loading-grid.ods-fade-out {
	opacity: 0;
	pointer-events: none;
}

.ods-heart.active {
	animation: heartPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes heartPop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.35);
	}
	70% {
		transform: scale(0.92);
	}
	100% {
		transform: scale(1);
	}
}

.ods-heart.is-favorited {
	position: relative;
}

.ods-heart.is-favorited::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(213, 14, 82, 0.35) 0%, transparent 70%);
	opacity: 0;
	animation: heartPulse 0.5s ease-out;
	pointer-events: none;
}

.ods-heart.active.is-favorited::after {
	animation: heartPulse 0.5s ease-out;
}

@keyframes heartPulse {
	0% {
		opacity: 0.7;
		transform: scale(0.6);
	}
	100% {
		opacity: 0;
		transform: scale(1.4);
	}
}

.ods-card-image-inner img,
.insp-card-image-wrap .insp-card-img,
.insp-prod-img img {
	transition: transform 0.45s ease, opacity 0.3s ease;
}

.ods-card:hover {
	transform: translateY(-2px);
}

.ods-card:hover .ods-card-image-inner img {
	transform: scale(1.02);
}

.insp-model-card:hover .insp-card-image-wrap .insp-card-img,
.insp-prod-card:hover .insp-prod-img img {
	transform: scale(1.04);
}

#insp-model-view {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.32s ease, transform 0.32s ease;
}

#insp-model-view.insp-detail-enter {
	opacity: 1;
	transform: translateY(0);
}

#insp-models-view.insp-grid-exit {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ods-milestone-burst {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
	overflow: hidden;
}

.ods-milestone-burst__particle {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	animation: odsBurst 0.9s ease-out forwards;
}

@keyframes odsBurst {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--ods-bx), var(--ods-by)) scale(0.2);
	}
}

.ods-progress-ring {
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
}

.ods-progress-ring__track {
	fill: none;
	stroke: var(--color-border, #dce1e3);
	stroke-width: 3;
}

.ods-progress-ring__fill {
	fill: none;
	stroke: var(--color-20, #2563a8);
	stroke-width: 3;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 0.5s ease;
}

.ods-progress-tracker__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ods-toast-enter .at-toast,
.at-toast.ods-toast-enter {
	animation: odsToastIn 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes odsToastIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ods-card-enter,
	.ods-toast-enter .at-toast,
	.at-toast.ods-toast-enter {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.ods-heart.active {
		animation: none;
	}

	.ods-card:hover {
		transform: none;
	}

	.ods-card:hover .ods-card-image-inner img,
	.insp-model-card:hover .insp-card-image-wrap .insp-card-img,
	.insp-prod-card:hover .insp-prod-img img {
		transform: none;
	}

	#insp-model-view {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ods-progress-ring__fill {
		transition: none;
	}

	.ods-milestone-burst {
		display: none;
	}
}

}