* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------------- THEME VARIABLES ---------------- */

:root {
    /* LIGHT MODE: Original Sleek UI + Green Gradient Background */
    --bg-color: #f4fcf7; 
    --text-main: #0f172a; 
    --text-muted: #64748b; 
    
    --card-bg: rgba(255, 255, 255, 0.65); 
    --card-hover-bg: rgba(255, 255, 255, 1); 
    --card-border: #0f172a; 
    
    /* Neo-Brutalist Shadow Mechanics */
    --card-shadow: 4px 4px 0 #0f172a;
    --card-hover-shadow: 8px 8px 0 #0f172a;
    --card-active-shadow: 2px 2px 0 #0f172a;
    
    /* Diagonal Drag Hover */
    --hover-transform: translate(-4px, -4px);
    --active-transform: translate(-1px, -1px);
    
    /* Green Mesh Blobs */
    --blob-1: #d1fae5; 
    --blob-2: #a7f3d0; 
    --blob-3: #6ee7b7; 
    --blob-opacity: 0.8; 
    
    --noise-opacity: 0.05; 
    --icon-invert: 0; 
}

body:has(#theme-switch:checked) {
    /* DARK MODE: Smoky Emerald + Frosted Glass Aesthetic */
    --bg-color: #050d09; 
    --text-main: #f8fafc; 
    --text-muted: #94a3b8; 
    
    /* Frosted glass cards with delicate translucent borders */
    --card-bg: rgba(255, 255, 255, 0.03); 
    --card-hover-bg: rgba(255, 255, 255, 0.08); 
    --card-border: rgba(255, 255, 255, 0.1); 
    
    /* Cinematic Glass Glow Mechanics */
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --card-hover-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
    --card-active-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.4);
    
    /* Straight Float Hover (No diagonal dragging) */
    --hover-transform: translateY(-6px);
    --active-transform: translateY(0px);
    
    /* Smoky Emerald Mesh Blobs */
    --blob-1: #065f46; 
    --blob-2: #022c22; 
    --blob-3: #10b981; 
    --blob-opacity: 0.35; 
    
    --noise-opacity: 0.04; 
    --icon-invert: 1; 
}

/* ---------------- WHITESPACE & BACKGROUND ---------------- */

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: var(--bg-color);
    
    /* Upgraded Flex Mechanics: allows container to vertically center but scroll safely */
    display: flex;
    flex-direction: column; 
    min-height: 100vh;
    padding: 0 1.5rem; 
    
    color: var(--text-main);
    position: relative;
    
    /* Hides horizontal bleed, but ALLOWS scrolling vertically */
    overflow-x: hidden; 
    overflow-y: auto; 
    
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: var(--noise-opacity);
    pointer-events: none; 
    z-index: 9999;
    transition: opacity 0.8s ease;
}

/* ---------------- THE MESH GRADIENT ---------------- */

.mesh-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    opacity: var(--blob-opacity);
    animation: blobFloat 20s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transition: background-color 1s ease, opacity 1s ease;
}

.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--blob-1); }
.blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: var(--blob-2); animation-delay: -5s; }
.blob-3 { top: 40%; left: 50%; width: 40vw; height: 40vw; background: var(--blob-3); animation-delay: -10s; }

@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(5%, -5%) scale(1.1); }
    66% { transform: translate(-5%, 5%) scale(0.9); }
    100% { transform: translate(5%, 5%) scale(1.05); }
}

.container {
    width: 100%;
    max-width: 600px;
    text-align: center;
    position: relative;
    z-index: 10;
    
    /* Locks the container beautifully in the center of the flex body */
    margin: auto; 
    /* Massive top/bottom safe zones so scrolling never hits the fixed elements */
    padding: 100px 0; 
}

/* ---------------- INITIAL LOAD & LEVITATION ---------------- */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(35px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(0, 234, 100, 0.2); }
    70% { box-shadow: 0 0 0 15px rgba(0, 234, 100, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 234, 100, 0); }
}

@keyframes cornerPulse {
    to { box-shadow: 0 0 0 10px rgba(0, 234, 100, 0); }
}

@keyframes levitate {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* ---------------- PERIPHERAL FRAMING & PILL TOGGLE ---------------- */

.corner-element {
    position: fixed;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    line-height: 1.6;
    
    opacity: 0;
    animation: fadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
    z-index: 50;
    transition: color 0.6s ease;
}

.top-left {
    top: 35px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-right {
    top: 35px;
    right: 40px;
}

.bottom-right {
    bottom: 35px;
    right: 40px;
    text-align: right;
}

.theme-toggle-btn {
    cursor: pointer;
    width: 64px;
    height: 34px;
    border-radius: 34px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-toggle-btn:hover {
    transform: var(--hover-transform);
    box-shadow: var(--card-hover-shadow);
}

.theme-toggle-btn:active {
    transform: var(--active-transform);
    box-shadow: var(--card-active-shadow);
}

.theme-toggle-btn::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--text-main);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.8s ease;
    z-index: 1;
}

#theme-switch:checked ~ * .theme-toggle-btn::after {
    transform: translateX(30px);
}

