/* =============================================================================
 *  GooeyMorphingSurface — CSS layer for the SVG rect morph + HTML overlays.
 *
 *  Classes are prefixed `.gms-*` so they act as a manual scope (mks-ui's
 *  rolldown build produces empty default-exports for CSS modules, so we use
 *  plain CSS with explicit classnames referenced as string literals from
 *  the component).
 *
 *  Every tunable value comes from inline CSS custom props set by the React
 *  component at the root element. No hard-coded dimensions or timings here.
 *
 *  Technique recap: two <rect>s inside a <g filter="url(#gooey)">. Body rect
 *  is a geometric CLONE of the pill when closed, and morphs into the card
 *  geometry (x, y, width, height, rx, ry all interpolate) when open. The
 *  gaussian-blur + alpha-threshold filter bends the overlapping silhouettes
 *  into a single shape with a soft metaball throat.
 * ============================================================================= */

.gms-root {
	position: relative;
	display: inline-block;
}

.gms-shell {
	position: relative;
	width: var(--gms-card-w);
	height: var(--gms-pill-h);
	color: var(--gms-fill);
	transition: height var(--gms-duration) var(--gms-ease);
	/* Drop-shadow follows the fused silhouette. Chained filters = additive
	 * shadow layers for depth without a hard box-shadow. */
	filter: drop-shadow(0 16px 38px rgb(0 0 0 / 0.35))
		drop-shadow(0 4px 10px rgb(0 0 0 / 0.18));
}

.gms-shell[data-open='true'] {
	height: calc(var(--gms-pill-h) + var(--gms-card-h));
}

.gms-svg {
	position: absolute;
	top: 0;
	left: 50%;
	/* translateZ(0) keeps the filtered region on its own GPU layer so Safari
	 * re-renders the gooey filter smoothly while the body rect's geometry is
	 * animated via WAAPI (Sileo Safari formula). */
	transform: translateX(-50%) translateZ(0);
	contain: layout style;
	display: block;
	overflow: visible;
	pointer-events: none;
}

/* The body rect's x/y/width/height are driven by the Web Animations API
 * (rect.animate, see index.tsx) — NOT a CSS transition, which WebKit refuses
 * to interpolate on SVG geometry attributes. `will-change` is the only hint
 * left here. */
.gms-body-rect {
	will-change: x, y, width, height;
}

.gms-pill {
	position: absolute;
	top: 0;
	left: var(--gms-pill-x);
	width: var(--gms-pill-w);
	height: var(--gms-pill-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--card-foreground);
	pointer-events: none;
	z-index: 2;
}

.gms-card {
	position: absolute;
	top: calc(var(--gms-pill-h) - var(--gms-overlap));
	left: 0;
	width: var(--gms-card-w);
	height: var(--gms-card-h);
	color: var(--card-foreground);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
	border-radius: var(--gms-card-r);
	transition:
		opacity calc(var(--gms-duration) * 0.35) var(--gms-ease),
		transform calc(var(--gms-duration) * 0.35) var(--gms-ease);
}

.gms-shell[data-open='true'] .gms-card {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition:
		opacity calc(var(--gms-duration) * 0.55) var(--gms-ease)
			calc(var(--gms-duration) * 0.45),
		transform calc(var(--gms-duration) * 0.55) var(--gms-ease)
			calc(var(--gms-duration) * 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.gms-shell,
	.gms-body-rect,
	.gms-card {
		transition-duration: 0.01ms !important;
	}
}