/* ==========================================================================
   VOOOMIE PRO Slider — Frontend Styles
   Base hero engine + 6 visual style variants + Card Carousel mode
   ========================================================================== */

.vps-slider {
	--vps-gold: #cda45e;
	--vps-gold-deep: #b3894a;
	--vps-ink: #0a0d14;
	--vps-off-white: #f3f2ee;
	--vps-heading: var(--vps-off-white);
	--vps-body: #c7cad2;
	--vps-accent2: var(--vps-gold);
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: var(--vps-min-height, 560px);
	overflow: hidden;
	background: var(--vps-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	isolation: isolate;
}

.vps-track { position: relative; width: 100%; height: 100%; }

.vps-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), transform 1.1s cubic-bezier(.4, 0, .2, 1);
	z-index: 1;
}
.vps-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.vps-bg, .vps-bg-video, .vps-bg-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	border: 0;
	transform: scale(1.08);
	transition: transform 8s linear;
	will-change: transform;
}
.vps-slide.is-active .vps-bg,
.vps-slide.is-active .vps-bg-video,
.vps-slide.is-active .vps-bg-iframe {
	transform: scale(1);
	transition: transform 9s cubic-bezier(.25, .1, .25, 1);
}

.vps-overlay { position: absolute; inset: 0; }
.vps-shape-overlay { position: absolute; inset: 0; pointer-events: none; }

.vps-content { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; }

.vps-inner {
	max-width: 620px;
	padding: var(--vps-pad-top, 0px) var(--vps-pad-right, 6vw) var(--vps-pad-bottom, 0px) var(--vps-pad-left, 6vw);
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .9s ease .15s, transform .9s cubic-bezier(.2, .8, .2, 1) .15s;
}
.vps-slide.is-active .vps-inner { opacity: 1; transform: translateY(0); }

.vps-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--vps-gold);
	font-family: var(--vps-font-body, inherit);
	font-size: var(--vps-size-eyebrow, 12.5px);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 22px;
}
.vps-eyebrow-line { display: inline-block; width: 34px; height: 1px; background: var(--vps-gold); flex-shrink: 0; }

.vps-heading {
	font-family: var(--vps-font-heading, 'Playfair Display', Georgia, serif);
	font-weight: 600;
	color: var(--vps-heading);
	font-size: var(--vps-size-heading, clamp(2.1rem, 4.2vw, 3.4rem));
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
}
.vps-heading br { content: ''; }

.vps-desc { color: var(--vps-body); font-family: var(--vps-font-body, inherit); font-size: var(--vps-size-body, 16.5px); line-height: 1.65; max-width: 480px; margin: 0 0 34px; font-weight: 400; }

.vps-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

