/* Global Typography & Smooth Transitions */
html, body, button, input, textarea, select {
    font-family: 'Inter', 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Scroll Offset for Fixed Header */
section {
    scroll-margin-top: 5.5rem;
}

/* Section Entry Faded Animations (Plain Faded Layout) */
.section-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

.section-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Timeline Pulse Animation with High-Contrast Dark Grey / White Glow */
@keyframes pulse-dot {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(24, 24, 27, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(24, 24, 27, 0);
    }
}

@keyframes pulse-dot-dark {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

.timeline-dot-anim {
    animation: pulse-dot 2.5s ease-in-out infinite;
}

.dark .timeline-dot-anim {
    animation-name: pulse-dot-dark;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}

/* Project Card Hover Glow & Elevated Shadows */
.project-card-glow {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card-glow:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -10px rgba(24, 24, 27, 0.15), 0 10px 15px -6px rgba(0, 0, 0, 0.08);
    border-color: rgba(39, 39, 42, 0.4);
}

.dark .project-card-glow:hover {
    box-shadow: 0 20px 35px -10px rgba(255, 255, 255, 0.15), 0 10px 15px -6px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Experience List Staggered Items */
.exp-list-item {
    opacity: 0;
    transform: translateX(-15px); 
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.exp-list-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Tech Pill Interactive Scale & High-Contrast Polish */
.tech-pill {
    transition: all 0.25s ease;
}

.tech-pill:hover {
    transform: scale(1.06) translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 24, 27, 0.18);
}

.dark .tech-pill:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.22);
}

/* Staggered Children Animation */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.visible > *:nth-child(1) {
    transition-delay: 0.1s;
}

.stagger-children.visible > *:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Theme Toggle Button Hover Effect */
.theme-toggle {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Interactive Hero Name Styles (Rubber-band Wave & Glow) */
.interactive-char {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.interactive-char.hovered {
    transform: translateY(-10px) scale(1.3) rotate(-3deg);
    color: #18181b;
    text-shadow: 0 10px 25px rgba(24, 24, 27, 0.4);
    z-index: 10;
}

.dark .interactive-char.hovered {
    color: #ffffff;
    text-shadow: 0 10px 25px rgba(255, 255, 255, 0.5);
}

.interactive-char.neighbor {
    transform: translateY(-4px) scale(1.12);
    color: #3f3f46;
}

.dark .interactive-char.neighbor {
    color: #d4d4d8;
}

/* Sparkle & Particle Burst on Click */
@keyframes float-sparkle {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(1.4) rotate(var(--rot));
        opacity: 0;
    }
}

.sparkle-particle {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    font-size: 1.25rem;
    animation: float-sparkle 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Interactive Card 3D Tilt & Glow Effects */
.interactive-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
}

.interactive-card:hover {
    box-shadow: 0 25px 45px -12px rgba(24, 24, 27, 0.18), 0 12px 20px -8px rgba(0, 0, 0, 0.08);
    border-color: rgba(39, 39, 42, 0.5);
}

.dark .interactive-card:hover {
    box-shadow: 0 25px 45px -12px rgba(255, 255, 255, 0.18), 0 12px 20px -8px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Project Filter Button Transition */
.project-filter-btn {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.project-filter-btn.active {
    box-shadow: 0 4px 14px 0 rgba(24, 24, 27, 0.35);
}

.dark .project-filter-btn.active {
    box-shadow: 0 4px 14px 0 rgba(255, 255, 255, 0.3);
}

/* Interactive GitHub & Social Popup Button Hover Effects */
.github-popup-btn, .social-popup-btn {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
    will-change: transform, box-shadow;
}

.github-popup-btn:hover, .social-popup-btn:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 16px 32px -8px rgba(24, 24, 27, 0.25), 0 8px 16px -4px rgba(0, 0, 0, 0.1) !important;
}

.dark .github-popup-btn:hover, .dark .social-popup-btn:hover {
    box-shadow: 0 16px 32px -8px rgba(255, 255, 255, 0.22), 0 8px 16px -4px rgba(0, 0, 0, 0.5) !important;
}

.github-popup-btn:active, .social-popup-btn:active {
    transform: translateY(-2px) scale(0.99) !important;
}