/*!
 * Lucky Cards for Elementor
 * Every selector is prefixed with .lcg- so nothing leaks into (or is picked up from) the theme or other plugins.
 */

@property --lcg-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.lcg-wrap {
	/* Sizing: all clamped so the row fits any container and any screen height. */
	--lcg-ratio: 2 / 3;
	--lcg-card-w: clamp(96px, 24vw, 230px);
	--lcg-card-max-h: 52vh;
	--lcg-gap: clamp(10px, 3vw, 34px);
	--lcg-radius: 7cqw; /* proportional to the card, like a real playing card */
	--lcg-reveal-w: 290px;
	--lcg-form-w: 620px;

	/* Gold palette. */
	--lcg-glow-1: #f3c552;
	--lcg-glow-2: #fff3c4;
	--lcg-glow-opacity: 0.5;
	--lcg-spark-1: #ffd76a;
	--lcg-spark-2: #f2a93b;
	--lcg-rays: rgba(255, 214, 110, 0.2);

	--lcg-back-base: #5a1028;
	--lcg-back-accent: #e9c46a;
	--lcg-front-accent: #f5d27a;

	position: relative;
	isolation: isolate;
}

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

/* "Show once per visitor": widget already seen */
.elementor-widget-lucky-cards.lcg-is-hidden,
.lcg-wrap.lcg-is-hidden {
	display: none !important;
}

/* ---------- [1] Headline ---------- */

.lcg-wrap .lcg-headline {
	position: relative;
	z-index: 30; /* stays above sparks and rays so it is always readable */
	margin: 0 0 clamp(6px, 1.5vw, 14px);
	padding: 0;
	text-align: center;
	font-size: clamp(1.4rem, 1rem + 2.2vw, 2.5rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* ---------- Stage ---------- */

.lcg-stage {
	position: relative;
	padding: clamp(18px, 4vw, 32px) 0;
}

.lcg-fx {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 20;
}

.lcg-cards {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--lcg-gap);
	padding-inline: clamp(12px, 3vw, 28px);
	overflow-x: clip; /* nothing can cause sideways page scroll */
	transition:
		padding 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
		margin 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Card shell (movement) ---------- */

.lcg-card {
	--dx: 0px;
	--dy: 0px;
	--rot: 0deg;
	--fan-x: 0%;
	--fan-y: 0%;
	--fan-rot: 0deg;
	position: relative;
	flex: 0 1 min(var(--lcg-card-w), calc(var(--lcg-card-max-h) * var(--lcg-ratio)));
	min-width: 0;
	aspect-ratio: var(--lcg-ratio);
	container-type: size;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	translate: calc(var(--dx) + var(--fan-x)) calc(var(--dy) + var(--fan-y));
	rotate: calc(var(--rot) + var(--fan-rot));
	transition:
		translate 0.7s cubic-bezier(0.2, 0.85, 0.25, 1.12),
		rotate 0.7s ease,
		scale 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.55s ease,
		filter 0.55s ease;
}

.lcg-wrap:not(.is-locked) .lcg-card:hover,
.lcg-wrap:not(.is-locked) .lcg-card:focus-visible {
	scale: 1.05;
	z-index: 3;
}

.lcg-wrap:not(.is-locked) .lcg-card:active {
	scale: 0.98;
}

/* Fanned arrangement */
.lcg-layout-fan .lcg-card:nth-child(1) { --fan-rot: -9deg; --fan-x: 16%; --fan-y: 5%; }
.lcg-layout-fan .lcg-card:nth-child(2) { --fan-y: -3%; z-index: 2; }
.lcg-layout-fan .lcg-card:nth-child(3) { --fan-rot: 9deg; --fan-x: -16%; --fan-y: 5%; }
.lcg-layout-fan .lcg-card.is-chosen { --fan-rot: 0deg; --fan-x: 0%; --fan-y: 0%; }

/* ---------- Float layer (idle bob + hover tilt) ---------- */

.lcg-float {
	position: absolute;
	inset: 0;
	perspective: 1400px;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.25s ease-out;
	animation: lcg-bob 4.6s ease-in-out infinite;
}

.lcg-card:nth-child(2) .lcg-float { animation-delay: -1.55s; }
.lcg-card:nth-child(3) .lcg-float { animation-delay: -3.1s; }

@keyframes lcg-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -2.2%; }
}

/* ---------- Outer glow ---------- */

