/* ==========================================================================
   Luxury Spotlight Section
   Scoped under .lux-spotlight to avoid theme collisions.
   ========================================================================== */

.lux-spotlight {
	--x: 50%;
	--y: 50%;
	--spot-size: 340px;

	--lux-bg: #000;
	--lux-accent: #c9a063;
	--lux-accent-light: #e4c896;
	--lux-text: #f5efe6;
	--lux-muted: #b6a991;
	--lux-font: 'Vazirmatn', 'IRANSans', system-ui, sans-serif;

	position: relative;
	/* 🟢 تغییر جراحی: این خط به طور کامل حذف شد تا از هرگونه تداخل با لایه فوتر جلوگیری شود */
	width: 100%;
	background: var(--lux-bg);
	overflow: hidden;
	font-family: var(--lux-font);
	isolation: isolate;
}

/* ---- Stage (aspect ratio switches per device) ---- */
.lux-spotlight__stage {
	position: relative;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 16 / 9;            /* desktop default */
	background: var(--lux-bg);
	cursor: crosshair;
}

@media (min-width: 769px) and (max-width: 1023px) {
	.lux-spotlight__stage { aspect-ratio: 4 / 3; }
}

@media (max-width: 768px) {
	.lux-spotlight { --spot-size: 46vw; }
	.lux-spotlight__stage {
		aspect-ratio: 9 / 16;
		cursor: default;
	}
}

/* ---- Masked image = the spotlight reveal ---- */
.lux-spotlight__image,
.lux-spotlight__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.lux-spotlight__image {
	-webkit-mask-image: radial-gradient(
		circle var(--spot-size) at var(--x) var(--y),
		#000 0%,
		#000 32%,
		rgba(0, 0, 0, 0.35) 62%,
		transparent 80%
	);
	mask-image: radial-gradient(
		circle var(--spot-size) at var(--x) var(--y),
		#000 0%,
		#000 32%,
		rgba(0, 0, 0, 0.35) 62%,
		transparent 80%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	will-change: -webkit-mask-image, mask-image;
}

/* Subtle warm glow tint around the spotlight edge */
.lux-spotlight__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		circle calc(var(--spot-size) * 1.05) at var(--x) var(--y),
		transparent 60%,
		rgba(201, 160, 99, 0.08) 78%,
		transparent 100%
	);
	z-index: 2;
}

/* ---- Hint ---- */
.lux-spotlight__hint {
	position: absolute;
	bottom: 1.6rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--lux-muted);
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.lux-spotlight.is-active .lux-spotlight__hint { opacity: 0; }
.lux-spotlight__hint--mobile { display: none; }
@media (max-width: 768px) {
	.lux-spotlight__hint--desktop { display: none; }
	.lux-spotlight__hint--mobile  { display: inline; }
}

/* ==========================================================================
   Hotspots
   ========================================================================== */
.lux-hotspot {
	position: absolute;
	top: var(--d-top, 50%);
	left: var(--d-left, 50%);
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	z-index: 5;
	opacity: 0.25;
	transition: opacity 0.45s ease, transform 0.3s ease;
}

/* تغییر جایگاه در تبلت */
@media (max-width: 1024px) {
	.lux-hotspot {
		top: var(--t-top, 50%);
		left: var(--t-left, 50%);
	}
}

/* تغییر جایگاه در موبایل */
@media (max-width: 768px) {
	.lux-hotspot {
		top: var(--m-top, 50%);
		left: var(--m-left, 50%);
	}
}

.lux-hotspot:focus-visible {
	outline: 2px solid var(--lux-accent-light);
	outline-offset: 6px;
	border-radius: 50%;
	opacity: 1;
}

.lux-hotspot.is-lit,
.lux-hotspot.is-open { opacity: 1; }

