/* =========================================
   JB Image Scroll for Elementor
   ========================================= */

.jbis-wrapper {
	position: relative;
	width: 100%;
}

/* ---------- Bar pelayar (browser frame) ---------- */
.jbis-browser-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	background-color: #23272e;
	border-radius: 10px 10px 0 0;
}

.jbis-browser-bar + .jbis-frame {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.jbis-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: inline-block;
}

.jbis-dot--red    { background: #ff5f57; }
.jbis-dot--yellow { background: #febc2e; }
.jbis-dot--green  { background: #28c840; }

/* ---------- Bekas imej ---------- */
.jbis-frame {
	position: relative;
	overflow: hidden;
	height: 400px; /* nilai lalai; Elementor akan override */
	background: #f1f3f5;
}

.jbis-frame .jbis-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Imej yang scroll ---------- */
.jbis-image {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(0);
	transition-property: transform;
	transition-timing-function: ease-in-out;
	will-change: transform;
}

/* Hover: imej bergerak ke bawah sehingga hujung
   --jbis-shift & --jbis-duration dikira oleh JS */
.jbis-trigger-hover:hover .jbis-image,
.jbis-trigger-hover:focus-within .jbis-image {
	transform: translateY(var(--jbis-shift, 0px));
	transition-duration: var(--jbis-duration, 4s);
}

/* Bila tetikus keluar — naik semula sedikit lebih pantas */
.jbis-trigger-hover .jbis-image {
	transition-duration: calc(var(--jbis-duration, 4s) * 0.6);
}

/* ---------- Mod auto (keyframes diset oleh JS) ---------- */
.jbis-trigger-auto .jbis-image.jbis-auto-running {
	animation-name: jbis-auto-scroll;
	animation-duration: var(--jbis-duration, 8s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 1s;
}

@keyframes jbis-auto-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(var(--jbis-shift, 0px)); }
}

/* ---------- Overlay ---------- */
.jbis-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.jbis-overlay span {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 10px 22px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	transform: translateY(6px);
	transition: transform 0.35s ease;
}

.jbis-frame:hover .jbis-overlay,
.jbis-frame:focus-within .jbis-overlay {
	opacity: 1;
}

.jbis-frame:hover .jbis-overlay span {
	transform: translateY(0);
}

/* ---------- Aksesibiliti: kurangkan gerakan ---------- */
@media (prefers-reduced-motion: reduce) {
	.jbis-image {
		transition: none !important;
		animation: none !important;
	}
}