/*
 * MOTION + HEADING FONT (everything except the home hero).
 *
 * The hero (.hero-section) is never styled or animated here: every rule below either targets elements that live outside it, or excludes it.
 * Loaded after shop.css / commerce.css so it layers on top of them. All movement is opacity / transform only (cheap, no layout work) and is
 * switched off for visitors who ask for reduced motion.
 */

/* ---------------------------------------------------------------- heading font */
:root { --font-heading: 'Roboto', 'Inter', 'Inter Fallback', system-ui, sans-serif; }

/* Headings that used Playfair Display, plus every other heading outside the hero, use Roboto. Arabic keeps its own font (Cairo, set in shop.css). */
html:not([lang^="ar"]) .shop-categories__title,
html:not([lang^="ar"]) .section-title,
html:not([lang^="ar"]) .page-title,
html:not([lang^="ar"]) .shop-head__title,
html:not([lang^="ar"]) .woocommerce-products-header__title,
html:not([lang^="ar"]) .woocommerce .woocommerce-products-header h1,
html:not([lang^="ar"]) .woocommerce div.product .product_title,
html:not([lang^="ar"]) .related.products > h2,
html:not([lang^="ar"]) .up-sells > h2,
html:not([lang^="ar"]) .modal__title,
html:not([lang^="ar"]) .account__name,
html:not([lang^="ar"]) h1:not(.hero-section *),
html:not([lang^="ar"]) h2:not(.hero-section *),
html:not([lang^="ar"]) h3:not(.hero-section *),
html:not([lang^="ar"]) h4:not(.hero-section *) {
	font-family: var(--font-heading);
	letter-spacing: -0.012em;
}
html:not([lang^="ar"]) .shop-categories__title, html:not([lang^="ar"]) .section-title { font-weight: 700; letter-spacing: -0.02em; }
html:not([lang^="ar"]) .page-title, html:not([lang^="ar"]) .shop-head__title, html:not([lang^="ar"]) .woocommerce div.product .product_title { font-weight: 700; }
/* the product card names keep the body font weight rhythm of the grid */
.product-card__title { letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {

	@keyframes sx-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
	@keyframes sx-fade  { from { opacity: 0; } to { opacity: 1; } }
	@keyframes sx-pop   { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
	@keyframes sx-card  { from { opacity: 0; transform: translateY(38px) scale(0.94); } to { opacity: 1; transform: none; } }

	/* ------------------------------------------------------------ page load (above the fold, CSS only: no flash, no script) */
	.shynx-crumbs { animation: sx-fade 0.5s ease-out both; }
	.page-title, .shop-head__title, .woocommerce-products-header__title { animation: sx-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }

	/* product page: photo first, then the details one after another */
	.shynx-gallery__stage { animation: sx-pop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
	.shynx-gallery__thumbs { animation: sx-fade 0.6s ease-out 0.25s both; }
	.woocommerce div.product div.summary > * { animation: sx-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
	.woocommerce div.product div.summary > *:nth-child(1) { animation-delay: 0.08s; }
	.woocommerce div.product div.summary > *:nth-child(2) { animation-delay: 0.14s; }
	.woocommerce div.product div.summary > *:nth-child(3) { animation-delay: 0.20s; }
	.woocommerce div.product div.summary > *:nth-child(4) { animation-delay: 0.26s; }
	.woocommerce div.product div.summary > *:nth-child(5) { animation-delay: 0.32s; }
	.woocommerce div.product div.summary > *:nth-child(n+6) { animation-delay: 0.38s; }

	/* ------------------------------------------------------------ scroll reveals (JS adds data-reveal below the fold: see reveal.js) */
	/* section titles get a short line that draws itself once the title is revealed */
	.shop-categories__title::after, .section-title::after, .related.products > h2::after, .up-sells > h2::after {
		content: ''; display: block; width: 56px; height: 3px; border-radius: 3px; background: #111; margin: 0.9rem auto 0;
		transform-origin: center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
	}
	.reveal-ready [data-reveal]:not(.is-revealed)::after { transform: scaleX(0); }

	/* Shop by Category: bigger entrance for the cards, in a gentle wave */
	.reveal-ready .shop-categories__grid.is-revealed > * { animation: sx-card 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
	.reveal-ready .shop-categories__grid:not(.is-revealed) > * { transform: translateY(38px) scale(0.94); }

	/* the grid of products and the footer columns reveal with the same soft rise (the products already carry data-reveal-stagger) */

	/* ------------------------------------------------------------ hover / press feedback */
	/* category cards: the photo drifts up, the label slides and an arrow appears */
	.category-card { will-change: transform; }
	.category-card__media img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
	.category-card:hover .category-card__media img { transform: scale(1.08) translateY(-4px); }
	.category-card__label { transition: letter-spacing 0.35s ease; }
	.category-card__label::after { content: '\2192'; display: inline-block; margin-inline-start: 0.45rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
	[dir="rtl"] .category-card__label::after { content: '\2190'; transform: translateX(8px); }
	.category-card:hover .category-card__label { letter-spacing: 0.05em; }
	[dir="rtl"] .category-card:hover .category-card__label { letter-spacing: 0; } /* spacing would break the joined Arabic letters */
	.category-card:hover .category-card__label::after, .category-card:focus-visible .category-card__label::after { opacity: 1; transform: none; }

	/* product cards: lifted photo and a pop on the plus button */
	.product-card__media { transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
	.product-card:hover .product-card__media { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.11); }
	.product-card__add:hover { transform: scale(1.1); }
	.product-card__add:active { transform: scale(0.94); }
	.swatch { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s; }
	.swatch:active { transform: scale(0.9); }

	/* buttons */
	.btn, .button, .single_add_to_cart_button, button[type="submit"], .woocommerce a.button, .woocommerce button.button {
		transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.2s, color 0.2s, opacity 0.2s;
	}
	.btn:hover, .button:hover, .single_add_to_cart_button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
	.btn:active, .button:active, .single_add_to_cart_button:active, button[type="submit"]:active, .woocommerce a.button:active { transform: translateY(0) scale(0.98); box-shadow: none; }

	/* options on the product page (color / size) */
	.opt--color, .opt { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, background-color 0.2s, border-color 0.2s; }
	.opt:hover:not(:disabled) { transform: translateY(-1px); }
	.opt--color:hover:not(:disabled) { transform: scale(1.1); }


	/* form fields: the focus ring eases in */
	input, select, textarea { transition: border-color 0.2s, box-shadow 0.25s; }

}