/**
 * Dakhli — motion layer.
 *
 * All of it is additive: the site is fully usable and correctly laid out with
 * this sheet removed, or with JavaScript off. Nothing here hides content unless
 * JavaScript has confirmed it can reveal it again, which is why .dk-reveal is
 * only ever applied by script and only to elements below the fold.
 *
 * Every animation is switched off under prefers-reduced-motion at the end.
 */

/* ===============================================================
 * Scroll reveals
 * ============================================================= */

.dk-reveal {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}
.dk-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.62s var(--dk-ease),
		transform 0.62s var(--dk-ease);
	transition-delay: var(--dk-reveal-delay, 0ms);
}

/* ===============================================================
 * Buttons and cards
 * ============================================================= */

.dk-btn {
	transition:
		background-color var(--dk-dur) var(--dk-ease),
		border-color var(--dk-dur) var(--dk-ease),
		color var(--dk-dur) var(--dk-ease),
		transform var(--dk-dur) var(--dk-ease);
}
.dk-btn:active { transform: translateY(1px); }

/* The arrow leans forward on hover — a small cue that the button goes somewhere. */
.dk-btn__arrow { transition: transform var(--dk-dur-slow) var(--dk-ease); }
.dk-btn:hover .dk-btn__arrow { transform: translateX(4px); }

/* ===============================================================
 * Add to cart
 * ============================================================= */

.dk-atc { position: relative; }

/* Spinner while WooCommerce's AJAX request is in flight. */
.dk-atc.is-loading { color: transparent !important; pointer-events: none; }
.dk-atc.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(18, 20, 26, 0.28);
	border-top-color: var(--dk-ink);
	border-radius: 50%;
	animation: dk-spin 0.62s linear infinite;
}
@keyframes dk-spin { to { transform: rotate(360deg); } }

.dk-atc.is-added {
	background: var(--dk-ok, #1e7f3c) !important;
	border-color: var(--dk-ok, #1e7f3c) !important;
	color: #fff !important;
}

/* ===============================================================
 * Cart badge
 * ============================================================= */

/* Targeted by data attribute, not class — the same hook the script uses, so the
   two cannot drift apart if the badge markup is restyled. */
[data-dk-cart-count] { transition: transform var(--dk-dur) var(--dk-ease); }
[data-dk-cart-count].is-bump { animation: dk-bump 0.5s var(--dk-ease); }
@keyframes dk-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.42); }
	100% { transform: scale(1); }
}

/* ===============================================================
 * Toast
 * ============================================================= */

.dk-toasts {
	position: fixed;
	right: var(--dk-s5);
	bottom: var(--dk-s5);
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: var(--dk-s2);
	pointer-events: none;
}
.dk-toast {
	display: flex;
	align-items: center;
	gap: var(--dk-s3);
	max-width: min(24rem, calc(100vw - 2 * var(--dk-s5)));
	padding: var(--dk-s3) var(--dk-s5);
	background: var(--dk-ink);
	color: var(--dk-white);
	border-left: 3px solid var(--dk-yellow);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
	font-size: var(--dk-t-base);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.28s var(--dk-ease), transform 0.28s var(--dk-ease);
}
.dk-toast.is-in { opacity: 1; transform: none; }
.dk-toast__icon { color: var(--dk-yellow); flex: none; display: grid; place-items: center; }

@media (max-width: 560px) {
	.dk-toasts { right: var(--dk-s4); left: var(--dk-s4); bottom: var(--dk-s4); }
	.dk-toast { max-width: none; }
}

/* ===============================================================
 * Reduced motion
 *
 * Reveals are neutralised rather than merely un-transitioned: if the script has
 * already applied .dk-reveal, the content must still be visible.
 * ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.dk-reveal,
	.dk-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.dk-btn,
	.dk-btn__arrow,
	[data-dk-cart-count],
	.dk-toast { transition: none; }
	.dk-btn:active { transform: none; }
	.dk-btn:hover .dk-btn__arrow { transform: none; }
	[data-dk-cart-count].is-bump { animation: none; }
	.dk-atc.is-loading::after { animation: none; }
	.dk-toast { opacity: 1; transform: none; }
}