/**
 * PWA-Specific Styles
 *
 * This file contains performance optimizations and style overrides
 * specifically for PWA mode. It's loaded conditionally when the app
 * detects it's running as an installed PWA.
 *
 * Key optimizations:
 * - Disabled backdrop-filter on article cards (GPU layer explosion fix)
 * - Reduced animation duration and stagger counts
 * - Disabled smooth scroll (iOS Safari crash fix)
 * - Safe area handling for notched devices
 * - Reduced spring animation overshoot
 */

/* ============================================
   PWA Detection via Platform Classes
   Applied by PlatformDetector.js
   ============================================ */

/* Also support display-mode media query as fallback */
@media all and (display-mode: standalone) {

    /* ----------------------------------------
       Hide tagline in PWA mode - just show stats pill
       ---------------------------------------- */
    .header-content {
        display: none !important;
    }

    .page-header {
        justify-content: center !important;
    }

    /* ----------------------------------------
       CRITICAL: Disable backdrop-filter on cards
       This prevents GPU compositor layer explosion
       that crashes iOS Safari during fast scroll
       ---------------------------------------- */
    .article-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Use solid background instead */
        background: var(--card-background) !important;
    }

    .article-card::before,
    .article-card::after {
        /* Disable shimmer and glow effects */
        display: none !important;
    }

    /* Keep navbar and bottom-sheet blur (requested by user) */
    /* .navbar and .bottom-sheet retain their backdrop-filter */


    /* ----------------------------------------
       Disable smooth scroll behavior
       iOS PWA has issues with smooth scroll + scroll restoration
       ---------------------------------------- */
    html {
        scroll-behavior: auto !important;
    }


    /* ----------------------------------------
       Reduce animation intensity
       ---------------------------------------- */

    /* Faster, simpler card entrance */
    .article-card {
        animation-duration: 200ms !important;
    }

    /* Limit staggered animations to first 8 cards */
    .article-card:nth-child(n+9) {
        animation-delay: 0ms !important;
    }

    /* Reduce spring animation overshoot */
    .accordion-section,
    .detail-item {
        --ease-spring: cubic-bezier(0.25, 1, 0.5, 1) !important;
        --ease-spring-bounce: cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* Faster accordion animations */
    .accordion-section {
        animation-duration: 200ms !important;
    }

    /* Reduce hover effects */
    .article-card:hover {
        transform: translateY(-4px) !important; /* Reduced from -8px */
    }

    /* Simpler box shadows on hover */
    .article-card:hover {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }


    /* ----------------------------------------
       Safe Area Handling
       ---------------------------------------- */
    .navbar {
        height: var(--header-total-height);
        padding-top: var(--safe-area-top);
    }

    .nav-content {
        padding-left: max(1.5rem, var(--safe-area-left));
        padding-right: max(1.5rem, var(--safe-area-right));
    }

    .container {
        padding-top: calc(var(--header-total-height) + 1rem);
    }

    /* Bottom sheet safe area */
    .bottom-sheet {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Back to top button safe area */
    #backToTopContainer {
        bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }


    /* ----------------------------------------
       PWA Viewport Handling
       ---------------------------------------- */
    html {
        min-height: calc(100% + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) env(safe-area-inset-right)
                env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    /* Disable text selection on app chrome (but allow on content) */
    body {
        -webkit-user-select: none;
        user-select: none;
    }

    .article-card,
    .article-content,
    .bottom-sheet-body {
        -webkit-user-select: text;
        user-select: text;
    }


    /* ----------------------------------------
       Landscape Mode Adjustments
       ---------------------------------------- */
    @media (orientation: landscape) {
        #backToTopContainer {
            bottom: 20px !important;
            right: calc(20px + env(safe-area-inset-right)) !important;
        }

        #backToTopButton {
            width: 45px !important;
            height: 45px !important;
        }

        .navbar {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }

    /* iPad landscape in PWA - show tagline like desktop */
    @media (orientation: landscape) and (min-width: 1024px) {
        .header-content {
            display: block !important;
        }

        .page-header {
            justify-content: space-between !important;
        }
    }
}


/* ============================================
   Platform Class Selectors (JavaScript-applied)
   These work even before display-mode is detectable
   ============================================ */

/* iOS PWA specific fixes */
.platform-ios-pwa {
    /* Prevent overscroll bounce causing crashes */
    overscroll-behavior: none;
}

/* Hide tagline in all PWA modes (portrait/small screens) */
.platform-ios-pwa .header-content,
.platform-mobile-pwa .header-content {
    display: none !important;
}

.platform-ios-pwa .page-header,
.platform-mobile-pwa .page-header {
    justify-content: center !important;
}

/* iPad landscape - show tagline in PWA */
@media (orientation: landscape) and (min-width: 1024px) {
    .platform-ios-pwa .header-content,
    .platform-mobile-pwa .header-content {
        display: block !important;
    }

    .platform-ios-pwa .page-header,
    .platform-mobile-pwa .page-header {
        justify-content: space-between !important;
    }
}

.platform-ios-pwa .article-card {
    /* Extra insurance for iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Mobile PWA - reduced motion */
.platform-mobile-pwa .article-card {
    transition-duration: 0.2s !important;
}

.platform-mobile-pwa .accordion-section {
    transition-duration: 0.15s !important;
}


/* ============================================
   Reduced Motion Preference
   Respects user's OS-level preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .platform-pwa * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================
   Performance Containment
   Helps browser optimize rendering
   ============================================ */
@media all and (display-mode: standalone) {
    .article-card {
        contain: layout style;
    }

    .articles-container {
        contain: layout;
    }

    .bottom-sheet-body {
        contain: strict;
    }
}