/* Larisa — 3D hero slider */

.lm3d {
	--P: 1600px;          /* perspective */
	--D: 300px;           /* distance of each face from the rotation axis */
	--h: 460px;
	--card: 156px;
	--turn: 1.15s;
	--ease: cubic-bezier(.65, 0, .25, 1);
	--delay: 8000ms;
	position: relative;
	direction: rtl;
	font-family: inherit;
	color: #fff;
	margin: 0 auto;
	-webkit-user-select: none;
	user-select: none;
}

.lm3d *,
.lm3d *::before,
.lm3d *::after { box-sizing: border-box; }

/* ---------- 3D chain ---------- */

.lm3d-viewport {
	position: relative;
	height: var(--h);
	overflow: hidden;
	perspective: var(--P);
	perspective-origin: 50% 42%;
	background: #14040f;
	isolation: isolate;
	touch-action: pan-y;
}

.lm3d-tilt,
.lm3d-dip,
.lm3d-stage,
.lm3d-face,
.lm3d-layout,
.lm3d-scene,
.lm3d-decor,
.lm3d-orbit {
	transform-style: preserve-3d;
}

.lm3d-tilt,
.lm3d-dip,
.lm3d-stage {
	position: absolute;
	inset: 0;
}

.lm3d-tilt {
	transform: rotateX(calc(var(--my, 0) * -4deg)) rotateY(calc(var(--mx, 0) * 6deg));
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.lm3d-dip { transform: translateZ(calc(var(--D) * -1)); }

.lm3d.is-turning .lm3d-dip { animation: lm3d-dip var(--turn) var(--ease); }

@keyframes lm3d-dip {
	50% { transform: translateZ(calc(var(--D) * -1 - 280px)); }
}

.lm3d-stage { transition: transform var(--turn) var(--ease); }

.lm3d-face {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

.lm3d-face.is-visible { visibility: visible; }
.lm3d-face[data-index="0"] { transform: translateZ(var(--D)); }
.lm3d-face[data-index="1"] { transform: rotateY(180deg) translateZ(var(--D)); }

/* ---------- Background (deep layer) ---------- */

.lm3d-bg {
	position: absolute;
	inset: -14%;
	transform: translateZ(-260px) scale(1.17);
	border-radius: 48px;
	overflow: hidden;
}

.lm3d-face--jewel .lm3d-bg {
	background:
		radial-gradient(60% 70% at 72% 40%, rgba(214, 162, 74, .22), transparent 65%),
		radial-gradient(120% 100% at 20% 20%, #4a1640 0%, #2a0a26 48%, #12040e 100%);
}

.lm3d-face--beauty .lm3d-bg {
	background:
		radial-gradient(60% 70% at 70% 45%, rgba(167, 243, 208, .3), transparent 65%),
		radial-gradient(120% 100% at 20% 20%, #3fa585 0%, #23785f 50%, #144d3d 100%);
}

.lm3d-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
}

.lm3d-glow--1 { width: 38%; height: 50%; inset-inline-end: 8%; top: 18%; }
.lm3d-glow--2 { width: 30%; height: 40%; inset-inline-start: 12%; bottom: 4%; opacity: .35; }
.lm3d-face--jewel .lm3d-glow--1 { background: #c98a2e; }
.lm3d-face--jewel .lm3d-glow--2 { background: #8a2a74; }
.lm3d-face--beauty .lm3d-glow--1 { background: #34d399; }
.lm3d-face--beauty .lm3d-glow--2 { background: #5eead4; }

.lm3d-latin {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	transform: translate(50%, -50%);
	font-size: clamp(90px, 17vw, 260px);
	font-weight: 900;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap;
	direction: ltr;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .09);
	font-family: Arial, Helvetica, sans-serif;
}

/* ---------- Layout ---------- */

.lm3d-layout {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: 24px;
	padding: 28px max(64px, calc((100% - 1220px) / 2)) 72px;
}

.lm3d-copy {
	transform: translateZ(70px);
	max-width: 470px;
}

.lm3d-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 6px 14px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
}

.lm3d-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lm3d-accent);
	box-shadow: 0 0 12px var(--lm3d-accent);
}

.lm3d-face--jewel { --lm3d-accent: #f2c16b; --lm3d-accent-2: #ffe7a3; --lm3d-ink: #2a0a26; }
.lm3d-face--beauty { --lm3d-accent: #6ee7b7; --lm3d-accent-2: #d1fae5; --lm3d-ink: #0f4a3a; }

.lm3d-title {
	margin: 18px 0 14px;
	padding: 0;
	font-size: clamp(28px, 3.5vw, 48px);
	line-height: 1.15;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.lm3d-title em {
	display: block;
	font-style: normal;
	background: linear-gradient(100deg, var(--lm3d-accent-2), var(--lm3d-accent) 55%, var(--lm3d-accent-2));
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lm3d-shine 6s linear infinite;
}

@keyframes lm3d-shine { to { background-position: -200% 0; } }

.lm3d-text {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .8);
}

.lm3d-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 99px;
	background: #fff;
	color: var(--lm3d-ink) !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	box-shadow: 0 14px 30px -10px var(--lm3d-accent), 0 0 0 0 rgba(255, 255, 255, .5);
	transition: transform .25s ease, box-shadow .25s ease;
}

.lm3d-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -12px var(--lm3d-accent), 0 0 0 6px rgba(255, 255, 255, .12);
}

.lm3d-cta svg { transition: transform .25s ease; }
.lm3d-cta:hover svg { transform: translateX(-4px); }

/* ---------- Scene: pedestal + orbit ---------- */

.lm3d-scene {
	position: relative;
	height: 100%;
	min-height: 320px;
}

.lm3d-pedestal {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	transform: translateY(125px) rotateX(80deg);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .28), color-mix(in srgb, var(--lm3d-accent) 35%, transparent) 45%, transparent 72%);
	pointer-events: none;
}

.lm3d-pedestal span {
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	border: 2px dashed color-mix(in srgb, var(--lm3d-accent) 70%, transparent);
	animation: lm3d-rotate 40s linear infinite;
}

.lm3d-pedestal::after {
	content: "";
	position: absolute;
	inset: 28%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .25);
	box-shadow: 0 0 40px var(--lm3d-accent);
}