.vps-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 28px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; text-decoration: none; border-radius: 2px;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
	white-space: nowrap;
}
.vps-btn-solid { background: var(--vps-gold); color: #14110a; border: 1px solid var(--vps-gold); }
.vps-btn-solid:hover { background: var(--vps-gold-deep); border-color: var(--vps-gold-deep); color: #14110a; transform: translateY(-1px); }
.vps-btn-outline { background: transparent; color: var(--vps-off-white); border: 1px solid rgba(243, 242, 238, 0.45); }
.vps-btn-outline:hover { background: rgba(243, 242, 238, 0.08); border-color: rgba(243, 242, 238, 0.9); color: var(--vps-off-white); transform: translateY(-1px); }

/* ---------------- Footer UI: progress + arrows ---------------- */

.vps-footer-ui {
	position: absolute; left: 0; right: 0; bottom: 34px; z-index: 4;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 6vw; pointer-events: none;
}
.vps-progress { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.vps-dot {
	appearance: none; background: none; border: none; padding: 0; cursor: pointer;
	width: 34px; height: 3px; border-radius: 2px; background-color: rgba(243, 242, 238, 0.25);
	position: relative; overflow: hidden;
}
.vps-dot-fill { position: absolute; inset: 0; background: var(--vps-accent2); transform-origin: left center; transform: scaleX(0); }
.vps-dot.is-active .vps-dot-fill { transform: scaleX(1); transition: transform linear; }
.vps-counter { margin-left: 6px; color: var(--vps-body); font-size: 12.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.vps-counter-current { color: var(--vps-off-white); font-weight: 600; }

.vps-arrows { display: flex; gap: 10px; pointer-events: auto; }
.vps-arrow {
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(243, 242, 238, 0.35);
	background: rgba(255, 255, 255, 0.02); color: var(--vps-off-white);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.vps-arrow svg { width: 18px; height: 18px; }
.vps-arrow:hover { background: var(--vps-accent2); border-color: var(--vps-accent2); color: #14110a; transform: translateY(-1px); }

/* ---------------- Thumbnails ---------------- */

.vps-thumbs {
	position: absolute; left: 6vw; bottom: 100px; z-index: 4;
	display: flex; gap: 10px;
}
.vps-thumb {
	width: 62px; height: 42px; border-radius: 3px; border: 2px solid rgba(243,242,238,.25);
	background-size: cover; background-position: center; cursor: pointer; opacity: .6;
	transition: opacity .25s ease, border-color .25s ease;
}
.vps-thumb.is-active, .vps-thumb:hover { opacity: 1; border-color: var(--vps-gold); }

/* ==========================================================================
   Transition variants
   ========================================================================== */

.vps-transition-zoom .vps-slide { transform: scale(1.045); }
.vps-transition-zoom .vps-slide.is-active { transform: scale(1); }

.vps-transition-slide .vps-slide { opacity: 1; visibility: visible; transform: translateX(100%); z-index: 1; }
.vps-transition-slide .vps-slide.is-active { transform: translateX(0); z-index: 2; }
.vps-transition-slide .vps-slide.vps-exit-left { transform: translateX(-100%); z-index: 1; }
.vps-transition-slide .vps-slide.vps-exit-right { transform: translateX(100%); z-index: 1; }
.vps-transition-slide .vps-slide.vps-enter-left { transition: none !important; transform: translateX(-100%); }
.vps-transition-slide .vps-slide.vps-enter-right { transition: none !important; transform: translateX(100%); }

/* ==========================================================================
   Style: Elegant (default) — left content, directional gradient shape
   ========================================================================== */

.vps-style-elegant .vps-shape-overlay {
	background: linear-gradient(90deg, rgba(6,9,16,.55) 0%, rgba(6,9,16,.25) 45%, transparent 75%);
}

/* ==========================================================================
   Style: Cinematic — centred, staggered headline lines
   ========================================================================== */

.vps-style-cinematic .vps-content { justify-content: center; text-align: center; }
.vps-style-cinematic .vps-inner { max-width: 760px; }
.vps-style-cinematic .vps-eyebrow { justify-content: center; }
.vps-style-cinematic .vps-buttons { justify-content: center; }
.vps-style-cinematic .vps-desc { margin-left: auto; margin-right: auto; }
.vps-style-cinematic .vps-shape-overlay {
	background: linear-gradient(180deg, rgba(6,9,16,.35) 0%, rgba(6,9,16,.25) 40%, rgba(6,9,16,.6) 100%);
}
.vps-style-cinematic .vps-heading .vps-line {
	display: block;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.vps-style-cinematic .vps-slide.is-active .vps-heading .vps-line { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Style: Premium — centred, minimal, flat overlay
   ========================================================================== */

.vps-style-premium .vps-content { justify-content: center; text-align: center; }
.vps-style-premium .vps-inner { max-width: 700px; }
.vps-style-premium .vps-eyebrow { justify-content: center; }
.vps-style-premium .vps-buttons { justify-content: center; }
.vps-style-premium .vps-desc { margin-left: auto; margin-right: auto; }
.vps-style-premium .vps-shape-overlay { background: rgba(6,9,16,.15); }

/* ==========================================================================
   Style: Split Screen — half panel / half image, angled divider, alternating
   ========================================================================== */

.vps-style-split .vps-inner {
	max-width: 46%;
	width: 46%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: max(6vw, var(--vps-pad-left, 6vw));
	padding-right: 48px;
}
.vps-style-split .vps-overlay {
	clip-path: polygon(0 0, 58% 0, 46% 100%, 0 100%);
}
.vps-style-split .vps-shape-overlay {
	background: linear-gradient(90deg, rgba(6,9,16,.15) 0%, transparent 60%);
}
.vps-style-split.vps-side-right .vps-content { justify-content: flex-end; }
.vps-style-split.vps-side-right .vps-inner {
	padding-left: 48px;
	padding-right: max(6vw, var(--vps-pad-right, 6vw));
}
.vps-style-split.vps-side-right .vps-overlay {
	clip-path: polygon(42% 0, 100% 0, 100% 100%, 54% 100%);
}

@media (max-width: 900px) {
	.vps-style-split .vps-inner,
	.vps-style-split.vps-side-right .vps-inner { max-width: 100%; width: 100%; padding: 0 6vw; }
	.vps-style-split .vps-overlay,
	.vps-style-split.vps-side-right .vps-overlay { clip-path: none; }
}

/* ==========================================================================
   Style: Modern — editorial, oversized numeral, staggered lines, index rail
   ========================================================================== */

.vps-style-modern .vps-shape-overlay {
	background: linear-gradient(0deg, rgba(6,9,16,.75) 0%, rgba(6,9,16,.2) 55%, rgba(6,9,16,.35) 100%);
}
.vps-numeral {
	position: absolute;
	top: 6%;
	right: 8%;
	z-index: 2;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(6rem, 15vw, 13rem);
	line-height: 1;
	color: rgba(243, 242, 238, 0.07);
	pointer-events: none;
}
.vps-style-modern .vps-inner { padding-right: 10vw; }
.vps-style-modern .vps-heading .vps-line {
	display: block;
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.vps-style-modern .vps-slide.is-active .vps-heading .vps-line { opacity: 1; transform: translateX(0); }

.vps-index-rail {
	position: absolute;
	right: 4vw;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-end;
}
.vps-rail-item {
	background: none; border: none; cursor: pointer; text-align: right;
	display: flex; align-items: baseline; gap: 8px; opacity: .4;
	transition: opacity .3s ease;
}
.vps-rail-item.is-active, .vps-rail-item:hover { opacity: 1; }
.vps-rail-num { font-family: 'Playfair Display', serif; color: var(--vps-gold); font-size: 13px; font-weight: 600; }
.vps-rail-title { color: var(--vps-off-white); font-size: 11.5px; letter-spacing: .04em; max-width: 120px; }

@media (max-width: 900px) {
	.vps-numeral, .vps-index-rail { display: none; }
}

/* ==========================================================================
   Responsive — shared
   ========================================================================== */

@media (max-width: 782px) {
	.vps-slider { min-height: 620px; }
	.vps-inner { max-width: 100%; }
	.vps-heading { font-size: var(--vps-size-heading, clamp(1.7rem, 7vw, 2.4rem)); }
	.vps-footer-ui { bottom: 22px; flex-direction: column; align-items: flex-start; gap: 18px; }
	.vps-arrows { align-self: flex-end; }
	.vps-thumbs { display: none; }
}

/* ==========================================================================
   Card Carousel mode — entirely separate component
   ========================================================================== */

.vps-cardcarousel {
	position: relative;
	width: 100%;
	min-height: var(--vps-min-height, 700px);
	background: var(--vps-ink);
	overflow: hidden;
	font-family: 'Inter', sans-serif;
	padding: 90px 0 70px;
	box-sizing: border-box;
}
.vps-cc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vps-cc-overlay { position: absolute; inset: 0; }

.vps-cc-header {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
	padding: 0 6vw;
}
.vps-cc-header .vps-eyebrow { justify-content: center; }
.vps-cc-header .vps-desc { margin-left: auto; margin-right: auto; }

.vps-cc-track { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 0 4vw; }

.vps-cc-cards {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(240px, 1fr));
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.vps-cc-cards::-webkit-scrollbar { display: none; }

.vps-cc-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	overflow: hidden;
	scroll-snap-align: start;
	cursor: pointer;
}
.vps-cc-card-media {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transform: scale(1.02); transition: transform .6s ease;
}
.vps-cc-card:hover .vps-cc-card-media { transform: scale(1.08); }
.vps-cc-card-shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6,9,16,0) 30%, rgba(6,9,16,.92) 100%);
}
.vps-cc-card-face {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 22px; transition: opacity .35s ease;
}
.vps-cc-card:hover .vps-cc-card-face { opacity: 0; }
.vps-cc-card-eyebrow { color: var(--vps-gold); font-family: var(--vps-font-body, inherit); font-size: var(--vps-size-eyebrow, 11px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.vps-cc-card-title { font-family: var(--vps-font-heading, 'Playfair Display', serif); color: var(--vps-off-white); font-size: var(--vps-size-heading, 1.4rem); margin: 0; line-height: 1.25; }

.vps-cc-card-hover {
	position: absolute; inset: 0; z-index: 3;
	background: rgba(8, 11, 18, .93);
	display: flex; flex-direction: column; justify-content: center;
	padding: 26px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
}
.vps-cc-card:hover .vps-cc-card-hover { opacity: 1; transform: translateY(0); }
.vps-cc-card-hover .vps-cc-card-title { margin-bottom: 6px; }
.vps-cc-card-subheading { color: var(--vps-gold); font-family: var(--vps-font-body, inherit); font-size: var(--vps-size-subheading, 12.5px); font-weight: 600; margin-bottom: 10px; letter-spacing: .04em; }
.vps-cc-card-body { color: var(--vps-body); font-family: var(--vps-font-body, inherit); font-size: var(--vps-size-body, 13.5px); line-height: 1.6; margin: 0 0 18px; }
.vps-cc-cta { align-self: flex-start; padding: 11px 20px; font-size: 11px; }

.vps-cc-socials { display: flex; gap: 10px; margin-top: 16px; }
.vps-cc-social {
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid rgba(243,242,238,.3);
	display: flex; align-items: center; justify-content: center;
	color: var(--vps-off-white); transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vps-cc-social:hover { background: var(--vps-gold); border-color: var(--vps-gold); color: #14110a; }

.vps-cc-arrow {
	flex-shrink: 0;
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid rgba(243, 242, 238, 0.35);
	background: rgba(255,255,255,.02); color: var(--vps-off-white);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}
.vps-cc-arrow svg { width: 18px; height: 18px; }
.vps-cc-arrow:hover { background: var(--vps-gold); border-color: var(--vps-gold); color: #14110a; }

@media (max-width: 900px) {
	.vps-cc-cards { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; }
	.vps-cc-card-hover { padding: 20px; }
}