/*
 * Button block — pill buttons with a Snellenberg-style fill-invert + magnetic
 * hover (CLAUDE.md §5, Punkt/Kreis-Motiv). Two layers, exactly like the
 * reference:
 *   .doryo-button         outer — the magnetic transform target (GSAP x/y).
 *   .doryo-button__click   inner — the visible pill AND the clipper: it owns
 *                          overflow:hidden + border-radius + translateZ(0),
 *                          which is what lets border-radius actually clip the
 *                          transformed fill. Keeping the magnet on the OUTER
 *                          element means its transform never breaks the clip.
 *   .doryo-button__fill    the wiping ellipse (curved leading edge).
 *   .doryo-button__label   text above the fill; JS parallaxes it.
 *
 * A large ellipse sweeps in from below on hover; the label recolors in sync,
 * so the button inverts (default fg/bg swap to the hover pair). Colors are
 * driven by per-variant custom properties so the mechanism is written once:
 *   --btn-bg / --btn-fg / --btn-ring   default background / text / inset border
 *   --btn-fill                          the wiping fill = hover background
 *   --btn-fg-hover / --btn-ring-hover   text / inset border once filled
 *
 * The magnetic cursor-follow and the directional sweep (in from below, out
 * through the top) are GSAP-driven in assets/js/button-magnetic.js — pointer:
 * fine only, off under reduced motion. Without JS the CSS :hover fallback
 * still inverts the button. Focus stays visible via the global ring.
 */

.doryo-button {
	--btn-bg: var(--wp--preset--color--brand);
	--btn-fg: var(--wp--preset--color--fg-on-brand);
	--btn-ring: transparent;
	--btn-fill: var(--wp--preset--color--bg);
	--btn-fg-hover: var(--wp--preset--color--brand);
	--btn-ring-hover: var(--wp--preset--color--brand);

	display: inline-flex;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	will-change: transform;
}

/* Native <button> using the .doryo-button layers (e.g. the form submit): strip
   the UA chrome so the inner .doryo-button__click owns the whole look. */
button.doryo-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
}

/* Inner pill = the clipper. translateZ(0) + overflow:hidden + border-radius
   reliably clips the transformed fill child. */
.doryo-button__click {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transform: translateZ(0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--4-xl);
	border-radius: var(--wp--custom--radius--full);
	background: var(--btn-bg);
	color: var(--btn-fg);
	box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--btn-ring);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--text-md);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	transition:
		color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* The wiping ellipse — hidden below the pill, curved leading edge. */
.doryo-button__fill {
	position: absolute;
	z-index: 0;
	top: -50%;
	left: -25%;
	width: 150%;
	height: 200%;
	border-radius: 50%;
	background: var(--btn-fill);
	transform: translate3d(0, 101%, 0);
	pointer-events: none;
	will-change: transform;
	transition: transform 600ms var(--wp--custom--motion--ease);
}

/* Label sits above the fill; JS may translate it for the parallax. */
.doryo-button__label {
	position: relative;
	z-index: 1;
	will-change: transform;
	transition: transform 400ms var(--wp--custom--motion--ease);
}

/* Color + ring invert. For enhanced buttons this is driven by the JS-toggled
   .is-active class (synced with the GSAP fill), NOT :hover — the magnet can
   move the button off the cursor, which would desync a :hover-based color from
   the fill. The no-JS fallback and keyboard focus still use :hover / focus. */
.doryo-button:not(.is-enhanced):hover .doryo-button__click,
.doryo-button.is-active .doryo-button__click,
.doryo-button:focus-visible .doryo-button__click {
	color: var(--btn-fg-hover);
	box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--btn-ring-hover);
}

/* Fill sweeps in from below when the button is active. Driven by the JS
   .is-active class (enhanced), :hover (no-JS fallback) or keyboard focus — a
   plain CSS transition, so pointer-event timing can never stall it. */
.doryo-button.is-active .doryo-button__fill,
.doryo-button:not(.is-enhanced):hover .doryo-button__fill,
.doryo-button:focus-visible .doryo-button__fill {
	transform: translate3d(0, 0, 0);
}

/* JS-enhanced: GSAP owns the label's magnetic transform, so CSS must not
   transition it (would fight GSAP). The fill stays CSS-driven (above). */
.doryo-button.is-enhanced .doryo-button__label {
	transition: none;
}

/* --- Variants ------------------------------------------------------------ */

/* Primary (solid) inverts: brand/white → white/brand with a brand ring. */
.doryo-button--primary {
	--btn-bg: var(--wp--preset--color--brand);
	--btn-fg: var(--wp--preset--color--fg-on-brand);
	--btn-ring: transparent;
	--btn-fill: var(--wp--preset--color--bg);
	--btn-fg-hover: var(--wp--preset--color--brand);
	--btn-ring-hover: var(--wp--preset--color--brand);
}

/* Secondary (outline) fills brand on hover, text → white. border-strong
   default keeps the outline at the 3:1 non-text contrast floor (§8). */
.doryo-button--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--wp--preset--color--fg);
	--btn-ring: var(--wp--preset--color--border-strong);
	--btn-fill: var(--wp--preset--color--brand);
	--btn-fg-hover: var(--wp--preset--color--fg-on-brand);
	--btn-ring-hover: var(--wp--preset--color--brand);
}

/* --- Dark surfaces (hero, dark sections, footer) ------------------------- */

:is(.doryo-section--bg-dark, .doryo-hero-geo, .doryo-about, .doryo-footer, .doryo-drawer) .doryo-button--primary {
	--btn-bg: var(--wp--preset--color--bg);
	--btn-fg: var(--wp--preset--color--brand-hover);
	--btn-ring: transparent;
	--btn-fill: var(--wp--preset--color--brand);
	--btn-fg-hover: var(--wp--preset--color--fg-on-brand);
	--btn-ring-hover: transparent;
}

:is(.doryo-section--bg-dark, .doryo-hero-geo, .doryo-about, .doryo-footer, .doryo-drawer) .doryo-button--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--wp--preset--color--fg-on-brand);
	--btn-ring: var(--wp--preset--color--fg-on-brand-muted);
	--btn-fill: var(--wp--preset--color--bg);
	--btn-fg-hover: var(--wp--preset--color--brand-hover);
	--btn-ring-hover: var(--wp--preset--color--bg);
}

/* --- Editor placeholder (lone span, no inner pill) ----------------------- */

.doryo-button.is-placeholder {
	align-items: center;
	padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--4-xl);
	border-radius: var(--wp--custom--radius--full);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--text-md);
	font-weight: 500;
	opacity: 0.6;
}

/* --- Reduced motion: no wipe, no magnet — direct color invert on hover --- */

@media (prefers-reduced-motion: reduce) {
	.doryo-button__click,
	.doryo-button__label {
		transition-property: color, box-shadow;
	}

	.doryo-button__fill {
		display: none;
	}

	.doryo-button:hover .doryo-button__click,
	.doryo-button:focus-visible .doryo-button__click {
		background: var(--btn-fill);
		color: var(--btn-fg-hover);
		box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--btn-ring-hover);
	}
}