/* ==========================================================
   24K Treats — shared tokens, self-hosted fonts, gold coin
   ========================================================== */

@font-face {
	font-family: 'K24 Serif';
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url(fonts/playfair-display-latin-wght-normal.woff2) format('woff2');
}
@font-face {
	font-family: 'K24 Serif';
	font-style: italic;
	font-display: swap;
	font-weight: 400 900;
	src: url(fonts/playfair-display-latin-wght-italic.woff2) format('woff2');
}
@font-face {
	font-family: 'K24 Sans';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
}

body.k24-desk,
body.k24-mob {
	--k-plum: #380037;
	--k-plum-2: #471a3c;
	--k-deep: #1f001e;
	--k-pink: #d81b60;
	--k-pink-2: #e91e8c;
	--k-gold: #d4af37;
	--k-gold-2: #b38719;
	--k-gold-3: #7d5705;
	--k-gold-hi: #f6e6a6;
	--k-cream: #fbf6ec;
	--k-paper: #fffdf8;
	--k-foil: linear-gradient(135deg, #f6e6a6 0%, #d4af37 28%, #b38719 58%, #7d5705 100%);
	--k-ease: cubic-bezier(.22, .8, .24, 1);
	--k-serif: 'K24 Serif', 'Playfair Display', Georgia, serif;
	--k-sans: 'K24 Sans', 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Gold coin (logo) ----------
   <a class="k24-coin"><span class="k24-coin-ring"></span><img></a>
   The ring is a slowly turning conic gradient behind the white disc. */
.k24-coin {
	position: relative;
	display: block;
	border-radius: 50%;
	padding: 4px;
	isolation: isolate;
	box-shadow:
		0 0 0 4px var(--k-paper),
		0 16px 30px -14px rgba(56, 0, 55, .55);
	transition: transform .5s var(--k-ease), width .45s var(--k-ease), height .45s var(--k-ease), box-shadow .45s;
}
.k24-coin-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
		#7d5705, #d4af37, #f6e6a6, #d4af37, #b38719,
		#7d5705, #d4af37, #f6e6a6, #b38719, #7d5705);
	animation: k24-spin 9s linear infinite;
	z-index: 0;
}
.k24-coin img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
}
@keyframes k24-spin { to { transform: rotate(360deg); } }

/* Foil button with a light sweep */
.k24-foil-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	background: var(--k-foil);
	color: #fff !important;
	font-family: var(--k-sans);
	font-weight: 700;
	text-decoration: none !important;
	text-shadow: 0 1px 1px rgba(90, 60, 0, .35);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 12px 24px -12px rgba(125, 87, 5, .75);
	transition: transform .3s var(--k-ease), box-shadow .3s;
}
.k24-foil-btn::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
	transform: skewX(-20deg);
	transition: left .7s var(--k-ease);
}
.k24-foil-btn:hover { transform: translateY(-1px); }
.k24-foil-btn:hover::after { left: 120%; }

@media (prefers-reduced-motion: reduce) {
	.k24-coin-ring { animation: none; }
	.k24-foil-btn::after { display: none; }
}