/* Theme Custom Stylesheet */

/* --- Fonts Configuration --- */
:root {
	--font-primary: 'Figtree', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-accent: 'Instrument Serif', serif;
}

/* --- Smooth scrolling and hides scrollbars globally --- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
html::-webkit-scrollbar {
	display: none;
}

/* --- Custom Cursor --- */
@media (min-width: 768px) {
	body.custom-cursor-enabled,
	body.custom-cursor-enabled a,
	body.custom-cursor-enabled button,
	body.custom-cursor-enabled [data-hover="true"],
	body.custom-cursor-enabled iframe {
		cursor: none !important;
	}
}

.mix-blend-difference {
	mix-blend-mode: difference;
}

/* --- Twinkling Stars Animation --- */
@keyframes twinkle {
	0%, 100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.5);
	}
}
.star-twinkle {
	animation: twinkle var(--star-duration, 4s) infinite ease-in-out var(--star-delay, 0s);
}

/* --- Marquee (Infinite Slider) Animations --- */
@keyframes marquee {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes marquee-reverse {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0%);
	}
}

.animate-marquee {
	animation: marquee 40s linear infinite;
}

.animate-marquee-reverse {
	animation: marquee-reverse 40s linear infinite;
}

/* Pause marquee animations on hover for reader comfort */
.group:hover .pause-on-hover,
.pause-on-hover:hover {
	animation-play-state: paused !important;
}

/* --- Shine Border Effect --- */
@keyframes shine-pulse {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}

.bg-shine-size {
	background-size: 300% 300%;
}

.shine-border-container {
	position: relative;
	border-radius: var(--border-radius, 24px);
}

.shine-border-container::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: var(--border-radius, 24px);
	padding: var(--border-width, 3px);
	background-image: var(--background-radial-gradient);
	background-size: 300% 300%;
	will-change: background-position;
	mask: var(--mask-linear-gradient);
	-webkit-mask: var(--mask-linear-gradient);
	mask-composite: exclude;
	-webkit-mask-composite: xor;
	animation: shine-pulse var(--shine-pulse-duration, 14s) infinite linear;
}

/* --- Background vignette helper --- */
.bg-radial-gradient {
	background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.6) 100%);
}

/* --- Fluid Blob Animations --- */
@keyframes blob-move-1 {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(50px, -25px) scale(1.1);
	}
	66% {
		transform: translate(-25px, 25px) scale(0.9);
	}
}

@keyframes blob-move-2 {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(-50px, 50px) scale(0.9);
	}
	66% {
		transform: translate(25px, -25px) scale(1.1);
	}
}

#blob1 {
	animation: blob-move-1 25s infinite ease-in-out;
}

#blob2 {
	animation: blob-move-2 30s infinite ease-in-out;
}