.lcg-aura,
.lcg-ring {
	position: absolute;
	pointer-events: none;
	background: conic-gradient(
		from var(--lcg-angle),
		var(--lcg-glow-1),
		var(--lcg-glow-2),
		color-mix(in srgb, var(--lcg-glow-1) 55%, #7a4a00),
		var(--lcg-glow-2),
		var(--lcg-glow-1)
	);
}

.lcg-aura {
	inset: -5px;
	border-radius: calc(var(--lcg-radius) + 5px);
	filter: blur(14px);
	opacity: var(--lcg-glow-opacity);
	transition: opacity 0.35s ease, inset 0.5s ease, filter 0.5s ease;
	animation:
		lcg-spin 6s linear infinite,
		lcg-breathe 3.2s ease-in-out infinite;
}

.lcg-ring {
	inset: -2px;
	padding: 2px;
	border-radius: calc(var(--lcg-radius) + 2px);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0.85;
	animation: lcg-spin 6s linear infinite;
}

.lcg-card:nth-child(2) .lcg-aura,
.lcg-card:nth-child(2) .lcg-ring { animation-delay: -2s, -1s; }
.lcg-card:nth-child(3) .lcg-aura,
.lcg-card:nth-child(3) .lcg-ring { animation-delay: -4s, -2s; }

.lcg-wrap:not(.is-locked) .lcg-card:hover .lcg-aura,
.lcg-wrap:not(.is-locked) .lcg-card:focus-visible .lcg-aura {
	opacity: 1;
	inset: -10px;
	filter: blur(18px);
}

/* The winner is scaled up, so its glow and rim are divided by that scale to stay the same visual size. */
.lcg-card.is-chosen .lcg-aura {
	opacity: 1;
	inset: calc(-11px / var(--lcg-chosen-scale, 1));
	filter: blur(calc(20px / var(--lcg-chosen-scale, 1)));
}

.lcg-card.is-chosen .lcg-ring {
	inset: calc(-2px / var(--lcg-chosen-scale, 1));
	padding: calc(2px / var(--lcg-chosen-scale, 1));
}

.lcg-card:focus-visible .lcg-ring {
	inset: -4px;
	padding: 3px;
	opacity: 1;
}

@keyframes lcg-spin {
	to { --lcg-angle: 360deg; }
}

@keyframes lcg-breathe {
	0%, 100% { scale: 1; }
	50%      { scale: 1.03; }
}

.elementor-widget-lucky-cards:not(.lcg-glow-yes) .lcg-aura,
.elementor-widget-lucky-cards:not(.lcg-glow-yes) .lcg-ring {
	display: none;
}

/* ---------- Light rays (behind the winner) ---------- */

.lcg-rays {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 230%;
	aspect-ratio: 1;
	translate: -50% -50%;
	pointer-events: none;
	background: repeating-conic-gradient(from 0deg, var(--lcg-rays) 0deg 5deg, transparent 5deg 15deg);
	-webkit-mask: radial-gradient(circle, #000 16%, transparent 66%);
	mask: radial-gradient(circle, #000 16%, transparent 66%);
	opacity: 0;
	scale: 0.35;
	transition: opacity 0.9s ease, scale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
	animation: lcg-rotate 28s linear infinite;
}

@keyframes lcg-rotate {
	to { rotate: 360deg; }
}

.lcg-card.is-revealed .lcg-rays {
	opacity: 1;
	scale: 1;
}

.elementor-widget-lucky-cards:not(.lcg-rays-yes) .lcg-rays {
	display: none;
}

/* ---------- Flipping body (real 3D flip: works with JPG/PNG faces) ---------- */

.lcg-card-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	border-radius: var(--lcg-radius);
}

.lcg-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--lcg-radius);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow:
		0 22px 40px -14px rgba(0, 0, 0, 0.65),
		0 2px 6px rgba(0, 0, 0, 0.35);
}

.lcg-back {
	transform: rotateY(0deg) translateZ(1px);
}

.lcg-front {
	transform: rotateY(180deg) translateZ(1px);
}

.lcg-card.is-flipping .lcg-card-inner {
	animation: lcg-flip 0.95s cubic-bezier(0.3, 0.05, 0.2, 1) forwards;
}

.lcg-card.is-revealed .lcg-card-inner {
	transform: rotateY(180deg);
}

@keyframes lcg-flip {
	0%   { transform: rotateY(0deg) scale(1); }
	45%  { transform: rotateY(100deg) scale(1.08); }
	72%  { transform: rotateY(194deg) scale(1.03); }
	100% { transform: rotateY(180deg) scale(1); }
}

/* ---------- [2] Card back ---------- */

.lcg-back {
	background-color: var(--lcg-back-base);
	/* Built-in design vignette. An uploaded image replaces this layer. */
	background-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 100%);
}

/* Built-in design pieces: hidden as soon as an image is set (see --lcg-deco). */
.lcg-deco {
	display: var(--lcg-deco, block);
	position: absolute;
	pointer-events: none;
}

