/**
 * Brandcer Video Hero Slider — Front-End Styles
 * Author : Zayn Soomro
 * Version: 1.0.0
 *
 * Table of contents:
 *  1. Wrapper & container
 *  2. Video element
 *  3. Slide visibility
 *  4. Gradient overlay
 *  5. Text layers — position grid
 *  6. Text elements (heading / subheading / description)
 *  7. Text animations (in & out)
 *  8. Timeline
 *  9. Placeholder
 * 10. Responsive
 */

/* ─────────────────────────────────────────────────────────────
   1. Wrapper & container
───────────────────────────────────────────────────────────── */

.bvhs-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* default height — overridden by Elementor slider control */
	height: 70vh;
	background: #000;
}

.bvhs-videos-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ─────────────────────────────────────────────────────────────
   2. Video element
───────────────────────────────────────────────────────────── */

.bvhs-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─────────────────────────────────────────────────────────────
   3. Slide visibility
───────────────────────────────────────────────────────────── */

.bvhs-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	/* Smooth cross-fade between slides */
	transition: opacity 0.7s ease-in-out;
	pointer-events: none;
}

.bvhs-slide.bvhs-slide-active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
}

.bvhs-slide.bvhs-slide-leaving {
	opacity: 0;
	z-index: 0;
}

/* ─────────────────────────────────────────────────────────────
   4. Gradient overlay
───────────────────────────────────────────────────────────── */

.bvhs-gradient-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   5. Text layers — 9-point position grid
───────────────────────────────────────────────────────────── */

.bvhs-text-layer {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	max-width: 80%;
	box-sizing: border-box;
	/* Elementor padding added via selector */
}

/* Horizontal alignment helpers */
.bvhs-pos-top-left,
.bvhs-pos-left,
.bvhs-pos-bottom-left {
	left: 0;
	align-items: flex-start;
	text-align: left;
}

.bvhs-pos-top,
.bvhs-pos-center,
.bvhs-pos-bottom {
	left: 50%;
	transform: translateX(-50%);
	align-items: center;
	text-align: center;
}

.bvhs-pos-top-right,
.bvhs-pos-right,
.bvhs-pos-bottom-right {
	right: 0;
	align-items: flex-end;
	text-align: right;
}

/* Vertical alignment helpers */
.bvhs-pos-top-left,
.bvhs-pos-top,
.bvhs-pos-top-right {
	top: 0;
}

.bvhs-pos-left,
.bvhs-pos-center,
.bvhs-pos-right {
	top: 50%;
	transform: translateY(-50%);
}

/* Fix double transform for center */
.bvhs-pos-center {
	transform: translate(-50%, -50%);
}

