/**
 * Xtellaris Common Styles — xt-common.css
 * Base animations and utility classes.
 */

:root {
	--xt-common-fade-duration: 0.8s;
	--xt-common-fade-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Animation: Fade Up ──────────────────────────────────── */
.xt-animate-fade {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--xt-common-fade-duration) var(--xt-common-fade-easing),
		transform var(--xt-common-fade-duration) var(--xt-common-fade-easing);
	will-change: opacity, transform;
}

.xt-animate-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Delays */
.xt-delay-1 {
	transition-delay: 0.1s;
}

.xt-delay-2 {
	transition-delay: 0.2s;
}

.xt-delay-3 {
	transition-delay: 0.3s;
}

.xt-delay-4 {
	transition-delay: 0.4s;
}

/* ── Common Background Effects ───────────────────────────── */

/* Blobs / Bubbles */
.xt-bg-blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.xt-blob {
	position: absolute;
	width: 400px;
	height: 400px;
	background: rgba(30, 142, 255, 0.15);
	filter: blur(80px);
	border-radius: 50%;
	mix-blend-mode: multiply;
	animation: blob-float 18s infinite alternate;
}

.xt-blob--1 {
	top: -100px;
	left: -100px;
	animation-duration: 22s;
}

.xt-blob--2 {
	bottom: -100px;
	right: -100px;
	background: rgba(0, 253, 147, 0.12);
	animation-duration: 28s;
	animation-delay: -5s;
}

.xt-blob--3 {
	top: 40%;
	left: 30%;
	background: rgba(30, 142, 255, 0.08);
	width: 300px;
	height: 300px;
	animation-duration: 20s;
	animation-delay: -10s;
}

@keyframes blob-float {
	0% {
		transform: translate(0, 0) scale(1);
	}

	33% {
		transform: translate(40px, -60px) scale(1.1);
	}

	66% {
		transform: translate(-30px, 30px) scale(0.9);
	}

	100% {
		transform: translate(0, 0) scale(1);
	}
}

/* ── Global Page Background (Ellipses) ───────────────────── */
body.elementor-page {
	position: relative;
	background-color: #ffffff;
}

body.elementor-page::before,
body.elementor-page::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: url('../images/Ellipse.svg');
	background-repeat: no-repeat;
	opacity: 1;
	pointer-events: none;
	will-change: transform;
}

body.elementor-page::before {
	background-position: top -5% right -5%;
	animation: xt-ellipse-float-1 80s ease-in-out infinite;
}

body.elementor-page::after {
	background-position: bottom -5% left -5%;
	transform: rotate(180deg);
	animation: xt-ellipse-float-2 100s ease-in-out infinite;
}

@keyframes xt-ellipse-float-1 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	50% {
		transform: translate(50px, -30px) rotate(15deg) scale(1.1);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

@keyframes xt-ellipse-float-2 {
	0% {
		transform: rotate(180deg) translate(0, 0);
	}

	50% {
		transform: rotate(200deg) translate(-40px, 40px) scale(0.9);
	}

	100% {
		transform: rotate(180deg) translate(0, 0);
	}
}

/* ── Loading State ────────────────────────────────────────── */
button.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

button.is-loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: xt-spin 0.8s linear infinite;
}

@keyframes xt-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Premium Button Effect ────────────────────────────────── */
.xt-btn-premium {
	--xt-btn-accent: #1e8eff;
	--xt-btn-bg: rgba(30, 142, 255, 0.1);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 36px;
	background: var(--xt-btn-bg);
	border: none;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.5s linear;
	overflow: visible;
	z-index: 1;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.xt-btn-premium::before {
	content: "";
	position: absolute;
	inset: 0 -10px;
	border: 2px solid var(--xt-btn-accent);
	border-radius: 16px;
	transition: all 0.5s linear;
	z-index: -1;
	pointer-events: none;
	transform: scaleX(0);
	opacity: 0;
}

.xt-btn-premium::after {
	content: "";
	position: absolute;
	inset: -10px 0;
	border: 2px solid var(--xt-btn-accent);
	border-radius: 16px;
	transition: all 0.5s linear;
	z-index: -1;
	pointer-events: none;
	transform: scaleY(0);
	opacity: 0;
}

.xt-btn-premium:hover {
	background: var(--xt-btn-accent);
	color: #fff;
	box-shadow: 0 0 20px rgba(30, 142, 255, 0.4);
}

.xt-btn-premium:hover::before {
	transform: scaleX(1);
	opacity: 1;
}

.xt-btn-premium:hover::after {
	transform: scaleY(1);
	opacity: 1;
}