/**
 * BE Hero Stage (home §2). Final effective rules of reference site.css for `.hero3`, `.h3-*` and
 * `.ring` (base + v11, v12, v17, v18, v19, v20, v21, v24, v30), merged. Every hard value reads a
 * custom property set by the widget's controls; the var() fallback is the reference value.
 *
 * Deliberate changes (same look): the cloud drift moves a ::before layer with transform instead of
 * animating background-position (GPU, no repaint); the looping animations pause off-screen
 * (.is-paused, set by hero-stage.js). `.is-still` (animation off) = the reduced-motion state.
 * The embedded card's styles are in spotlight.css.
 */

.e-con .elementor-widget-be-hero-stage { width: 100%; }

.elementor-widget-be-hero-stage .hero3 {
	--h3-minh: var(--be-h3-minh, max(680px, 100svh));
	--h3-hdr: var(--be-h3-hdr, calc(84px + var(--be-bar-h, 0px))); /* header + demo bar */
	--h3-stage-w: var(--be-h3-stage-w, min(34vw, 470px));
	--h3-stage-h: var(--be-h3-stage-h, min(80vh, 740px));
	--h3-tile: var(--be-h3-tile, 2400px);
	--h3-ring: var(--be-h3-ring, 124px);
	position: relative;
	overflow: hidden;
	min-height: var(--h3-minh);
	box-sizing: border-box;
	color: var(--be-h3-text, #F6ECE3);
	font-family: var(--f, "Montserrat", "Helvetica Neue", Arial, sans-serif);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	background: radial-gradient(60% 55% at 50% 52%, var(--be-h3-bg-1, #A8231A) 0%, var(--be-h3-bg-2, #7C140F) 38%, var(--be-h3-bg-3, #4A0B08) 70%, var(--be-h3-bg-4, #220504) 100%);
}

.elementor-widget-be-hero-stage .hero3 *,
.elementor-widget-be-hero-stage .hero3 *::before,
.elementor-widget-be-hero-stage .hero3 *::after { box-sizing: border-box; }

/* Darker band under the floating header. */
.elementor-widget-be-hero-stage .hero3::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--be-h3-shade, rgba(20, 4, 3, .55)), transparent 22%);
	pointer-events: none;
}

.elementor-widget-be-hero-stage .hero3 .pad {
	padding-left: var(--gl, 32px);
	padding-right: var(--gr, 32px);
}

.elementor-widget-be-hero-stage .h3-glow {
	position: absolute;
	left: 50%;
	top: 48%;
	width: 60vmin;
	height: 60vmin;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--be-h3-glow, rgba(255, 120, 80, .35)), transparent 70%);
	filter: blur(10px);
	animation: be-h3glow var(--be-h3-glow-speed, 9s) ease-in-out infinite;
}

.elementor-widget-be-hero-stage .h3-in {
	position: relative;
	max-width: 1640px;
	margin: 0 auto;
	min-height: var(--h3-minh);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
	gap: 24px;
	padding-top: calc(var(--h3-hdr) + 40px);
	padding-bottom: 40px;
}

.elementor-widget-be-hero-stage .h3-left {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 6vh, 64px);
	align-self: start;
	position: relative;
	z-index: 6;
}

.elementor-widget-be-hero-stage .hero3 .h3-title {
	margin: 0;
	padding: 0;
	font-family: var(--f-display, "Italiana"), "Didot", Georgia, serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: .98;
	font-size: clamp(46px, 6.3vw, 104px);
	color: var(--be-h3-text, #F6ECE3);
}

.elementor-widget-be-hero-stage .hero3 .h3-split span {
	display: block;
	opacity: 0;
	transform: translateY(30px);
	animation: be-h3up 1.4s cubic-bezier(.2, .7, .2, 1) forwards;
}

.elementor-widget-be-hero-stage .hero3 .h3-split span:nth-child(2) { animation-delay: .25s; }

/* Stage: halo, bottle, pedestal. */
.elementor-widget-be-hero-stage .h3-stage {
	position: relative;
	z-index: 3;
	align-self: end;
	justify-self: center;
	width: var(--h3-stage-w);
	height: var(--h3-stage-h);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.elementor-widget-be-hero-stage .h3-halo {
	position: absolute;
	left: 50%;
	bottom: 18%;
	width: 120%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--be-h3-halo, rgba(255, 170, 130, .28)), transparent 62%);
}

