/**
 * Kreatif Agency Theme — reusable button / text-link interactions.
 *
 * Lives primarily on existing global classes:
 *   .button, .button--primary, .button--secondary, .button--ghost,
 *   .button--glow, .text-link
 * Bespoke Bricks buttons use .button-effect plus a surface modifier, while
 * Bricks form submit controls are progressively enhanced automatically.
 * Optional BEM when markup exists: .button__label, .button__icon
 *
 * Decorative arrows come from icons.css (::after). A tiny progressive-
 * enhancement script updates the bubble origin to the pointer entry/exit
 * point; without JavaScript the effect simply starts from the centre.
 *
 * Markup note: Bricks `text-link` buttons are flat text + ::after (no wrapper).
 * The sliding panel uses z-index: -1 inside an isolated stacking context so
 * anonymous text and ::after stay readable above it. When .button__label /
 * .button__icon wrappers exist, they sit at z-index: 1.
 *
 * `.button--glow` is an optional high-value CTA wrapper. It owns the glow
 * layer so the inner primary button can keep ::before for its fill and
 * ::after for its decorative arrow.
 */

/* -------------------------------------------------------------------------- */
/* Base .button                                                               */
/* -------------------------------------------------------------------------- */

.button {
	--button-bubble-x: 50%;
	--button-bubble-y: 50%;
	--button-surface: var(--color-accent);
	--button-surface-hover: var(--color-accent-hover);
	--button-ink: var(--color-on-accent);
	--button-ink-hover: var(--color-on-brand);
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	transform: translateY(0);
	transition-property: transform, border-color, color, box-shadow, opacity;
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
}

/*
 * The doubled class specificity intentionally beats the older background
 * shorthand stored in the Bricks global class without using !important.
 */
.button:is(.button) {
	gap: var(--space-xs);
	background: var(--button-surface);
	color: var(--button-ink);
	box-shadow: 0 0.5rem 1.4rem color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.button:is(.button)::before {
	content: "";
	position: absolute;
	left: var(--button-bubble-x);
	top: var(--button-bubble-y);
	z-index: -1;
	width: 9rem;
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--button-surface-hover) 82%, white) 0%,
		var(--button-surface-hover) 70%
	);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.button:is(.button):hover,
.button:is(.button):focus-visible {
	color: var(--button-ink-hover);
	border-color: var(--button-surface-hover);
	box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--color-brand) 22%, transparent);
	transform: translateY(-2px);
}

.button:is(.button):hover::before,
.button:is(.button):focus-visible::before {
	transform: translate(-50%, -50%) scale(5.5);
}

.button:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* Explicit wrappers when present (preferred BEM contract). */
.button__label,
.button__icon,
.button-effect__label {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Bespoke links and Bricks form submits                                      */
/* -------------------------------------------------------------------------- */

.has-button-effect:not(.button) {
	--button-bubble-x: 50%;
	--button-bubble-y: 50%;
	--button-surface: var(--color-accent);
	--button-surface-hover: var(--color-accent-hover);
	--button-ink: var(--color-on-accent);
	--button-ink-hover: var(--color-on-brand);
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	isolation: isolate;
	overflow: hidden;
	color: var(--button-ink);
	transform: translateY(0);
	transition-property: transform, border-color, color, box-shadow, opacity;
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
}

.has-button-effect:not(.button)::before {
	content: "";
	position: absolute;
	left: var(--button-bubble-x);
	top: var(--button-bubble-y);
	z-index: -1;
	width: 9rem;
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--button-surface-hover) 82%, white) 0%,
		var(--button-surface-hover) 70%
	);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-button-effect:not(.button)::after {
	width: var(--icon-size, 1.15em);
	height: var(--icon-size, 1.15em);
	flex: 0 0 var(--icon-size, 1.15em);
	content: "";
	position: relative;
	z-index: 1;
	background-color: currentColor;
	-webkit-mask: url("../icons/phosphor/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/phosphor/arrow-right.svg") center / contain no-repeat;
	transform: translateX(0);
	transition: transform var(--transition-duration) var(--transition-easing);
}

.has-button-effect:not(.button):hover,
.has-button-effect:not(.button):focus-visible {
	color: var(--button-ink-hover);
	border-color: var(--button-surface-hover);
	box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--color-brand) 22%, transparent);
	transform: translateY(-2px);
}