.sun-icon, .moon-icon {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 2;
    transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sun-icon { left: 8px; color: var(--bg-color); }
.moon-icon { right: 8px; color: var(--text-main); }

#theme-switch:checked ~ * .sun-icon { color: var(--text-main); }
#theme-switch:checked ~ * .moon-icon { color: var(--bg-color); }

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #00EA64;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 234, 100, 0.4);
    animation: cornerPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* ---------------- FOOTER HUMOR ---------------- */

.footer {
    /* Flow natively underneath the links */
    margin-top: 80px;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0;
    pointer-events: none; 
    animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
    transition: color 0.8s ease;
    z-index: 50;
}

/* ---------------- PROFILE ---------------- */

.profile-section {
    margin-top: 20px; 
    margin-bottom: 30px;
    animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.avatar-container {
    display: inline-block;
    animation: levitate 4.5s ease-in-out infinite;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border);
    
    animation: pulseRing 3s infinite;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease;
}

.avatar-container:hover .avatar {
    transform: scale(1.08);
    animation-play-state: paused; 
}

.profile-section h2 {
    margin-top: 15px;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-main);
    transition: color 0.8s ease;
}

.description {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    transition: color 0.8s ease;
}

/* ---------------- LINKS ---------------- */

.links-heading {
    margin-bottom: 18px;
    font-size: .75rem;
    letter-spacing: .35em;
    color: var(--text-muted);
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    
    opacity: 0;
    animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    transition: color 0.8s ease;
}

.links {
    display: flex;
    flex-direction: column;
    gap: 14px; 
}

/* ---------------- BUTTONS ---------------- */

.link-button {
    position: relative;
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow);
    
    text-decoration: none;
    color: var(--text-main);
    
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.8s ease, 
                border-color 0.8s ease,
                box-shadow 0.8s ease,
                color 0.8s ease;

    opacity: 0;
    animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.link-button:nth-child(1) { animation-delay: 0.4s; }
.link-button:nth-child(2) { animation-delay: 0.55s; }
.link-button:nth-child(3) { animation-delay: 0.7s; }
.link-button:nth-child(4) { animation-delay: 0.85s; }
.link-button:nth-child(5) { animation-delay: 1.0s; }

.link-button img, 
.link-button span {
    position: relative;
    z-index: 3;
}

.link-button img {
    width: 24px;
    height: 24px;
    justify-self: start;
    filter: grayscale(100%) invert(var(--icon-invert));
    opacity: 0.7;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-button span {
    justify-self: center;
    font-weight: 600;
    font-size: 14px;
    font-family: "JetBrains Mono", monospace;
    transition: letter-spacing 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Smooth Variable Hover & Active Physics ---------- */

.link-button:hover {
    transform: var(--hover-transform);
    box-shadow: var(--card-hover-shadow);
    background: var(--card-hover-bg); 
    color: var(--text-main);
}

.link-button:hover span {
    letter-spacing: 0.04em;
}

.link-button:active {
    transform: var(--active-transform);
    box-shadow: var(--card-active-shadow);
    transition: all 0.1s ease;
}

/* ---------- Accent Line ---------- */

.link-button::before {
    content: "";
    position: absolute;
    left: 0; top: 0; width: 5px; height: 100%;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

/* ---------- The Brand Flood Effect ---------- */

.link-button::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.link-button:hover::after { transform: scaleX(1); }

/* ---------- Brand Colors ---------- */

.resume::before { background: #dc2626; }
.resume::after { background: rgba(220, 38, 38, 0.15); }

.linkedin::before { background: #0A66C2; }
.linkedin::after { background: rgba(10, 102, 194, 0.15); }

.github::before { background: #8a63d2; }
.github::after { background: rgba(138, 99, 210, 0.15); }

.leetcode::before { background: #FFA116; }
.leetcode::after { background: rgba(255, 161, 22, 0.15); }

.hackerrank::before { background: #00EA64; }
.hackerrank::after { background: rgba(0, 234, 100, 0.15); }

.link-button:hover::before { transform: scaleY(1); }

.resume:hover img,
.linkedin:hover img,
.github:hover img,
.leetcode:hover img,
.hackerrank:hover img {
    filter: grayscale(0%) invert(0);
    opacity: 1;
    transform: scale(1.15);
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px) {
    /* Hide the corner elements to maintain clean mobile UI. 
       Note: The footer will still display properly as part of the container now! */
    .top-left, .bottom-right { display: none; }
    
    .top-right { 
        top: 20px; 
        right: 20px; 
    }
}

@media (max-width: 600px) {
    .profile-section { margin-top: 45px; margin-bottom: 25px; }
    .profile-section h2 { font-size: 1.6rem; }
    .link-button { padding: 12px 18px; }
}