/**
 * Catalog motion — courses archive & workshops hub.
 *
 * Start states below only apply while <html class="nova-motion"> is set
 * (added in <head>; removed by a failsafe if motion.js / GSAP fail to boot).
 * Movement itself is driven by GSAP in motion.js.
 */

/* ── Hidden start states (prevent a flash before JS takes over) ── */

.nova-motion .nova-hero--page .nova-section-label,
.nova-motion .nova-hero--page .nova-hero__title,
.nova-motion .nova-hero--page .nova-hero__subtitle,
.nova-motion .nova-courses-filters > *,
.nova-motion .nova-engine-tabs > *,
.nova-motion [data-nova-card],
.nova-motion .nova-cta__inner > * {
	opacity: 0;
	visibility: hidden;
}

/* Hero title: masked word-by-word rise. */
.nova-hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.nova-hero__word > span {
	display: inline-block;
	will-change: transform;
}

/* ── Cards ──────────────────────────────────────────────── */

/*
 * The photo is slightly oversized so it can drift inside its frame
 * (parallax). Individual transform properties (`translate`, `rotate`,
 * `scale`) are used so the existing hover lift (`transform`) still works.
 */
@media (min-width: 901px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.nova-motion [data-nova-card] .nova-course-card__image img {
		scale: 1.14;
	}

	.nova-motion [data-nova-card] {
		will-change: translate, rotate, scale, opacity;
	}
}

/* ── Scroll progress bar ────────────────────────────────── */

.nova-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	background: linear-gradient(90deg, var(--color-accent), #F2D48E);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* ── Lenis (smooth scroll) ──────────────────────────────── */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ── Touch devices: a hover lift would stay stuck after a tap ── */

@media (hover: none) {
	.nova-course-card:hover {
		transform: none;
		box-shadow: none;
		border-color: var(--color-border);
	}

	.nova-course-card:hover .nova-course-card__image img {
		transform: none;
	}
}