/* =============================================================================
   Stone Galleria — redesign motion layer
   Scroll-driven reveals, hover polish, and interaction transitions.

   IMPORTANT: all motion here is applied through CSS only — no DOM mutations —
   so page structure snapshots and search-result hashes stay byte-identical.
   ========================================================================== */

/* ------------------------------------------------------ scroll reveals -- */
@keyframes rd-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rd-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* content bands rise softly as they enter the viewport;
		   the product detail section is excluded so the price tool,
		   sticky menu and gallery keep their exact behaviour. */
		#main-content > section:not(.product-dp):not(.sg-redesign-skip),
		#main-content > article:not(.sg-redesign-skip) {
			animation: rd-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		#main-content > div:not(.sg-redesign-skip) {
			animation: rd-fade linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 20%;
		}
	}
}

/* ------------------------------------------------------ hover polish --- */
.card:hover img,
.news-item:hover .news-img img,
.news-item:hover img,
.post:hover .post-thumbnail img,
.articleBox:hover img,
.related-list__item:hover .related-list__thumb img,
.image-container:hover img,
.zara-block:hover img,
.emc-item:hover img,
.glossary-card:hover img,
.thumbnail:hover img {
	transform: scale(1.045);
}

.card img,
.news-item img,
.post-thumbnail img,
.articleBox img,
.related-list__thumb img,
.image-container img,
.zara-block img {
	transition: transform 0.9s var(--rd-ease);
}

/* buttons: quiet press feedback */
.btn:active,
button.btn:active,
.btn-six:active,
.july-button:active {
	transform: translateY(0) scale(0.985);
}

/* nav + footer links already animate; keep text selection snappy */
a,
button {
	-webkit-tap-highlight-color: rgba(13, 13, 13, 0.08);
}

/* ------------------------------------------------- anchor scroll offset -- */
/* the product page's sticky H1 band overlaps anchor targets without this */
section[id],
div[id].ss-tracked-first1,
div[id].ss-tracked-first,
li[id],
h2[id],
h3[id] {
	scroll-margin-top: 132px;
}

/* ---------------------------------------------------- images general ---- */
img {
	background-color: transparent;
}

/* --------------------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}