/**
 * ===============================
 * MOBILE WORK IN PROGRESS OVERLAY
 * ===============================
 * 
 * PURPOSE: Styles for mobile-only "work in progress" message overlay
 * 
 * FUNCTIONALITY:
 * - Creates full-screen overlay that covers entire viewport
 * - Uses cyberpunk theme matching portfolio design
 * - Only appears on mobile devices (≤768px width)
 * - Provides professional user experience for mobile visitors
 * 
 * CALLED BY: 
 * - index.html inline script (primary)
 * - js/mobile-work-in-progress.js (fallback)
 * 
 * DEPENDENCIES: None (self-contained styles)
 * 
 * BROWSER SUPPORT: All modern browsers
 * RESPONSIVE: Mobile-first, desktop-hidden
 */

/* ===== MAIN OVERLAY CONTAINER ===== */
/* Full-screen fixed positioning overlay */
.mobile-work-progress {
    /* POSITIONING: Fixed to viewport, covers entire screen */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* BACKGROUND: Cyberpunk gradient matching portfolio theme */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important;
    
    /* LAYOUT: Flexbox for perfect centering */
    display: none !important; /* Hidden by default - shown via JavaScript */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* STACKING: Highest z-index to ensure overlay appears above all content */
    z-index: 99999 !important;
    
    /* STYLING: Text and spacing */
    color: #fff !important;
    text-align: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    
    /* VISIBILITY: Force visible when shown */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== OVERLAY VISIBILITY STATE ===== */
/* When JavaScript adds 'show' class, overlay becomes visible */
.mobile-work-progress.show {
    display: flex !important; /* Override display:none */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== CONTENT CONTAINER ===== */
/* Wrapper for all overlay content with responsive width */
.progress-content {
    max-width: 350px; /* Limit width for readability */
    width: 100%;
    animation: fadeInUp 0.8s ease-out; /* Smooth entrance animation */
}

/* ===== ANIMATED ICON ===== */
/* Large animated icon at top of overlay */
.progress-icon {
    font-size: 4rem; /* Large size for visibility */
    color: #00ffff; /* Cyberpunk cyan color */
    margin-bottom: 1.5rem;
    animation: pulse 2s infinite; /* Continuous pulse animation */
    text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff; /* Glowing effect */
}

/* ===== MAIN TITLE ===== */
/* "Work in Progress" heading with cyberpunk styling */
.progress-title {
    font-family: 'Orbitron', monospace; /* Cyberpunk font */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #00ffff; /* Matching cyan color */
    text-transform: uppercase; /* Professional appearance */
    letter-spacing: 2px; /* Spaced lettering */
    text-shadow: 0 0 10px #00ffff; /* Subtle glow */
    animation: glow 2s ease-in-out infinite alternate; /* Glowing animation */
}

/* ===== MAIN MESSAGE TEXT ===== */
/* Primary description explaining mobile development status */
.progress-message {
    font-size: 1.1rem;
    line-height: 1.6; /* Good readability */
    margin-bottom: 2rem;
    color: #e0e0e0; /* Light gray for contrast */
    opacity: 0.9; /* Slight transparency */
}

/* ===== RECOMMENDATION NOTE ===== */
/* Secondary text recommending desktop usage */
.progress-note {
    font-size: 0.9rem;
    color: #bbb; /* Muted color for secondary info */
    margin-bottom: 2rem;
    font-style: italic; /* Emphasis styling */
}

/* ===== CALL-TO-ACTION BUTTON ===== */
/* "Open on Desktop" button with cyberpunk styling */
.desktop-redirect-btn {
    /* BACKGROUND: Gradient matching theme colors */
    background: linear-gradient(45deg, #00ffff, #0080ff);
    border: none;
    padding: 12px 24px;
    border-radius: 25px; /* Rounded pill shape */
    
    /* TEXT STYLING */
    color: #000; /* Dark text on bright background */
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* INTERACTION */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth hover transitions */
    
    /* VISUAL EFFECTS */
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3); /* Glowing shadow */
}

/* ===== BUTTON HOVER EFFECTS ===== */
/* Enhanced styling when user hovers over button */
.desktop-redirect-btn:hover {
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.5); /* Enhanced glow */
    background: linear-gradient(45deg, #00d4ff, #0066cc); /* Slightly different gradient */
}

/* ===== FOOTER MESSAGE ===== */
/* Thank you message at bottom of overlay */
.progress-footer {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #888; /* Muted color */
    opacity: 0.7; /* Subtle appearance */
}

/* ===== ANIMATIONS ===== */
/* CSS keyframe animations for visual effects */

/* Fade in from bottom animation for smooth overlay entrance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Start below final position */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at normal position */
    }
}

/* Continuous pulse animation for icon */
@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.1); /* Slightly larger */
    }
}

/* Glowing text effect animation */
@keyframes glow {
    from {
        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
    }
    to {
        text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
    }
}

/* ===== RESPONSIVE DESIGN ===== */
/* Media queries for different screen sizes */

/* DESKTOP/TABLET OVERRIDE: Force hide overlay on larger screens */
@media (min-width: 769px) {
    .mobile-work-progress {
        display: none !important; /* Never show on desktop */
    }
}

/* MOBILE DEVICES: Ensure overlay shows properly */
@media (max-width: 768px) {
    .mobile-work-progress.show {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important; /* Full viewport width */
        height: 100vh !important; /* Full viewport height */
        z-index: 99999 !important;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important;
    }
}

/* SMALL MOBILE DEVICES: Adjusted sizing for smaller screens */
@media (max-width: 480px) {
    .progress-title {
        font-size: 1.5rem; /* Smaller title */
    }
    
    .progress-message {
        font-size: 1rem; /* Smaller message text */
    }
    
    .progress-icon {
        font-size: 3rem; /* Smaller icon */
    }
    
    .desktop-redirect-btn {
        padding: 10px 20px; /* Smaller button padding */
        font-size: 0.9rem; /* Smaller button text */
    }
}

/* VERY SMALL DEVICES: Further optimizations for tiny screens */
@media (max-width: 360px) {
    .progress-content {
        max-width: 300px; /* Narrower content */
    }
    
    .progress-title {
        font-size: 1.3rem; /* Even smaller title */
    }
    
    .progress-message {
        font-size: 0.95rem; /* Even smaller message */
    }
}