/* Shared button hover interactions */

/* Rectangular CTA — fill expands from center as a square */
.arcana-btn-fill-square,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-block-button__link,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-element-button,
.img-ts__overlay-content a.img-ts__overlay-cta,
.img-ts__overlay-content .img-ts__overlay-cta .wp-block-button__link,
.proc__card .wp-block-button .wp-block-button__link,
.proc__card .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	z-index: 0;
	background: transparent !important;
	transition: color 0.35s ease, border-color 0.35s ease;
}

.arcana-btn-fill-square::after,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-block-button__link::after,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-element-button::after,
.img-ts__overlay-content a.img-ts__overlay-cta::after,
.img-ts__overlay-content .img-ts__overlay-cta .wp-block-button__link::after,
.proc__card .wp-block-button .wp-block-button__link::after,
.proc__card .wp-block-button__link::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-radius: inherit;
	background-color: #372b24;
	transition:
		width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.arcana-btn-fill-square:hover,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-block-button__link:hover,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-element-button:hover,
.img-ts__overlay-content a.img-ts__overlay-cta:hover,
.img-ts__overlay-content .img-ts__overlay-cta .wp-block-button__link:hover,
.proc__card .wp-block-button .wp-block-button__link:hover,
.proc__card .wp-block-button__link:hover {
	color: #f1eade;
}

.arcana-btn-fill-square:hover::after,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-block-button__link:hover::after,
.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-element-button:hover::after,
.img-ts__overlay-content a.img-ts__overlay-cta:hover::after,
.img-ts__overlay-content .img-ts__overlay-cta .wp-block-button__link:hover::after,
.proc__card .wp-block-button .wp-block-button__link:hover::after,
.proc__card .wp-block-button__link:hover::after {
	width: 110%;
	height: 110%;
}

/* Round buttons — circle expands from center to fill */
.arcana-btn-fill-circle,
.proc__card-toggle-btn,
.social-icon {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	z-index: 0;
	background-color: transparent !important;
	transition: color 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}

.arcana-btn-fill-circle::before,
.proc__card-toggle-btn::before,
.social-icon::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	transition:
		width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.proc__card-toggle-btn::before {
	background-color: #d2cab2;
}

.social-icon::before {
	background-color: #8c846c;
}

.arcana-btn-fill-circle:hover::before,
.proc__card-toggle-btn:hover::before,
.proc__card-toggle-btn.is-active::before,
.social-icon:hover::before {
	width: 120%;
	height: 120%;
}

.proc__card-toggle-btn .proc__icon-plus,
.social-icon img {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.arcana-btn-fill-square::after,
	.arcana-btn-fill-circle::before,
	.proc__card-toggle-btn::before,
	.social-icon::before,
	.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-block-button__link::after,
	.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-element-button::after {
		transition: none;
	}

	.arcana-btn-fill-square:hover::after,
	.proc__card-toggle-btn:hover::before,
	.proc__card-toggle-btn.is-active::before,
	.social-icon:hover::before,
	.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-block-button__link:hover::after,
	.img-ts__overlay-content .wp-block-button.img-ts__overlay-cta .wp-element-button:hover::after {
		width: 110%;
		height: 110%;
	}

	.proc__card-toggle-btn:hover::before,
	.proc__card-toggle-btn.is-active::before,
	.social-icon:hover::before {
		width: 120%;
		height: 120%;
	}
}