/*
 * Rimal — Animation layer.
 * Progressive: site works without JS, all keyframes respect prefers-reduced-motion
 * via the blanket rule in theme.css.
 *
 * Tokens used: --wp--preset--color--*, --wp--custom--motion--*, --wp--custom--radius--*
 */

/* =========================================================
   1. PAGE ENTRANCE
   ========================================================= */

@keyframes rimal-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

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

.wp-site-blocks {
	animation: rimal-fade-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =========================================================
   2. SCROLL REVEAL  (class toggled by animations.js)
   ========================================================= */

.rimal-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.rimal-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger siblings (set via data-stagger-index by JS) */
.rimal-reveal[data-delay="1"]  { transition-delay: 0.08s; }
.rimal-reveal[data-delay="2"]  { transition-delay: 0.16s; }
.rimal-reveal[data-delay="3"]  { transition-delay: 0.24s; }
.rimal-reveal[data-delay="4"]  { transition-delay: 0.32s; }
.rimal-reveal[data-delay="5"]  { transition-delay: 0.40s; }
.rimal-reveal[data-delay="6"]  { transition-delay: 0.48s; }

/* Variant: slide from left */
.rimal-reveal--left {
	transform: translateX(-32px);
}
.rimal-reveal--left.is-visible {
	transform: none;
}

/* Variant: scale up */
.rimal-reveal--scale {
	transform: scale(0.94) translateY(16px);
}
.rimal-reveal--scale.is-visible {
	transform: none;
}

/* =========================================================
   3. HEADER — scroll shadow
   ========================================================= */

.site-header {
	transition:
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		background-color 0.4s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 4px 28px -8px rgba(62, 57, 57, 0.18);
}

/* =========================================================
   4. NAVIGATION — animated underline
   ========================================================= */

.site-nav .wp-block-navigation-item__content {
	position: relative;
}

.site-nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 6px;
	left: 0.75rem;
	right: 0.75rem;
	height: 1.5px;
	background: var(--wp--preset--color--terracotta);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	border-radius: 2px;
}

.site-nav .wp-block-navigation-item__content:hover::after,
.site-nav .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* =========================================================
   5. BUTTONS — shine sweep + lift
   ========================================================= */

.wp-element-button,
.wp-block-button__link,
.button,
button.button,
a.button,
input[type="submit"] {
	position: relative;
	overflow: hidden;
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		color            var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		transform        0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow       0.25s ease;
}

.wp-element-button::after,
.wp-block-button__link::after,
.button::after,
button.button::after,
a.button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.14) 50%,
		transparent 70%
	);
	transform: translateX(-120%);
	transition: transform 0.55s ease;
	pointer-events: none;
}

.wp-element-button:hover::after,
.wp-block-button__link:hover::after,
.button:hover::after,
button.button:hover::after,
a.button:hover::after {
	transform: translateX(120%);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(62, 57, 57, 0.3);
}

.wp-element-button:active,
.wp-block-button__link:active,
.button:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 0.1s;
}

/* =========================================================
   6. PRODUCT CARDS — lift + image zoom + overlay
   ========================================================= */

.woocommerce ul.products li.product,
.wp-block-woocommerce-product-template li.product {
	transition:
		transform   0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow  0.45s ease;
	border-radius: var(--wp--custom--radius--medium);
	overflow: visible;
}

.woocommerce ul.products li.product:hover,
.wp-block-woocommerce-product-template li.product:hover {
	transform: translateY(-8px);
	box-shadow:
		0 20px 60px -12px rgba(193, 122, 69, 0.18),
		0 8px 24px -8px  rgba(62, 57, 57, 0.12);
}

/* Image wrapper — clip zoom */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a img {
	transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform-origin: center center;
	display: block;
	width: 100%;
}

.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.07);
}

/* Product title hover underline */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	position: relative;
	display: inline-block;
	transition: color 0.3s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--wp--preset--color--terracotta-ink);
}

/* Add to cart button on card — slide up from bottom */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple {
	transition:
		background-color 0.3s ease,
		color            0.3s ease,
		transform        0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow       0.35s ease,
		opacity          0.35s ease;
	opacity: 0.85;
}

.woocommerce ul.products li.product:hover .button.add_to_cart_button,
.woocommerce ul.products li.product:hover .button.product_type_simple {
	opacity: 1;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px -4px rgba(62, 57, 57, 0.3);
}

/* =========================================================
   7. SINGLE PRODUCT — gallery fade + zoom
   ========================================================= */

.woocommerce-product-gallery__image {
	overflow: hidden;
}

.woocommerce-product-gallery__image img {
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.woocommerce-product-gallery__image:hover img {
	transform: scale(1.04);
}

/* =========================================================
   8. CART BADGE BOUNCE
   ========================================================= */

@keyframes rimal-badge-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.5); }
	65%  { transform: scale(0.88); }
	85%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