.has-button-effect:not(.button):hover::before,
.has-button-effect:not(.button):focus-visible::before {
	transform: translate(-50%, -50%) scale(5.5);
}

.has-button-effect:not(.button):hover::after,
.has-button-effect:not(.button):focus-visible::after {
	transform: translateX(0.3125rem);
}

/* White hero CTA: a pale Sabre-blue bubble keeps the contrast restrained. */
.button-effect--light.has-button-effect {
	--button-surface: var(--brand-white);
	--button-surface-hover: color-mix(in srgb, var(--color-accent) 22%, var(--brand-white));
	--button-ink: var(--color-brand);
	--button-ink-hover: var(--color-brand);
}

/* Header CTA: retain the established orange accent and white label. */
.button-effect--accent.has-button-effect {
	--button-surface: var(--brand-accent);
	--button-surface-hover: color-mix(in srgb, var(--brand-accent) 72%, white);
	--button-ink: var(--brand-white);
	--button-ink-hover: var(--brand-white);
}

/* Cyan CTA on Sabre-blue sections: brighten rather than turning navy. */
.button.button-effect--on-brand {
	--button-surface: var(--color-accent);
	--button-surface-hover: color-mix(in srgb, var(--color-accent) 72%, white);
	--button-ink: var(--color-on-accent);
	--button-ink-hover: var(--color-on-accent);
}

/* Beat the older shared Bricks hover declaration without using !important. */
.button.button-effect--on-brand:is(.button):hover,
.button.button-effect--on-brand:is(.button):focus-visible {
	background: var(--button-surface-hover);
	color: var(--button-ink-hover);
	border-color: var(--button-surface-hover);
}

/* Bricks forms are generated controls, so their submit buttons share this. */
form.brxe-form button.bricks-button[type="submit"].has-button-effect {
	--button-surface: var(--color-accent);
	--button-surface-hover: var(--color-accent-hover);
	--button-ink: var(--color-on-accent);
	--button-ink-hover: var(--color-on-brand);
}

/* -------------------------------------------------------------------------- */
/* Primary — Sabre blue bubble + restrained lift + arrow cue                 */
/* -------------------------------------------------------------------------- */

.button.button--primary {
	--button-surface: var(--color-accent);
	--button-surface-hover: var(--color-accent-hover);
	--button-ink: var(--color-on-accent);
	--button-ink-hover: var(--color-on-brand);
}

.button--primary:active {
	transform: translateY(0);
	opacity: 0.88;
}

/* -------------------------------------------------------------------------- */
/* Secondary — border + text, no fill sweep                                   */
/* -------------------------------------------------------------------------- */

.button.button--secondary {
	--button-surface: var(--color-surface);
	--button-surface-hover: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
	--button-ink: var(--color-text);
	--button-ink-hover: var(--color-brand);
}

/* Ghost — white bubble on dark/brand surfaces. */
.button.button--ghost {
	--button-surface: transparent;
	--button-surface-hover: var(--color-on-accent);
	--button-ink: var(--color-on-accent);
	--button-ink-hover: var(--color-brand);
}

.button--secondary:active {
	opacity: 0.88;
}

/* -------------------------------------------------------------------------- */
/* Optional glow — pressed/tapped high-value CTAs only (.button--glow)        */
/* -------------------------------------------------------------------------- */

/*
 * Outer multi-layer green `box-shadow` only while `:active`.
 * Does NOT reuse `.button--primary::before` (slide fill stays separate).
 * Keyboard focus alone does not glow.
 * Design System page may add `.is-ds-preview-glow` (page CSS only) to freeze
 * the pressed aura for inspection — not a production class.
 */
.button--glow {
	position: relative;
	z-index: 0;
	display: inline-flex;
	isolation: isolate;
	border-radius: var(--border-radius);
}

.button--glow::before {
	content: "";
	position: absolute;
	inset: -0.35rem;
	z-index: -1;
	pointer-events: none;
	border-radius: calc(var(--border-radius) + 0.35rem);
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-accent-hover) 78%, white),
		var(--color-accent),
		color-mix(in srgb, var(--color-accent) 72%, var(--color-accent-hover)),
		var(--color-accent),
		color-mix(in srgb, var(--color-accent-hover) 78%, white)
	);
	background-size: 300% 100%;
	filter: blur(0.65rem);
	opacity: 0;
	transform: scale(0.96);
	transition:
		opacity var(--transition-duration) var(--transition-easing),
		transform var(--transition-duration) var(--transition-easing);
	animation: kreatif-button-glow-shift 2.4s linear infinite;
	animation-play-state: paused;
}

