/*
 * GoWithRana Book Platform — premium motion layer (Acquest Art).
 *
 * ONE motion system (merged from the earlier gwrbp-motion.css draft and the
 * ui-motion prototype). Rules:
 *  - Motion only inside @media (prefers-reduced-motion: no-preference).
 *  - JS-dependent effects are scoped to html.gwrbp-motion, a class the head
 *    script sets only for visitors who have NOT asked for reduced motion.
 *    Without it (JS off, script failure) the site renders as before.
 *  - :where() keeps specificity at zero so theme / Elementor colours win.
 *  - The secure PDF reader (.gwr-premium-reader) is never targeted, and the
 *    reduced-motion handling never touches its own animations.
 *  - Timing: 160–420 ms.
 */

:root {
	--gwrbp-ease: cubic-bezier(.2, .7, .2, 1);
}

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

	/* ---------- Page transitions ----------
	 * Chrome/Edge/Safari: native cross-document view transition (CSS only,
	 * navigation is never intercepted). */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: gwrbp-vt-out 160ms ease-in both; }
	::view-transition-new(root) { animation: gwrbp-vt-in 280ms var(--gwrbp-ease) both; }
	@keyframes gwrbp-vt-out { to { opacity: 0; } }
	@keyframes gwrbp-vt-in { from { opacity: 0; } to { opacity: 1; } }

	/* Browsers WITHOUT native transitions (e.g. Firefox): short opacity-only
	 * entrance / exit. Opacity only: no transforms on body, so fixed headers,
	 * the side cart and the reader keep their positioning. Only one of the
	 * two mechanisms is ever active, so pages never fade twice. */
	@keyframes gwrbp-page-in { from { opacity: 0; } to { opacity: 1; } }
	html.gwrbp-motion.gwrbp-motion-fallback body { animation: gwrbp-page-in 280ms var(--gwrbp-ease) both; }
	html.gwrbp-motion.gwrbp-motion-fallback.gwrbp-leaving body { animation: none; opacity: 0; transition: opacity 160ms ease-in; }

	/* ---------- Section reveal (JS adds .gwrbp-reveal to BELOW-the-fold
	 * sections/cards only, then removes it after the reveal; containers
	 * holding the reader are never selected). */
	html.gwrbp-motion .gwrbp-reveal { opacity: 0; transform: translate3d(0, 14px, 0); }
	html.gwrbp-motion .gwrbp-reveal.gwrbp-in {
		opacity: 1;
		transform: none;
		transition: opacity 420ms var(--gwrbp-ease), transform 420ms var(--gwrbp-ease);
	}

	/* ---------- Product & plan cards: gentle lift, cover zoom INSIDE its frame */
	html.gwrbp-motion :where(.e-loop-item, ul.products li.product, .gwrbp-plan-card) {
		transition: transform 300ms var(--gwrbp-ease), box-shadow 300ms var(--gwrbp-ease);
	}
	html.gwrbp-motion :where(.e-loop-item .elementor-widget-image, .e-loop-item .elementor-widget-theme-post-featured-image, ul.products li.product a.woocommerce-LoopProduct-link) {
		overflow: hidden;
	}
	html.gwrbp-motion :where(.e-loop-item .elementor-widget-image img, .e-loop-item .elementor-widget-theme-post-featured-image img, ul.products li.product img) {
		transition: transform 400ms var(--gwrbp-ease);
	}

	/* Single product main image: soft settle-in on load */
	@keyframes gwrbp-image-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
	html.gwrbp-motion :where(.elementor-widget-woocommerce-product-images img, .woocommerce-product-gallery__image img) {
		animation: gwrbp-image-in 420ms var(--gwrbp-ease) both;
	}

	/* ---------- Buttons: smooth hover, tactile press (reader excluded) */
	html.gwrbp-motion :where(.elementor-button, .button, .single_add_to_cart_button, .gwrbp-plan-card__button, .checkout-button, .wc-block-components-button):not(:where(.gwr-premium-reader *)) {
		transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, transform 160ms ease;
	}
	html.gwrbp-motion :where(.elementor-button, .button, .single_add_to_cart_button, .gwrbp-plan-card__button, .checkout-button, .wc-block-components-button):not(:where(.gwr-premium-reader *)):active {
		transform: scale(.98);
	}

	/* ---------- Notices, side-cart items, cart icon ---------- */
	@keyframes gwrbp-rise-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
	@keyframes gwrbp-fade { from { opacity: 0; } to { opacity: 1; } }
	html.gwrbp-motion :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .elementor-menu-cart__product) {
		animation: gwrbp-rise-in 320ms var(--gwrbp-ease) both;
	}
	/* Areas that can contain the reader: opacity only (no transformed ancestor). */
	html.gwrbp-motion :where(.woocommerce-MyAccount-content, .woocommerce-tabs .panel) {
		animation: gwrbp-fade 300ms ease both;
	}
	/* Cart icon: one soft pulse after an AJAX add to cart (no bounce). */
	@keyframes gwrbp-cart-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
	html.gwrbp-motion .gwrbp-cart-pulse { animation: gwrbp-cart-pulse 360ms var(--gwrbp-ease); }
}

