/* ============================================
   SAFARI PERFORMANCE FIXES
   Fixes for macOS Safari and iOS Safari
   Created: 2024-12-27
   ============================================ */

/* ============================================
   WEBKIT BACKDROP-FILTER PREFIXES
   Safari requires -webkit- prefix for backdrop-filter
   ============================================ */

/* Header and Navigation */
.header__inner,
.header.scrolled .header__inner {
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.banner-ads {
    -webkit-backdrop-filter: blur(10px);
}

/* Theme Picker */
.theme-picker__dropdown {
    -webkit-backdrop-filter: blur(20px);
}

/* Search Overlay */
.search-overlay {
    -webkit-backdrop-filter: blur(20px);
}

.search-box {
    -webkit-backdrop-filter: blur(10px);
}

/* More Menu */
.more-menu-overlay {
    -webkit-backdrop-filter: blur(30px);
}

/* Notification */
.notification-float__dropdown {
    -webkit-backdrop-filter: blur(24px);
}

/* Bottom Navigation */
.bottom-nav {
    -webkit-backdrop-filter: blur(20px);
}

.bottom-nav__theme-dropdown {
    -webkit-backdrop-filter: blur(20px);
}

/* Mobile Menu */
.mobile-menu {
    -webkit-backdrop-filter: blur(20px);
}

/* Ad Popup */
.ad-popup-overlay {
    -webkit-backdrop-filter: blur(8px);
}

/* Generic elements */
.modal-content,
.dropdown-menu,
.cover-stat,
.sidebar-card,
.feed-sidebar,
.activity-card,
.rank-badge {
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   SAFARI-SPECIFIC PERFORMANCE OPTIMIZATIONS
   Using @supports to target Safari
   ============================================ */

/* Enable GPU acceleration for Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Force GPU layers for smooth scrolling */
    .header,
    .header__inner,
    .bottom-nav,
    .mobile-menu,
    .notification-float {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Reduce backdrop blur on iOS for performance */
    .header.scrolled .header__inner {
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        background: rgba(13, 13, 15, 0.92) !important;
    }
    
    .more-menu-overlay {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background: rgba(10, 6, 8, 0.98) !important;
    }
    
    .notification-float__dropdown {
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        background: rgba(20, 16, 26, 0.98) !important;
    }
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */

@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari 100vh issue */
    .search-overlay,
    .more-menu-overlay,
    .mobile-overlay {
        min-height: -webkit-fill-available;
    }
    
    /* Prevent bounce/overscroll on modals */
    .more-menu-overlay,
    .search-overlay {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix sticky positioning on iOS */
    .header {
        position: -webkit-sticky;
        position: sticky;
    }
    
    /* Disable heavy hover effects on touch devices */
    .header__link:hover::before,
    .header__link:hover::after {
        display: none;
    }
    
    /* Simplify animations for better iOS performance */
    .particle,
    .bg-spot {
        display: none !important;
    }
    
    /* Reduce complex shadows */
    .header__link:hover,
    .header__link.active {
        box-shadow: 0 4px 12px rgba(227, 27, 84, 0.3) !important;
    }
}

/* ============================================
   FLEXBOX GAP FALLBACK FOR OLDER SAFARI
   Safari < 14.1 doesn't support gap in flexbox
   ============================================ */

@supports not (gap: 1px) {
    /* Header */
    .header__inner {
        margin: 0 -16px;
    }
    .header__inner > * {
        margin: 0 16px;
    }
    
    .header__nav {
        margin: 0 -3px;
    }
    .header__nav > * {
        margin: 0 3px;
    }
    
    .header__actions {
        margin: 0 -8px;
    }
    .header__actions > * {
        margin: 0 8px;
    }
    
    /* Banner Ads */
    .banner-ads {
        margin: 0 -10px;
    }
    .banner-ads > * {
        margin: 0 10px;
    }
    
    /* Footer */
    .footer__social {
        margin: 0 -6px;
    }
    .footer__social > * {
        margin: 0 6px;
    }
    
    /* More Menu */
    .more-menu__grid {
        margin: -12px;
    }
    .more-menu__grid > * {
        margin: 12px;
    }
    
    .more-menu__social {
        margin: 0 -8px;
    }
    .more-menu__social > * {
        margin: 0 8px;
    }
    
    /* Theme Picker */
    .theme-picker__options {
        margin: -4px;
    }
    .theme-picker__options > * {
        margin: 4px;
    }
    
    /* Bottom Nav */
    .bottom-nav__inner {
        margin: 0 -8px;
    }
    .bottom-nav__inner > * {
        margin: 0 8px;
    }
    
    .bottom-nav__theme-options {
        margin: -4px;
    }
    .bottom-nav__theme-options > * {
        margin: 4px;
    }
}

/* ============================================
   REDUCE MOTION FOR PERFORMANCE
   Helps both Safari performance and accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .bg-spot,
    .particles,
    .scanlines {
        display: none !important;
    }
}

/* ============================================
   SAFARI MACBOOK PRO WITH NOTCH FIX
   Ensure content isn't hidden behind the notch
   ============================================ */

@supports (padding-top: env(safe-area-inset-top)) {
    .header {
        padding-top: max(20px, env(safe-area-inset-top));
    }
    
    .bottom-nav {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ============================================
   iOS SAFARI SMOOTH SCROLLING
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling containers */
.main,
.more-menu__container,
.notification-float__list {
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   FIX FOR SAFARI POSITION FIXED ISSUES
   ============================================ */

.header,
.bottom-nav,
.notification-float,
.ad-popup-overlay {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* ============================================
   SAFARI INPUT AND BUTTON FIXES
   ============================================ */

/* Remove Safari's default input styling */
input,
textarea,
button,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Fix Safari autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pearl);
    -webkit-box-shadow: 0 0 0px 1000px var(--charcoal) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   SAFARI FLEXBOX FIXES
   ============================================ */

/* Fix flexbox shrink issues in Safari */
.header__nav,
.header__actions,
.footer__grid,
.more-menu__grid {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* Fix image sizing in flex containers */
img {
    max-width: 100%;
    height: auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* ============================================
   SAFARI ANIMATION OPTIMIZATIONS
   ============================================ */

/* Use will-change sparingly for key animated elements */
.header,
.more-menu-overlay,
.search-overlay,
.mobile-menu,
.notification-float__dropdown {
    will-change: opacity, transform;
}

/* Remove will-change after animation completes */
.header.scrolled,
.more-menu-overlay.active,
.search-overlay.active,
.mobile-menu.open,
.notification-float__dropdown.active {
    will-change: auto;
}

/* ============================================
   SAFARI GRADIENT FIXES
   ============================================ */

/* Fix gradient rendering issues */
.bg-layer::after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ============================================
   DISABLE HEAVY EFFECTS ON iOS
   For better performance on mobile Safari
   ============================================ */

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    /* This targets iOS devices specifically */
    
    /* Reduce all backdrop blur effects */
    .header__inner,
    .header.scrolled .header__inner,
    .banner-ads,
    .theme-picker__dropdown,
    .search-overlay,
    .more-menu-overlay,
    .notification-float__dropdown,
    .bottom-nav,
    .mobile-menu {
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }
    
    /* Disable complex animations */
    .particle,
    .bg-spot,
    .bg-spot--1,
    .bg-spot--2,
    .bg-spot--3,
    .scanlines {
        display: none !important;
    }
    
    /* Simplify background */
    .bg-layer::after,
    .bg-layer::before {
        display: none !important;
    }
    
    /* Reduce shadow complexity */
    * {
        text-shadow: none !important;
    }
    
    .header__link:hover,
    .header__link.active,
    .card:hover,
    .movie-card:hover,
    button:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Disable hover animations on touch */
    .header__link:hover::before,
    .header__link:hover::after,
    .header__link:hover i {
        animation: none !important;
        transform: none !important;
    }
    
    /* Force hardware acceleration */
    .main,
    .header,
    .footer,
    .bottom-nav {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ============================================
   SAFARI VIDEO FIXES
   ============================================ */

video {
    -webkit-playsinline: playsinline;
}

video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}