/* ===================================
   PINCHE CHUCHO - MOBILE OPTIMIZED CSS (V2)
   Consolidated mobile experience optimization, layout fixes, and pointer-event fixes.
   ================================== */

/* ===================================
   MOBILE VARIABLES AND BREAKPOINTS
   ================================== */
:root {
    --mobile-small: 480px;
    --mobile-medium: 768px;
    --mobile-large: 1024px;
    --mobile-touch-target: 44px;
    --mobile-gutter: 1rem;
}

/* ===================================
   GLOBAL MOBILE OPTIMIZATIONS
   ================================== */

/* Prevent horizontal scroll and optimize viewport */
/* MERGED FROM final-layout-fixes.css */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain; /* Prevents pull-to-refresh issues */
}

body {
    margin: 0;
    padding: 0;
    position: relative;
}

/* Global box-sizing and constraints */
@media screen and (max-width: 1024px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        max-width: 100vw;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Exception for elements that need to exceed viewport */
    .ticker,
    .ticker-wrap,
    .sparkle-container,
    #terminal-background,
    .matrix-bg,
    .floating-particles,
    .scanlines {
        max-width: none;
    }

    /* Force all media to respect viewport */
    /* MERGED FROM final-layout-fixes.css */
    img, iframe, video, embed, object {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}

/* ===================================
   MOBILE TYPOGRAPHY AND SPACING
   ================================== */

/* Small Mobile (320px - 480px) */
@media screen and (max-width: 480px) {
    html { font-size: 14px; }
    
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    .hero-section { padding: 1rem 0.5rem; }
    .section-container { padding: 1.5rem 0.75rem; }
}

/* Medium Mobile (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    html { font-size: 15px; }
    .hero-section { padding: 1.5rem 1rem; }
    .section-container { padding: 2rem 1rem; }
}

/* Large Mobile/Tablet (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    html { font-size: 16px; }
    .hero-section { padding: 2rem 1.5rem; }
    .section-container { padding: 2.5rem 1.5rem; }
}

/* ===================================
   POINTER EVENTS & TOUCH TARGETS
   MERGED FROM pointer-events-fixes.css
   ================================== */

@media (max-width: 1024px) {
    /* Ensure minimum touch target sizes and interactivity */
    button,
    .cta-button,
    a,
    input,
    select,
    textarea,
    [role="button"] {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        min-height: var(--mobile-touch-target) !important;
        min-width: var(--mobile-touch-target) !important;
        padding: 12px 16px;
        -webkit-tap-highlight-color: rgba(57, 255, 20, 0.3);
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Optimize form inputs for mobile */
    input,
    textarea,
    select {
        font-size: 16px; /* Prevent zoom on iOS */
        border-radius: 8px;
        padding: 12px 16px;
    }

    /* Decorative elements should not block interactions */
    .floating-particles, .particle, .enhanced-particle-container, .matrix-bg, .scanlines, .hero-overlay, #main-background-particles {
        pointer-events: none !important;
        touch-action: none !important;
        z-index: -1 !important;
    }
}

/* ===================================
   MOBILE SCROLL OPTIMIZATIONS
   ================================== */

@media screen and (max-width: 1024px) {
    /* Enhanced scroll behavior */
    html {
        scroll-behavior: smooth;
    }

    body {
        /* Optimize scroll performance */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        /* Prevent momentum scroll issues */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Hardware acceleration for smooth scrolling */
    .hero-section,
    .exchange-section,
    .tokens-section,
    .features-section,
    .section-container {
        transform: translateZ(0);
        /* will-change: scroll-position; removed to prevent rendering glitches */
        contain: layout style paint;
        backface-visibility: hidden;
        perspective: 1000px;
    }

    /* Optimize background elements for scroll */
    #terminal-background,
    .scanlines,
    .floating-particles,
    .matrix-bg,
    .sparkle-container {
        contain: strict;
        will-change: auto;
        transform: translateZ(0);
        opacity: 0.5;
        transition: opacity 0.3s ease;
    }

    /* Optimize images for scroll performance */
    img {
        will-change: auto;
        transform: translateZ(0);
    }

    img[loading="lazy"] {
        content-visibility: auto;
        contain-intrinsic-size: 300px 200px;
    }

    /* Optimize fixed elements */
    .ticker-wrap,
    .back-to-top-btn {
        will-change: transform;
        transform: translateZ(0);
    }

    /* Enhanced scroll performance during touch */
    body.scrolling .floating-particles,
    body.scrolling .matrix-bg,
    body.scrolling .scanlines {
        opacity: 0.2 !important;
        animation-play-state: paused !important;
    }
}


/* ===================================
   MOBILE LAYOUT FIXES
   MERGED FROM final-layout-fixes.css
   ================================== */

@media screen and (max-width: 1024px) {
    /* Fix hero section positioning */
    .hero-section {
        margin-top: -2rem;
        position: relative;
        z-index: 3;
        overflow: hidden;
    }

    .hero-visual {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-container-hero {
        width: 200px !important;
        height: 200px !important;
    }

    .logo-hero-img {
        max-width: 200px !important;
        max-height: 200px !important;
    }

    /* Optimize grid layouts */
    .grid-container,
    .tokens-grid,
    .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 var(--mobile-gutter);
    }

    /* Card optimizations */
    .token-card,
    .feature-card,
    .content-card {
        margin-bottom: 1rem;
        padding: 1.5rem;
        border-radius: 12px;
    }
}

/* Mobile layout for tokens grid - only for small mobile */
/* MERGED FROM final-layout-fixes.css */
@media (max-width: 768px) {
    .tokens-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    .token-card {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
    }
}


/* ===================================
   MOBILE NAVIGATION AND HEADER
   ================================== */

@media screen and (max-width: 1024px) {
    /* Optimize ticker for mobile */
    .ticker-wrap {
        height: 60px;
        z-index: 15 !important;
    }

    .ticker {
        font-size: 0.9rem;
        line-height: 60px;
    }

    /* Optimize footer ticker */
    .footer-ticker-container {
        padding: 1.5rem 0;
        overflow: hidden;
    }

    .footer-ticker-text {
        font-size: 1.8rem;
        animation-duration: 180s;
    }
}

/* ===================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ================================== */

@media screen and (max-width: 1024px) {
    /* Reduce animation complexity */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Optimize rendering */
    .animated-element {
        will-change: transform;
        backface-visibility: hidden;
        perspective: 1000px;
    }
}