/* CSS Variables for theming */
:root {
    --bg-primary: #010409;
    --bg-secondary: #0d1117;
    --bg-tertiary: #161b22;
    --border-color: #30363d;
    --text-primary: #ffffff;
    --text-secondary: #c9d1d9;
    --text-muted: #8b949e;
    --accent-color: #58a6ff;
    --accent-hover: #79c0ff;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary: #ffffff;
    --border-color: #d0d7de;
    --text-primary: #1f2328;
    --text-secondary: #24292f;
    --text-muted: #656d76;
    --accent-color: #0969da;
    --accent-hover: #0550ae;
}

/* Light mode specific overrides */
[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
}

[data-theme="light"] .text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] .bg-github-darker {
    background-color: var(--bg-primary) !important;
}

[data-theme="light"] .bg-github-dark {
    background-color: var(--bg-secondary) !important;
}

[data-theme="light"] .border-github-border {
    border-color: var(--border-color) !important;
}

[data-theme="light"] .text-github-text {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .text-github-muted {
    color: var(--text-muted) !important;
}

[data-theme="light"] .text-github-accent {
    color: var(--accent-color) !important;
}

[data-theme="light"] .bg-github-accent {
    background-color: var(--accent-color) !important;
}

[data-theme="light"] .code-block {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="light"] input,
[data-theme="light"] textarea {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #0969da 0%, #0550ae 50%, #218bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .project-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(9, 105, 218, 0.2);
}

[data-theme="light"] .grid-pattern {
    background-image: 
        linear-gradient(rgba(9, 105, 218, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(9, 105, 218, 0.03) 1px, transparent 1px);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

[data-theme="light"] .bg-github-dark\\/50,
[data-theme="light"] .bg-github-dark\\/80,
[data-theme="light"] .bg-github-dark\\/95 {
    background-color: rgba(246, 248, 250, 0.95) !important;
}

[data-theme="light"] .bg-github-darker {
    background-color: #ffffff !important;
}

[data-theme="light"] .border-github-border\\/50 {
    border-color: rgba(208, 215, 222, 0.5) !important;
}

[data-theme="light"] .hover\\:border-github-accent\\/50:hover,
[data-theme="light"] .group-hover\\:border-github-accent\\/50 {
    border-color: rgba(9, 105, 218, 0.5) !important;
}

[data-theme="light"] .hover\\:bg-github-accent\\/20:hover {
    background-color: rgba(9, 105, 218, 0.2) !important;
}

[data-theme="light"] .border-white\\/20,
[data-theme="light"] .group:hover .group-hover\\:border-white\\/40 {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] header .text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] .from-black\\/50 {
    --tw-gradient-from: rgba(0, 0, 0, 0.05) var(--tw-gradient-from-position);
}

[data-theme="light"] #top-header .header-text,
[data-theme="light"] #top-header .header-btn {
    color: var(--text-primary) !important;
}

[data-theme="light"] #top-header .header-avatar-border,
[data-theme="light"] #top-header .border-white\\/20 {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #contact-dropdown .text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] #contact-dropdown .bg-github-darker {
    background-color: #ffffff !important;
}

[data-theme="light"] #navbar .bg-github-dark\\/80 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(208, 215, 222, 0.5) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #contact-form {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] #contact-form input,
[data-theme="light"] #contact-form textarea {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] #contact-form input::placeholder,
[data-theme="light"] #contact-form textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="light"] #contact-dropdown {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(208, 215, 222, 0.8) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] #contact-dropdown .bg-github-darker {
    background-color: #f6f8fa !important;
    border-color: #d0d7de !important;
}

[data-theme="light"] #navbar > div {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(208, 215, 222, 0.6) !important;
}

[data-theme="light"] #theme-toggle,
[data-theme="light"] #contact-toggle {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(208, 215, 222, 0.6) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] #theme-toggle:hover,
[data-theme="light"] #contact-toggle:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    border-color: var(--accent-color) !important;
}

/* Base styles */
* { box-sizing: border-box; }

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding-bottom: 100px;
}

