/*** MOBILE VIEW ENHANCEMENTS ***/

/* ===== MOBILE BREAKPOINTS ===== */

/* Large Mobile / Small Tablet (max 991px) */
@media (max-width: 991px) {
    /* Hero Section */
    .terminal-window {
        margin-bottom: 30px;
    }

    .profile-container-3d {
        min-height: 400px;
        margin-top: 30px;
    }

    .profile-img-3d {
        width: 280px;
        height: 280px;
    }

    .ring-1, .ring-2 {
        width: 320px;
        height: 320px;
        margin-left: -160px;
        margin-top: -160px;
    }

    .code-block {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    .dev-stat {
        font-size: 0.8rem;
        padding: 10px 15px;
    }

    .stat-value {
        font-size: 2rem !important;
    }

    /* Portfolio Filters */
    #portfolio-flters {
        text-align: center;
    }

    #portfolio-flters li {
        font-size: 0.9rem;
        padding: 10px 20px;
        margin: 5px;
    }

    /* About Section */
    #about .years {
        width: 100%;
        margin-bottom: 20px;
    }

    #about .years .display-1 {
        font-size: 4.5rem !important;
    }
}

/* Medium Mobile (max 768px) */
@media (max-width: 768px) {
    /* Navbar */
    .navbar {
        padding: 15px 0;
    }

    .navbar-brand h1 {
        font-size: 2rem !important;
        margin: 0;
    }

    /* Hero Section */
    .code-output {
        font-size: 1.3rem !important;
    }

    .terminal-body {
        padding: 20px 15px;
    }

    .terminal-line {
        font-size: 0.9rem;
    }

    .terminal-window {
        border-radius: 10px;
    }

    .profile-img-3d {
        width: 250px;
        height: 250px;
    }

    .ring-1, .ring-2 {
        width: 280px;
        height: 280px;
        margin-left: -140px;
        margin-top: -140px;
    }

    .hex {
        width: 60px;
        height: 60px;
    }

    .code-block {
        display: none; /* Hide floating code blocks on mobile */
    }

    .dev-stat {
        position: relative !important;
        margin: 10px auto;
        display: inline-block;
    }

    .stat-1, .stat-2 {
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* About Section */
    #about {
        padding: 40px 0;
    }

    #about .years {
        padding: 30px 25px;
        margin-bottom: 30px;
    }

    #about .years .display-1 {
        font-size: 4rem !important;
    }

    #about .years h5 {
        font-size: 1.1rem !important;
    }

    #about .years::before,
    #about .years::after {
        font-size: 2rem;
    }

    #about .col-lg-6:first-child h3 {
        font-size: 1.4rem !important;
        padding-left: 20px;
    }

    #about h5.border-end {
        font-size: 1.1rem !important;
        padding: 15px 20px !important;
        text-align: center;
    }

    #about p li {
        font-size: 0.95rem;
        padding: 6px 0;
    }

    #about .text-primary.fw-bold {
        font-size: 2.5rem !important;
    }

    /* Skills Section */
    #skill::before {
        font-size: 2.5rem;
        letter-spacing: 15px;
    }

    #skill .nav-pills {
        padding: 8px;
    }

    #skill .nav-pills .nav-link {
        font-size: 0.9rem;
        padding: 10px 15px;
        margin: 3px;
    }

    #skill .tab-content .col-sm-6 {
        padding: 20px 15px;
        margin-bottom: 15px;
    }

    #skill .progress {
        height: 30px;
    }

    #skill .progress-bar span {
        font-size: 0.9rem;
    }

    /* Services Section */
    .service-item {
        clip-path: none !important;
        border-radius: 15px;
        padding: 40px 30px;
        margin-bottom: 20px;
    }

    .service-item i {
        font-size: 2.5rem !important;
    }

    .service-item h5 {
        font-size: 1.2rem !important;
    }

    /* Portfolio Section */
    #project h1.display-5 {
        font-size: 2rem !important;
        margin-bottom: 20px;
    }

    #portfolio-flters li {
        font-size: 0.85rem;
        padding: 8px 15px;
        margin: 4px;
        border-radius: 20px;
    }

    #portfolio-flters li::before,
    #portfolio-flters li::after {
        font-size: 1rem;
        margin: 0 5px;
    }

    .portfolio-item {
        margin-bottom: 20px;
    }

    /* Contact Section */
    #contact::before {
        font-size: 3rem;
        opacity: 0.02;
    }

    #contact h1.display-5 {
        font-size: 2rem !important;
        margin-bottom: 20px;
    }

    #contact .col-lg-5 {
        margin-bottom: 30px;
    }

    #contact p.mb-2 {
        font-size: 1rem;
        padding-left: 25px;
    }

    #contact p.fw-bold {
        font-size: 1.2rem;
        padding: 12px 15px;
    }

    #contact .btn-square {
        width: 55px !important;
        height: 55px !important;
    }

    #contact .btn-square i {
        font-size: 1.5rem !important;
    }

    #contact .d-flex.pt-2::before,
    #contact .d-flex.pt-2::after {
        display: none; /* Hide floating particles on mobile */
    }

    /* Say Hello Button */
    #contact .btn-primary {
        padding: 12px 30px;
        font-size: 1rem;
    }

    /* Scroll Progress Bar */
    .scroll-progress {
        height: 3px;
    }
}

