/* ==========================================================================
   THB GSAP Effects — widget styles
   ========================================================================== */

/* Parallax */
.thb-parallax { overflow: hidden; position: relative; }
.thb-parallax-inner { will-change: transform; }

/* Pinned */
.thb-pinned { position: relative; min-height: 100vh; overflow: hidden; }
.thb-pinned-inner { position: relative; width: 100%; min-height: 100vh; }
.thb-pinned-progress {
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 4px;
	background-color: currentColor;
	transform: scaleX(0); transform-origin: 0 50%;
	z-index: 3;
}

/* Horizontal */
.thb-horizontal {
	--thb-h-height: 100vh;
	--thb-h-panel-width: 100vw;
	--thb-h-gap: 0px;
	--thb-h-padding: 0px;
	--thb-h-fit: cover;
	position: relative;
	overflow: hidden;
	height: var(--thb-h-height);
	box-sizing: border-box;
	/* Break out of any narrow parent (container, row, main) to span the full viewport.
	   Design Options margin values (which emit !important) will override this if set. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.thb-horizontal-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	height: 100%;
	gap: var(--thb-h-gap);
	padding: 0 var(--thb-h-padding);
	box-sizing: border-box;
	will-change: transform;
}
.thb-horizontal-track > * {
	flex: 0 0 auto;
	width: var(--thb-h-panel-width);
	height: 100%;
	box-sizing: border-box;
}
.thb-horizontal-track > .wpb_column > .vc_column-inner {
	padding: 0 !important;
	height: 100%;
}
.thb-horizontal-track > .wpb_column,
.thb-horizontal-track > .vc_column_container {
	margin: 0 !important;
}
.thb-horizontal-track > .wpb_column > .vc_column-inner > .wpb_wrapper {
	height: 100%;
}
/* Make images and common media wrappers fill the panel */
.thb-horizontal-track .wpb_single_image,
.thb-horizontal-track .wpb_single_image .vc_single_image-wrapper,
.thb-horizontal-track .wpb_single_image figure,
.thb-horizontal-track figure {
	width: 100%;
	height: 100%;
	margin: 0;
}
.thb-horizontal-track img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--thb-h-fit);
}
.thb-horizontal-track > img {
	flex: 0 0 auto;
	width: var(--thb-h-panel-width);
	height: 100%;
	object-fit: var(--thb-h-fit);
}
@media (max-width: 768px) {
	.thb-horizontal {
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.thb-horizontal-track > * { width: 85vw; height: auto; }
}

/* Floater — free-position overlay (pin or move with row)
   Structure: .thb-floater-slot (absolute stage, anchors via flex) > .thb-floater > .thb-floater-inner */
.thb-floater-slot.pos-absolute {
	position: absolute;
	inset: 0;
}
.thb-floater-slot.pos-relative {
	position: relative;
	width: 100%;
}
.thb-floater-slot {
	display: flex;
	pointer-events: none;
	z-index: var(--thb-f-z, 10);
}
/* Horizontal anchor → flex main-axis alignment + side margin = offset */
.thb-floater-slot.h-left   { justify-content: flex-start; --thb-f-mar-left:  var(--thb-f-h-offset); }
.thb-floater-slot.h-right  { justify-content: flex-end;   --thb-f-mar-right: var(--thb-f-h-offset); }
.thb-floater-slot.h-center { justify-content: center; }
/* Vertical anchor → flex cross-axis alignment + top/bottom margin = offset */
.thb-floater-slot.v-top    { align-items: flex-start; --thb-f-mar-top:    var(--thb-f-v-offset); }
.thb-floater-slot.v-bottom { align-items: flex-end;   --thb-f-mar-bottom: var(--thb-f-v-offset); }
.thb-floater-slot.v-center { align-items: center; }

.thb-floater {
	pointer-events: auto;
	width: var(--thb-f-width, auto);
	max-width: var(--thb-f-max-width, none);
	opacity: var(--thb-f-opacity, 1);
	mix-blend-mode: var(--thb-f-blend, normal);
	margin:
		var(--thb-f-mar-top, 0)
		var(--thb-f-mar-right, 0)
		var(--thb-f-mar-bottom, 0)
		var(--thb-f-mar-left, 0);
}
/* Ensure the parent row is the positioning context.
   .vc_row already has position: relative by default, but be explicit for edge cases. */
.vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .thb-floater-slot),
.vc_row:has(.thb-floater-slot),
.row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .thb-floater-slot),
.row:has(.thb-floater-slot) {
	position: relative;
}
/* Neutralize WPBakery column padding around the slot so offsets measure from the row edge */
.wpb_column > .vc_column-inner > .wpb_wrapper > .thb-floater-slot {
	/* slot is absolute; ignored by flow — no extra fix needed */
}
@media (max-width: 768px) {
	.thb-floater.hide-mobile,
	.thb-floater-slot:has(.thb-floater.hide-mobile) { display: none !important; }
}
/* Anti-FOUC: hide before GSAP sets the initial animation state */
.thb-floater.has-anim { visibility: hidden; }
.thb-floater.has-anim._thb-ready { visibility: visible; }

