/*
 * Hover effects the admin can attach to any element.
 *
 * Loaded on every page (see src/app.html). The imported theme owns every other
 * class on these elements, so everything here is namespaced `cms-fx-` and only
 * ever added by an override — the imported markup never carries these classes.
 *
 * --cms-fx-speed is written as an inline style by the editor's "전환 속도"
 * control, so the duration is per element with a sane default.
 */

[class*='cms-fx-'] {
	--cms-fx-speed: 0.25s;
	transition:
		transform var(--cms-fx-speed) ease,
		box-shadow var(--cms-fx-speed) ease,
		filter var(--cms-fx-speed) ease,
		opacity var(--cms-fx-speed) ease;
}

.cms-fx-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.cms-fx-zoom:hover {
	transform: scale(1.04);
}

.cms-fx-shadow:hover {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.cms-fx-bright:hover {
	filter: brightness(1.1);
}

.cms-fx-fade:hover {
	opacity: 0.65;
}

/*
 * An underline that grows from the left. `position: relative` is scoped to the
 * effect so it cannot disturb the layout of elements that do not use it.
 */
.cms-fx-underline {
	position: relative;
}

.cms-fx-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cms-fx-speed) ease;
}

.cms-fx-underline:hover::after {
	transform: scaleX(1);
}

/* Always-on drift, for badges and small decorative images. */
.cms-fx-float {
	animation: cms-fx-float 3s ease-in-out infinite;
}

@keyframes cms-fx-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	[class*='cms-fx-'] {
		transition: none;
	}

	.cms-fx-float {
		animation: none;
	}
}