/**
 * Hasan Mahmud Portfolio — premium animation system.
 * Token driven, GPU friendly, and fully disabled for reduced-motion users.
 */

:root {
	--hm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--hm-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--hm-anim-fast: 0.35s;
	--hm-anim-base: 0.75s;
	--hm-anim-slow: 1.1s;
}

/* ---------- Scroll progress bar ---------- */

.hm-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 999;
	background: var(--hm-accent-grad);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
	pointer-events: none;
}

/* ---------- Entrance animations ---------- */

[data-hm-anim] {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity var(--hm-anim-base) var(--hm-ease-out),
		transform var(--hm-anim-base) var(--hm-ease-out),
		filter var(--hm-anim-base) var(--hm-ease-out);
	transition-delay: var(--hm-anim-delay, 0ms);
}

[data-hm-anim='up'] { transform: translate3d(0, 32px, 0); }
[data-hm-anim='down'] { transform: translate3d(0, -28px, 0); }
[data-hm-anim='left'] { transform: translate3d(38px, 0, 0); }
[data-hm-anim='right'] { transform: translate3d(-38px, 0, 0); }
[data-hm-anim='zoom'] { transform: scale(0.92); }
[data-hm-anim='blur'] { filter: blur(14px); transform: translate3d(0, 18px, 0); }
[data-hm-anim='flip'] { transform: perspective(900px) rotateX(12deg) translate3d(0, 26px, 0); }

[data-hm-anim].is-in {
	opacity: 1;
	filter: none;
	transform: none;
}

/* Stagger children: set --hm-i per child in JS */
[data-hm-stagger] > * {
	--hm-anim-delay: calc(var(--hm-i, 0) * 90ms);
}

/* ---------- Ambient motion ---------- */

@keyframes hm-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -14px, 0); }
}

@keyframes hm-orb-drift {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(4%, -6%, 0) scale(1.08); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hm-shine {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

@keyframes hm-pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.45); }
	70% { box-shadow: 0 0 0 18px rgba(124, 92, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
}

@keyframes hm-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

.hm-float { animation: hm-float 7s ease-in-out infinite; }

.hm-orb { animation: hm-orb-drift 18s ease-in-out infinite; }
.hm-orb:nth-of-type(2) { animation-duration: 24s; animation-direction: reverse; }

.hm-shine {
	background: linear-gradient(100deg, #eef1f8 0%, #7c5cff 35%, #2ea8ff 55%, #eef1f8 90%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: hm-shine 7s linear infinite;
}

.hm-pulse { animation: hm-pulse-ring 2.6s ease-out infinite; }

/* Continuous logo/trust marquee */
.hm-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hm-marquee__inner {
	display: flex;
	width: max-content;
	gap: 2.5rem;
	animation: hm-marquee 26s linear infinite;
}

.hm-marquee:hover .hm-marquee__inner { animation-play-state: paused; }

/* ---------- Interactive polish ---------- */

[data-hm-tilt] {
	transform: perspective(900px) rotateX(var(--hm-rx, 0deg)) rotateY(var(--hm-ry, 0deg)) translate3d(0, var(--hm-ty, 0), 0);
	transition: transform 0.4s var(--hm-ease-out), box-shadow 0.4s var(--hm-ease-out), border-color 0.4s ease;
}

[data-hm-tilt]:hover {
	--hm-ty: -6px;
	box-shadow: 0 30px 60px -34px rgba(124, 92, 255, 0.55);
	border-color: var(--hm-line-strong);
}

[data-hm-magnetic] {
	transition: transform 0.25s var(--hm-ease-spring), box-shadow 0.25s ease;
	transform: translate3d(var(--hm-mx, 0px), var(--hm-my, 0px), 0);
}

.hm-btn,
.hm-card,
.hm-service,
.hm-review {
	transition:
		transform 0.35s var(--hm-ease-out),
		box-shadow 0.35s var(--hm-ease-out),
		background 0.35s ease,
		border-color 0.35s ease;
}

.hm-btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28), transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--hm-ease-out);
	pointer-events: none;
}

.hm-btn--primary { position: relative; overflow: hidden; }
.hm-btn--primary:hover::after { transform: translateX(120%); }

/* Animated underline for text links */
.hm-link {
	position: relative;
	background-image: linear-gradient(var(--hm-blue), var(--hm-blue));
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 100%;
	transition: background-size 0.4s var(--hm-ease-out);
}

.hm-link:hover { background-size: 100% 1px; }

/* Count-up numbers keep their box while animating */
[data-hm-count] { font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion ---------- */

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

	[data-hm-anim],
	[data-hm-anim].is-in {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}

	.hm-float,
	.hm-orb,
	.hm-shine,
	.hm-pulse,
	.hm-marquee__inner {
		animation: none;
	}

	.hm-shine { color: var(--hm-text); }

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