/* STEP 1: Scroll-reveal fade-up */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: var(--delay, 0s);
}

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

/* STEP 2: Floating avatar */
@keyframes float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

.hero-avatar {
	animation: float 4s ease-in-out infinite;
}

/* Hero h1 shimmer */
@keyframes shimmer {
	0% {
		background-position: -600px 0;
	}

	100% {
		background-position: 600px 0;
	}
}

.hero h1 {
	animation: shimmer 10s ease-in-out infinite;
}

/* STEP 3: Typing cursor on greeting */
.hero-greeting::after {
	content: '|';
	animation: blink 0.8s step-end infinite;
	margin-left: 2px;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

.hero-greeting.cursor-hidden::after {
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* STEP 4: Hero word-by-word reveal */
.word {
	display: inline-block;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* STEP 5: Card magnetic tilt */
.service-card,
.exp-card,
.project-card {
	transition: border-color 0.2s, background 0.2s, transform 0.15s ease;
}

/* STEP 6: Card glow border */
.service-card,
.exp-card {
	position: relative;
	overflow: hidden;
}

.service-card::before,
.exp-card::before,
.project-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 1;
}

.service-card:hover::before,
.exp-card:hover::before,
.project-card:hover::before {
	opacity: 1;
}

/* STEP 7: Tag shimmer on card hover */
@keyframes tagShimmer {
	0% {
		background-position: -200% center;
	}

	100% {
		background-position: 200% center;
	}
}

.project-card:hover .project-tags span {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.06) 100%);
	background-size: 200% 100%;
	animation: tagShimmer 1.5s ease infinite;
}

.project-card:hover .project-tags span:nth-child(2) {
	animation-delay: 0.1s;
}

.project-card:hover .project-tags span:nth-child(3) {
	animation-delay: 0.2s;
}

.project-card:hover .project-tags span:nth-child(4) {
	animation-delay: 0.3s;
}

/* STEP 8: Grain overlay */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 256px 256px;
	animation: grain 8s steps(10) infinite;
}

@keyframes grain {

	0%,
	100% {
		background-position: 0 0;
	}

	10% {
		background-position: -5% -10%;
	}

	20% {
		background-position: -15% 5%;
	}

	30% {
		background-position: 7% -25%;
	}

	40% {
		background-position: -5% 25%;
	}

	50% {
		background-position: -15% 10%;
	}

	60% {
		background-position: 15% 0%;
	}

	70% {
		background-position: 0% 15%;
	}

	80% {
		background-position: 3% 35%;
	}

	90% {
		background-position: -10% 10%;
	}
}

/* STEP 9: Gradient spotlight */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.03), transparent 70%);
}

/* STEP 10: Social icon pulse */
@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}

.contact-links a.visible svg {
	animation: pulse 0.5s ease;
}

/* STEP 11: Email underline draw */
.contact-email a {
	border-bottom: none;
	background-image: linear-gradient(#fff, #fff);
	background-size: 0% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: background-size 0.6s ease, color 0.2s;
}

.contact-email.visible a {
	background-size: 100% 1px;
}

/* STEP 12: Nav active indicator */
.nav-links a {
	position: relative;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.nav-links a.active::after {
	transform: scaleX(1);
}

/* Disable tilt/glow on touch devices */
@media (hover: none) {

	.service-card::before,
	.exp-card::before,
	.project-card::before {
		display: none;
	}
}