/* SCSS-like Custom Styles & CSS Variables */
 :root {
     --accent-primary: #3b82f6;
     --accent-secondary: #8b5cf6;
     --accent-glow: rgba(59, 130, 246, 0.5);
     --font-sans: 'Space Grotesk', sans-serif;
     --font-body: 'Plus Jakarta Sans', sans-serif;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-body);
     transition: background-color 0.4s, color 0.4s;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-sans);
 }

 /* --- Theme Definitions --- */
 body.light-theme {
     --bg-primary: #ffffff;
     --bg-secondary: #f4f7fc;
     --text-primary: #1f2937;
     --text-secondary: #4b5563;
     --border-color: #e5e7eb;
     --card-bg: rgba(255, 255, 255, 0.9);
     --spotlight-color: rgba(0, 0, 0, 0.05);
     --terminal-bg: #E5E7EB;
     --terminal-header: #D1D5DB;
     --terminal-input-bg: #FFFFFF;
 }

 body.dark-theme {
     --bg-primary: #111827;
     --bg-secondary: #0d1117;
     --text-primary: #f9fafb;
     --text-secondary: #9ca3af;
     --border-color: #374151;
     --card-bg: rgba(31, 41, 55, 0.5);
     --spotlight-color: rgba(255, 255, 255, 0.05);
     --terminal-bg: #1f2937;
     --terminal-header: #111827;
     --terminal-input-bg: #374151;
 }

 body {
     background-color: var(--bg-secondary);
     color: var(--text-primary);
 }

 .gradient-text {
     background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* --- Header & Nav --- */
 .glass-header {
     border-bottom: 1px solid transparent;
     transition: background-color 0.4s, border-color 0.4s;
     position: relative;
 }

 .glass-header.scrolled {
     background-color: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom-color: rgba(255, 255, 255, 0.2);
 }

 .dark .glass-header.scrolled {
     background-color: rgba(17, 24, 39, 0.5);
     border-bottom-color: rgba(255, 255, 255, 0.1);
 }

 .glass-header::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
     background-size: 300% 100%;
     animation: gradient-scroll 4s linear infinite;
     opacity: 0;
     transition: opacity 0.4s;
 }

 .glass-header.scrolled::after {
     opacity: 1;
 }

 @keyframes gradient-scroll {
     0% {
         background-position: 150% 0;
     }

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

 #nav-menu {
     background-color: rgba(17, 24, 39, 0.95);
     /* Adjusted for better dark theme visibility */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
 }

 .dark #nav-menu {
     background-color: rgba(17, 24, 39, 0.95);
 }

 .light #nav-menu {
     background-color: rgba(244, 247, 252, 0.95);
 }

 .nav-link {
     position: relative;
     transition: color 0.3s;
     color: var(--text-secondary);
 }

 .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -6px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--accent-primary);
     box-shadow: 0 0 10px var(--accent-primary);
     transition: width 0.3s ease-in-out;
     border-radius: 2px;
 }

 .nav-link:hover {
     color: var(--text-primary);
 }

 .nav-link:hover::after,
 .nav-link.active::after {
     width: 100%;
 }

 .nav-link.active {
     color: var(--text-primary) !important;
 }

 /* --- General Page Styles --- */
 .typing::after {
     content: '_';
     animation: blink 0.7s infinite;
     color: var(--accent-primary);
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 #loader {
     font-family: 'Fira Code', monospace;
     background-color: #0d1117;
 }

 #loader #loader-text {
     color: #3b82f6;
     font-family: 'Fira Code', monospace;
 }

 #loader .spinner {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #3b82f6;
     border-right-color: #3b82f6;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .profile-picture-container {
     position: relative;
     transition: transform 0.4s, box-shadow 0.4s;
 }

 .profile-picture-container:hover {
     transform: scale(1.05);
 }

 .profile-picture-container::before,
 .profile-picture-container::after {
     content: '';
     position: absolute;
     left: -2px;
     top: -2px;
     background: linear-gradient(45deg, #00c6fb, #005bea, #8a2be2, #ff00ff, #ff7f50, #f0e68c, #00c6fb, #005bea);
     background-size: 400%;
     width: calc(100% + 4px);
     height: calc(100% + 4px);
     z-index: -1;
     animation: ring-glow 20s linear infinite;
     border-radius: 50%;
 }

 @keyframes ring-glow {
     0% {
         background-position: 0 0;
     }

     50% {
         background-position: 400% 0;
     }

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

 .profile-picture-container::after {
     filter: blur(15px);
 }

 /* --- SKILLS SECTION --- */
 .skill-category-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 1.5rem;
     padding: 2rem;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(12px) saturate(180%);
     -webkit-backdrop-filter: blur(12px) saturate(180%);
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
 }

 .skill-category-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
 }

 .dark .skill-category-card:hover {
     box-shadow: 0 0 40px var(--accent-glow);
 }

 .skill-category-card .spotlight {
     position: absolute;
     width: 200px;
     height: 200px;
     background: radial-gradient(circle, var(--spotlight-color) 0%, transparent 70%);
     border-radius: 50%;
     pointer-events: none;
     transition: transform 0.1s linear, opacity 0.2s;
     transform: translate(-50%, -50%);
     opacity: 0;
 }

 .skill-category-card:hover .spotlight {
     opacity: 1;
 }

 .skill-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.5rem 1rem;
     background: var(--bg-secondary);
     border-radius: 9999px;
     border: 1px solid var(--border-color);
     transition: color 0.3s, background-color 0.3s, transform 0.3s, box-shadow 0.3s;
     color: var(--text-secondary);
     font-size: 0.875rem;
     font-weight: 500;
 }

 .skill-item img {
     transition: transform 0.3s ease;
 }

 .skill-item:hover {
     transform: translateY(-2px);
     color: white !important;
     background-color: var(--hover-color, var(--accent-primary));
     border-color: var(--hover-color, var(--accent-primary));
     box-shadow: 0 0 15px var(--hover-color, var(--accent-primary));
 }

 .skill-item:hover img {
     transform: scale(1.1);
 }

 /* --- PROJECTS SECTION --- */
 .project-card {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     border-radius: 1.5rem;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(12px) saturate(180%);
     -webkit-backdrop-filter: blur(12px) saturate(180%);
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
 }

 .project-card .project-image-container {
     overflow: hidden;
     position: relative;
 }

 .project-card .project-image {
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .project-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 20px 40px -15px var(--accent-glow);
     z-index: 10;
 }

 .project-card:hover .project-image {
     transform: scale(1.1);
 }

 .project-card .project-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(17, 24, 39, 1) 20%, rgba(17, 24, 39, 0));
     padding: 2.5rem 1.5rem 1.5rem 1.5rem;
     opacity: 0;
     transform: translateY(20%);
     transition: transform 0.4s ease-out, opacity 0.4s ease-out;
 }

 .project-card:hover .project-overlay {
     opacity: 1;
     transform: translateY(0);
 }

 .tech-badge {
     font-size: 0.75rem;
     /* 12px */
     font-weight: 600;
    padding: 0.3rem 0.75rem;
     /* py-1 px-3 */
     border-radius: 9999px;
     color: white;
     background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
     border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
 }

 .dark .tech-badge {
     color: white;
     background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
 }

