/* ==========================================================================
   SDP — Claymorphism surface system
   Everything that should look moulded from soft clay uses these classes.
   The look = fat radii + soft coloured drop shadow + white bounce light
              + inset highlight (top-left) + inset shade (bottom-right).
   ========================================================================== */

.clay {
	position: relative;
	background: var(--sdp-white);
	border-radius: var(--sdp-r-lg);
	box-shadow: var(--sdp-clay-md);
	transition:
		transform var(--sdp-dur) var(--sdp-ease-squish),
		box-shadow var(--sdp-dur) var(--sdp-ease-out);
}
.clay--sm { border-radius: var(--sdp-r-md); box-shadow: var(--sdp-clay-sm); }
.clay--lg { border-radius: var(--sdp-r-xl); box-shadow: var(--sdp-clay-lg); }
.clay--pill { border-radius: var(--sdp-r-pill); }

/* Squishy lift on hover — the signature clay interaction. */
.clay--lift:hover,
.clay--lift:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--sdp-clay-lg);
}
.clay--lift:active { transform: translateY(-1px) scale(.99); }

/* Pressed well — for toggles, active tabs, search fields. */
.clay--pressed { box-shadow: var(--sdp-clay-pressed); background: var(--sdp-surface-alt); }

/* Tinted clay bodies. Each sets its own shadow hue so the drop shadow is a
   deeper cousin of the fill instead of a grey smudge. */
.clay--cream  { background: var(--sdp-cream); }
.clay--mist   { background: var(--sdp-mist); }
.clay--purple { background: var(--sdp-purple-050); --sdp-clay-tint: 109,  96, 231; }
.clay--pink   { background: var(--sdp-pink-050);   --sdp-clay-tint: 255, 122, 174; }
.clay--teal   { background: var(--sdp-teal-050);   --sdp-clay-tint:  34, 193, 161; }
.clay--amber  { background: var(--sdp-amber-050);  --sdp-clay-tint: 255, 184,  77; }
.clay--sky    { background: var(--sdp-sky-050);    --sdp-clay-tint: 168, 213, 226; }

/* Solid, saturated clay — buttons and hero panels. */
.clay-solid {
	color: var(--sdp-white);
	border-radius: var(--sdp-r-pill);
	box-shadow: var(--sdp-clay-fill);
	transition:
		transform var(--sdp-dur) var(--sdp-ease-squish),
		box-shadow var(--sdp-dur) var(--sdp-ease-out),
		filter var(--sdp-dur) var(--sdp-ease-out);
}
.clay-solid:hover,
.clay-solid:focus-visible {
	transform: translateY(-3px);
	filter: saturate(1.08) brightness(1.05);
	box-shadow: var(--sdp-clay-fill-hover);
}
/* Sinks past its resting position, so the press is felt rather than inferred. */
.clay-solid:active {
	transform: translateY(1px) scale(.985);
	box-shadow: var(--sdp-clay-fill-pressed);
	filter: saturate(1.02) brightness(.98);
	transition-duration: var(--sdp-dur-fast);
}

.clay-solid--purple   { background: linear-gradient(150deg, #8073F0 0%, var(--sdp-purple) 55%, var(--sdp-purple-700) 100%); --sdp-clay-tint: 109,  96, 231; }
.clay-solid--pink     { background: linear-gradient(150deg, #FF95BF 0%, var(--sdp-pink) 55%, var(--sdp-pink-600) 100%);    --sdp-clay-tint: 255, 122, 174; }
.clay-solid--teal     { background: linear-gradient(150deg, #45D8B8 0%, var(--sdp-teal) 55%, var(--sdp-teal-600) 100%);    --sdp-clay-tint:  34, 193, 161; }
.clay-solid--amber    { background: linear-gradient(150deg, #FFCC7A 0%, var(--sdp-amber) 55%, var(--sdp-amber-600) 100%);  --sdp-clay-tint: 255, 184,  77; color: #6A4405; }
.clay-solid--whatsapp { background: linear-gradient(150deg, #4BE58A 0%, var(--sdp-whatsapp) 55%, #12A44C 100%);            --sdp-clay-tint:  37, 211, 102; }

/* --- Clay icon plate — the rounded square behind every category icon ----- */
.clay-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: var(--clay-icon-size, 3.5rem);
	block-size:  var(--clay-icon-size, 3.5rem);
	border-radius: var(--clay-icon-radius, 30%);
	background: var(--clay-icon-bg, var(--sdp-purple-050));
	box-shadow: var(--sdp-clay-sm);
	transition:
		transform var(--sdp-dur) var(--sdp-ease-squish),
		box-shadow var(--sdp-dur) var(--sdp-ease-out);
}
.clay-icon > svg { inline-size: 58%; block-size: 58%; overflow: visible; }
.clay-icon--lg   { --clay-icon-size: 5.25rem; }
.clay-icon--xl   { --clay-icon-size: 7rem; }
.clay-icon--round{ --clay-icon-radius: 50%; }

.clay-icon--purple { --clay-icon-bg: var(--sdp-purple-100); --sdp-clay-tint: 109,  96, 231; }
.clay-icon--pink   { --clay-icon-bg: var(--sdp-pink-100);   --sdp-clay-tint: 255, 122, 174; }
.clay-icon--teal   { --clay-icon-bg: var(--sdp-teal-100);   --sdp-clay-tint:  34, 193, 161; }
.clay-icon--amber  { --clay-icon-bg: var(--sdp-amber-100);  --sdp-clay-tint: 255, 184,  77; }
.clay-icon--sky    { --clay-icon-bg: var(--sdp-sky-100);    --sdp-clay-tint: 168, 213, 226; }

a:hover > .clay-icon,
.clay--lift:hover .clay-icon { transform: translateY(-3px) rotate(-3deg) scale(1.04); }

/* --- Decorative clay blobs — the soft background shapes in the hero ------ */
.clay-blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
	filter: blur(.5px);
	opacity: .55;
	animation: sdp-blob 18s var(--sdp-ease-out) infinite alternate;
}
@keyframes sdp-blob {
	0%   { border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; transform: translate3d(0,0,0) rotate(0deg); }
	100% { border-radius: 58% 42% 44% 56% / 42% 58% 42% 58%; transform: translate3d(0,-14px,0) rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) { .clay-blob { animation: none; } }

/* --- Gentle float, used on hero art and sparkles ------------------------- */
.clay-float { animation: sdp-float 6s ease-in-out infinite; }
.clay-float--slow  { animation-duration: 9s; }
.clay-float--delay { animation-delay: -3s; }
@keyframes sdp-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-10px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .clay-float { animation: none; } }

/* --- Sparkle (the four-point stars scattered through the design) --------- */
.clay-sparkle {
	position: absolute;
	color: var(--sdp-amber);
	filter: drop-shadow(0 3px 5px rgba(255, 184, 77, .5));
	animation: sdp-twinkle 4.5s ease-in-out infinite;
}
@keyframes sdp-twinkle {
	0%, 100% { opacity: .55; transform: scale(.88) rotate(0deg); }
	50%      { opacity: 1;   transform: scale(1.08) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) { .clay-sparkle { animation: none; } }

/* --- Wave divider (the footer's scalloped top edge) --------------------- */
.clay-wave { display: block; inline-size: 100%; block-size: clamp(38px, 5vw, 74px); }
.clay-wave path { fill: currentColor; }