.elementor-widget-be-hero-stage .hero3 img.h3-bottle {
	position: relative;
	z-index: 2;
	display: block;
	width: 58%;
	max-width: 100%;
	height: auto;
	margin: 0 auto calc(var(--h3-stage-h) * .05 + var(--h3-stage-w) * .335);
	filter: drop-shadow(0 26px 30px var(--be-h3-bottle-shadow, rgba(30, 3, 2, .6)));
	opacity: 0;
	transform: translateY(90px) scale(.9);
	animation:
		be-h3bottle 2.6s .3s cubic-bezier(.16, .8, .24, 1) forwards,
		be-h3float var(--be-h3-float-speed, 7s) 3s ease-in-out infinite;
}

.elementor-widget-be-hero-stage .hero3 img.h3-wood {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 5%;
	display: block;
	width: 168%;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
	filter: drop-shadow(0 18px 18px var(--be-h3-wood-shadow, rgba(25, 2, 1, .55)));
	opacity: 0;
	animation: be-h3wood 1.8s .1s ease-out forwards;
}

/* Right column: the Trending card. */
.elementor-widget-be-hero-stage .h3-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	align-self: start;
	position: relative;
	z-index: 6;
	opacity: 0;
	animation: be-h3left 1.6s .9s cubic-bezier(.2, .7, .2, 1) forwards;
}

.elementor-widget-be-hero-stage .hero3 .h3-spot {
	margin-top: calc(var(--h3-minh) * .39 + 3vw - 70px);
}

/* Clouds: three tiled strips; the ::before layer is one tile wider and slides by one tile. */
.elementor-widget-be-hero-stage .h3-cloud {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
	pointer-events: none;
}

.elementor-widget-be-hero-stage .h3-cloud::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(100% + var(--h3-tile));
	background-repeat: repeat-x;
	background-position: 0 0;
	background-size: var(--h3-tile) auto;
	will-change: transform;
	animation: be-h3drift var(--be-h3-back-speed, 160s) linear infinite;
}

.elementor-widget-be-hero-stage .h3-cloud.back { z-index: 2; bottom: 0; height: 27%; }
.elementor-widget-be-hero-stage .h3-cloud.back::before { background-image: var(--be-h3-cloud-back, none); }

.elementor-widget-be-hero-stage .h3-cloud.front { z-index: 4; bottom: -4%; height: 24%; }
.elementor-widget-be-hero-stage .h3-cloud.front::before {
	background-image: var(--be-h3-cloud-front, none);
	animation-duration: var(--be-h3-front-speed, 95s);
	animation-direction: reverse;
}

.elementor-widget-be-hero-stage .h3-cloud.mist { z-index: 5; bottom: -9%; height: 18%; }
.elementor-widget-be-hero-stage .h3-cloud.mist::before {
	background-image: var(--be-h3-cloud-mist, var(--be-h3-cloud-front, none));
	animation-duration: var(--be-h3-mist-speed, 60s);
}

/* DISCOVER · THE · COLLECTION · ring (kept exactly). */
.elementor-widget-be-hero-stage .hero3 a.ring {
	position: absolute;
	z-index: 6;
	left: var(--gl, 32px);
	right: auto;
	bottom: 24%;
	width: var(--h3-ring);
	height: var(--h3-ring);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--be-h3-ring-text, #EFE5D4);
	text-decoration: none;
}