.tech-badge-icon {
    width: 0.95rem;
    height: 0.95rem;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}

 /* --- TIMELINE SECTION --- */
 .timeline::before {
     content: '';
     position: absolute;
     left: 1.25rem;
     top: 0;
     bottom: 0;
     width: 2px;
     background-color: var(--border-color);
 }

 .timeline-item {
     transition: transform 0.3s;
 }

 .timeline-item:hover {
     transform: translateX(10px);
 }

 .timeline-item-dot {
     background-color: var(--bg-secondary);
     border: 2px solid var(--accent-primary);
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .timeline-item:hover .timeline-item-dot {
     transform: scale(1.2);
     box-shadow: 0 0 15px var(--accent-primary);
 }

/* --- CREATIVE MOTION --- */
#home {
    isolation: isolate;
}

.hero-grid-overlay {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
    animation: grid-drift 18s linear infinite;
    opacity: 0.6;
}

.hero-orb {
    width: 22rem;
    height: 22rem;
    border-radius: 9999px;
    filter: blur(28px);
    opacity: 0.28;
    animation: float-orb 10s ease-in-out infinite alternate;
}

.hero-orb-one {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.65) 0%, rgba(59, 130, 246, 0) 70%);
}

.hero-orb-two {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.65) 0%, rgba(139, 92, 246, 0) 70%);
    animation-delay: 2s;
}

