/*
 * Ketabbin 3.2.3 — Golden-line shine and lightweight wand illumination.
 * Recreates the visual feeling of 2.8 without its viewport repaint engine.
 */

:root {
	--kb-shine-gold: #f2c970;
	--kb-shine-cream: #fff4cf;
	--kb-shine-jade: #54bd99;
}

/* A small composited light follows the wand tip on fine pointers. */
.kb-wand-aura {
	position: fixed;
	z-index: 9996;
	top: 0;
	left: 0;
	display: block;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 229, 155, .2) 0, rgba(239, 193, 94, .12) 22%, rgba(73, 168, 135, .055) 46%, transparent 72%);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	transform: translate3d(-240px, -240px, 0);
	transition: opacity .2s ease;
	will-change: transform, opacity;
}

.kb-wand-aura.is-visible { opacity: .95; }

html[data-theme="light"] .kb-wand-aura {
	background: radial-gradient(circle, rgba(241, 189, 71, .19) 0, rgba(47, 142, 112, .08) 34%, transparent 70%);
	mix-blend-mode: multiply;
	opacity: 0;
}

html[data-theme="light"] .kb-wand-aura.is-visible { opacity: .62; }

/* Living gold on the two structural header lines. */
.kb-commerce-header.kb-header::after {
	display: block !important;
	height: 2px !important;
	background: linear-gradient(90deg, transparent 0 10%, rgba(183, 126, 35, .45) 22%, var(--kb-shine-gold) 36%, var(--kb-shine-cream) 43%, var(--kb-shine-gold) 49%, rgba(73, 168, 135, .64) 62%, transparent 78% 100%) !important;
	background-size: 260% 100% !important;
	opacity: .86 !important;
	box-shadow: 0 0 8px rgba(239, 197, 107, .28) !important;
	animation: kb-golden-line 4.8s linear infinite !important;
}

.kb-commerce-nav-wrap::after {
	content: "";
	position: absolute;
	z-index: 8;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0 15%, rgba(73, 168, 135, .5) 27%, var(--kb-shine-gold) 42%, var(--kb-shine-cream) 49%, var(--kb-shine-gold) 55%, transparent 78% 100%);
	background-size: 280% 100%;
	box-shadow: 0 0 7px rgba(239, 197, 107, .24);
	pointer-events: none;
	animation: kb-golden-line 5.8s linear infinite reverse;
}

/* Fine illuminated rules across the main bookstore modules. */
:is(.kb-story-rail, .kb-quick-links, .kb-offer-section, .kb-category-showcase, .kb-product-section, .kb-service-strip) {
	position: relative;
}

:is(.kb-story-rail, .kb-quick-links, .kb-offer-section, .kb-category-showcase, .kb-product-section, .kb-service-strip)::after {
	content: "";
	position: absolute;
	z-index: 6;
	right: 12px;
	bottom: 0;
	left: 12px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(73, 168, 135, .44), var(--kb-shine-gold), var(--kb-shine-cream), var(--kb-shine-gold), transparent);
	background-size: 300% 100%;
	opacity: .62;
	pointer-events: none;
	animation: kb-golden-line 8s linear infinite;
}

.kb-hero-slider::before {
	filter: drop-shadow(0 0 4px rgba(239, 197, 107, .26));
	animation: kb-frame-breathe 4.2s ease-in-out infinite !important;
}

/* Button halos: only primary/header controls continuously breathe. */
.kb-button--hero,
.kb-category-toggle,
.kb-commerce-actions .kb-menu-toggle,
.kb-commerce-actions .kb-account-link,
.kb-commerce-actions .kb-cart-link {
	animation: kb-button-halo 3.6s ease-in-out infinite !important;
}

.kb-commerce-actions .kb-account-link { animation-delay: -.9s !important; }
.kb-commerce-actions .kb-cart-link { animation-delay: -1.8s !important; }
.kb-category-toggle { animation-delay: -2.5s !important; }

.kb-button--hero::after {
	display: block !important;
	animation: kb-button-glint 3.2s ease-in-out infinite !important;
}

.kb-button--hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -9px -13px;
	border-radius: inherit;
	background: radial-gradient(ellipse, rgba(239, 197, 107, .24), rgba(73, 168, 135, .08) 46%, transparent 72%);
	filter: blur(8px);
	opacity: .55;
	pointer-events: none;
	animation: kb-button-mist 4s ease-in-out infinite;
}

/* All other buying and action buttons shine when approached or touched. */
:is(.kb-button, .kb-card-action, .kb-store-card__buy, .woocommerce a.button, .woocommerce button.button):hover {
	box-shadow: 0 0 0 1px rgba(255, 235, 181, .35), 0 0 18px rgba(239, 197, 107, .32), 0 10px 24px rgba(3, 23, 25, .2) !important;
}

:is(.kb-button, .kb-card-action, .kb-store-card__buy, .woocommerce a.button, .woocommerce button.button):active {
	filter: brightness(1.08) saturate(1.06) !important;
}

@keyframes kb-golden-line {
	from { background-position: 130% 50%; }
	to { background-position: -130% 50%; }
}

@keyframes kb-frame-breathe {
	0%, 100% { opacity: .42; filter: drop-shadow(0 0 2px rgba(239, 197, 107, .18)); }
	50% { opacity: .88; filter: drop-shadow(0 0 7px rgba(239, 197, 107, .48)); }
}

@keyframes kb-button-halo {
	0%, 100% { box-shadow: 0 5px 13px rgba(0, 0, 0, .12), 0 0 0 rgba(239, 197, 107, 0); filter: drop-shadow(0 0 0 rgba(239, 197, 107, 0)) brightness(1); }
	50% { box-shadow: 0 7px 17px rgba(0, 0, 0, .16), 0 0 15px rgba(239, 197, 107, .31), 0 0 4px rgba(73, 168, 135, .18); filter: drop-shadow(0 0 6px rgba(239, 197, 107, .32)) brightness(1.025); }
}

@keyframes kb-button-glint {
	0%, 46% { transform: rotate(18deg) translateX(-260%); opacity: 0; }
	52% { opacity: .9; }
	70%, 100% { transform: rotate(18deg) translateX(650%); opacity: 0; }
}

@keyframes kb-button-mist {
	0%, 100% { opacity: .3; transform: scale(.92); }
	50% { opacity: .72; transform: scale(1.08); }
}

@media (max-width: 700px) {
	.kb-wand-aura { display: none !important; }

	:is(.kb-story-rail, .kb-quick-links, .kb-offer-section, .kb-category-showcase, .kb-product-section, .kb-service-strip)::after {
		animation-duration: 10s;
		opacity: .5;
	}

	.kb-button--hero,
	.kb-category-toggle,
	.kb-commerce-actions .kb-menu-toggle,
	.kb-commerce-actions .kb-account-link,
	.kb-commerce-actions .kb-cart-link {
		animation-duration: 4.8s !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-wand-aura { display: none !important; }

	.kb-commerce-header.kb-header::after,
	.kb-commerce-nav-wrap::after,
	:is(.kb-story-rail, .kb-quick-links, .kb-offer-section, .kb-category-showcase, .kb-product-section, .kb-service-strip)::after,
	.kb-hero-slider::before,
	.kb-button--hero,
	.kb-category-toggle,
	.kb-commerce-actions .kb-menu-toggle,
	.kb-commerce-actions .kb-account-link,
	.kb-commerce-actions .kb-cart-link,
	.kb-button--hero::before,
	.kb-button--hero::after {
		animation: none !important;
	}
}