/* Hover effects only where a real pointer hovers. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	html.gwrbp-motion :where(.e-loop-item, ul.products li.product, .gwrbp-plan-card):hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 30px rgba(17, 24, 39, .10);
	}
	html.gwrbp-motion :where(.e-loop-item:hover .elementor-widget-image img, .e-loop-item:hover .elementor-widget-theme-post-featured-image img, ul.products li.product:hover img) {
		transform: scale(1.04);
	}
	html.gwrbp-motion :where(.elementor-button, .button, .single_add_to_cart_button, .gwrbp-plan-card__button, .checkout-button):not(:where(.gwr-premium-reader *)):hover {
		transform: translateY(-1px);
	}
}

/* Keyboard focus ring: accessibility, not motion — always on. */
:where(.elementor-button, .button, .single_add_to_cart_button, .gwrbp-plan-card__button, .checkout-button):not(:where(.gwr-premium-reader *)):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Sound toggle (available with or without motion) ----------
 * Colours are stated for EVERY state (idle, hover, focus, pressed) with a
 * selector stronger than the theme's `button:hover, button:focus` rule,
 * which otherwise painted its blue background behind our green "on" text.
 *   OFF: white  + dark text   (contrast ~11:1)
 *   ON : green  + white text  (contrast ~5.6:1)                        */
html body .gwrbp-sound-toggle {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	margin: 0;
	padding: 0 12px 0 10px;
	border: 1px solid rgba(20, 20, 43, .18);
	border-radius: 17px;
	background: #ffffff;
	background-image: none;
	color: #2f3140;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-shadow: none;
	box-shadow: 0 4px 14px rgba(20, 20, 43, .10);
	cursor: pointer;
	opacity: .92;
	transition: opacity 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}
html body .gwrbp-sound-toggle:hover,
html body .gwrbp-sound-toggle:focus,
html body .gwrbp-sound-toggle:active {
	opacity: 1;
	background: #f1f2f6;
	background-image: none;
	color: #1f2130;
	border-color: rgba(20, 20, 43, .28);
	box-shadow: 0 6px 18px rgba(20, 20, 43, .16);
}
html body .gwrbp-sound-toggle[aria-pressed="true"] {
	opacity: 1;
	background: #1f7a3f;
	color: #ffffff;
	border-color: #1f7a3f;
}
html body .gwrbp-sound-toggle[aria-pressed="true"]:hover,
html body .gwrbp-sound-toggle[aria-pressed="true"]:focus,
html body .gwrbp-sound-toggle[aria-pressed="true"]:active {
	background: #186433;
	color: #ffffff;
	border-color: #186433;
}
html body .gwrbp-sound-toggle:active { transform: scale(.97); }
html body .gwrbp-sound-toggle:focus { outline: none; }
html body .gwrbp-sound-toggle:focus-visible { outline: 2px solid #1f7a3f; outline-offset: 2px; }
html body .gwrbp-sound-toggle[aria-pressed="true"]:focus-visible { outline-color: #0f3d20; }
.gwrbp-sound-toggle svg { width: 16px; height: 16px; flex: none; pointer-events: none; stroke: currentColor; }
.gwrbp-sound-toggle .gwrbp-sound-on { display: none; }
.gwrbp-sound-toggle[aria-pressed="true"] .gwrbp-sound-on { display: inline; }
.gwrbp-sound-toggle[aria-pressed="true"] .gwrbp-sound-off { display: none; }

@media (max-width: 600px) {
	html body .gwrbp-sound-toggle { left: 10px; bottom: 10px; padding: 0 10px; }
	.gwrbp-sound-toggle .gwrbp-sound-label { display: none; }
}

@media print {
	.gwrbp-sound-toggle { display: none !important; }
	.gwrbp-reveal { opacity: 1 !important; transform: none !important; }
}

/* Reduced motion (also if the preference changes mid-visit): undo only
 * THIS layer's effects. Deliberately no universal selector, so the reader
 * and other components keep their own behaviour. */
@media (prefers-reduced-motion: reduce) {
	html.gwrbp-motion .gwrbp-reveal { opacity: 1 !important; transform: none !important; }
	html.gwrbp-motion.gwrbp-leaving body { opacity: 1 !important; }
}