.lcg-pattern {
	inset: 0;
	background:
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--lcg-back-accent) 17%, transparent) 0 1px, transparent 1px 7cqmin),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--lcg-back-accent) 17%, transparent) 0 1px, transparent 1px 7cqmin);
	-webkit-mask: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, #000 75%);
	mask: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, #000 75%);
}

.lcg-frame {
	inset: 6.5cqmin;
	border: 1px solid color-mix(in srgb, var(--lcg-back-accent) 55%, transparent);
	border-radius: calc(var(--lcg-radius) * 0.55);
	box-shadow:
		inset 0 0 0 3px color-mix(in srgb, var(--lcg-back-accent) 10%, transparent),
		inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.lcg-emblem {
	left: 50%;
	top: 50%;
	width: 52cqmin;
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--lcg-back-accent) 45%, transparent);
	background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 70%);
	box-shadow:
		0 0 0 5px color-mix(in srgb, var(--lcg-back-accent) 8%, transparent),
		0 0 28px -4px color-mix(in srgb, var(--lcg-back-accent) 45%, transparent);
}

.lcg-star,
.lcg-pip {
	background: linear-gradient(160deg, #fff6d5 0%, var(--lcg-back-accent) 45%, color-mix(in srgb, var(--lcg-back-accent) 60%, #5a3a00) 100%);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.lcg-star {
	position: absolute;
	inset: 16%;
}

.lcg-pip {
	width: 10cqmin;
	aspect-ratio: 1;
}

.lcg-pip-tl { top: 10cqmin; left: 10cqmin; }
.lcg-pip-br { bottom: 10cqmin; right: 10cqmin; }

/* gloss sweep across the backs */
.lcg-back::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%);
	background-size: 260% 100%;
	background-position: 130% 0;
	animation: lcg-sheen 5.5s ease-in-out infinite;
}

.lcg-card:nth-child(2) .lcg-back::after { animation-delay: 0.35s; }
.lcg-card:nth-child(3) .lcg-back::after { animation-delay: 0.7s; }

@keyframes lcg-sheen {
	0%, 55%   { background-position: 130% 0; }
	85%, 100% { background-position: -30% 0; }
}

.lcg-glare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.3), transparent 50%);
	mix-blend-mode: soft-light;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lcg-wrap:not(.is-locked) .lcg-card:hover .lcg-glare {
	opacity: 1;
}

/* ---------- [3] Card front ---------- */

.lcg-front {
	background-color: #140b06;
	background-image: radial-gradient(at center center, #3a2408 0%, #0b0603 100%);
	color: #fff;
}

.lcg-front-frame {
	position: absolute;
	inset: 5cqmin;
	pointer-events: none;
	border: 1px solid var(--lcg-front-frame, color-mix(in srgb, var(--lcg-front-accent) 60%, transparent));
	border-radius: calc(var(--lcg-radius) * 0.55);
}

.lcg-shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
	translate: -120% 0;
}

.lcg-card.is-revealed .lcg-shine {
	animation: lcg-shine 4.5s 0.05s ease-in-out infinite;
}

@keyframes lcg-shine {
	0%        { translate: -120% 0; }
	28%, 100% { translate: 120% 0; }
}

/*
 * The text block is laid out on a fixed 300px-wide "design" card and scaled to
 * the real card by JS, so px typography behaves identically at every card size.
 */
.lcg-front-content {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 34px 28px;
	text-align: center;
}

.lcg-won {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--lcg-front-accent);
}