/* Marquee */
.thb-marquee {
	position: relative; overflow: hidden; width: 100%;
	padding: 0.2em 0; line-height: 1.1;
}
.thb-marquee-track {
	display: inline-flex; white-space: nowrap;
	font-weight: 800; letter-spacing: -0.02em;
	will-change: transform;
}
.thb-marquee-item { padding-right: 0.4em; display: inline-block; }
.thb-marquee.has-gradient .thb-marquee-track {
	background-clip: text; -webkit-background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* Mask Reveal */
.thb-mask-reveal {
	overflow: hidden;
	clip-path: inset(100% 0 0 0);
	-webkit-clip-path: inset(100% 0 0 0);
}
.thb-mask-reveal-inner { will-change: transform; }

/* Split Reveal */
.thb-split-reveal { overflow: hidden; }
.thb-split-reveal .char,
.thb-split-reveal .word,
.thb-split-reveal .line { display: inline-block; will-change: transform, opacity; }

/* 3D Tilt */
.thb-tilt {
	position: relative; display: block;
	transform-style: preserve-3d;
}
.thb-tilt-inner {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}
.thb-tilt-glare {
	position: absolute; inset: 0;
	background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%);
	background-size: 200% 200%;
	opacity: 0; pointer-events: none;
	mix-blend-mode: overlay;
}

/* Scrub */
.thb-scrub { position: relative; }
.thb-scrub-inner { will-change: transform, opacity; transform-origin: center; }

/* Counter Plus */
.thb-counter-plus { position: relative; text-align: center; }
.thb-counter-plus-number {
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
}
.thb-counter-plus.has-gradient .thb-counter-plus-number {
	background-clip: text; -webkit-background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.thb-counter-plus-prefix,
.thb-counter-plus-suffix {
	font-size: 0.6em;
	opacity: 0.9;
}
.thb-counter-plus-label {
	margin-top: 0.5em;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	opacity: 0.7;
}

/* ==========================================================================
   Reading progress bar
   ========================================================================== */
#thb-reading-progress {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 3px;
	transform: scaleX(0); transform-origin: 0 50%;
	background-color: var(--thb-progress-color, #000);
	z-index: 9999;
	pointer-events: none;
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */
#thb-custom-cursor {
	position: fixed; top: 0; left: 0;
	width: 0; height: 0;
	pointer-events: none;
	z-index: 99999;
}
#thb-custom-cursor .thb-cursor-dot,
#thb-custom-cursor .thb-cursor-ring {
	position: fixed; top: 0; left: 0;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	will-change: transform;
}
#thb-custom-cursor .thb-cursor-dot {
	width: 8px; height: 8px;
	background-color: var(--thb-cursor-color, #000);
	transition: transform 0.2s, opacity 0.2s;
}
#thb-custom-cursor .thb-cursor-ring {
	width: 40px; height: 40px;
	border: 1.5px solid var(--thb-cursor-color, #000);
	transition: width 0.2s, height 0.2s, opacity 0.2s, background-color 0.2s;
}
#thb-custom-cursor.is-hover .thb-cursor-dot { transform: translate(-50%, -50%) scale(0); }
#thb-custom-cursor.is-hover .thb-cursor-ring {
	width: 64px; height: 64px;
	background-color: var(--thb-cursor-color, #000);
	opacity: 0.15;
}
.thb-cursor-active,
.thb-cursor-active * { cursor: none !important; }
@media (max-width: 1024px) { #thb-custom-cursor { display: none; } }