.bvhs-pos-bottom-left,
.bvhs-pos-bottom,
.bvhs-pos-bottom-right {
	bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
   6. Text elements
───────────────────────────────────────────────────────────── */

.bvhs-heading,
.bvhs-subheading,
.bvhs-description {
	margin: 0;
	padding: 0;
	max-width: 100%;
	/* Elementor typography group controls will inject font-size,
	   font-family, font-weight, line-height, letter-spacing,
	   color via CSS selectors. Defaults below are fallbacks. */
}

.bvhs-heading {
	font-size: clamp( 1.5rem, 4vw, 3.5rem );
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.bvhs-subheading {
	font-size: clamp( 1rem, 2.5vw, 2rem );
	font-weight: 500;
	color: #eee;
	line-height: 1.3;
}

.bvhs-description {
	font-size: clamp( 0.85rem, 1.5vw, 1.1rem );
	font-weight: 400;
	color: #ddd;
	line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   7. Text animations
   Each .bvhs-text-layer receives:
     • .bvhs-anim-in  + .bvhs-anim-{type}  when the slide enters
     • .bvhs-anim-out + .bvhs-anim-{type}  when the slide leaves
───────────────────────────────────────────────────────────── */

/* Base: invisible by default, no transform */
.bvhs-text-layer {
	opacity: 0;
}

/* ── Fade ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-fade {
	animation: bvhs-fadeIn 0.7s ease forwards;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-fade {
	animation: bvhs-fadeOut 0.5s ease forwards;
}

@keyframes bvhs-fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bvhs-fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Slide Left (enter from right) ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-left {
	animation: bvhs-slideLeftIn 0.7s ease forwards;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-slide-left {
	animation: bvhs-slideLeftOut 0.5s ease forwards;
}

@keyframes bvhs-slideLeftIn  { from { opacity: 0; transform: translateX(60px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes bvhs-slideLeftOut { from { opacity: 1; transform: translateX(0);     } to { opacity: 0; transform: translateX(-60px); } }

/* ── Slide Right (enter from left) ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-right {
	animation: bvhs-slideRightIn 0.7s ease forwards;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-slide-right {
	animation: bvhs-slideRightOut 0.5s ease forwards;
}

@keyframes bvhs-slideRightIn  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bvhs-slideRightOut { from { opacity: 1; transform: translateX(0);     } to { opacity: 0; transform: translateX(60px); } }

/* ── Slide Top (enter from below) ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-top {
	animation: bvhs-slideTopIn 0.7s ease forwards;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-slide-top {
	animation: bvhs-slideTopOut 0.5s ease forwards;
}

@keyframes bvhs-slideTopIn  { from { opacity: 0; transform: translateY(60px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes bvhs-slideTopOut { from { opacity: 1; transform: translateY(0);     } to { opacity: 0; transform: translateY(-60px); } }

/* ── Slide Bottom (enter from above) ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-bottom {
	animation: bvhs-slideBottomIn 0.7s ease forwards;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-slide-bottom {
	animation: bvhs-slideBottomOut 0.5s ease forwards;
}

@keyframes bvhs-slideBottomIn  { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bvhs-slideBottomOut { from { opacity: 1; transform: translateY(0);     } to { opacity: 0; transform: translateY(60px); } }

/* ── Zoom ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-zoom {
	animation: bvhs-zoomIn 0.7s ease forwards;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-zoom {
	animation: bvhs-zoomOut 0.5s ease forwards;
}

@keyframes bvhs-zoomIn  { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes bvhs-zoomOut { from { opacity: 1; transform: scale(1);   } to { opacity: 0; transform: scale(1.3); } }

/* ── None (immediate show) ── */
.bvhs-text-layer.bvhs-anim-in.bvhs-anim-none {
	opacity: 1;
}
.bvhs-text-layer.bvhs-anim-out.bvhs-anim-none {
	opacity: 0;
}

/* Fix transforms for positioned layers with translateX/Y transforms */

/* Center column — preserve the centering transform */
.bvhs-pos-top.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-top,
.bvhs-pos-bottom.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-top {
	animation: bvhs-slideTopIn-centered 0.7s ease forwards;
}
@keyframes bvhs-slideTopIn-centered {
	from { opacity: 0; transform: translateX(-50%) translateY(60px);  }
	to   { opacity: 1; transform: translateX(-50%) translateY(0);     }
}

.bvhs-pos-top.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-bottom,
.bvhs-pos-bottom.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-bottom {
	animation: bvhs-slideBottomIn-centered 0.7s ease forwards;
}
@keyframes bvhs-slideBottomIn-centered {
	from { opacity: 0; transform: translateX(-50%) translateY(-60px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0);     }
}

/* Middle row — preserve vertical centering transform */
.bvhs-pos-left.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-left,
.bvhs-pos-right.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-left {
	animation: bvhs-slideLeftIn-vmid 0.7s ease forwards;
}
@keyframes bvhs-slideLeftIn-vmid {
	from { opacity: 0; transform: translateY(-50%) translateX(60px);  }
	to   { opacity: 1; transform: translateY(-50%) translateX(0);     }
}

.bvhs-pos-left.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-right,
.bvhs-pos-right.bvhs-text-layer.bvhs-anim-in.bvhs-anim-slide-right {
	animation: bvhs-slideRightIn-vmid 0.7s ease forwards;
}
@keyframes bvhs-slideRightIn-vmid {
	from { opacity: 0; transform: translateY(-50%) translateX(-60px); }
	to   { opacity: 1; transform: translateY(-50%) translateX(0);     }
}

/* ─────────────────────────────────────────────────────────────
   8. Timeline
───────────────────────────────────────────────────────────── */

.bvhs-timeline {
	position: absolute;
	z-index: 20;
	display: flex;
	gap: 8px;
	align-items: center;
	pointer-events: none;
}

.bvhs-tl-bar-wrap {
	cursor: pointer;
	pointer-events: auto;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.bvhs-tl-bar-wrap:hover {
	transform: scaleY(1.4);
}

.bvhs-tl-fill {
	display: block;
}

.bvhs-tl-bar {
	/* hover colour injected via JS-generated <style> tag */
}

/* ─────────────────────────────────────────────────────────────
   9. Placeholder (no video selected)
───────────────────────────────────────────────────────────── */

.bvhs-video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1a1a1a;
	color: rgba( 255, 255, 255, 0.4 );
	font-size: 1rem;
	font-family: sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   10. Responsive
───────────────────────────────────────────────────────────── */

@media ( max-width: 1024px ) {
	.bvhs-text-layer {
		max-width: 90%;
	}
}

@media ( max-width: 768px ) {
	.bvhs-text-layer {
		max-width: 95%;
	}

	.bvhs-heading {
		font-size: clamp( 1.2rem, 5vw, 2rem );
	}

	.bvhs-subheading {
		font-size: clamp( 0.9rem, 3.5vw, 1.4rem );
	}

	.bvhs-description {
		font-size: clamp( 0.8rem, 2.5vw, 1rem );
	}
}

@media ( max-width: 480px ) {
	.bvhs-wrapper {
		/* On very small screens ensure minimum usable height */
		min-height: 250px;
	}
}