/**
 * TTST Motion FX - Frontend
 * Version 1.4.1
 */

.ttst-motion-fx {
	--ttst-fx-z: 9;
	--ttst-fx-pointer-events: none;
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: var(--ttst-fx-pointer-events);
	z-index: var(--ttst-fx-z);
}

.ttst-motion-fx.is-global,
.ttst-motion-fx.area-viewport {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
}

.ttst-motion-fx.area-container {
	position: absolute;
	inset: 0;
	min-height: 240px;
}

.ttst-motion-fx.area-container + *,
.ttst-motion-fx.area-container ~ * {
	position: relative;
	z-index: 2;
}

/* Falling particles */
.ttst-fx-item {
	position: absolute;
	top: -12vh;
	left: 0;
	display: block;
	width: var(--ttst-fx-size, 24px);
	height: var(--ttst-fx-size, 24px);
	opacity: var(--ttst-fx-opacity, 0.24);
	transform: translate3d(0, -12vh, 0);
	animation-name: ttst-fx-fall;
	animation-duration: var(--ttst-fx-duration, 16s);
	animation-delay: var(--ttst-fx-delay, 0s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
	filter: blur(var(--ttst-fx-blur, 0px)) drop-shadow(0 0 10px rgba(153, 255, 0, 0.18));
	mix-blend-mode: var(--ttst-fx-blend, screen);
}

.ttst-fx-item.is-symbol {
	width: auto;
	height: auto;
	color: var(--ttst-fx-color, #99ff00);
	font-family: Orbitron, Rajdhani, Arial, sans-serif;
	font-weight: 700;
	font-size: var(--ttst-fx-size, 24px);
	line-height: 1;
	text-shadow:
		0 0 10px rgba(153, 255, 0, 0.30),
		0 0 18px rgba(212, 175, 55, 0.14);
}

.ttst-fx-item.is-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Motion light beams */










.ttst-fx-stage-beam {
	position: absolute;
	top: -8vh;
	left: var(--ttst-fx-beam-left, 50%);
	width: var(--ttst-fx-beam-width, 22vw);
	height: 136vh;
	transform-origin: 50% 0%;
	transform:
		translateX(-50%)
		rotate(var(--ttst-fx-beam-rotate-start, -18deg));
	opacity: 0;
	clip-path: polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%);
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(var(--ttst-fx-beam-rgb, 212,175,55), 0.00) 15%,
			rgba(var(--ttst-fx-beam-rgb, 212,175,55), calc(var(--ttst-fx-beam-opacity, .24) * .30)) 33%,
			rgba(255,255,255, calc(var(--ttst-fx-beam-opacity, .24) * .62)) 50%,
			rgba(var(--ttst-fx-beam-rgb, 212,175,55), calc(var(--ttst-fx-beam-opacity, .24) * .30)) 67%,
			rgba(var(--ttst-fx-beam-rgb, 212,175,55), 0.00) 85%,
			transparent 100%
		);
	filter:
		blur(var(--ttst-fx-beam-blur, 20px))
		drop-shadow(0 0 34px rgba(var(--ttst-fx-beam-rgb, 212,175,55), .32));
	mix-blend-mode: screen;
	animation-name: ttst-fx-stage-beam-sweep;
	animation-duration: var(--ttst-fx-beam-speed, 16s);
	animation-delay: var(--ttst-fx-beam-delay, 0s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
	z-index: 3;
}

.ttst-fx-stage-beam:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 17%;
	height: 100%;
	transform: translateX(-50%);
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.20),
			rgba(255,255,255,.04) 45%,
			transparent 100%
		);
	filter: blur(8px);
	opacity: .55;
}

.ttst-fx-haze {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(212,175,55,.14), transparent 42%),
		radial-gradient(circle at 18% 35%, rgba(153,255,0,.055), transparent 35%),
		radial-gradient(circle at 82% 35%, rgba(212,175,55,.08), transparent 35%);
	opacity: .82;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}

