/* ============================================================
   AKSHAJ HUI — PORTFOLIO · index.css
   Pure CSS, zero external dependencies, Flexbox + Grid layout
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
    /* Theme Variables - Default Dark */
    --bg-deep:        #020c1a;
    --bg-slate:       #111111;
    --bg-accent:      #1a1a1a;
    --accent:         #3b82f6;
    --accent-glow:    rgba(59, 130, 246, 0.10);
    --text-primary:   #ffffff;
    --text-secondary: #94a3b8;
    --text-muted:     #475569;
    --border:         rgba(30, 41, 59, 0.50);
    --decor-opacity:  0.10;
    --btn-hover:      #2563eb;

    --f-display: 'Anton',         sans-serif;
    --f-sans:    'Inter',         sans-serif;
    --f-mono:    'JetBrains Mono', monospace;
}

/* Light Theme Overrides */
[data-theme="light"] {
    --bg-deep:        #f8fafc;
    --bg-slate:       #ffffff;
    --bg-accent:      #f1f5f9;
    --accent:         #2563eb;
    --accent-glow:    rgba(37, 99, 235, 0.05);
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --border:         rgba(226, 232, 240, 0.80);
    --decor-opacity:  0.05;
    --btn-hover:      #1d4ed8;
}

/* ── 2. Reset & Base ───────────────────────────────────────── */
*,
*::before,
*::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
    /* Smooth theme transition */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:       var(--f-sans);
    background-color:  var(--bg-deep);
    color:             var(--text-primary);
    overflow-x:        hidden;
    scroll-snap-type:  y mandatory;
    height:            100vh;
}

/* ── 3. Background Decorations ─────────────────────────────── */
.decor-top {
    position:      fixed;
    top:           0;
    right:         0;
    width:         40%;
    height:        40%;
    background:    rgba(59, 130, 246, var(--decor-opacity));
    filter:        blur(120px);
    border-radius: 50%;
    pointer-events: none;
    z-index:       0;
}

.decor-bottom {
    position:      fixed;
    bottom:        0;
    left:          0;
    width:         30%;
    height:        30%;
    background:    rgba(148, 163, 184, var(--decor-opacity));
    filter:        blur(100px);
    border-radius: 50%;
    pointer-events: none;
    z-index:       0;
}

/* ── 4. Side Navigation Dots ───────────────────────────────── */
.side-nav {
    position:   fixed;
    right:      2.5rem;
    top:        50%;
    transform:  translateY(-50%);
    display:    flex;
    flex-direction: column;
    gap:        1.5rem;
    z-index:    100;
}

.side-nav a {
    display:          block;
    width:            8px;
    height:           8px;
    border-radius:    50%;
    border:           1px solid rgba(148, 163, 184, 0.30);
    background-color: transparent;
    transition:       all 0.3s ease;
}

.side-nav a:hover {
    border-color: var(--accent);
}

/* ── 5. Section (Scroll Slide) ─────────────────────────────── */
section {
    position:        relative;
    height:          100vh;
    width:           100vw;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    padding:         3rem;
    scroll-snap-align: start;
    overflow:        hidden;
}

/* ── 6. Content Container ──────────────────────────────────── */
.content-container {
    width:           100%;
    max-width:       1100px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    z-index:         2;
}

/* ── 7. Typography ─────────────────────────────────────────── */
h1 {
    font-family:    var(--f-display);
    font-size:      clamp(4rem, 12vw, 8rem);
    line-height:    1;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin-bottom:  1.5rem;
    text-align:     center;
    color:          var(--text-primary);
}

h2 {
    font-size:      0.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom:  2rem;
    color:          var(--accent);
    text-align:     center;
}

p {
    font-size:   1rem;
    line-height: 1.8;
    color:       var(--text-secondary);
    max-width:   800px;
    text-align:  center;
    font-weight: 400;
}

strong {
    color: var(--text-primary);
}

.highlight {
    color: var(--accent);
}

/* ── 8. CTA Button ─────────────────────────────────────────── */
.cta-btn {
    display:         inline-block;
    margin-top:      3rem;
    padding:         1rem 2.5rem;
    background:      var(--accent);
    color:           #ffffff;
    border-radius:   9999px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.1em;
    text-decoration: none;
    font-size:       0.8rem;
    box-shadow:      0 10px 20px rgba(59, 130, 246, 0.20);
    transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-btn:hover {
    transform:  translateY(-2px);
    background: var(--btn-hover);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.30);
}