.rimal-cart-count.is-bumped .rimal-cart-count__badge {
	animation: rimal-badge-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* =========================================================
   9. HERO SECTION — text stagger entrance
   ========================================================= */

.home-hero__eyebrow {
	animation: rimal-fade-up 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-hero__heading {
	animation: rimal-fade-up 0.8s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-hero__lead {
	animation: rimal-fade-up 0.8s 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-hero__actions {
	animation: rimal-fade-up 0.8s 0.50s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =========================================================
   10. SECTION DIVIDER — line draw
   ========================================================= */

@keyframes rimal-line-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.rimal-divider-line {
	display: block;
	height: 1px;
	background: var(--wp--preset--color--border);
	transform-origin: left center;
	animation: rimal-line-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =========================================================
   11. RITUAL / FEATURE TILES — tilt on hover
   ========================================================= */

.ritual-step,
.wp-block-column.has-surface-background-color,
[class*="ritual"] .wp-block-column {
	transition:
		transform  0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow 0.4s ease;
	border-radius: var(--wp--custom--radius--medium);
}

.ritual-step:hover,
.wp-block-column.has-surface-background-color:hover {
	transform: translateY(-5px) rotate3d(1, 0, 0, 2deg);
	box-shadow: 0 16px 48px -12px rgba(62, 57, 57, 0.14);
}

/* =========================================================
   12. TEXT LINK — arrow slide
   ========================================================= */

.text-link a::after {
	display: inline-block;
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity   0.3s ease;
}

.text-link a:hover::after {
	transform: translateX(6px);
	opacity: 1;
}

/* =========================================================
   13. CUSTOM CURSOR  (injected by animations.js, desktop only)
   ========================================================= */

.rimal-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--terracotta);
	border-radius: 50%;
	pointer-events: none;
	z-index: 99999;
	transform: translate(-50%, -50%) scale(1);
	transition:
		width   0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		height  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.35s ease,
		background-color 0.35s ease;
	opacity: 0;
}

.rimal-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border: 1.5px solid var(--wp--preset--color--terracotta);
	border-radius: 50%;
	pointer-events: none;
	z-index: 99998;
	transform: translate(-50%, -50%);
	transition:
		width   0.5s cubic-bezier(0.16, 1, 0.3, 1),
		height  0.5s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.4s ease,
		border-color 0.35s ease;
	opacity: 0;
}

/* Show only on fine pointer (real desktop mouse) */
@media (pointer: fine) {
	.rimal-cursor,
	.rimal-cursor-ring {
		opacity: 1;
	}
	/* Hide system cursor only after JS confirms cursor presence */
	body.rimal-custom-cursor * {
		cursor: none !important;
	}
}

.rimal-cursor.is-hovering {
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--terracotta-ink);
}

.rimal-cursor-ring.is-hovering {
	width: 52px;
	height: 52px;
	opacity: 0.45;
	border-color: var(--wp--preset--color--terracotta-ink);
}

.rimal-cursor.is-clicking {
	transform: translate(-50%, -50%) scale(0.6);
}

.rimal-cursor-ring.is-clicking {
	width: 28px;
	height: 28px;
	opacity: 0.8;
}

/* =========================================================
   14. STICKY BUY BAR — smooth slide from bottom
   ========================================================= */

.rimal-sticky-buy {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.rimal-sticky-buy[hidden] {
	display: flex !important;
	transform: translateY(110%);
	pointer-events: none;
	visibility: hidden;
}

.rimal-sticky-buy:not([hidden]) {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

/* =========================================================
   15. SEARCH PANEL — fade + slide
   ========================================================= */

@keyframes rimal-search-open {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.header-search[open] .header-search__panel {
	animation: rimal-search-open 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =========================================================
   16. FOOTER LINKS — underline grow
   ========================================================= */

.site-footer a {
	position: relative;
	text-decoration: none;
}

.site-footer a::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0.5;
}

.site-footer a:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* =========================================================
   17. FORM INPUTS — focus glow
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
	transition:
		border-color 0.25s ease,
		box-shadow   0.25s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--terracotta);
	box-shadow: 0 0 0 3px rgba(193, 122, 69, 0.18);
	outline: none;
}

/* =========================================================
   18. WC NOTICES — slide in
   ========================================================= */

@keyframes rimal-notice-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: none; }
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > * {
	animation: rimal-notice-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =========================================================
   19. LOGO hover shimmer
   ========================================================= */

@keyframes rimal-wordmark-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position:  200% center; }
}

.site-wordmark a:hover .site-wordmark__name {
	background: linear-gradient(
		100deg,
		var(--wp--preset--color--contrast) 30%,
		var(--wp--preset--color--terracotta) 50%,
		var(--wp--preset--color--contrast) 70%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: rimal-wordmark-shimmer 0.8s linear both;
}

/* =========================================================
   20. SKELETON LOADER — product image while WC lazy-loads
   ========================================================= */

@keyframes rimal-skeleton-wave {
	0%   { background-position: -400px 0; }
	100% { background-position:  400px 0; }
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link:not(:has(img[src])) {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--surface) 25%,
		var(--wp--preset--color--border)   37%,
		var(--wp--preset--color--surface) 63%
	);
	background-size: 400px 100%;
	animation: rimal-skeleton-wave 1.4s ease infinite;
	min-height: 260px;
	border-radius: var(--wp--custom--radius--medium);
}