/* Small Mobile (max 576px) */
@media (max-width: 576px) {
    /* General Typography */
    h1.display-5 {
        font-size: 1.8rem !important;
    }

    h2, h3 {
        font-size: 1.3rem !important;
    }

    /* Navbar */
    .navbar-brand h1 {
        font-size: 1.5rem !important;
    }

    /* Hero Section */
    .code-output {
        font-size: 1.1rem !important;
    }

    .output-arrow {
        font-size: 1.1rem !important;
    }

    .cursor-blink {
        font-size: 1.1rem !important;
    }

    .terminal-header {
        padding: 10px 15px;
    }

    .terminal-dot {
        width: 10px;
        height: 10px;
    }

    .terminal-title {
        font-size: 12px;
    }

    .terminal-body {
        padding: 15px 10px;
    }

    .terminal-line {
        font-size: 0.85rem;
        margin: 10px 0;
    }

    .terminal-prompt {
        font-size: 0.9rem;
    }

    .btn-download {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .download-icon {
        font-size: 1.2rem;
    }

    .profile-img-3d {
        width: 200px;
        height: 200px;
    }

    .ring-1, .ring-2 {
        display: none; /* Hide orbit rings on small mobile */
    }

    .hex {
        display: none; /* Hide hexagons on small mobile */
    }

    .profile-container-3d {
        min-height: 300px;
    }

    /* About Section */
    #about .years {
        padding: 25px 20px;
    }

    #about .years .display-1 {
        font-size: 3.5rem !important;
    }

    #about .years h5 {
        font-size: 1rem !important;
        letter-spacing: 2px;
    }

    #about .years::before,
    #about .years::after {
        font-size: 1.5rem;
    }

    #about .col-lg-6:first-child h3 {
        font-size: 1.2rem !important;
        padding-left: 15px;
        border-left-width: 3px;
    }

    #about h5.border-end {
        font-size: 1rem !important;
        padding: 12px 15px !important;
    }

    #about p {
        font-size: 0.9rem;
    }

    #about p li {
        font-size: 0.9rem;
        padding-left: 25px;
    }

    #about .text-primary.fw-bold {
        font-size: 2rem !important;
    }

    /* Skills Section */
    #skill .nav-pills .nav-link {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    #skill .tab-content .col-sm-6 {
        padding: 15px 12px;
    }

    #skill h3 {
        font-size: 1.2rem !important;
    }

    #skill .progress {
        height: 25px;
    }

    #skill .progress-bar span {
        font-size: 0.85rem;
    }

    /* Services Section */
    .service-item {
        padding: 30px 20px;
    }

    .service-item i {
        font-size: 2rem !important;
        margin-bottom: 15px;
    }

    .service-item h5 {
        font-size: 1.1rem !important;
        margin-bottom: 10px;
    }

    .service-item p {
        font-size: 0.9rem;
    }

    /* Portfolio Section */
    #project h1.display-5 {
        font-size: 1.6rem !important;
    }

    #portfolio-flters {
        margin-bottom: 20px;
    }

    #portfolio-flters li {
        font-size: 0.8rem;
        padding: 8px 12px;
        margin: 3px;
    }

    #portfolio-flters li::before,
    #portfolio-flters li::after {
        display: none; /* Hide brackets on very small screens */
    }

    /* Contact Section */
    #contact p.mb-2 {
        font-size: 0.95rem;
        padding-left: 20px;
    }

    #contact p.fw-bold {
        font-size: 1.1rem;
        padding: 10px 12px;
    }

    #contact p.fw-bold::after {
        font-size: 1.2rem;
    }

    #contact .btn-square {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
    }

    #contact .btn-square i {
        font-size: 1.3rem !important;
    }

    #contact hr {
        margin: 15px 0;
    }

    #contact .btn-primary {
        padding: 10px 25px;
        font-size: 0.95rem;
    }
}