@keyframes lm3d-rotate { to { transform: rotate(360deg); } }

.lm3d-orbit {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 0;
	height: 0;
}

.lm3d-card {
	position: absolute;
	width: var(--card);
	left: calc(var(--card) / -2);
	top: calc(var(--card) / -2);
	display: block;
	color: #fff !important;
	text-decoration: none !important;
	will-change: transform, opacity;
	/* No-JS fallback: a fan of cards. */
	transform: translate3d(calc((var(--i) - 2) * 60%), 0, calc(var(--i) * -40px));
	-webkit-tap-highlight-color: transparent;
}

.lm3d-card-img {
	display: block;
	aspect-ratio: 1;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 34px 50px -24px rgba(0, 0, 0, .7),
		0 0 0 1px rgba(255, 255, 255, .55) inset;
	transition: box-shadow .4s ease;
}

.lm3d-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.lm3d-card.is-front .lm3d-card-img {
	box-shadow:
		0 40px 60px -22px rgba(0, 0, 0, .75),
		0 0 0 3px var(--lm3d-accent),
		0 0 40px -4px var(--lm3d-accent);
}

.lm3d-card-info {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	width: max-content;
	max-width: 240px;
	transform: translate(-50%, 8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 16px;
	border-radius: 14px;
	background: rgba(24, 6, 20, .78);
	border: 1px solid rgba(255, 255, 255, .14);
	text-align: center;
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}

.lm3d-card.is-front .lm3d-card-info { opacity: 1; transform: translate(-50%, 0); }
.lm3d-card-name { font-size: 12.5px; line-height: 1.6; white-space: normal; }
.lm3d-card-price { font-size: 14px; font-weight: 800; color: var(--lm3d-accent); }

.lm3d-card:focus-visible { outline: none; }
.lm3d-card:focus-visible .lm3d-card-img { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--lm3d-accent); }

/* ---------- Decor: jewelry ---------- */