.lcg-won::after {
	content: '';
	display: block;
	width: 72px;
	height: 1px;
	margin: 14px auto 0;
	background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.lcg-offer {
	max-width: 100%;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.12;
	text-wrap: balance;
	overflow-wrap: anywhere;
	background: linear-gradient(180deg, #fff7d9 0%, #f5c451 55%, #c38a25 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: #f5c451;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 10px rgba(245, 196, 81, 0.35));
}

/* ---------- Card states ---------- */

.lcg-wrap.is-locked .lcg-card {
	cursor: default;
}

.lcg-card.is-chosen {
	z-index: 5;
	scale: var(--lcg-chosen-scale, 1.12);
	transition:
		translate 0.7s cubic-bezier(0.2, 0.85, 0.25, 1.12),
		rotate 0.7s ease,
		scale 0.7s cubic-bezier(0.2, 0.85, 0.25, 1.12);
}

.lcg-card.is-chosen .lcg-face {
	box-shadow: 0 calc(34px / var(--lcg-chosen-scale, 1)) calc(60px / var(--lcg-chosen-scale, 1)) calc(-18px / var(--lcg-chosen-scale, 1)) rgba(0, 0, 0, 0.7);
}

.lcg-card.is-dismissed {
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition:
		translate 0.75s cubic-bezier(0.4, 0, 0.7, 0.4),
		rotate 0.75s ease-in,
		scale 0.75s ease-in,
		opacity 0.55s 0.15s ease-in,
		filter 0.6s ease-in;
}

.lcg-exit-tuck .lcg-card.is-dismissed {
	scale: 0.5;
	filter: blur(6px) brightness(0.6);
}

.lcg-exit-fan .lcg-card.is-dismissed,
.lcg-exit-drop .lcg-card.is-dismissed {
	scale: 0.88;
}

.lcg-card.is-gone {
	visibility: hidden;
}

/* Instant state changes (editor preview step, resize) */
.lcg-wrap.is-instant .lcg-card,
.lcg-wrap.is-instant .lcg-cards,
.lcg-wrap.is-instant .lcg-rays,
.lcg-wrap.is-instant .lcg-aura,
.lcg-wrap.is-instant .lcg-claim,
.lcg-wrap.is-instant .lcg-panel {
	transition: none !important;
}

/* ---------- [4] Claim button ---------- */

.lcg-claim {
	position: relative;
	z-index: 25;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.45s ease,
		visibility 0s 0.5s;
}

.lcg-claim-clip {
	min-height: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.lcg-wrap.is-revealed .lcg-claim {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* button fades, then its space closes up */
.lcg-wrap.is-claimed .lcg-claim {
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		grid-template-rows 0.45s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s 0.3s;
}

.lcg-wrap .lcg-claim-btn {
	appearance: none;
	display: inline-block;
	max-width: calc(100% - 32px);
	margin: 16px 16px 18px;
	padding: 0.85em 1.9em;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.15;
	text-transform: uppercase;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	color: #2a1604;
	background: linear-gradient(180deg, #ffe39a, #e0a93a);
	box-shadow: 0 0 0 0 rgba(245, 196, 81, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease, color 0.2s ease;
	animation: lcg-pulse 2s ease-out infinite;
}

.lcg-wrap .lcg-claim-btn:hover,
.lcg-wrap .lcg-claim-btn:focus-visible {
	color: #2a1604;
	background: linear-gradient(180deg, #fff0bf, #f0bb4a);
	filter: brightness(1.05);
	transform: translateY(-1px);
}

.lcg-wrap .lcg-claim-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@keyframes lcg-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
	100% { box-shadow: 0 0 0 14px rgba(245, 196, 81, 0), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
}

/* ---------- [5] Form panel ---------- */

.lcg-panel {
	position: relative;
	z-index: 25;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.45s ease,
		visibility 0s 0.55s;
}

.lcg-panel-clip {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.lcg-wrap.is-claimed .lcg-panel {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition-delay: 0.2s, 0.2s, 0s;
}

.lcg-wrap.is-panel-open .lcg-panel-clip {
	overflow: visible;
}

.lcg-panel-box {
	width: min(100%, var(--lcg-form-w));
	margin: 8px auto 0;
	padding: clamp(14px, 3.5vw, 28px);
	overflow: hidden;
	border: 1px solid rgba(245, 210, 122, 0.3);
	border-radius: 14px;
	background-color: #070707;
	color: #f3ead2;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
	outline: none;
}

.lcg-form iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

.lcg-form > :first-child { margin-top: 0; }
.lcg-form > :last-child { margin-bottom: 0; }

.lcg-form-empty {
	padding: 28px 16px;
	border: 1px dashed rgba(245, 210, 122, 0.45);
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	opacity: 0.85;
}

/* ---------- Editor reset + a11y ---------- */

.lcg-wrap .lcg-reset {
	position: relative;
	z-index: 25;
	display: block;
	margin: 14px auto 0;
	padding: 0.4em 0.9em;
	border: 1px dashed currentColor;
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 12px;
	opacity: 0.7;
	cursor: pointer;
	box-shadow: none;
}

.lcg-wrap .lcg-reset:hover {
	opacity: 1;
	background: none;
	color: inherit;
}

.lcg-wrap .lcg-reset[hidden] {
	display: none;
}

.lcg-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lcg-float,
	.lcg-aura,
	.lcg-ring,
	.lcg-rays,
	.lcg-back::after,
	.lcg-claim-btn,
	.lcg-card.is-revealed .lcg-shine {
		animation: none !important;
	}
	.lcg-card,
	.lcg-card.is-chosen,
	.lcg-card.is-dismissed,
	.lcg-cards,
	.lcg-claim,
	.lcg-panel {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
	}
	.lcg-card.is-flipping .lcg-card-inner {
		animation-duration: 0.01s;
	}
}