/* Extra Small Mobile (max 390px) */
@media (max-width: 390px) {
    /* Hero Section */
    .code-output {
        font-size: 1rem !important;
    }

    .terminal-body {
        padding: 12px 8px;
    }

    .btn-download {
        padding: 10px 15px;
        font-size: 0.85rem;
    }

    .download-size {
        display: none; /* Hide file size on very small screens */
    }

    .profile-img-3d {
        width: 180px;
        height: 180px;
    }

    /* About Section */
    #about .years .display-1 {
        font-size: 3rem !important;
    }

    #about .col-lg-6:first-child h3 {
        font-size: 1.1rem !important;
    }

    #about p li {
        font-size: 0.85rem;
    }

    /* Portfolio Filters */
    #portfolio-flters li {
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    /* Contact */
    #contact p.fw-bold {
        font-size: 1rem;
    }

    #contact .btn-square {
        width: 45px !important;
        height: 45px !important;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .hover-lift:hover {
        transform: none;
    }

    /* Make buttons easier to tap */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    #portfolio-flters li {
        min-height: 40px;
        touch-action: manipulation;
    }

    #contact .btn-square {
        min-width: 50px !important;
        min-height: 50px !important;
    }

    /* Reduce animation intensity on mobile */
    .animate-on-scroll,
    .float-animation,
    .glitch-text {
        animation-duration: 0.5s !important;
    }

    /* Simplify complex animations */
    .ripple::after,
    .pulse-on-hover:hover {
        animation: none;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .profile-container-3d {
        min-height: 250px;
    }

    .profile-img-3d {
        width: 200px;
        height: 200px;
    }

    #about .years {
        padding: 20px;
    }

    #about .years .display-1 {
        font-size: 3rem !important;
    }

    .terminal-body {
        padding: 15px;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS FOR MOBILE ===== */
@media (max-width: 768px) {
    /* Reduce complexity of effects */
    #about::before,
    #skill::before,
    #service::before {
        display: none;
    }

    /* Simplify shadows */
    .portfolio-item:hover,
    .service-item:hover,
    #about .years {
        box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3) !important;
    }

    /* Disable particle effects */
    .particles,
    .particle-item {
        display: none !important;
    }

    /* Reduce matrix canvas opacity */
    #matrix-canvas {
        opacity: 0.05 !important;
    }

    /* Simplify gradient backgrounds */
    .glass-card {
        backdrop-filter: blur(10px) !important;
    }

    /* Optimize scroll effects */
    .scroll-progress {
        display: block;
    }
}

/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.98);
        border: 2px solid rgba(255, 215, 0, 0.5);
        border-radius: 15px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
    }

    .navbar-nav .nav-link {
        padding: 12px 20px;
        margin: 5px 0;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        border-left-color: #FFD700;
        background: rgba(255, 215, 0, 0.1);
        padding-left: 30px;
    }
}

/* ===== ENHANCED VISITOR COUNTER RESPONSIVE ===== */
@media (max-width: 768px) {
    #visitor-terminal {
        bottom: 70px !important;
        right: 10px !important;
    }

    #visitor-terminal > div {
        min-width: 240px !important;
    }

    #visitor-terminal #visitor-count-display {
        font-size: 2rem !important;
    }

    #visitor-terminal [style*="padding: 20px"] {
        padding: 15px !important;
    }
}

@media (max-width: 576px) {
    #visitor-terminal {
        bottom: 60px !important;
        right: 5px !important;
    }

    #visitor-terminal > div {
        min-width: 200px !important;
    }

    #visitor-terminal #visitor-count-display {
        font-size: 1.8rem !important;
    }

    #visitor-terminal [style*="analytics.log"] {
        font-size: 0.7rem !important;
    }

    #visitor-terminal [style*="padding: 20px"] {
        padding: 12px !important;
    }

    #visitor-terminal img {
        max-width: 180px !important;
        margin: 0 auto;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-progress,
    .scan-line,
    .particle-item {
        display: none !important;
    }
}