/* Utility classes */
.bg-github-darker { background-color: var(--bg-primary); }
.bg-github-dark { background-color: var(--bg-secondary); }
.border-github-border { border-color: var(--border-color); }
.text-github-text { color: var(--text-secondary); }
.text-github-muted { color: var(--text-muted); }
.text-github-accent { color: var(--accent-color); }
.bg-github-accent { background-color: var(--accent-color); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* Canvas */
#hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #58a6ff 0%, #79c0ff 50%, #a5d6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow effects */
.glow-blue { box-shadow: 0 0 20px rgba(88, 166, 255, 0.3); }
.glow-blue:hover { box-shadow: 0 0 30px rgba(88, 166, 255, 0.5); }

/* Card hover */
.project-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 166, 255, 0.2);
}

/* Skill tag */
.skill-tag { transition: all 0.2s ease; }
.skill-tag:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(88, 166, 255, 0.4); }

/* Nav link */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #58a6ff;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Code block */
.code-block {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New', monospace;
}

/* Cursor blink */
.cursor-blink::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: #58a6ff;
}
@keyframes blink { 50% { opacity: 0; } }

/* Grid pattern */
.grid-pattern {
    background-image: 
        linear-gradient(rgba(88, 166, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 166, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Navbar - iOS Dynamic Island style */
#navbar {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateX(-50%) translateY(120px) scale(0.5);
    pointer-events: none;
}

#navbar.navbar-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
    animation: navbar-slide-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes navbar-slide-up {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(120px) scale(0.5);
        border-radius: 9999px;
    }
    35% {
        opacity: 1;
        transform: translateX(-50%) translateY(-16px) scale(1.08);
    }
    55% {
        transform: translateX(-50%) translateY(6px) scale(0.97);
    }
    72% {
        transform: translateX(-50%) translateY(-3px) scale(1.015);
    }
    87% {
        transform: translateX(-50%) translateY(1px) scale(0.998);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Avatar spinner */
.avatar-spinner { animation: spinner-rotate 2s linear infinite; }
.spinner-track { animation: spinner-dash 1.5s ease-in-out infinite; transform-origin: center; }

@keyframes spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinner-dash {
    0% { stroke-dasharray: 1, 290; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 200, 290; stroke-dashoffset: -75; }
    100% { stroke-dasharray: 200, 290; stroke-dashoffset: -290; }
}

/* Avatar hover */
.avatar-wrapper { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.avatar-wrapper:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 20px 40px rgba(88, 166, 255, 0.4));
}
.avatar-wrapper:hover .avatar-spinner { animation-duration: 1s; }
.avatar-wrapper:hover .spinner-track { animation-duration: 0.75s; }

/* Mobile menu */
#mobile-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
}
#mobile-menu:not(.hidden) {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Loading screen */
#loading-screen { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New', monospace; }
.loading-dots { animation: loading-dots 1.5s steps(4, end) infinite; }
@keyframes loading-dots { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

#progress-bar > div { animation: glow-pulse 1.5s ease-in-out infinite; }
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff; }
    50% { box-shadow: 0 0 20px #00d4ff, 0 0 40px #00d4ff; }
}

.loading-exit { animation: loading-fade-out 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes loading-fade-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); filter: blur(10px); }
}

/* Mobile optimizations */
@supports (padding-top: env(safe-area-inset-top)) {
    header { padding-top: max(1rem, env(safe-area-inset-top)); }
    #navbar { bottom: max(1.5rem, env(safe-area-inset-bottom)); }
    body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }

@media (hover: none) and (pointer: coarse) {
    .nav-link:hover::after, .project-card:hover, .skill-tag:hover { transform: none; }
    .nav-link, button, a { min-height: 44px; min-width: 44px; }
    .nav-link:active, button:active, a:active { opacity: 0.7; }
}

@supports (-webkit-touch-callout: none) {
    input, textarea { -webkit-appearance: none; border-radius: 0; }
    .min-h-screen { min-height: -webkit-fill-available; }
}

html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth; }

@media screen and (max-width: 768px) {
    #home { min-height: 100svh; min-height: -webkit-fill-available; }
}