.button--glow > .button {
	position: relative;
	z-index: 1;
}

.button--glow:hover::before,
.button--glow:focus-within::before {
	opacity: 0.86;
	transform: scale(1);
	animation-play-state: running;
}

.button--glow:active::before {
	opacity: 1;
	transform: scale(1.02);
}

.button--glow:has(> .button[aria-disabled="true"])::before,
.button--glow:has(> .button:disabled)::before,
.button--glow:has(> .button[disabled])::before {
	opacity: 0;
	transform: none;
	animation: none;
}

@keyframes kreatif-button-glow-shift {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

/* -------------------------------------------------------------------------- */
/* Text link — underline growth                                               */
/* -------------------------------------------------------------------------- */

.text-link {
	position: relative;
	display: inline;
	font-weight: var(--font-weight-semibold);
	color: var(--color-accent);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 0.08em;
	transition-property: color, background-size, opacity;
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing);
}

.text-link:hover,
.text-link:focus-visible {
	color: var(--color-accent-hover);
	background-size: 100% 0.08em;
}

.text-link:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* -------------------------------------------------------------------------- */
/* Decorative arrow (::after from icons.css)                                  */
/* -------------------------------------------------------------------------- */

.button::after,
.project-card__link::after {
	position: relative;
	z-index: 1;
	transform: translateX(0);
	transition: transform var(--transition-duration) var(--transition-easing);
}

/* Keep the Phosphor arrow visible when a Bricks button has no icon token. */
.button.has-button-effect::after {
	width: var(--icon-size, 1.15em);
	height: var(--icon-size, 1.15em);
	flex-basis: var(--icon-size, 1.15em);
}

.button:hover::after,
.button:focus-visible::after,
.project-card__link:hover::after,
.project-card__link:focus-visible::after {
	transform: translateX(0.3125rem); /* 5px */
}

/* -------------------------------------------------------------------------- */
/* Disabled                                                                   */
/* -------------------------------------------------------------------------- */

.button[aria-disabled="true"]::before,
.button:disabled::before,
.button[disabled]::before {
	transform: scaleX(0);
	transition: none;
	animation: none;
	background-image: none;
}

.button[aria-disabled="true"],
.button:disabled,
.button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

.button[aria-disabled="true"]::after,
.button:disabled::after,
.button[disabled]::after {
	transform: none;
	transition: none;
}

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

@media (prefers-reduced-motion: reduce) {
	.button,
	.button::before,
	.button::after,
	.has-button-effect,
	.has-button-effect::before,
	.has-button-effect::after,
	.project-card__link::after,
	.text-link {
		transition-duration: 0.01ms;
	}

	.button:hover,
	.button:focus-visible,
	.button:active,
	.has-button-effect:hover,
	.has-button-effect:focus-visible,
	.has-button-effect:active {
		transform: none;
	}

	.has-button-effect:not(.button):hover::before,
	.has-button-effect:not(.button):focus-visible::before {
		transform: translate(-50%, -50%) scale(0);
	}

	.has-button-effect:not(.button):hover,
	.has-button-effect:not(.button):focus-visible {
		background: var(--button-surface-hover);
		border-color: var(--button-surface-hover);
	}

	.button--primary::before,
	.button--primary:hover::before,
	.button--primary:focus-visible::before {
		transform: translate(-50%, -50%) scale(0);
	}

	/* Instant colour/border feedback without slide or lift. */
	.button--primary:hover,
	.button--primary:focus-visible {
		background: var(--button-surface-hover);
		border-color: var(--button-surface-hover);
	}

	/* Glow: static pressed aura (same layers while pressed). */
	.button--glow::before {
		animation: none;
		background-position: 50% 50%;
	}

	.button--glow:hover::before,
	.button--glow:focus-within::before {
		opacity: 0.86;
		transform: none;
	}

	.button:hover::after,
	.button:focus-visible::after,
	.project-card__link:hover::after,
	.project-card__link:focus-visible::after {
		transform: none;
	}

	.text-link:hover,
	.text-link:focus-visible {
		background-size: 100% 0.08em;
	}
}