/**
 * Shared button & CTA hover / focus animations.
 *
 * Loaded after component styles so these effects override the basic opacity hovers.
 *
 * Design rule: every hover state below swaps to a colour that is genuinely
 * different from the resting state (not a few-percent tint of the same
 * colour) and pairs it with a glow tuned to the page background the button
 * actually sits on, so the effect is visible instead of a no-op.
 */

:root {
	--sp-btn-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
	--sp-btn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--sp-btn-duration: 0.28s;
	--sp-btn-duration-fast: 0.14s;
	--sp-btn-lift: -4px;
	--sp-btn-scale: 1.035;

	/* Glows tuned per background the element sits on. */
	--sp-btn-glow-yellow: 0 14px 32px -6px rgba(249, 207, 14, 0.55);
	--sp-btn-glow-white: 0 12px 30px -6px rgba(255, 255, 255, 0.4);
	--sp-btn-glow-dark: 0 14px 30px -8px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------------- */
/* Group 1 — white pill buttons on dark page backgrounds                      */
/* hero, services hero, work grid card, work detail                           */
/* Resting: white bg / black text  ->  Hover: yellow bg + glow                */
/* -------------------------------------------------------------------------- */

.sp-hero__cta-button,
.sp-svc-hero__cta-button,
.sp-work-grid__cta-button,
.sp-work-detail__cta-button {
	transition:
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		box-shadow var(--sp-btn-duration) var(--sp-btn-ease-out),
		background-color var(--sp-btn-duration) ease-out;
}

.sp-hero__cta-button:hover,
.sp-hero__cta-button:focus-visible,
.sp-svc-hero__cta-button:hover,
.sp-svc-hero__cta-button:focus-visible,
.sp-work-grid__cta-button:hover,
.sp-work-grid__cta-button:focus-visible,
.sp-work-detail__cta-button:hover,
.sp-work-detail__cta-button:focus-visible {
	opacity: 1;
	color: #000000;
	background-color: var(--spaciefy-yellow);
	transform: translateY(var(--sp-btn-lift)) scale(var(--sp-btn-scale));
	box-shadow: var(--sp-btn-glow-yellow);
}

.sp-hero__cta-button:active,
.sp-svc-hero__cta-button:active,
.sp-work-grid__cta-button:active,
.sp-work-detail__cta-button:active {
	transform: translateY(-1px) scale(0.97);
	transition-duration: var(--sp-btn-duration-fast);
}

/* Yellow icon tiles paired with the buttons above -> flip to white + glow */
.sp-hero__cta-icon,
.sp-svc-hero__cta-icon,
.sp-work-grid__cta-icon,
.sp-work-detail__cta-icon {
	transition:
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		box-shadow var(--sp-btn-duration) var(--sp-btn-ease-out),
		background-color var(--sp-btn-duration) ease-out;
}

.sp-hero__cta-icon svg,
.sp-svc-hero__cta-icon svg,
.sp-work-grid__cta-icon svg,
.sp-work-detail__cta-icon svg {
	transition: transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-hero__cta-icon svg,
.sp-svc-hero__cta-icon svg,
.sp-work-grid__cta-icon svg,
.sp-work-detail__cta-icon svg {
	transition: transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-hero__cta-icon:hover,
.sp-hero__cta-icon:focus-visible,
.sp-svc-hero__cta-icon:hover,
.sp-svc-hero__cta-icon:focus-visible,
.sp-work-grid__cta-icon:hover,
.sp-work-grid__cta-icon:focus-visible,
.sp-work-detail__cta-icon:hover,
.sp-work-detail__cta-icon:focus-visible,
.sp-hero__cta:hover .sp-hero__cta-icon,
.sp-hero__cta:focus-within .sp-hero__cta-icon,
.sp-svc-hero__cta:hover .sp-svc-hero__cta-icon,
.sp-svc-hero__cta:focus-within .sp-svc-hero__cta-icon,
.sp-work-grid__cta:hover .sp-work-grid__cta-icon,
.sp-work-grid__cta:focus-within .sp-work-grid__cta-icon,
.sp-work-detail__cta:hover .sp-work-detail__cta-icon,
.sp-work-detail__cta:focus-within .sp-work-detail__cta-icon {
	opacity: 1;
	color: #000000;
	background-color: #ffffff;
	transform: translate(5px, -5px) scale(1.1) rotate(8deg);
	box-shadow: var(--sp-btn-glow-white);
}

.sp-hero__cta-icon:hover svg,
.sp-hero__cta-icon:focus-visible svg,
.sp-svc-hero__cta-icon:hover svg,
.sp-svc-hero__cta-icon:focus-visible svg,
.sp-work-grid__cta-icon:hover svg,
.sp-work-grid__cta-icon:focus-visible svg,
.sp-work-detail__cta-icon:hover svg,
.sp-work-detail__cta-icon:focus-visible svg {
	transform: rotate(-8deg);
}

.sp-hero__cta-icon:active,
.sp-svc-hero__cta-icon:active,
.sp-work-grid__cta-icon:active,
.sp-work-detail__cta-icon:active {
	transform: translate(3px, -3px) scale(1.02);
	transition-duration: var(--sp-btn-duration-fast);
}

/* -------------------------------------------------------------------------- */
/* Group 2 — yellow pill buttons on light page backgrounds                    */
/* project CTA (desktop), insights                                            */
/* Resting: yellow bg / black text  ->  Hover: black bg + yellow text + glow  */
/* (.sp-expertise__cta uses a contained hover in expertise.css — see there.)  */
/* -------------------------------------------------------------------------- */

.sp-project-cta__cta-button,
.sp-insights__cta-button {
	transition:
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		box-shadow var(--sp-btn-duration) var(--sp-btn-ease-out),
		background-color var(--sp-btn-duration) ease-out,
		color var(--sp-btn-duration) ease-out;
}

.sp-project-cta__cta-button:hover,
.sp-project-cta__cta-button:focus-visible,
.sp-insights__cta-button:hover,
.sp-insights__cta-button:focus-visible {
	opacity: 1;
	color: var(--spaciefy-yellow);
	background-color: #0e0e0e;
	transform: translateY(var(--sp-btn-lift)) scale(var(--sp-btn-scale));
	box-shadow: var(--sp-btn-glow-dark);
}

.sp-project-cta__cta-button:active,
.sp-insights__cta-button:active {
	transform: translateY(-1px) scale(0.97);
	transition-duration: var(--sp-btn-duration-fast);
}

/* Black icon tiles paired with Group 2 -> flip to yellow + black icon */
.sp-project-cta__cta-icon,
.sp-insights__cta-icon {
	transition:
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		box-shadow var(--sp-btn-duration) var(--sp-btn-ease-out),
		background-color var(--sp-btn-duration) ease-out,
		color var(--sp-btn-duration) ease-out;
}

.sp-project-cta__cta-icon svg,
.sp-insights__cta-icon svg {
	transition: transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-project-cta__cta-icon:hover,
.sp-project-cta__cta-icon:focus-visible,
.sp-insights__cta-icon:hover,
.sp-insights__cta-icon:focus-visible,
.sp-project-cta__cta:hover .sp-project-cta__cta-icon,
.sp-project-cta__cta:focus-within .sp-project-cta__cta-icon,
.sp-insights__cta:hover .sp-insights__cta-icon,
.sp-insights__cta:focus-within .sp-insights__cta-icon {
	opacity: 1;
	color: #000000;
	background-color: var(--spaciefy-yellow);
	transform: translate(5px, -5px) scale(1.1) rotate(8deg);
	box-shadow: var(--sp-btn-glow-yellow);
}

.sp-project-cta__cta-icon:hover svg,
.sp-project-cta__cta-icon:focus-visible svg,
.sp-insights__cta-icon:hover svg,
.sp-insights__cta-icon:focus-visible svg {
	transform: rotate(-8deg);
}

.sp-project-cta__cta-icon:active,
.sp-insights__cta-icon:active {
	transform: translate(3px, -3px) scale(1.02);
	transition-duration: var(--sp-btn-duration-fast);
}

/* -------------------------------------------------------------------------- */
/* Mobile / narrow viewports — project CTA band uses a softer colour swap.     */
/* Transforms come from the shared Group 1 / Group 2 rules above.              */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.sp-project-cta__cta-button:hover,
	.sp-project-cta__cta-button:focus-visible {
		color: #ffffff;
		background-color: #262626;
	}
}

/* -------------------------------------------------------------------------- */
/* Group 3 — contact submit (yellow bg on a black page section)               */
/* Can't invert to black without vanishing, so it goes bright white + glow.   */
/* -------------------------------------------------------------------------- */

.sp-contact__form .wpcf7-submit {
	position: relative;
	overflow: hidden;
	transition:
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		box-shadow var(--sp-btn-duration) var(--sp-btn-ease-out),
		background-color var(--sp-btn-duration) ease-out;
}

.sp-contact__form .wpcf7-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 28%, rgba(0, 0, 0, 0.16) 50%, transparent 72%);
	transform: translateX(-130%);
	transition: transform 0.6s var(--sp-btn-ease-out);
	pointer-events: none;
}

.sp-contact__form .wpcf7-submit:hover,
.sp-contact__form .wpcf7-submit:focus-visible {
	opacity: 1;
	color: #000000;
	background-color: #ffffff;
	transform: translateY(var(--sp-btn-lift)) scale(var(--sp-btn-scale));
	box-shadow: var(--sp-btn-glow-yellow);
}

.sp-contact__form .wpcf7-submit:hover::before,
.sp-contact__form .wpcf7-submit:focus-visible::before {
	transform: translateX(130%);
}

.sp-contact__form .wpcf7-submit:active {
	transform: translateY(-1px) scale(0.97);
	transition-duration: var(--sp-btn-duration-fast);
}

/* -------------------------------------------------------------------------- */
/* Header & footer — text CTA + separate icon tile, both on black backgrounds */
/* -------------------------------------------------------------------------- */

.sp-header__cta-label,
.sp-footer__cta-label {
	transition: color var(--sp-btn-duration) ease-out;
}

.sp-header__cta:hover,
.sp-header__cta:focus-visible,
.sp-footer__cta:hover,
.sp-footer__cta:focus-visible {
	opacity: 1;
}

.sp-header__cta:hover .sp-header__cta-label,
.sp-header__cta:focus-visible .sp-header__cta-label,
.sp-footer__cta:hover .sp-footer__cta-label,
.sp-footer__cta:focus-visible .sp-footer__cta-label {
	color: var(--spaciefy-yellow);
}

.sp-header__cta-icon,
.sp-footer__cta-icon {
	transition:
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		box-shadow var(--sp-btn-duration) var(--sp-btn-ease-out),
		background-color var(--sp-btn-duration) ease-out,
		color var(--sp-btn-duration) ease-out;
}

.sp-header__cta-icon svg,
.sp-footer__cta-icon svg {
	transition: transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-header__cta:hover .sp-header__cta-icon,
.sp-header__cta:focus-visible .sp-header__cta-icon,
.sp-footer__cta:hover .sp-footer__cta-icon,
.sp-footer__cta:focus-visible .sp-footer__cta-icon {
	color: #000000;
	background-color: #ffffff;
	transform: translate(5px, -5px) scale(1.12) rotate(8deg);
	box-shadow: var(--sp-btn-glow-white);
}

.sp-header__cta:hover .sp-header__cta-icon svg,
.sp-header__cta:focus-visible .sp-header__cta-icon svg,
.sp-footer__cta:hover .sp-footer__cta-icon svg,
.sp-footer__cta:focus-visible .sp-footer__cta-icon svg {
	transform: rotate(-8deg);
}

.sp-header__cta:active,
.sp-footer__cta:active {
	transform: scale(0.98);
	transition: transform var(--sp-btn-duration-fast) ease-out;
}

/* -------------------------------------------------------------------------- */
/* Filter tabs — blog & work archive                                          */
/* -------------------------------------------------------------------------- */

.sp-blog-hero__tab,
.sp-work-hero__tab {
	position: relative;
	transition:
		opacity var(--sp-btn-duration) ease-out,
		color var(--sp-btn-duration) ease-out,
		transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-blog-hero__tab::after,
.sp-work-hero__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background-color: var(--spaciefy-yellow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sp-btn-duration) var(--sp-btn-ease-out);
}

.sp-blog-hero__tab:hover,
.sp-blog-hero__tab:focus-visible,
.sp-work-hero__tab:hover,
.sp-work-hero__tab:focus-visible {
	opacity: 1;
	color: var(--spaciefy-yellow);
	transform: translateY(-2px);
}

.sp-blog-hero__tab:hover::after,
.sp-blog-hero__tab:focus-visible::after,
.sp-work-hero__tab:hover::after,
.sp-work-hero__tab:focus-visible::after,
.sp-blog-hero__tab.is-active::after,
.sp-work-hero__tab.is-active::after {
	transform: scaleX(1);
}

.sp-blog-hero__tab.is-active,
.sp-work-hero__tab.is-active {
	color: var(--spaciefy-yellow);
}

/* -------------------------------------------------------------------------- */
/* Small controls — scroll-more, testimonials nav / audio, menu toggle        */
/* -------------------------------------------------------------------------- */

.sp-expertise__scroll-more {
	transition:
		opacity var(--sp-btn-duration) ease-out,
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		color var(--sp-btn-duration) ease-out;
}

.sp-expertise__scroll-more:hover,
.sp-expertise__scroll-more:focus-visible {
	opacity: 1;
	transform: translateY(4px);
	color: var(--spaciefy-yellow);
}

.sp-expertise__scroll-more:hover .sp-expertise__scroll-more-icon,
.sp-expertise__scroll-more:focus-visible .sp-expertise__scroll-more-icon {
	animation-duration: 0.7s;
}

.sp-testimonials__nav-button {
	transition:
		opacity var(--sp-btn-duration) ease-out,
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		border-color var(--sp-btn-duration) ease-out,
		background-color var(--sp-btn-duration) ease-out,
		box-shadow var(--sp-btn-duration) ease-out;
}

.sp-testimonials__nav-button:not(:disabled):hover,
.sp-testimonials__nav-button:not(:disabled):focus-visible {
	opacity: 1;
	border-color: var(--spaciefy-yellow);
	background-color: var(--spaciefy-yellow);
	color: #000000;
	transform: scale(1.14);
	box-shadow: var(--sp-btn-glow-yellow);
}

.sp-testimonials__nav-button:not(:disabled):active {
	transform: scale(1.03);
	transition-duration: var(--sp-btn-duration-fast);
}

.sp-testimonials__nav-button svg {
	transition: transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-testimonials__nav-button:not(:disabled):hover svg,
.sp-testimonials__nav-button:not(:disabled):focus-visible svg {
	transform: scale(1.15);
}

.sp-testimonials__play-toggle,
.sp-testimonials__mute-toggle {
	transition:
		opacity var(--sp-btn-duration) ease-out,
		transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-testimonials__play-toggle:hover,
.sp-testimonials__play-toggle:focus-visible,
.sp-testimonials__mute-toggle:hover,
.sp-testimonials__mute-toggle:focus-visible {
	opacity: 1;
	transform: scale(1.18);
}

.sp-header__menu-toggle {
	transition:
		opacity var(--sp-btn-duration) ease-out,
		transform var(--sp-btn-duration) var(--sp-btn-ease);
}

.sp-header__menu-toggle:hover,
.sp-header__menu-toggle:focus-visible {
	opacity: 1;
	transform: scale(1.08);
}

.sp-header__menu-toggle:active {
	transform: scale(0.94);
	transition-duration: var(--sp-btn-duration-fast);
}

.sp-hero__service-trigger {
	transition:
		color var(--sp-btn-duration) ease-out,
		transform var(--sp-btn-duration) var(--sp-btn-ease),
		opacity var(--sp-btn-duration) ease-out;
}

.sp-hero__service-trigger:hover,
.sp-hero__service-trigger:focus-visible {
	transform: translateX(6px);
}

.sp-hero__service-trigger.is-active {
	transform: translateX(6px);
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sp-hero__cta-button,
	.sp-svc-hero__cta-button,
	.sp-work-grid__cta-button,
	.sp-work-detail__cta-button,
	.sp-project-cta__cta-button,
	.sp-insights__cta-button,
	.sp-hero__cta-icon,
	.sp-svc-hero__cta-icon,
	.sp-work-grid__cta-icon,
	.sp-work-detail__cta-icon,
	.sp-project-cta__cta-icon,
	.sp-insights__cta-icon,
	.sp-header__cta,
	.sp-footer__cta,
	.sp-header__cta-icon,
	.sp-footer__cta-icon,
	.sp-contact__form .wpcf7-submit,
	.sp-blog-hero__tab,
	.sp-work-hero__tab,
	.sp-expertise__scroll-more,
	.sp-testimonials__nav-button,
	.sp-testimonials__play-toggle,
	.sp-testimonials__mute-toggle,
	.sp-header__menu-toggle,
	.sp-hero__service-trigger {
		transition-duration: 0.01ms !important;
		transform: none !important;
	}

	.sp-contact__form .wpcf7-submit::before {
		display: none;
	}
}