/* EWB Courses — interactivity layer (cursor / tilt / counters / scroll).
 *
 * Paired with assets/js/interactive.js. All colours come from tokens.css.
 * Mobile (`pointer: coarse`) and reduced-motion users get a graceful bailout.
 */

/* =========================================================================
   Cursor-following accent blob (hero sections only)
   ========================================================================= */
.ewb-cursor-blob {
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;       /* centre on translate origin */
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(0, 184, 255, 0.45) 0%, rgba(0, 184, 255, 0) 65%);
	mix-blend-mode: screen;
	opacity: 0;
	transform: translate3d(-100vw, -100vh, 0);
	transition: opacity 250ms var(--ease, ease-out);
	z-index: 9;
	will-change: transform, opacity;
}

.ewb-cursor-blob.is-visible {
	opacity: 1;
}

/* =========================================================================
   Scroll progress bar (homepage only — body.home)
   ========================================================================= */
.ewb-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--cyan) 0%, var(--lime) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	z-index: var(--z-header, 100);
	pointer-events: none;
	will-change: transform;
}

/* =========================================================================
   3D card tilt — driven by --tilt-x / --tilt-y custom properties
   ========================================================================= */
[data-tilt] {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	transform-style: preserve-3d;
	transform: perspective(800px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
	transition: transform 300ms var(--ease, ease-out);
	will-change: transform;
}

/* =========================================================================
   Magnetic buttons — driven by --mag-x / --mag-y
   ========================================================================= */
[data-magnetic] {
	--mag-x: 0px;
	--mag-y: 0px;
	transform: translate3d(var(--mag-x), var(--mag-y), 0);
	transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform;
}

/* Compose with .btn's existing :hover translateY without fighting it. */
.btn[data-magnetic]:hover,
.btn[data-magnetic]:focus-visible {
	transform: translate3d(var(--mag-x), calc(var(--mag-y) - 1px), 0);
}

/* =========================================================================
   Parallax accent layer — driven by --par-x / --par-y
   Applied additively on top of any existing transform via translate property.
   ========================================================================= */
[data-parallax] {
	--par-x: 0px;
	--par-y: 0px;
	translate: var(--par-x) var(--par-y);
}

/* =========================================================================
   Accessibility / device bailouts
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ewb-cursor-blob,
	.ewb-scroll-progress { display: none !important; }

	[data-tilt],
	[data-magnetic] {
		transform: none !important;
		transition: none !important;
	}

	[data-parallax] {
		translate: 0 0 !important;
	}
}

@media (pointer: coarse) {
	.ewb-cursor-blob { display: none !important; }

	[data-tilt],
	[data-magnetic] {
		transform: none !important;
	}

	[data-parallax] {
		translate: 0 0 !important;
	}
}