.lm3d-decor {
	position: absolute;
	inset: -10% -6%;
	pointer-events: none;
}

.lm3d-hoop {
	position: absolute;
	border-radius: 50%;
}

/* Big golden orbit path around the products. */
.lm3d-hoop--a {
	left: 50%;
	top: 50%;
	width: 560px;
	height: 560px;
	margin: -280px 0 0 -280px;
	border: 1.5px solid rgba(242, 193, 107, .35);
	box-shadow: 0 0 24px rgba(242, 193, 107, .18);
	transform: translateY(-10px) rotateX(76deg);
}

/* Spinning gold rings (jewels). */
.lm3d-hoop--b,
.lm3d-hoop--c {
	background: conic-gradient(from 0deg, #fff1c1, #c8892b, #ffe7a3, #9c6418, #fff6d8, #c8892b, #fff1c1);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}

.lm3d-hoop--b {
	width: 110px;
	height: 110px;
	inset-inline-start: 8%;
	top: 10%;
	animation: lm3d-spin-b 9s linear infinite;
}

.lm3d-hoop--c {
	width: 64px;
	height: 64px;
	inset-inline-end: 6%;
	bottom: 16%;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
	animation: lm3d-spin-c 7s linear infinite;
}

@keyframes lm3d-spin-b {
	from { transform: translateZ(150px) rotateX(18deg) rotateY(0deg); }
	to { transform: translateZ(150px) rotateX(18deg) rotateY(360deg); }
}

@keyframes lm3d-spin-c {
	from { transform: translateZ(80px) rotateY(30deg) rotateX(0deg); }
	to { transform: translateZ(80px) rotateY(30deg) rotateX(360deg); }
}

.lm3d-spark {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 18px;
	height: 18px;
	transform: translateZ(var(--z));
}

.lm3d-spark::before,
.lm3d-spark::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 44%, #fff6d8 50%, transparent 56%),
		linear-gradient(0deg, transparent 44%, #fff6d8 50%, transparent 56%);
	filter: drop-shadow(0 0 6px #f2c16b);
	animation: lm3d-twinkle 3.2s ease-in-out infinite;
	animation-delay: var(--d);
}

.lm3d-spark::after {
	transform: rotate(45deg) scale(.55);
	opacity: .8;
}

@keyframes lm3d-twinkle {
	0%, 100% { opacity: .15; scale: .4; }
	50% { opacity: 1; scale: 1; }
}

/* ---------- Decor: beauty ---------- */

.lm3d-bubble {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, .25) 16%, transparent 40%),
		radial-gradient(circle at 50% 50%, rgba(190, 255, 225, .08) 55%, rgba(110, 231, 183, .45) 100%);
	box-shadow: inset 0 0 12px rgba(255, 255, 255, .25), 0 8px 24px rgba(0, 0, 0, .2);
	transform: translateZ(var(--z));
	animation: lm3d-float 6s ease-in-out infinite;
	animation-delay: calc(var(--d) * -1);
}

@keyframes lm3d-float {
	0%, 100% { transform: translate3d(0, 0, var(--z)); }
	50% { transform: translate3d(0, -22px, var(--z)); }
}

.lm3d-drop {
	position: absolute;
	inset-inline-start: 10%;
	top: 14%;
	width: 70px;
	height: 70px;
	border-radius: 0 50% 50% 50%;
	background:
		radial-gradient(circle at 60% 60%, rgba(255, 255, 255, .85) 0 5%, transparent 22%),
		linear-gradient(135deg, rgba(167, 243, 208, .92), rgba(16, 150, 110, .78));
	box-shadow: inset -6px -8px 16px rgba(6, 70, 50, .35), 0 18px 30px -10px rgba(0, 0, 0, .45);
	animation: lm3d-drop 7s ease-in-out infinite;
}

@keyframes lm3d-drop {
	0%, 100% { transform: translateZ(140px) rotate(45deg) rotateY(0deg); }
	50% { transform: translateZ(170px) translateY(-16px) rotate(45deg) rotateY(25deg); }
}

/* ---------- Navigation ---------- */

.lm3d-nav {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 10px;
}

.lm3d-tabs {
	display: flex;
	gap: 6px;
	padding: 5px;
	border-radius: 99px;
	background: rgba(15, 3, 12, .45);
	border: 1px solid rgba(255, 255, 255, .14);
}

.lm3d .lm3d-tab,
.lm3d .lm3d-arrow {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}

.lm3d .lm3d-tab {
	position: relative;
	overflow: hidden;
	padding: 8px 18px;
	min-height: 0;
	border-radius: 99px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	transition: background .3s ease, color .3s ease;
}

.lm3d .lm3d-tab:hover { background: rgba(255, 255, 255, .1); }
.lm3d .lm3d-tab.is-active { background: #fff; color: #3a0d30; }

.lm3d-progress {
	position: absolute;
	inset-inline: 14px;
	bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background: rgba(58, 13, 48, .15);
	overflow: hidden;
	opacity: 0;
}

.lm3d-progress::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #c91c7b;
	transform-origin: right center;
	transform: scaleX(0);
}

.lm3d-tab.is-active .lm3d-progress { opacity: 1; }
.lm3d-tab.is-running .lm3d-progress::after { animation: lm3d-progress var(--delay) linear forwards; }
.lm3d.is-paused .lm3d-tab.is-running .lm3d-progress::after { animation-play-state: paused; }

@keyframes lm3d-progress { to { transform: scaleX(1); } }

.lm3d .lm3d-arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: rgba(15, 3, 12, .45);
	border: 1px solid rgba(255, 255, 255, .14);
	transition: background .25s ease, transform .25s ease;
}

