/* Priestwood service icons v2
   Edit the variables below to tune size and motion. They can also be overridden
   on the loop item container in Elementor (Advanced > Custom CSS). */
:root {
	--tn-svc-size: 60px;          /* badge width and height */
	--tn-svc-icon-scale: 0.56;    /* icon size inside the badge (0.56 = 56% of the badge) */
	--tn-svc-lift: 4px;           /* how far the tile rises on hover */
	--tn-svc-speed: 0.35s;        /* hover transition speed */
	--tn-svc-idle: 3.2s;          /* length of one idle animation loop; higher = calmer */
	--tn-svc-radius: 22%;         /* badge corner rounding: 0 = sharp square, 50% = circle */
	--tn-svc-saturate: 0.55;      /* icon colour strength: 1 = original, 0 = greyscale */
	--tn-svc-contrast: 0.94;      /* softens highlights slightly */
}

/* ---------- Badge ---------- */
.tn-svc-icon {
	--tn-tint: #fff1d6;
	--tn-delay: 0s;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--tn-svc-size);
	height: var(--tn-svc-size);
	border-radius: var(--tn-svc-radius);
	background: radial-gradient(circle at 30% 25%, #ffffff 0%, var(--tn-tint) 75%);
	box-shadow: inset 0 -3px 8px rgba(0, 0, 60, 0.06), 0 4px 12px rgba(0, 0, 40, 0.18);
	transition: transform var(--tn-svc-speed) cubic-bezier(.34, 1.56, .64, 1);
}

.tn-svc-icon img {
	display: block;
	width: calc(var(--tn-svc-size) * var(--tn-svc-icon-scale));
	height: calc(var(--tn-svc-size) * var(--tn-svc-icon-scale));
	object-fit: contain;
	filter: saturate(var(--tn-svc-saturate)) contrast(var(--tn-svc-contrast)) drop-shadow(0 3px 3px rgba(0, 0, 50, 0.16));
	transform-origin: 50% 60%;
	animation-duration: var(--tn-svc-idle);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: var(--tn-delay);
}

/* Soft contact shadow under the icon (::before so it sits behind the image) */
.tn-svc-icon::before {
	content: "";
	position: absolute;
	left: 30%;
	right: 30%;
	bottom: 12%;
	height: 6%;
	border-radius: 50%;
	background: rgba(0, 0, 60, 0.14);
	filter: blur(2px);
	pointer-events: none;
}

/* ---------- Idle animations (one per icon, set by the plugin) ---------- */
.tn-anim-float img     { animation-name: tn-float; }
.tn-anim-tilt img      { animation-name: tn-tilt; }
.tn-anim-sway img      { animation-name: tn-sway; transform-origin: 50% 95%; }
.tn-anim-pulse img     { animation-name: tn-pulse; }
.tn-anim-heartbeat img { animation-name: tn-heartbeat; animation-duration: calc(var(--tn-svc-idle) * 0.5); }
.tn-anim-flicker img   { animation-name: tn-flicker; animation-duration: calc(var(--tn-svc-idle) * 0.45); transform-origin: 50% 100%; }
.tn-anim-ring img      { animation-name: tn-ring; }
.tn-anim-spin img      { animation-name: tn-spin; }
.tn-anim-wobble img    { animation-name: tn-wobble; }
.tn-anim-breathe img   { animation-name: tn-breathe; }
.tn-anim-blink img     { animation-name: tn-blink; }
.tn-anim-rise img      { animation-name: tn-rise; }
.tn-anim-drip img      { animation-name: tn-drip; transform-origin: 50% 100%; }
.tn-anim-fly img       { animation-name: tn-fly; }
.tn-anim-none img      { animation: none; }

@keyframes tn-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes tn-tilt      { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-3%); } }
@keyframes tn-sway      { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes tn-pulse     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes tn-heartbeat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.12); } 20% { transform: scale(1.02); } 30% { transform: scale(1.1); } }
@keyframes tn-flicker   { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(0.97, 1.06) skewX(-2deg); } 50% { transform: scale(1.02, 0.97) skewX(1deg); } 75% { transform: scale(0.98, 1.04) skewX(2deg); } }
@keyframes tn-ring      { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-10deg); } 68% { transform: rotate(10deg); } 72% { transform: rotate(-8deg); } 76% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } 84% { transform: rotate(0); } }
@keyframes tn-spin      { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) scale(1.04); } }
@keyframes tn-wobble    { 0%, 100% { transform: rotate(0) scale(1); } 33% { transform: rotate(8deg) scale(1.05); } 66% { transform: rotate(-6deg) scale(0.97); } }
@keyframes tn-breathe   { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.06); } }
@keyframes tn-blink     { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.12); } }
@keyframes tn-rise      { 0%, 100% { transform: translateY(4%) scale(0.98); } 50% { transform: translateY(-7%) scale(1.03); } }
@keyframes tn-drip      { 0%, 100% { transform: translateY(-4%) scale(1, 1); } 45% { transform: translateY(3%) scale(1.06, 0.94); } 60% { transform: translateY(0) scale(0.97, 1.04); } }
@keyframes tn-fly       { 0%, 100% { transform: translate(-4%, 3%) rotate(-3deg); } 50% { transform: translate(4%, -4%) rotate(2deg); } }

/* ---------- Hover: tile lifts, motion speeds up ----------
   Works on Elementor loop items automatically, or add the class tn-svc-card to any container. */
:where(.e-loop-item, .tn-svc-card) {
	transition: transform var(--tn-svc-speed) ease, box-shadow var(--tn-svc-speed) ease;
}
:where(.e-loop-item, .tn-svc-card):has(.tn-svc-icon):hover,
:where(.e-loop-item, .tn-svc-card):has(.tn-svc-icon):focus-within {
	transform: translateY(calc(var(--tn-svc-lift) * -1));
}
:where(.e-loop-item, .tn-svc-card):hover .tn-svc-icon,
:where(.e-loop-item, .tn-svc-card):focus-within .tn-svc-icon {
	transform: rotate(-4deg) scale(1.06);
}
:where(.e-loop-item, .tn-svc-card):hover .tn-svc-icon img,
:where(.e-loop-item, .tn-svc-card):focus-within .tn-svc-icon img {
	animation-duration: calc(var(--tn-svc-idle) * 0.4);
}

/* ---------- Respect reduced-motion settings ---------- */
@media (prefers-reduced-motion: reduce) {
	.tn-svc-icon,
	.tn-svc-icon img,
	:where(.e-loop-item, .tn-svc-card) {
		animation: none !important;
		transition: none;
	}
	:where(.e-loop-item, .tn-svc-card):hover,
	:where(.e-loop-item, .tn-svc-card):hover .tn-svc-icon {
		transform: none;
	}
}

/* ---------- Admin picker ---------- */
.tn-svc-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; margin: 8px 0 12px; }
.tn-svc-picker label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; cursor: pointer; font-size: 10px; text-align: center; line-height: 1.2; }
.tn-svc-picker input { position: absolute; opacity: 0; }
.tn-svc-picker img { width: 36px; height: 36px; }
.tn-svc-picker input:checked + img { outline: 2px solid #2271b1; outline-offset: 4px; border-radius: 4px; }
.tn-svc-picker input:focus-visible + img { outline: 2px dashed #2271b1; outline-offset: 4px; }