/**
 * Treethemes Scroll Cube Gallery — Codrops / Webflow GSAP cubic gallery.
 */

.elementor-widget-treethemes-scroll-cube-gallery,
.elementor-widget-treethemes-scroll-cube-gallery > .elementor-widget-container,
.elementor-element:has(.tt-scroll-cube-gallery) {
	overflow: visible !important;
}

.tt-scroll-cube-gallery {
	--tt-scg-section-height: 750vh;
	--tt-scg-cube-size: min(30vw, 30vh);
	--tt-scg-text-size: clamp(2.5rem, 12vw, 9rem);
	--tt-scg-overlay: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0) 50%,
		rgba(0, 0, 0, 0.6) 100%
	);
	position: relative;
	width: 100%;
}

/* Tall track for native scroll (no ScrollSmoother wrapper on page). */
.tt-scroll-cube-gallery__pin {
	position: relative;
	height: var(--tt-scg-section-height);
}

.tt-scroll-cube-gallery__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	max-width: none;
	width: 100%;
	overflow: hidden;
}

/*
 * ScrollSmoother: GSAP pin + pinReparent (fixed). Scroll track stays on __pin (no pin-spacer).
 */
.tt-scroll-cube-gallery--gsap-pin .tt-scroll-cube-gallery__pin {
	height: var(--tt-scg-section-height);
}