.hero-scroll-cue {
    animation: fade-pulse 2.8s ease-in-out infinite;
}

.hero-scroll-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 0 14px var(--accent-primary);
    animation: bounce-dot 1.6s ease-in-out infinite;
}

.glitch-hover {
    position: relative;
    animation: title-float 6s ease-in-out infinite;
}

.glitch-hover::before,
.glitch-hover::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
}

.glitch-hover::before {
    transform: translate(2px, 0);
    color: var(--accent-primary);
    animation: glitch-shift 4s infinite linear alternate-reverse;
}

.glitch-hover::after {
    transform: translate(-2px, 0);
    color: var(--accent-secondary);
    animation: glitch-shift 3s infinite linear alternate;
}

.typing {
    display: inline-block;
    min-width: 12ch;
    text-shadow: 0 0 18px rgba(59, 130, 246, 0.18);
}

.typing::after {
    animation: blink 0.7s infinite, caret-pulse 2.2s ease-in-out infinite;
}

/* Reveal-on-scroll support */
.creative-reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
}

.creative-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.creative-stagger {
    transition-delay: var(--reveal-delay, 0ms);
}

@keyframes float-orb {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, 18px, 0) scale(1.08); }
}

@keyframes grid-drift {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(56px, 56px, 0); }
}

@keyframes fade-pulse {
    0%, 100% { opacity: 0.65; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, -4px); }
}

