/* AlphaSoft — motion system: loader, page transition, custom cursor,
   scroll progress, masked-headline reveal, scroll-reveal utility.
   Everything here is neutralised globally under
   @media (prefers-reduced-motion: reduce) in base.css. */

/* Loader */
.page-loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-content: center;
	background: var(--ink);
	color: #fff;
	transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-loader.loaded {
	/* Not translateY(-100%): with position:fixed + inset:0 + display:grid +
	   place-content:center, the percentage basis resolves against the
	   loader's own intrinsic content height (~130px) rather than its
	   final viewport-stretched height (confirmed via direct DOM
	   inspection — the loader was left covering roughly the top third of
	   every inner page after "loading", intercepting clicks). 100vh is
	   unambiguous and cannot fall into the same trap. */
	transform: translateY(-100vh);
	pointer-events: none;
}

.loader-a {
	position: relative;
	width: 110px;
	height: 95px;
}

.loader-a i {
	width: 7px;
	height: 112px;
	top: -8px;
}

.loader-a i:first-child {
	left: 31px;
	transform: rotate(25deg);
}

.loader-a i:nth-child(2) {
	right: 31px;
	transform: rotate(-25deg);
}

.loader-a b {
	width: 58px;
	height: 7px;
	left: 26px;
	top: 55px;
}

.loader-meta {
	display: flex;
	justify-content: space-between;
	width: 210px;
	margin-top: 22px;
	font: 400 9px/1 var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Page transition overlay */
.page-transition {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--ink);
	display: grid;
	place-content: center;
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition.active {
	transform: translateY(0);
}

/* Custom cursor */
.cursor {
	position: fixed;
	z-index: 900;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	pointer-events: none;
	background: var(--acid);
	color: var(--ink);
	font: 500 10px/1 var(--mono);
	text-transform: uppercase;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.22s;
}

.cursor.active {
	transform: translate(-50%, -50%) scale(1);
}

@media (pointer: coarse) {
	.cursor {
		display: none;
	}
}

/* Scroll progress */
.scroll-progress {
	position: fixed;
	z-index: 150;
	right: 14px;
	top: 50%;
	width: 1px;
	height: 120px;
	background: rgb(0 0 0 / 16%);
	transform: translateY(-50%);
}

.scroll-progress span {
	display: block;
	width: 100%;
	height: 0;
	background: var(--blue);
}

@media (width <= 960px) {
	.scroll-progress {
		display: none;
	}
}

/* Masked headline reveal — .mask wraps a single line, body.ready triggers it */
.mask {
	display: block;
	overflow: hidden;
}

.mask b {
	display: block;
	font-weight: inherit;
	transform: translateY(115%);
	transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}

body.ready .mask b {
	transform: translateY(0);
}

.mask:nth-child(2) b {
	transition-delay: 0.09s;
}

/* Scroll-reveal utility — JS adds .visible via IntersectionObserver */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s,
		transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.visible {
	opacity: 1;
	transform: none;
}

/* Magnetic CTA pull, applied via JS inline transform on .magnetic elements */
.magnetic {
	transition: transform 0.2s;
}