.elementor-widget-be-hero-stage .hero3 a.ring:focus-visible {
	outline: 2px solid var(--be-h3-ring-border, #D7A15C);
	outline-offset: 3px;
}

.elementor-widget-be-hero-stage .ring svg.t {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: var(--f-mono, "DM Mono"), ui-monospace, monospace;
	animation: be-h3spin var(--be-h3-ring-speed, 22s) linear infinite;
}

.elementor-widget-be-hero-stage .ring .core {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--be-h3-ring-border, #D7A15C);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s, color .3s;
}

.elementor-widget-be-hero-stage .ring .core svg { display: block; }
.elementor-widget-be-hero-stage .ring .core i { font-size: 14px; }

.elementor-widget-be-hero-stage .hero3 a.ring:hover .core,
.elementor-widget-be-hero-stage .hero3 a.ring:focus-visible .core {
	background: var(--be-h3-ring-hover-bg, #D7A15C);
	color: var(--be-h3-ring-hover, #090807);
}

/* ------------------------------------------------------------- wide screens (v19–v21) */
@media (min-width: 901px) {
	.elementor-widget-be-hero-stage .hero3 .h3-left { position: static; }

	.elementor-widget-be-hero-stage .hero3 .h3-split span {
		position: absolute;
		z-index: 6;
		top: 46%;
		margin-top: -.5em;
		white-space: nowrap;
		font-size: clamp(30px, 3.35vw, 62px);
		line-height: 1;
		letter-spacing: .02em;
		-webkit-text-stroke: .5px var(--be-h3-stroke, rgba(255, 240, 228, .9));
		text-shadow:
			0 0 14px var(--be-h3-tglow-1, rgba(255, 190, 140, .75)),
			0 0 34px var(--be-h3-tglow-2, rgba(255, 140, 80, .5)),
			0 0 70px var(--be-h3-tglow-3, rgba(255, 110, 60, .3));
	}

	.elementor-widget-be-hero-stage .hero3 .h3-split .l {
		right: calc(50% + var(--be-h3-title-gap, min(12.4vw, 178px)));
		text-align: right;
	}

	.elementor-widget-be-hero-stage .hero3 .h3-split .r { left: calc(50% + var(--be-h3-title-gap, min(12.4vw, 178px))); }

	/* Hairlines from the screen edge to each word. */
	.elementor-widget-be-hero-stage .hero3 .h3-split span::before {
		content: "";
		position: absolute;
		top: 50%;
		width: 60vw;
		height: 1px;
		background: var(--be-h3-line, rgba(255, 236, 222, .75));
		box-shadow: 0 0 8px var(--be-h3-line-glow, rgba(255, 170, 120, .6));
	}

	.elementor-widget-be-hero-stage .hero3 .h3-split .l::before { right: calc(100% + 26px); }
	.elementor-widget-be-hero-stage .hero3 .h3-split .r::before { left: calc(100% + 26px); }
	.elementor-widget-be-hero-stage .hero3.no-lines .h3-split span::before { content: none; }
}

/* Reference header height is 120 px at 1260 px and below (site.css, last --hdr override). */
@media (max-width: 1260px) {
	.elementor-widget-be-hero-stage .hero3 { --h3-hdr: var(--be-h3-hdr, calc(120px + var(--be-bar-h, 0px))); }
}

/* The card needs room: hidden below 1100 px (v24) unless "show it under the stage" is chosen. */
@media (max-width: 1100px) {
	.elementor-widget-be-hero-stage .hero3:not(.spot-below) .h3-spot { display: none; }
}

/* ------------------------------------------------------------- 900 px and below (v11–v19) */
@media (max-width: 900px) {
	.elementor-widget-be-hero-stage .hero3 {
		--h3-minh: var(--be-h3-minh, auto);
		--h3-stage-w: var(--be-h3-stage-w, min(70vw, 330px));
		--h3-stage-h: var(--be-h3-stage-h, 430px);
		--h3-tile: var(--be-h3-tile, 1200px);
		--h3-ring: var(--be-h3-ring, 84px);
	}

	.elementor-widget-be-hero-stage .h3-in {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		padding-top: calc(var(--h3-hdr) + 28px);
		padding-bottom: 0;
		gap: 10px;
	}

	.elementor-widget-be-hero-stage .h3-left {
		align-items: center;
		gap: 22px;
	}

	.elementor-widget-be-hero-stage .hero3 .h3-split {
		font-size: clamp(22px, 7vw, 40px);
		letter-spacing: .05em;
	}

	.elementor-widget-be-hero-stage .hero3 .h3-split span {
		display: block;
		white-space: nowrap;
	}

	.elementor-widget-be-hero-stage .h3-right { display: none; }

	.elementor-widget-be-hero-stage .h3-stage {
		margin-top: 6px;
		margin-bottom: 58px;
	}

	.elementor-widget-be-hero-stage .hero3 img.h3-bottle {
		margin-bottom: calc(var(--h3-stage-h) * .08 + var(--h3-stage-w) * .30);
	}

	.elementor-widget-be-hero-stage .hero3 img.h3-wood {
		width: 150%;
		bottom: 8%;
	}

	.elementor-widget-be-hero-stage .h3-cloud.back { height: 130px; bottom: 40px; }
	.elementor-widget-be-hero-stage .h3-cloud.front { height: 110px; bottom: 6px; }
	.elementor-widget-be-hero-stage .h3-cloud.mist { height: 70px; bottom: -14px; }

	.elementor-widget-be-hero-stage .hero3 a.ring {
		left: auto;
		right: var(--gr, 18px);
		bottom: 300px;
	}

	/* Optional: the card under the stage. hero-stage.js sets --h3-below (card + gaps) so the
	   clouds and the ring stay where they are in the design, with the card under the clouds. */
	.elementor-widget-be-hero-stage .hero3.spot-below .h3-right {
		display: flex;
		align-items: center;
		margin: 0 0 32px;
	}

	.elementor-widget-be-hero-stage .hero3.spot-below .h3-spot { margin-top: 0; }
	.elementor-widget-be-hero-stage .hero3.spot-below .h3-cloud.back { bottom: calc(40px + var(--h3-below, 0px)); }
	.elementor-widget-be-hero-stage .hero3.spot-below .h3-cloud.front { bottom: calc(6px + var(--h3-below, 0px)); }
	.elementor-widget-be-hero-stage .hero3.spot-below .h3-cloud.mist { bottom: calc(-14px + var(--h3-below, 0px)); }
	.elementor-widget-be-hero-stage .hero3.spot-below a.ring { bottom: calc(300px + var(--h3-below, 0px)); }
}

/* ------------------------------------------------------------------------- keyframes */
@keyframes be-h3glow { 50% { opacity: .6; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes be-h3up { to { opacity: 1; transform: none; } }
@keyframes be-h3bottle { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes be-h3float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes be-h3left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes be-h3wood {
	from { opacity: 0; transform: translateX(-50%) translateY(24px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes be-h3drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--h3-tile)), 0, 0); }
}
@keyframes be-h3spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- motion switches */

/* Off-screen or hidden tab: loops pause (hero-stage.js). */
.elementor-widget-be-hero-stage .hero3.is-paused .h3-glow,
.elementor-widget-be-hero-stage .hero3.is-paused img.h3-bottle,
.elementor-widget-be-hero-stage .hero3.is-paused .h3-cloud::before,
.elementor-widget-be-hero-stage .hero3.is-paused .ring svg.t { animation-play-state: paused; }

.elementor-widget-be-hero-stage .hero3.no-rise .h3-split span {
	opacity: 1;
	transform: none;
	animation: none;
}

.elementor-widget-be-hero-stage .hero3.no-intro img.h3-bottle {
	opacity: 1;
	transform: none;
	animation: be-h3float var(--be-h3-float-speed, 7s) ease-in-out infinite;
}

.elementor-widget-be-hero-stage .hero3.no-intro img.h3-wood,
.elementor-widget-be-hero-stage .hero3.no-intro .h3-right {
	opacity: 1;
	animation: none;
}

/* Animation off = the reduced-motion state: everything in place, nothing loops. */
.elementor-widget-be-hero-stage .hero3.is-still .h3-split span,
.elementor-widget-be-hero-stage .hero3.is-still .h3-right,
.elementor-widget-be-hero-stage .hero3.is-still img.h3-bottle {
	opacity: 1;
	transform: none;
	animation: none;
}

.elementor-widget-be-hero-stage .hero3.is-still img.h3-wood {
	opacity: 1;
	animation: none;
}

.elementor-widget-be-hero-stage .hero3.is-still .h3-glow,
.elementor-widget-be-hero-stage .hero3.is-still .h3-cloud::before,
.elementor-widget-be-hero-stage .hero3.is-still .ring svg.t { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-be-hero-stage .hero3 .h3-split span,
	.elementor-widget-be-hero-stage .hero3 .h3-right,
	.elementor-widget-be-hero-stage .hero3 img.h3-bottle {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.elementor-widget-be-hero-stage .hero3 img.h3-wood {
		opacity: 1;
		animation: none;
	}

	.elementor-widget-be-hero-stage .hero3 .h3-glow,
	.elementor-widget-be-hero-stage .hero3 .h3-cloud::before,
	.elementor-widget-be-hero-stage .hero3 .ring svg.t { animation: none; }

	.elementor-widget-be-hero-stage .ring .core { transition: none; }
}