/* ── 9. Theme Toggle ───────────────────────────────────────── */
.theme-toggle {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-slate);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

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

.theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sun-icon { display: none; }
.moon-icon { display: none; }

[data-theme="dark"] .sun-icon { display: block; }
[data-theme="light"] .moon-icon { display: block; }
:root:not([data-theme]) .sun-icon { display: block; } /* Default dark */

/* ── 10. Slide Decorative Labels ───────────────────────────── */
.slide-num {
    position:    absolute;
    bottom:      3rem;
    left:        3rem;
    font-family: var(--f-mono);
    font-size:   0.8rem;
    color:       var(--text-muted);
    font-weight: 700;
    z-index:     2;
}

.portfolio-ver {
    position:    absolute;
    bottom:      3rem;
    right:       3rem;
    font-family: var(--f-mono);
    font-size:   0.7rem;
    color:       var(--text-muted);
    text-align:  right;
    line-height: 1.5;
    z-index:     2;
}

/* ── 11. Skills Grid ───────────────────────────────────────── */
.skills-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   1.5rem;
    width:                 100%;
    margin-top:            2rem;
}

.skill-card {
    background:    var(--bg-slate);
    padding:       1.5rem;
    border-radius: 16px;
    border:        1px solid var(--border);
    text-align:    left;
    transition:    all 0.3s ease;
}

.skill-card:hover {
    border-color: var(--accent);
    transform:    translateY(-4px);
}

.skill-card h3 {
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--accent);
    margin-bottom:  0.75rem;
}

.skill-card p {
    text-align:  left;
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--text-secondary);
    max-width:   none;
}

/* ── 12. Projects List ─────────────────────────────────────── */
.projects-list {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    width:          100%;
    margin-top:     1.5rem;
}

.project-card {
    background:      var(--bg-slate);
    border:          1px solid var(--border);
    border-radius:   12px;
    padding:         1.5rem 2rem;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             2rem;
    text-align:      left;
    transition:      all 0.3s ease;
}

.project-card:hover {
    border-color: var(--accent);
    background:   var(--bg-accent);
}

.project-info {
    flex: 1;
}

.project-card h3 {
    font-size:     1.25rem;
    font-weight:   700;
    font-style:    italic;
    color:         var(--text-primary);
    margin-bottom: 0.25rem;
}

.project-card p {
    text-align: left;
    font-size:  0.875rem;
    color:      var(--text-secondary);
    max-width:  none;
}

.project-meta {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
}

.project-link {
    font-family:     var(--f-mono);
    color:           var(--accent);
    text-decoration: none;
    font-size:       0.8rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    white-space:     nowrap;
    transition:      opacity 0.2s ease;
}

.project-link:hover {
    opacity: 0.75;
}

.tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.35rem;
}

.tag {
    font-family:    var(--f-mono);
    font-size:      0.7rem;
    padding:        0.25rem 0.75rem;
    border-radius:  4px;
    background:     var(--bg-accent);
    border:         1px solid var(--border);
    color:          var(--text-secondary);
    display:        inline-block;
}

/* ── 13. Contact Section ───────────────────────────────────── */
.contact-grid {
    display:               flex;
    justify-content:       center;
    flex-wrap:             wrap;
    gap:                   4rem;
    margin-top:            3rem;
    width:                 100%;
}

.contact-item {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    text-align:     center; /* Centered for visual balance */
}

.contact-item span {
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:          var(--text-muted);
    font-weight:    700;
}

.contact-item a {
    color:           var(--text-primary);
    text-decoration: none;
    font-size:       0.9rem;
    font-weight:     500;
    transition:      color 0.3s ease;
}

.contact-item a:hover {
    color: var(--accent);
}

/* ── 14. Footer ────────────────────────────────────────────── */
footer {
    margin-top: 4rem;
}

.footer-copy {
    font-family: var(--f-mono);
    font-size:   0.7rem;
    opacity:     0.3;
    text-align:  center;
}

/* ── 15. Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── 16. Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    h1 { font-size: 6rem; }

    .project-card {
        flex-direction: column;
        align-items:    flex-start;
        gap:            1rem;
    }

    .project-meta {
        width:           100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    h1      { font-size: 4rem; }
    section { padding:   2rem; }

    .side-nav     { display: none; }
    .portfolio-ver { display: none; }
    .theme-toggle  { top: 1.5rem; right: 1.5rem; }

    .contact-grid {
        flex-direction: column;
        gap: 1.5rem;
    }
}