/* Scroll FX Studio — frontend styles */

/* --- Lenis: prevent the theme's own smooth-scroll CSS from fighting it --- */
html.lenis,
html.lenis body {
	height: auto;
}
html.lenis {
	scroll-behavior: auto !important;
}

/* --- Custom cursor --- */
.sfx-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #111;
	pointer-events: none;
	z-index: 999999;
	opacity: 0;
	transform: translate(-50%, -50%);
	will-change: transform;
}
.sfx-cursor-dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
html.sfx-cursor-active,
html.sfx-cursor-active * {
	cursor: none !important;
}

/* --- Pinned horizontal-scroll sections --- */
.sfx-pin-horizontal {
	overflow: hidden;
}
[data-sfx="pin-horizontal"] > * {
	will-change: transform;
}

/* --- Reveal / zoom targets --- */
[data-sfx="fade-scale"],
[data-sfx="stagger-reveal"] {
	will-change: transform, opacity;
}

.sfx-img-wrap {
	display: block;
	overflow: hidden;
	position: relative;
}
.sfx-img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform, clip-path;
}

/* --- Marquee --- */
[data-sfx="marquee"] {
	overflow: hidden;
	width: 100%;
}
.sfx-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.sfx-marquee-track > * {
	flex: 0 0 auto;
}

/* --- Magnetic buttons / floating icons --- */
[data-sfx="button-magnetic"] {
	display: inline-block;
	will-change: transform;
}
[data-sfx="icon-float"] {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.sfx-cursor {
		display: none;
	}
}