/* ======================== MOBILE ENHANCEMENTS ======================== */

/* Improved touch interactions */
@media (max-width: 768px) {
    /* Better button interactions for touch */
    .cta-button, .cta-button-outline {
        position: relative !important;
        overflow: hidden !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        user-select: none !important;
    }

    .cta-button:active, .cta-button-outline:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Add ripple effect for buttons */
    .cta-button::after, .cta-button-outline::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.3) !important;
        transform: translate(-50%, -50%) !important;
        transition: width 0.3s, height 0.3s !important;
        pointer-events: none !important;
    }

    .cta-button:active::after, .cta-button-outline:active::after {
        width: 200px !important;
        height: 200px !important;
    }

    /* Smooth scrolling for mobile */
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Better text selection on mobile */
    * {
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
    }

    button, .cta-button, .cta-button-outline {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }

    /* Improved image loading for mobile */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Better video handling on mobile */
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Improved focus states for accessibility */
    .cta-button:focus,
    .cta-button-outline:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #5DE3E2 !important;
        outline-offset: 2px !important;
    }

    /* Loading states for images */
    img[loading="lazy"] {
        opacity: 0 !important;
        transition: opacity 0.3s !important;
    }

    img[loading="lazy"].loaded {
        opacity: 1 !important;
    }

    /* Optimize animations for mobile performance */
    .portfolio-item,
    .member-card,
    .product-slide,
    .our-goal {
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: transform !important;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Dark mode improvements for mobile */
    @media (prefers-color-scheme: dark) {
        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            background: #1a1a1a;
            border-color: #444;
            color: #fff;
        }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .hero h1,
        .our-goal h2,
        .portfolio-preview h2,
        .store-content h2,
        .product-teaser h2 {
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .cta-button,
        .cta-button-outline {
            border-width: 3px;
        }
    }

    /* Better spacing for mobile readability */
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
        margin-bottom: 0.5em;
    }

    p {
        line-height: 1.6;
        margin-bottom: 1em;
    }

    /* Improved mobile navigation */
    .floating-logo {
        transition: transform 0.3s ease;
    }

    .floating-logo:active {
        transform: scale(0.95);
    }

    /* Better mobile menu alternative (if needed) */
    .mobile-menu-hint {
        position: fixed;
        top: 20px;
        right: 20px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 12px;
        z-index: 1000;
        display: none;
    }

    /* Show menu hint when needed */
    body.show-menu-hint .mobile-menu-hint {
        display: block;
        animation: fadeInOut 3s ease-in-out;
    }

    @keyframes fadeInOut {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }

    /* Optimize for PWA */
    .pwa-install-prompt {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background: linear-gradient(135deg, #ff1616, #5DE3E2);
        color: white;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        z-index: 1000;
        display: none;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    .pwa-install-prompt.show {
        display: block;
        animation: slideUp 0.5s ease-out;
    }

    .pwa-install-button {
        background: white;
        color: #ff1616;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 10px;
        cursor: pointer;
    }

    /* Better mobile performance */
    .hero,
    .portfolio-preview,
    .our-goal,
    .store-cta,
    .product-teaser {
        contain: layout style paint;
    }

    /* Improved loading experience */
    .loading-skeleton {
        background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ======================== WEB DEVELOPMENT INFO PANEL ======================== */
    
    /* Web Development Info Panel - Only visible on mobile */
    .webdev-info-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
        padding: 12px 20px !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        box-shadow: 0 2px 8px rgba(93, 227, 226, 0.3) !important;
        animation: slideInFromTop 0.6s ease-out !important;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
        border-radius: 10px;
    }

    .webdev-info-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 400px !important;
    }

    .webdev-info-text {
        color: #fff !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        flex-grow: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .webdev-highlight {
        font-weight: 700 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
    }

    .webdev-info-text .webdev-icon {
        font-size: 20px !important;
        vertical-align: middle !important;
        margin-left: 2px !important;
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
        filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)) !important;
        animation: pulse-glow 2s ease-in-out infinite !important;
    }

    @keyframes pulse-glow {
        0%, 100% {
            filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)) !important;
        }
        50% {
            filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) !important;
        }
    }

    .webdev-info-arrow {
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin-left: 15px !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    .webdev-info-arrow:hover,
    .webdev-info-arrow:active {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.1) !important;
    }

    .webdev-info-arrow .material-icons {
        color: #fff !important;
        font-size: 20px !important;
        font-weight: bold !important;
    }

    @keyframes slideInFromTop {
        0% {
            transform: translateY(-100%) !important;
            opacity: 0 !important;
        }
        100% {
            transform: translateY(0) !important;
            opacity: 1 !important;
        }
    }

    /* Smooth transition for hero section when panel is present */
    .hero {
        margin-top: 0 !important;
        padding-top: 60px !important;
    }
}

/* Hide the panel on desktop */
@media (min-width: 769px) {
    .webdev-info-panel {
        display: none !important;
    }
}

/* ======================== END MOBILE ENHANCEMENTS ======================== */