/* =====================================================================
   PREMIUM LAYER — "$1M" visual upgrades
   Additive only. Builds on modern.css variables. Respects reduced-motion.
   ===================================================================== */

:root {
	--premium-glow: 0 0 0 1px rgba(255, 255, 255, 0.04),
		0 20px 50px -20px rgba(14, 165, 233, 0.45),
		0 0 80px -40px rgba(99, 102, 241, 0.5);
	--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------------------------------------------------------------------
   1. Interactive particle constellation canvas (sits behind everything)
   --------------------------------------------------------------------- */
#premium-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
}

body {
	position: relative;
}

/* Keep real content above the canvas */
.navbar,
section,
footer {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------
   2. Film-grain / noise texture overlay for depth
   --------------------------------------------------------------------- */
#grain-overlay {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   3. Scroll progress bar
   --------------------------------------------------------------------- */
#scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	z-index: 2000;
	background: linear-gradient(90deg, #0ea5e9, #6366f1 40%, #14b8a6 70%, #f97316);
	box-shadow: 0 0 12px rgba(14, 165, 233, 0.7);
	transition: width 0.1s linear;
}

/* ---------------------------------------------------------------------
   4. Custom magnetic cursor (desktop only — toggled via body class)
   --------------------------------------------------------------------- */
.has-custom-cursor,
.has-custom-cursor * {
	cursor: none !important;
}

#cursor-dot,
#cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3000;
	pointer-events: none;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	will-change: transform;
}

#cursor-dot {
	width: 7px;
	height: 7px;
	background: var(--primary-color);
	box-shadow: 0 0 10px rgba(14, 165, 233, 0.9);
}

#cursor-ring {
	width: 38px;
	height: 38px;
	border: 1.5px solid rgba(14, 165, 233, 0.5);
	transition: width 0.25s var(--ease-spring), height 0.25s var(--ease-spring),
		border-color 0.25s ease, background 0.25s ease;
	mix-blend-mode: difference;
	backdrop-filter: invert(0);
}

#cursor-ring.is-hover {
	width: 64px;
	height: 64px;
	border-color: rgba(20, 184, 166, 0.9);
	background: rgba(14, 165, 233, 0.08);
}

#cursor-ring.is-down {
	width: 28px;
	height: 28px;
}

/* ---------------------------------------------------------------------
   5. Aurora mesh — supercharge the hero background
   --------------------------------------------------------------------- */
.hero::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(40% 50% at 20% 25%, rgba(14, 165, 233, 0.28), transparent 60%),
		radial-gradient(35% 45% at 80% 20%, rgba(99, 102, 241, 0.25), transparent 60%),
		radial-gradient(45% 50% at 70% 80%, rgba(20, 184, 166, 0.22), transparent 60%),
		radial-gradient(35% 45% at 25% 85%, rgba(249, 115, 22, 0.18), transparent 60%);
	filter: blur(20px);
	animation: aurora-drift 18s ease-in-out infinite alternate;
}

[data-theme="light"] .hero::before {
	opacity: 0.6;
}

@keyframes aurora-drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
	50% {
		transform: translate3d(2%, -2%, 0) scale(1.08) rotate(2deg);
	}
	100% {
		transform: translate3d(-2%, 2%, 0) scale(1.04) rotate(-2deg);
	}
}

/* Conic shimmer ring orbiting the hero */
.hero-visuals {
	position: relative;
}

/* ---------------------------------------------------------------------
   6. Animated gradient text — living shimmer on the name
   --------------------------------------------------------------------- */
.gradient-text {
	background: linear-gradient(110deg, #0ea5e9, #6366f1, #14b8a6, #22d3ee, #0ea5e9);
	background-size: 300% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: text-shine 6s linear infinite;
}

@keyframes text-shine {
	to {
		background-position: 300% center;
	}
}

/* Shimmer sweep used on section titles when revealed */
.section-title {
	position: relative;
}

/* ---------------------------------------------------------------------
   7. 3D tilt + spotlight cards
   --------------------------------------------------------------------- */
[data-tilt] {
	transform-style: preserve-3d;
	transform: perspective(900px) rotateX(0deg) rotateY(0deg);
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
	will-change: transform;
}

[data-tilt] > * {
	transform: translateZ(0.01px);
}

/* Spotlight that follows the pointer; driven by --mx / --my JS vars */
[data-spotlight] {
	position: relative;
	isolation: isolate;
}

[data-spotlight]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.4s ease;
	background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
			rgba(14, 165, 233, 0.18), transparent 65%);
}

