/* Base & Scroll Fixes */
html, body { 
    margin: 0; padding: 0; 
    width: 100%; min-height: 100vh;
    background-color: transparent; /* FIXED: Transparent body to show canvas */
    color: white; 
    overflow-x: hidden; 
    overflow-y: auto; /* Ensure Vertical Scroll works */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
}

/* 3D Background - FIX for Mobile Touch */
#canvas-container { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    z-index: -2; 
    background-color: #000; /* Fallback color */
    pointer-events: none; /* Allows touch to pass through */
}

/* Dark Overlay */
#bg-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    z-index: -1; 
    background: rgba(0, 0, 0, 0.4); /* Reduced opacity for better visibility of animation */
    pointer-events: none;
}

/* Desktop Layout (Horizontal) */
.horizontal-container { width: 500%; display: flex; flex-wrap: nowrap; overscroll-behavior: none; }
.panel { box-sizing: border-box; width: 100vw; height: 100vh; position: relative; }

/* Glassmorphism */
.glass-nav {
    background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.glass-card {
    background: rgba(15, 15, 15, 0.7); backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Typography */
.glow-text { text-shadow: 0 0 30px rgba(0, 240, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.2); }

/* Navbar Pill */
.nav-pill { 
    font-family: 'Inter', sans-serif; font-weight: 600; transition: all 0.3s ease; white-space: nowrap;
}
.nav-pill:hover { background: rgba(0, 240, 255, 0.15); color: #00f0ff; transform: translateY(-1px); }
.contact-btn { background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.2); color: #00f0ff; }
.contact-btn:hover { background: rgba(0, 240, 255, 0.2); }

/* Elements */
.icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.project-card {
    position: relative; border-radius: 1rem; overflow: hidden;
    background: rgba(20, 20, 20, 0.4); border: 1px solid rgba(255, 255, 255, 0.05);
    aspect-ratio: 16/9; transition: all 0.5s ease;
}
.project-card:hover { transform: translateY(-5px) scale(1.02); border-color: #00f0ff; }

.skill-pill {
    padding: 0.3rem 0.9rem; background: rgba(255, 255, 255, 0.1); border-radius: 0.5rem;
    font-size: 0.9rem; color: #e5e5e5; transition: 0.2s; display: inline-block; margin: 3px;
}
.skill-pill:hover { background: #00f0ff; color: black; font-weight: bold; }

.timeline-item { border-left: 2px solid rgba(255, 255, 255, 0.1); padding-left: 1.5rem; padding-bottom: 2rem; position: relative; }
.timeline-item:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
.timeline-dot { position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; }
.dot-active { background: #00f0ff; box-shadow: 0 0 10px #00f0ff; }
.dot-past { background: #6b7280; }

/* Form Inputs */
.input-field {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem; padding: 1rem 1.2rem;
    color: white; font-family: 'Inter', sans-serif; font-size: 1rem;
    outline: none; transition: all 0.3s ease; width: 100%;
}
.input-field:focus { border-color: #00f0ff; box-shadow: 0 0 15px rgba(0, 240, 255, 0.1); background: rgba(0, 0, 0, 0.6) !important; }
.input-field::placeholder { color: rgba(255, 255, 255, 0.4); }

/* Social Icons */
.social-btn {
    width: 3rem; height: 3rem; border-radius: 50%;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; transition: all 0.3s ease;
}
.social-btn:hover { background: #00f0ff; color: black; transform: scale(1.1); }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

/* --- RESPONSIVE LOGIC (Desktop & Mobile Fix) --- */

/* ১. ল্যাপটপ/পিসি-র জন্য (Horizontal Scroll) */
@media (min-width: 769px) {
    .horizontal-container { width: 500%; display: flex; flex-wrap: nowrap; height: 100vh; }
    .panel { width: 100vw; height: 100vh; }
}

/* ২. মোবাইল/ট্যাবলেটের জন্য (Vertical Scroll - Android Fix) */
@media (max-width: 768px) {
    
    /* বডি এবং এইচটিএমএল আনলক করা (Android Fix) */
    html, body {
        overflow-x: hidden !important;
        overflow-y: scroll !important; /* Force Scroll */
        height: auto !important;
        min-height: 100vh !important;
        position: static !important;
        touch-action: pan-y !important; /* Vertical swipe allow */
        -webkit-overflow-scrolling: touch;
    }

    /* ক্যানভাস ব্যাকগ্রাউন্ড যেন টাচ না আটকায় */
    #canvas-container, #bg-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none !important;
        z-index: -10;
    }

    /* মেইন কন্টেইনার ফিক্স */
    .horizontal-container { 
        width: 100% !important; 
        display: block !important;
        height: auto !important; 
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
    }

    /* প্যানেল/সেকশন ফিক্স */
    .panel { 
        width: 100% !important; 
        height: auto !important; 
        min-height: 100vh; 
        padding-top: 100px !important; 
        padding-bottom: 80px !important; 
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* ফন্ট সাইজ এডজাস্টমেন্ট */
    nav { width: 95% !important; }
    h1 { font-size: 3rem !important; }
    h2 { font-size: 2.2rem !important; }
}

/* --- FULL CAPSULE BLINKING ANIMATION --- */
@keyframes capsule-glow {
    0% {
        box-shadow: 0 0 5px rgba(0, 240, 255, 0.2), inset 0 0 5px rgba(0, 240, 255, 0.1);
        border-color: rgba(0, 240, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 240, 255, 0.6), inset 0 0 10px rgba(0, 240, 255, 0.2);
        border-color: #00f0ff; /* Border becomes bright cyan */
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 240, 255, 0.2), inset 0 0 5px rgba(0, 240, 255, 0.1);
        border-color: rgba(0, 240, 255, 0.3);
    }
}

.status-badge {
    /* Base Styles */
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #00f0ff;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.3);
    
    /* Animation applied to the whole box */
    animation: capsule-glow 2s infinite ease-in-out;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #00f0ff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 5px #00f0ff; /* Static glow for the dot */
}