.tt-scroll-cube-gallery--gsap-pin .tt-scroll-cube-gallery__sticky {
	position: relative;
	top: auto;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.tt-scroll-cube-gallery--gsap-pin.is-scg-pinned .tt-scroll-cube-gallery__sticky {
	will-change: auto;
}

/* Pinned / reparented stage — keep demo title size. */
.tt-scroll-cube-gallery--gsap-pin .tt-scroll-cube-gallery__inner,
.tt-scroll-cube-gallery--gsap-pin .tt-scroll-cube-gallery__title,
.tt-scroll-cube-gallery--gsap-pin .tt-scg-word,
.tt-scroll-cube-gallery.is-scg-complete .tt-scroll-cube-gallery__title,
.tt-scroll-cube-gallery.is-scg-complete .tt-scg-word {
	font-size: var(--tt-scg-text-size, clamp(2.5rem, 12vw, 9rem));
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}

.tt-scroll-cube-gallery--gsap-pin .tt-scroll-cube-gallery__cube-scene {
	width: var(--tt-scg-cube-size, min(30vw, 30vh));
	height: var(--tt-scg-cube-size, min(30vw, 30vh));
}

.tt-scroll-cube-gallery__inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.tt-scroll-cube-gallery__bg-list {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-scroll-cube-gallery__bg-item {
	position: absolute;
	inset: 0;
	opacity: 1;
	pointer-events: none;
}

/* Order 1 on top (matches Webflow: CMS sorted largest → smallest in DOM). */
.tt-scroll-cube-gallery__bg-item[data-scg-bg='1'] {
	z-index: 6;
}
.tt-scroll-cube-gallery__bg-item[data-scg-bg='2'] {
	z-index: 5;
}
.tt-scroll-cube-gallery__bg-item[data-scg-bg='3'] {
	z-index: 4;
}
.tt-scroll-cube-gallery__bg-item[data-scg-bg='4'] {
	z-index: 3;
}
.tt-scroll-cube-gallery__bg-item[data-scg-bg='5'] {
	z-index: 2;
}
.tt-scroll-cube-gallery__bg-item[data-scg-bg='6'] {
	z-index: 1;
}

.tt-scroll-cube-gallery__bg-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tt-scroll-cube-gallery__bg-overlay {
	position: absolute;
	inset: 0;
	background: var(--tt-scg-overlay);
	pointer-events: none;
	z-index: 1;
}

.tt-scroll-cube-gallery__text-layer {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.tt-scroll-cube-gallery__text-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Only the active slide title stacks on top (slide 1 was always z-index 6 before). */
.tt-scroll-cube-gallery__text-item {
	z-index: 1;
}

.tt-scroll-cube-gallery__text-item.is-active {
	z-index: 10;
}

.elementor-widget-treethemes-scroll-cube-gallery .tt-scroll-cube-gallery .tt-scroll-cube-gallery__title,
.tt-scroll-cube-gallery .tt-scroll-cube-gallery__title {
	margin: 0;
	padding: 0;
	font-size: var(--tt-scg-text-size, clamp(2.5rem, 12vw, 9rem));
	line-height: 1;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: #fff;
	text-align: center;
	max-width: 90vw;
}

/* Split Text–style masked words (Codrops / Webflow). */
.tt-scg-word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: 1;
}

.tt-scg-word-mask + .tt-scg-word-mask {
	margin-left: 0.12em;
}

.tt-scg-word {
	display: inline-block;
	color: #fff;
	will-change: transform;
}

/* Full-viewport mover (demo: pictures_cube-list-wrapper). */
.tt-scroll-cube-gallery__cube-wrap {
	position: absolute;
	inset: 0;
	z-index: 7;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	pointer-events: none;
	overflow: visible;
}

.tt-scroll-cube-gallery__cube-mover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transform-style: preserve-3d;
	will-change: transform;
}

.tt-scroll-cube-gallery__cube-scene {
	--tt-scg-half: 80px;
	position: relative;
	width: var(--tt-scg-cube-size);
	height: var(--tt-scg-cube-size);
	min-width: 120px;
	min-height: 120px;
	transform-style: preserve-3d;
	flex-shrink: 0;
}

/* Separate X/Y rotators — avoids Euler mid-path jumps on reverse scrub. */
.tt-scroll-cube-gallery__cube-rot-y,
.tt-scroll-cube-gallery__cube-rot-x {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
}

.tt-scroll-cube-gallery__cube {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
}

.tt-scroll-cube-gallery__cube-face {
	position: absolute;
	inset: 0;
	pointer-events: auto;
	overflow: hidden;
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

.tt-scroll-cube-gallery__cube-face a {
	display: block;
	width: 100%;
	height: 100%;
}

.tt-scroll-cube-gallery__cube-image-wrap {
	width: 100%;
	height: 100%;
}

.tt-scroll-cube-gallery__cube-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	padding: 3%;
	box-sizing: border-box;
}

/* Webflow CMS cube faces: % in-plane, --tt-scg-half for Z (replaces 0.5 * 100cqw). */
.tt-scroll-cube-gallery__cube-face:nth-child(1) {
	transform-origin: 0% 0%;
	transform: translateX(0) translateY(0) translateZ(var(--tt-scg-half)) rotateX(0deg) rotateY(0deg)
		rotateZ(0deg);
}

.tt-scroll-cube-gallery__cube-face:nth-child(2) {
	transform-origin: 100% 0%;
	transform: translateX(-100%) translateY(0) translateZ(var(--tt-scg-half)) rotateX(0deg) rotateY(-90deg)
		rotateZ(0deg);
}

.tt-scroll-cube-gallery__cube-face:nth-child(3) {
	transform-origin: 50% 50%;
	transform: translateX(0) translateY(0) translateZ(calc(var(--tt-scg-half) * -1)) rotateX(0deg)
		rotateY(180deg) rotateZ(0deg);
}

.tt-scroll-cube-gallery__cube-face:nth-child(4) {
	transform-origin: 50% 50%;
	transform: translateX(0) translateY(50%) translateZ(0) rotateX(-90deg) rotateY(0deg) rotateZ(180deg);
}

.tt-scroll-cube-gallery__cube-face:nth-child(5) {
	transform-origin: 50% 50%;
	transform: translateX(50%) translateY(0) translateZ(0) rotateX(0deg) rotateY(90deg) rotateZ(90deg);
}

.tt-scroll-cube-gallery__cube-face:nth-child(6) {
	transform-origin: 0% 100%;
	transform: translateX(0) translateY(-100%) translateZ(var(--tt-scg-half)) rotateX(90deg) rotateY(0deg)
		rotateZ(0deg);
}

.elementor-widget-treethemes-scroll-cube-gallery .tt-scroll-cube-gallery__cube-wrap,
.elementor-widget-treethemes-scroll-cube-gallery .tt-scroll-cube-gallery__cube-mover,
.elementor-widget-treethemes-scroll-cube-gallery .tt-scroll-cube-gallery__cube-scene,
.elementor-widget-treethemes-scroll-cube-gallery .tt-scroll-cube-gallery__cube {
	transform-style: preserve-3d;
}

.tt-scroll-cube-gallery--no-cube .tt-scroll-cube-gallery__cube-wrap {
	display: none;
}

.tt-scroll-cube-gallery__notice {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	padding: 0.5rem 1rem;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
	pointer-events: none;
}

@media (max-width: 991px) {
	.tt-scroll-cube-gallery {
		--tt-scg-cube-size: min(25vw, 25vh);
		--tt-scg-text-size: clamp(2.25rem, 11vw, 8rem);
	}
}