/* ===================================
   COMPREHENSIVE MOBILE DETECTION AND VIEWPORT CONFIGURATION
   ================================== */

/* Root variables for mobile breakpoints */
:root {
    --mobile-small: 480px;
    --mobile-medium: 768px;
    --mobile-large: 1024px;
    --tablet-portrait: 768px;
    --tablet-landscape: 1024px;
}

/* ===================================
   ENHANCED MOBILE DETECTION MEDIA QUERIES
   ================================== */

/* Small Mobile Devices (320px - 480px) */
@media screen and (max-width: 480px) {
    :root {
        --mobile-detected: true;
        --device-type: 'small-mobile';
    }
    
    html {
        font-size: 14px; /* Smaller base font for small screens */
    }
    
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* Medium Mobile Devices (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    :root {
        --mobile-detected: true;
        --device-type: 'medium-mobile';
    }
    
    html {
        font-size: 15px;
    }
}

/* Large Mobile Devices / Small Tablets (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    :root {
        --mobile-detected: true;
        --device-type: 'large-mobile';
    }
    
    html {
        font-size: 16px;
    }
}

/* ===================================
   TOUCH DEVICE DETECTION
   ================================== */

/* Primary touch device detection */
@media (hover: none) and (pointer: coarse) {
    :root {
        --touch-device: true;
        --interaction-type: 'touch';
    }
    
    /* Enhanced touch targets */
    button,
    .cta-button,
    .hero-cta,
    .back-to-top-btn,
    a[role="button"],
    input[type="button"],
    input[type="submit"] {
        min-height: 44px; /* Apple's recommended minimum touch target */
        min-width: 44px;
        padding: 12px 16px;
    }
    
    /* Remove hover effects on touch devices */
    * {
        -webkit-tap-highlight-color: rgba(57, 255, 20, 0.2);
    }
    
    /* Disable hover animations on touch devices */
    .hover-effect:hover,
    .card-hover:hover,
    .button-hover:hover {
        transform: none !important;
        transition: none !important;
    }
}

/* Fine pointer devices (mouse, trackpad) */
@media (hover: hover) and (pointer: fine) {
    :root {
        --touch-device: false;
        --interaction-type: 'mouse';
    }
}

/* Coarse pointer devices (touch, stylus) */
@media (pointer: coarse) {
    :root {
        --pointer-type: 'coarse';
    }
    
    /* Larger touch targets for coarse pointers */
    .interactive-element {
        padding: 16px;
        margin: 8px;
    }
}

/* ===================================
   ORIENTATION DETECTION AND HANDLING
   ================================== */

/* Portrait Orientation */
@media screen and (orientation: portrait) {
    :root {
        --orientation: 'portrait';
    }
    
    body {
        --viewport-height: 100vh;
        --viewport-height-small: 100svh; /* Small viewport height for mobile browsers */
        --viewport-height-large: 100lvh; /* Large viewport height */
        --viewport-height-dynamic: 100dvh; /* Dynamic viewport height */
    }
}

/* Landscape Orientation */
@media screen and (orientation: landscape) {
    :root {
        --orientation: 'landscape';
    }
    
    body {
        --viewport-height: 100vh;
        --viewport-height-small: 100svh;
        --viewport-height-large: 100lvh;
        --viewport-height-dynamic: 100dvh;
    }
}

/* Mobile Landscape Specific (height < 500px) */
@media screen and (orientation: landscape) and (max-height: 500px) {
    :root {
        --mobile-landscape: true;
    }
    
    /* Adjust hero section for mobile landscape */
    .hero-section {
        min-height: 100vh;
        padding: 0.2rem 0; /* Much more reduced top padding */
        margin-top: -2rem; /* Much more negative margin */
    }
    
    /* Reduce vertical spacing in landscape */
    .section-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Tablet Landscape (width > 1024px and height < 800px) */
@media screen and (orientation: landscape) and (min-width: 1024px) and (max-height: 800px) {
    :root {
        --tablet-landscape: true;
    }
}

/* ===================================
   DEVICE-SPECIFIC BREAKPOINTS
   ================================== */

/* iPhone SE (375px width) */
@media screen and (max-width: 375px) {
    :root {
        --device-model: 'iphone-se';
    }
    
    .container,
    .section-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* iPhone 12/13/14 Standard (390px width) */
@media screen and (min-width: 376px) and (max-width: 390px) {
    :root {
        --device-model: 'iphone-standard';
    }
}

/* iPhone 12/13/14 Plus (428px width) */
@media screen and (min-width: 391px) and (max-width: 428px) {
    :root {
        --device-model: 'iphone-plus';
    }
}

/* Samsung Galaxy S21 (360px width) */
@media screen and (max-width: 360px) {
    :root {
        --device-model: 'galaxy-s21';
    }
    
    /* Extra compact layout for very narrow screens */
    .hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

/* iPad Portrait (768px width) */
@media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    :root {
        --device-model: 'ipad-portrait';
    }
}

/* iPad Landscape (1024px width) */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    :root {
        --device-model: 'ipad-landscape';
    }
}

/* ===================================
   VIEWPORT UNITS FALLBACKS
   ================================== */

/* Support for new viewport units with fallbacks */
.full-height {
    height: 100vh; /* Fallback */
    height: 100svh; /* Small viewport height */
    height: 100dvh; /* Dynamic viewport height - preferred */
}

.min-full-height {
    min-height: 100vh; /* Fallback */
    min-height: 100svh; /* Small viewport height */
    min-height: 100dvh; /* Dynamic viewport height - preferred */
}

/* ===================================
   MOBILE SCROLL OPTIMIZATION
   ================================== */

/* Enable momentum scrolling on iOS */
@media screen and (max-width: 1024px) {
    html {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Prevent horizontal scroll */
    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Smooth scrolling for supported browsers */
    html {
        scroll-behavior: smooth;
    }
}

/* ===================================
   REDUCED MOTION PREFERENCES
   ================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-preference: 'reduced';
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Disable particle animations */
    .floating-particles,
    .hero-particles,
    .matrix-bg,
    .sparkle-container {
        animation: none !important;
        transform: none !important;
    }
}

/* ===================================
   HIGH CONTRAST MODE SUPPORT
   ================================== */

@media (prefers-contrast: high) {
    :root {
        --contrast-preference: 'high';
        --accent-color: #00ff00; /* Higher contrast green */
        --text-color: #ffffff;
        --background-color: #000000;
    }
}

/* ===================================
   DARK MODE PREFERENCE
   ================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme: 'dark';
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --color-scheme: 'light';
    }
}

/* ===================================
   MOBILE-SPECIFIC PERFORMANCE OPTIMIZATIONS
   ================================== */

/* Optimize rendering for mobile devices */
@media screen and (max-width: 1024px) {
    /* Use hardware acceleration judiciously */
    .hero-section,
    .exchange-section {
        transform: translateZ(0);
        will-change: scroll-position;
    }
    
    /* Optimize animations for mobile */
    .animated-element {
        will-change: transform;
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Reduce complexity of background effects */
    .floating-particles {
        opacity: 0.3;
    }
    
    .matrix-bg {
        opacity: 0.1;
    }
    
    .scanlines {
        opacity: 0.2;
    }
}

/* ===================================
   MOBILE LAYOUT UTILITIES
   ================================== */

/* Mobile-only display utilities */
.mobile-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Touch-only display utilities */
.touch-only {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .touch-only {
        display: block;
    }
    
    .mouse-only {
        display: none !important;
    }
}

/* ===================================
   MOBILE TYPOGRAPHY SCALING
   ================================== */

@media screen and (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
    h2 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
    h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); }
    
    p, .body-text {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        line-height: 1.6;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    h1 { font-size: clamp(2rem, 4vw, 3rem); }
    h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
    h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
}

/* ===================================
   MOBILE SPACING SYSTEM
   ================================== */

@media screen and (max-width: 768px) {
    .section-container {
        padding-left: clamp(1rem, 4vw, 2rem);
        padding-right: clamp(1rem, 4vw, 2rem);
        padding-top: clamp(2rem, 6vw, 4rem);
        padding-bottom: clamp(2rem, 6vw, 4rem);
    }
    
    .hero-section {
        padding-top: clamp(1rem, 4vw, 2rem);
        padding-bottom: clamp(1rem, 4vw, 2rem);
    }
}