@keyframes bounce-dot {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes title-float {
    0%, 100% { transform: translateY(0); letter-spacing: 0; }
    50% { transform: translateY(-4px); letter-spacing: 0.01em; }
}

@keyframes glitch-shift {
    0% { clip-path: inset(0 0 85% 0); }
    25% { clip-path: inset(15% 0 55% 0); }
    50% { clip-path: inset(55% 0 15% 0); }
    75% { clip-path: inset(30% 0 40% 0); }
    100% { clip-path: inset(0 0 85% 0); }
}

@keyframes caret-pulse {
    0%, 100% { text-shadow: 0 0 0 rgba(59, 130, 246, 0); }
    50% { text-shadow: 0 0 14px rgba(59, 130, 246, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-grid-overlay,
    .hero-orb,
    .hero-scroll-cue,
    .hero-scroll-dot,
    .glitch-hover,
    .glitch-hover::before,
    .glitch-hover::after,
    .typing::after,
    .creative-reveal {
        animation: none !important;
        transition: none !important;
    }

    .creative-reveal {
        opacity: 1;
        transform: none;
    }
}

 /* --- CONTACT & FOOTER --- */
 .contact-terminal {
     background: var(--terminal-bg);
     border: 1px solid var(--border-color);
     box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
     font-family: 'Fira Code', monospace;
 }

 .contact-terminal-header {
     background: var(--terminal-header);
     border-bottom: 1px solid var(--border-color);
 }

 .contact-terminal input,
 .contact-terminal textarea {
     background: var(--terminal-input-bg);
     border: 1px solid var(--border-color);
     color: var(--text-primary);
     width: 100%;
     padding: 0.5rem 1rem;
     border-radius: 0.25rem;
 }

 .contact-terminal input:focus,
 .contact-terminal textarea:focus {
     outline: none;
     border-color: var(--accent-primary);
     box-shadow: 0 0 0 2px var(--accent-glow);
 }

 .contact-card {
     background: var(--bg-primary);
     border-radius: 1rem;
     border: 1px solid var(--border-color);
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .contact-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 0 30px var(--accent-glow);
 }

 .social-link {
     transition: transform 0.2s, color 0.2s;
 }

 .social-link:hover {
     transform: scale(1.1);
     color: var(--accent-primary);
 }

/* --- CREATIVE ANIMATIONS --- */
@media (min-width: 768px) {
    body {
        cursor: none;
    }
    a, button, input, textarea, .project-card, .skill-item {
        cursor: none !important;
    }
}

/* Glitch Effect */
.glitch-hover {
    position: relative;
    display: inline-block;
}
.glitch-hover:hover::before,
.glitch-hover:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--text-primary);
    background: transparent;
}
.glitch-hover:hover::before {
    left: 3px;
    text-shadow: -2px 0 var(--accent-secondary);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch-hover:hover::after {
    left: -3px;
    text-shadow: -2px 0 var(--accent-primary);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 80px, 0); }
    20% { clip: rect(60px, 9999px, 10px, 0); }
    40% { clip: rect(20px, 9999px, 50px, 0); }
    60% { clip: rect(90px, 9999px, 30px, 0); }
    80% { clip: rect(40px, 9999px, 100px, 0); }
    100% { clip: rect(70px, 9999px, 20px, 0); }
}

/* Glass Shine Effect on Hover */
.project-card::before, .skill-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: all 0.75s ease;
    z-index: 20;
    pointer-events: none;
}
.project-card:hover::before, .skill-category-card:hover::before {
    left: 150%;
}

/* Timeline Icon Hover Bounce */
.timeline-item-dot {
    animation: float-icon 3s ease-in-out infinite alternate;
}
@keyframes float-icon {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* Infinite Ticker Tape */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* Glowing Typography Enhancement */
h1.glitch-hover:hover, h2.gradient-text:hover {
    text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-primary);
    transition: text-shadow 0.3s ease;
}

/* Ambient Profile Breathe */
@keyframes profile-breathe {
    0% { box-shadow: 0 0 20px var(--accent-glow); }
    50% { box-shadow: 0 0 50px var(--accent-primary); }
    100% { box-shadow: 0 0 20px var(--accent-glow); }
}
.profile-picture-container img {
    animation: profile-breathe 4s ease-in-out infinite;
}

/* Base structural setups for magnetic animations */
.filter-btn, .contact-card, button[type="submit"] {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Ambient Hero Floating Icons */
@keyframes float-hero-dir-1 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; filter: drop-shadow(0 0 10px var(--accent-primary)); }
    50% { transform: translateY(-30px) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 20px var(--accent-primary)); }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.8; filter: drop-shadow(0 0 10px var(--accent-primary)); }
}

@keyframes float-hero-dir-2 {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; filter: drop-shadow(0 0 10px var(--accent-secondary)); }
    50% { transform: translateY(40px) rotate(-15deg); opacity: 1; filter: drop-shadow(0 0 20px var(--accent-secondary)); }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.8; filter: drop-shadow(0 0 10px var(--accent-secondary)); }
}

.float-hero-anim {
    animation: float-hero-dir-1 12s ease-in-out infinite;
    transition: all 0.5s ease;
}

.float-hero-anim-reverse {
    animation: float-hero-dir-2 15s ease-in-out infinite;
    transition: all 0.5s ease;
}

.float-hero-anim:hover, .float-hero-anim-reverse:hover {
    transform: scale(1.2) rotate(5deg) !important;
    animation-play-state: paused;
}