/**
 * Flavors Tilt Card - 3D tilt/parallax hover card.
 *
 * The wrapper provides perspective; the inner .ftc-card is the element JS
 * rotates. Layers (.ftc-layer) pop out with translateZ(var(--ftc-depth)) once
 * the pointer engages (.ftc-active), so the card sits flat at rest and while
 * tilt is disabled. Per-instance values come from Elementor `selectors`.
 */

.flavor-tilt-card {
	position: relative;
	/* JS sets the real perspective from config; this is the no-JS fallback. */
	perspective: 1000px;
}

.flavor-tilt-card .ftc-card {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 16px;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Smooth return to rest; JS removes the transition while tracking pointer. */
.flavor-tilt-card .ftc-card.ftc-resting {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.flavor-tilt-card .ftc-layer {
	--ftc-depth: 0px;
	position: relative;
	transform: translateZ(0);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.flavor-tilt-card.ftc-active .ftc-layer {
	transform: translateZ(var(--ftc-depth));
}

.ftc-media {
	line-height: 0;
}

.ftc-image {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	/* Cap the media panel: at defaults the placeholder rendered at its natural
	   1024px height and one card filled an entire viewport. A 16:9 media area
	   is the sane default; the widget's own height controls still override. */
	height: auto;
	max-height: 320px;
	object-fit: cover;
	border-radius: inherit;
}

.ftc-icon {
	display: inline-block;
	line-height: 1;
}

.ftc-title {
	line-height: 1.25;
}

.ftc-text {
	line-height: 1.6;
}

.ftc-btn {
	display: inline-block;
	text-decoration: none;
	line-height: 1.4;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Keyboard users get a clear, non-tilted focus ring. */
.ftc-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.flavor-tilt-card:focus-within .ftc-card {
	transform: none;
}

/* Glare: a radial highlight JS moves with the pointer via CSS variables. */
.ftc-glare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	background: radial-gradient(
		circle at var(--ftc-glare-x, 50%) var(--ftc-glare-y, 50%),
		rgba(255, 255, 255, var(--ftc-glare-o, 0.3)),
		rgba(255, 255, 255, 0) 60%
	);
	transition: opacity 0.3s ease;
}

.flavor-tilt-card.ftc-active .ftc-glare {
	opacity: 1;
}

/* Reduced motion: no tilt, no parallax pop, no glare sweep. */
@media (prefers-reduced-motion: reduce) {
	.flavor-tilt-card .ftc-card,
	.flavor-tilt-card.ftc-active .ftc-layer {
		transform: none !important;
		transition: none;
	}

	.flavor-tilt-card .ftc-glare {
		display: none;
	}
}