/* Legacy beam fallback class kept for compatibility */
.ttst-fx-beam {
	position: absolute;
	top: -25%;
	left: var(--ttst-fx-beam-left, 50%);
	width: var(--ttst-fx-beam-width, 18vw);
	height: 150%;
	transform-origin: top center;
	transform:
		translateX(-50%)
		rotate(var(--ttst-fx-beam-rotate-start, -22deg))
		skewX(-10deg);
	opacity: 0;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(var(--ttst-fx-beam-rgb, 212, 175, 55), 0.00) 18%,
			rgba(var(--ttst-fx-beam-rgb, 212, 175, 55), var(--ttst-fx-beam-opacity, .22)) 50%,
			rgba(var(--ttst-fx-beam-rgb, 212, 175, 55), 0.00) 82%,
			transparent 100%
		);
	filter:
		blur(var(--ttst-fx-beam-blur, 18px))
		drop-shadow(0 0 30px rgba(var(--ttst-fx-beam-rgb, 212, 175, 55), .26));
	mix-blend-mode: screen;
	animation-name: ttst-fx-beam-sweep;
	animation-duration: var(--ttst-fx-beam-speed, 18s);
	animation-delay: var(--ttst-fx-beam-delay, 0s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}

@keyframes ttst-fx-fall {
	0% {
		transform:
			translate3d(var(--ttst-fx-x, 0vw), -14vh, 0)
			translateX(0)
			rotate(var(--ttst-fx-rotate-start, 0deg));
		opacity: 0;
	}
	8% {
		opacity: var(--ttst-fx-opacity, 0.24);
	}
	55% {
		transform:
			translate3d(var(--ttst-fx-x, 0vw), 54vh, 0)
			translateX(calc(var(--ttst-fx-drift, 30px) * .55))
			rotate(var(--ttst-fx-rotate-mid, 90deg));
	}
	92% {
		opacity: var(--ttst-fx-opacity, 0.24);
	}
	100% {
		transform:
			translate3d(var(--ttst-fx-x, 0vw), 112vh, 0)
			translateX(var(--ttst-fx-drift, 30px))
			rotate(var(--ttst-fx-rotate-end, 180deg));
		opacity: 0;
	}
}

@keyframes ttst-fx-stage-beam-sweep {
	0% {
		opacity: 0;
		transform:
			translateX(-50%)
			rotate(var(--ttst-fx-beam-rotate-start, -22deg));
	}
	12% {
		opacity: calc(var(--ttst-fx-beam-opacity, .24) * .72);
	}
	36% {
		opacity: var(--ttst-fx-beam-opacity, .24);
		transform:
			translateX(-50%)
			rotate(var(--ttst-fx-beam-rotate-mid, 0deg));
	}
	64% {
		opacity: calc(var(--ttst-fx-beam-opacity, .24) * 1.15);
		transform:
			translateX(-50%)
			rotate(var(--ttst-fx-beam-rotate-end, 22deg));
	}
	88% {
		opacity: var(--ttst-fx-beam-opacity, .24);
	}
	100% {
		opacity: 0;
		transform:
			translateX(-50%)
			rotate(var(--ttst-fx-beam-rotate-start, -22deg));
	}
}


@keyframes ttst-fx-beam-sweep {
	0% {
		opacity: 0;
		transform:
			translateX(-50%)
			translateX(calc(var(--ttst-fx-beam-travel, 28vw) * -1))
			rotate(var(--ttst-fx-beam-rotate-start, -24deg))
			skewX(-10deg);
	}
	14% {
		opacity: var(--ttst-fx-beam-opacity, .22);
	}
	50% {
		opacity: calc(var(--ttst-fx-beam-opacity, .22) * 1.18);
		transform:
			translateX(-50%)
			translateX(0)
			rotate(var(--ttst-fx-beam-rotate-mid, 8deg))
			skewX(-8deg);
	}
	86% {
		opacity: var(--ttst-fx-beam-opacity, .22);
	}
	100% {
		opacity: 0;
		transform:
			translateX(-50%)
			translateX(var(--ttst-fx-beam-travel, 28vw))
			rotate(var(--ttst-fx-beam-rotate-end, 28deg))
			skewX(-10deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ttst-motion-fx {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.ttst-motion-fx {
		opacity: .78;
	}


	.ttst-fx-stage-beam {
		top: -6vh;
		width: calc(var(--ttst-fx-beam-width, 22vw) * .82);
	}
}