/* Core dot */
.lux-hotspot__dot {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #1a130a;
	background: linear-gradient(135deg, var(--lux-accent), var(--lux-accent-light));
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset,
				0 6px 18px -4px rgba(201, 160, 99, 0.55);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.lux-hotspot:hover .lux-hotspot__dot,
.lux-hotspot.is-open .lux-hotspot__dot {
	transform: translate(-50%, -50%) scale(1.12);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
				0 10px 28px -4px rgba(201, 160, 99, 0.8);
}
.lux-hotspot__dot svg { transition: transform 0.4s ease; }
.lux-hotspot.is-open .lux-hotspot__dot svg { transform: rotate(135deg); }

/* Pulsing ring */
.lux-hotspot__ping {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--lux-accent);
	opacity: 0;
}
.lux-hotspot.is-lit .lux-hotspot__ping {
	animation: lux-ping 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes lux-ping {
	0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.9; }
	70%  { opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ==========================================================================
   Tooltip (glassmorphism, RTL)
   ========================================================================== */
.lux-hotspot__tooltip {
	position: absolute;
	left: 50%;
	width: min(320px, 85vw);
	box-sizing: border-box;
	padding: 18px 20px;
	display: block;
	direction: rtl;
	text-align: right;
	color: var(--lux-text);
	white-space: normal;
	word-wrap: break-word;

	background: rgba(22, 17, 12, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid rgba(201, 160, 99, 0.28);
	border-radius: 16px;
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	filter: blur(8px);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
				filter 0.45s ease, visibility 0s linear 0.45s;
	z-index: 6;
}

@media (max-width: 768px) {
	.lux-hotspot__tooltip {
		width: min(280px, 75vw);
		padding: 14px 16px;
	}
}

/* Vertical placement */
.lux-hotspot--above .lux-hotspot__tooltip { bottom: 130%; transform: translate(-50%, 14px); }
.lux-hotspot--below .lux-hotspot__tooltip { top: 130%;    transform: translate(-50%, -14px); }

/* Horizontal nudge */
.lux-hotspot--tt-start .lux-hotspot__tooltip { left: 0;    transform: translate(0, 14px); }
.lux-hotspot--tt-end   .lux-hotspot__tooltip { left: auto; right: 0; transform: translate(0, 14px); }
.lux-hotspot--below.lux-hotspot--tt-start .lux-hotspot__tooltip { transform: translate(0, -14px); }
.lux-hotspot--below.lux-hotspot--tt-end   .lux-hotspot__tooltip { transform: translate(0, -14px); }

/* Tablet logical positioning */
@media (max-width: 1024px) {
	.t-lux-hotspot--above .lux-hotspot__tooltip { top: auto; bottom: 130%; transform: translate(-50%, 14px); }
	.t-lux-hotspot--below .lux-hotspot__tooltip { bottom: auto; top: 130%; transform: translate(-50%, -14px); }
	.t-lux-hotspot--tt-start .lux-hotspot__tooltip { left: 0; right: auto; transform: translate(0, 14px); }
	.t-lux-hotspot--tt-end   .lux-hotspot__tooltip { left: auto; right: 0; transform: translate(0, 14px); }
	.t-lux-hotspot--below.t-lux-hotspot--tt-start .lux-hotspot__tooltip { transform: translate(0, -14px); }
	.t-lux-hotspot--below.t-lux-hotspot--tt-end   .lux-hotspot__tooltip { transform: translate(0, -14px); }
}

/* Mobile logical positioning */
@media (max-width: 768px) {
	.m-lux-hotspot--above .lux-hotspot__tooltip { top: auto; bottom: 130%; transform: translate(-50%, 14px); }
	.m-lux-hotspot--below .lux-hotspot__tooltip { bottom: auto; top: 130%; transform: translate(-50%, -14px); }
	.m-lux-hotspot--tt-start .lux-hotspot__tooltip { left: 0; right: auto; transform: translate(0, 14px); }
	.m-lux-hotspot--tt-end   .lux-hotspot__tooltip { left: auto; right: 0; transform: translate(0, 14px); }
	.m-lux-hotspot--below.m-lux-hotspot--tt-start .lux-hotspot__tooltip { transform: translate(0, -14px); }
	.m-lux-hotspot--below.m-lux-hotspot--tt-end   .lux-hotspot__tooltip { transform: translate(0, -14px); }
}

/* Open state */
.lux-hotspot.is-open .lux-hotspot__tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	filter: blur(0);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
				filter 0.45s ease, visibility 0s;
}

.lux-hotspot.is-open.lux-hotspot--above .lux-hotspot__tooltip,
.lux-hotspot.is-open.lux-hotspot--below .lux-hotspot__tooltip,
.lux-hotspot.is-open.t-lux-hotspot--above .lux-hotspot__tooltip,
.lux-hotspot.is-open.t-lux-hotspot--below .lux-hotspot__tooltip,
.lux-hotspot.is-open.m-lux-hotspot--above .lux-hotspot__tooltip,
.lux-hotspot.is-open.m-lux-hotspot--below .lux-hotspot__tooltip { transform: translate(-50%, 0); }

.lux-hotspot.is-open.lux-hotspot--tt-start .lux-hotspot__tooltip,
.lux-hotspot.is-open.lux-hotspot--tt-end   .lux-hotspot__tooltip,
.lux-hotspot.is-open.t-lux-hotspot--tt-start .lux-hotspot__tooltip,
.lux-hotspot.is-open.t-lux-hotspot--tt-end   .lux-hotspot__tooltip,
.lux-hotspot.is-open.m-lux-hotspot--tt-start .lux-hotspot__tooltip,
.lux-hotspot.is-open.m-lux-hotspot--tt-end   .lux-hotspot__tooltip { transform: translate(0, 0); }

/* Tooltip content */
.lux-hotspot__title {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lux-accent-light);
	margin-bottom: 0.5rem;
}
.lux-hotspot__desc {
	display: block;
	font-size: 0.86rem;
	line-height: 1.85;
	color: var(--lux-muted);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lux-hotspot.is-lit .lux-hotspot__ping { animation: none; }
	.lux-hotspot__tooltip { filter: none; transition: opacity 0.2s ease, visibility 0s; }
	.lux-spotlight__image { will-change: auto; }
}