.lm3d .lm3d-arrow:hover { background: rgba(255, 255, 255, .18); transform: scale(1.06); }

.lm3d .lm3d-tab:focus-visible,
.lm3d .lm3d-arrow:focus-visible,
.lm3d-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.lm3d { --h: 440px; --card: 136px; }
	.lm3d-layout { padding: 26px 36px 72px; }
	.lm3d-pedestal { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
	.lm3d-hoop--a { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
}

@media (max-width: 767px) {
	.lm3d { --P: 1000px; --D: 200px; --h: 570px; --card: 108px; }
	.lm3d-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		gap: 0;
		padding: 24px 20px 70px;
		text-align: center;
	}
	.lm3d-copy { transform: translateZ(40px); max-width: none; justify-self: center; }
	.lm3d-title { margin: 12px 0 8px; font-size: 26px; }
	.lm3d-title em { display: inline; }
	.lm3d-text { font-size: 13.5px; margin-bottom: 16px; }
	.lm3d-cta { padding: 11px 20px; font-size: 14px; }
	.lm3d-scene { min-height: 0; }
	.lm3d-orbit { top: 44%; }
	.lm3d-pedestal { width: 300px; height: 300px; margin: -150px 0 0 -150px; transform: translateY(96px) rotateX(80deg); }
	.lm3d-hoop--a { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
	.lm3d-hoop--b { width: 64px; height: 64px; }
	.lm3d-hoop--c { width: 40px; height: 40px; }
	.lm3d-drop { width: 44px; height: 44px; }
	.lm3d-card-img { border-radius: 18px; }
	.lm3d-card-info { max-width: 190px; padding: 6px 12px; }
	.lm3d-card-name { font-size: 11.5px; }
	.lm3d-card-price { font-size: 12.5px; }
	.lm3d .lm3d-arrow { display: none; }
	.lm3d .lm3d-tab { padding: 7px 14px; font-size: 12.5px; }
	.lm3d-latin { font-size: 110px; top: 62%; }
}

@media (max-width: 380px) {
	.lm3d { --h: 540px; --card: 96px; }
	.lm3d-title { font-size: 23px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.lm3d { --turn: .01s; }
	.lm3d-tilt { transform: none; transition: none; }
	.lm3d.is-turning .lm3d-dip { animation: none; }
	.lm3d-title em,
	.lm3d-pedestal span,
	.lm3d-hoop--b,
	.lm3d-hoop--c,
	.lm3d-spark::before,
	.lm3d-spark::after,
	.lm3d-bubble,
	.lm3d-drop { animation: none; }
}