@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;700;800&display=swap');

body {
    font-family: 'Manrope', 'Inter', sans-serif;
}

/* === Sticky Header Styling === */
header {
    position: sticky;
    top: 0;
    z-index: 30; /* Below mobile menu (40) but above content */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

html.dark header.scrolled {
    background-color: rgba(17, 24, 39, 0.7); /* dark:bg-gray-900 with opacity */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}


/* === Solana-style animated wavelength background for #wavelength === */
#wavelength {
pointer-events: none;
width: 100%;
height: 100%;
z-index: 0;
background: linear-gradient(120deg, #a0e9ff 0%, #8b5cf6 40%, #22d3ee 80%, #f0abfc 100%);
background-size: 200% 200%;
animation: wavelength-animate 4s ease-in-out infinite;
opacity: 0.55;
border-radius: 32px;
filter: blur(24px) saturate(1.2);
transition: background 0.5s;
}
html.dark #wavelength {
background: linear-gradient(120deg, #312e81 0%, #a21caf 40%, #2563eb 80%, #34d399 100%);
filter: blur(32px) saturate(1.4);
opacity: 0.7;
animation-duration: 2s;
}
@keyframes wavelength-animate {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.animate-blob {
    animation: blob 10s infinite;
}

.animation-delay-4000 {
    animation-delay: -4s;
}

@keyframes blob {
	0% {
		transform: translate(0px, 0px) scale(1);
	}
	33% {
		transform: translate(30px, -50px) scale(1.1);
	}
	66% {
		transform: translate(-20px, 20px) scale(0.9);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}

.game-card {
    @apply block p-6 bg-gray-800/60 rounded-xl border border-gray-700 hover:border-purple-500 hover:bg-gray-800 transition-all transform hover:-translate-y-1;
}

.game-card h3 {
    @apply font-semibold text-lg flex items-center gap-3 text-white;
}

.game-card p {
    @apply text-sm text-gray-400 mt-2;
}

/* === Dot Grid Background for Skills Section === */
#skills {
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 1.25rem 1.25rem;
}

html.dark #skills {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
}

/* === Grid Pattern Background for Games Section === */
#games {
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 2rem 2rem;
    background-position: -1px -1px;
}

html.dark #games {
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* === Shiny Effect for Subtitle === */
.subtitle-shine {
    background: linear-gradient(90deg, #4b5563, #111827, #4b5563);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
}

html.dark .subtitle-shine {
    background: linear-gradient(90deg, #d1d5db, #ffffff, #d1d5db);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* === Reusable Grid Background === */
.grid-background {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px);
    background-size: 2rem 2rem;
    background-position: -1px -1px;
}