[data-spotlight]:hover::after {
	opacity: 1;
}

/* Gradient border glow on premium cards */
.stat-card,
.why-me-card,
.impact-card,
.skill-card,
.project-card,
.domain-card,
.achievement-card,
.contact-card,
.value-card {
	position: relative;
	transition: transform 0.45s var(--ease-spring), box-shadow 0.45s ease,
		border-color 0.45s ease;
}

.stat-card:hover,
.why-me-card:hover,
.impact-card:hover,
.skill-card:hover,
.project-card:hover,
.domain-card:hover,
.achievement-card:hover,
.contact-card:hover {
	box-shadow: var(--premium-glow);
}

/* ---------------------------------------------------------------------
   8. Scroll-reveal choreography
   --------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(34px);
	filter: blur(6px);
	transition: opacity 0.9s var(--ease-out-expo),
		transform 0.9s var(--ease-out-expo), filter 0.9s var(--ease-out-expo);
	will-change: opacity, transform;
}

.reveal.in-view {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* Stagger children within a grid */
.reveal-stagger > * {
	opacity: 0;
	transform: translateY(28px) scale(0.98);
	transition: opacity 0.7s var(--ease-out-expo),
		transform 0.7s var(--ease-out-expo);
}

.reveal-stagger.in-view > * {
	opacity: 1;
	transform: none;
}

.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.20s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.40s; }
.reveal-stagger.in-view > *:nth-child(n+9) { transition-delay: 0.45s; }

/* ---------------------------------------------------------------------
   9. Magnetic buttons + premium button sheen
   --------------------------------------------------------------------- */
.btn {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease,
		background 0.3s ease;
	will-change: transform;
}

.btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 80%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s var(--ease-out-expo);
	pointer-events: none;
}

.btn:hover::before {
	left: 130%;
}

.btn-primary:hover {
	box-shadow: 0 10px 40px -8px rgba(14, 165, 233, 0.7);
}

/* ---------------------------------------------------------------------
   10. Marquee tech ticker
   --------------------------------------------------------------------- */
.tech-marquee {
	position: relative;
	overflow: hidden;
	margin: 3.5rem auto 0;
	max-width: 1200px;
	padding: 1rem 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tech-marquee__track {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: marquee 38s linear infinite;
}

.tech-marquee:hover .tech-marquee__track {
	animation-play-state: paused;
}

.tech-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
	white-space: nowrap;
	opacity: 0.8;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.tech-marquee__item i {
	font-size: 1.3rem;
	background: var(--gradient-1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tech-marquee__item:hover {
	color: var(--text-primary);
	opacity: 1;
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------------------------------------------------------------------
   11. Floating "available" status pill in hero
   --------------------------------------------------------------------- */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 1.1rem;
	margin-bottom: 1.4rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--text-primary);
	background: rgba(20, 184, 166, 0.08);
	border: 1px solid rgba(20, 184, 166, 0.35);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 20px -8px rgba(20, 184, 166, 0.5);
}

.status-pill .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
	70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------------------------------------------------------------------
   12. Section titles get an animated underline accent
   --------------------------------------------------------------------- */
.section-header .section-title::after {
	content: "";
	display: block;
	width: 0;
	height: 4px;
	margin: 0.9rem auto 0;
	border-radius: 4px;
	background: var(--gradient-1);
	transition: width 0.9s var(--ease-out-expo);
}

.section-header.in-view .section-title::after,
.reveal.in-view .section-title::after {
	width: 90px;
}

/* ---------------------------------------------------------------------
   13. Back-to-top floating orb
   --------------------------------------------------------------------- */
#back-to-top {
	position: fixed;
	right: 1.6rem;
	bottom: 1.6rem;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 1.1rem;
	background: var(--gradient-1);
	box-shadow: 0 10px 30px -8px rgba(14, 165, 233, 0.7);
	cursor: pointer;
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s var(--ease-spring);
	z-index: 1500;
}

#back-to-top.show {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

#back-to-top:hover {
	transform: translateY(-4px) scale(1.05);
}

/* ---------------------------------------------------------------------
   14. Reduced-motion + touch fallbacks
   --------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
	#cursor-dot,
	#cursor-ring {
		display: none !important;
	}
	.has-custom-cursor,
	.has-custom-cursor * {
		cursor: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gradient-text,
	.hero::before,
	.tech-marquee__track,
	.status-pill .dot {
		animation: none !important;
	}
	.reveal,
	.reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
	#premium-canvas {
		display: none;
	}
}