/* ============================================================
   Studio Visuali — Featured Ticker  |  featured-ticker.css  |  v1.0.0
   ============================================================ */

.vft-root {
	--vft-icon-bg: #f3efe6;
	--vft-icon-color: #b9a880;
	--vft-divider: #ececec;
	--vft-rows: 4;
	--vft-duration: 30s;
	--vft-row-height: 68px;
}

.vft-viewport {
	overflow: hidden;
	height: calc(var(--vft-rows) * var(--vft-row-height));
	position: relative;
	mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.vft-track {
	display: flex;
	flex-direction: column;
	animation: vft-scroll var(--vft-duration) linear infinite;
}

.vft-viewport:hover .vft-track {
	animation-play-state: paused;
}

@keyframes vft-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

.vft-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--vft-row-height);
	padding: 10px 4px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--vft-divider);
	text-decoration: none !important;
	color: inherit;
	cursor: pointer;
}

.vft-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vft-icon-bg);
	color: var(--vft-icon-color);
}

.vft-icon svg {
	width: 16px;
	height: 16px;
}

.vft-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vft-title {
	font-size: 14px;
	font-weight: 600;
	color: #2d2d3a;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.vft-meta {
	font-size: 11px;
	color: #999;
}

.vft-empty,
.vft-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px 16px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	color: #6b7280;
	font-size: 13px;
	text-align: center;
}

.vft-placeholder i {
	font-size: 22px;
	color: #9ca3af;
}
