/**
 * UNIFIED SCROLL PERFORMANCE STYLES
 * ===========================================
 * Professional-grade CSS for smooth scrolling
 * 
 * Features:
 * ✓ GPU-accelerated animations
 * ✓ Zero layout thrashing
 * ✓ Smooth momentum scrolling
 * ✓ Elegant fade-in effects
 * ✓ Mobile optimized
 * ✓ Accessibility compliant
 * 
 * @version 2.0.0
 */

/* ==========================================
   SMOOTH SCROLL BASE
   ========================================== */

html {
    /* Native smooth scrolling */
    scroll-behavior: smooth;
    
    /* Prevent overscroll bounce on mobile */
    overscroll-behavior-y: contain;
}

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

/* ==========================================
   SCROLLING STATE MANAGEMENT
   ========================================== */

/* Disable pointer events during scroll for better performance */
body.is-scrolling {
    pointer-events: none;
}

/* Re-enable on interactive elements */
body.is-scrolling a,
body.is-scrolling button,
body.is-scrolling input,
body.is-scrolling select,
body.is-scrolling textarea {
    pointer-events: auto;
}

/* ==========================================
   FADE-IN ANIMATION
   ========================================== */

/* Initial hidden state */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    
    /* Smooth transition */
    transition: 
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* GPU acceleration */
    will-change: opacity, transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Visible state (triggered by IntersectionObserver) */
.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Remove will-change after animation */
.fade-in-visible {
    animation: removeWillChange 0.6s forwards;
}

@keyframes removeWillChange {
    to {
        will-change: auto;
    }
}

/* ==========================================
   STAGGERED ANIMATIONS FOR CARDS
   ========================================== */

/* Individual card delays */
.property-card.fade-in-element:nth-child(1),
.agency-card.fade-in-element:nth-child(1),
.agent-card.fade-in-element:nth-child(1) { 
    transition-delay: 0ms; 
}

.property-card.fade-in-element:nth-child(2),
.agency-card.fade-in-element:nth-child(2),
.agent-card.fade-in-element:nth-child(2) { 
    transition-delay: 50ms; 
}

.property-card.fade-in-element:nth-child(3),
.agency-card.fade-in-element:nth-child(3),
.agent-card.fade-in-element:nth-child(3) { 
    transition-delay: 100ms; 
}

.property-card.fade-in-element:nth-child(4),
.agency-card.fade-in-element:nth-child(4),
.agent-card.fade-in-element:nth-child(4) { 
    transition-delay: 150ms; 
}

.property-card.fade-in-element:nth-child(5),
.agency-card.fade-in-element:nth-child(5),
.agent-card.fade-in-element:nth-child(5) { 
    transition-delay: 200ms; 
}

.property-card.fade-in-element:nth-child(6),
.agency-card.fade-in-element:nth-child(6),
.agent-card.fade-in-element:nth-child(6) { 
    transition-delay: 250ms; 
}

.property-card.fade-in-element:nth-child(7),
.agency-card.fade-in-element:nth-child(7),
.agent-card.fade-in-element:nth-child(7) { 
    transition-delay: 300ms; 
}

.property-card.fade-in-element:nth-child(8),
.agency-card.fade-in-element:nth-child(8),
.agent-card.fade-in-element:nth-child(8) { 
    transition-delay: 350ms; 
}

.property-card.fade-in-element:nth-child(9),
.agency-card.fade-in-element:nth-child(9),
.agent-card.fade-in-element:nth-child(9) { 
    transition-delay: 400ms; 
}

/* After 9th card, cap at 500ms */
.property-card.fade-in-element:nth-child(n+10),
.agency-card.fade-in-element:nth-child(n+10),
.agent-card.fade-in-element:nth-child(n+10) { 
    transition-delay: 500ms; 
}

/* ==========================================
   HEADER SCROLL EFFECTS
   ========================================== */

/* Sticky header - ثابت در بالای صفحه */
header,
.site-header,
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth shadow transition on scroll */
header.scrolled,
.site-header.scrolled,
.navbar.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* CSS Containment for grids */
.properties-grid,
.agencies-grid,
.agents-grid,
.cards-grid {
    /* Isolate layout and paint */
    contain: layout style;
}

/* Content visibility for off-screen cards */
.property-card,
.agency-card,
.agent-card,
.banner-card {
    /* Auto manage rendering */
    content-visibility: auto;
    
    /* Reserve space during loading */
    contain-intrinsic-size: 300px 400px;
}

/* GPU acceleration for all card transforms */
.property-card,
.agency-card,
.agent-card,
.banner-card {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize hover effects */
.property-card:hover,
.agency-card:hover,
.agent-card:hover {
    /* Only transform, no layout changes */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   SCROLL CONTAINERS OPTIMIZATION
   ========================================== */

/* Infinite scroll banner */
.infinite-scroll-container,
.scroll-track {
    /* Smooth scrolling */
    scroll-behavior: smooth;
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Contain layout */
    contain: layout paint;
}

/* Horizontal scroll performance */
.horizontal-scroll {
    /* Momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    
    /* GPU acceleration */
    will-change: scroll-position;
}

/* ==========================================
   IMAGE LOADING OPTIMIZATION
   ========================================== */

/* Lazy loaded images */
img[loading="lazy"] {
    /* Reserve space to prevent layout shift */
    min-height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Remove shimmer when loaded */
img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

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

@media (max-width: 768px) {
    /* Simplified animations on mobile */
    .fade-in-element {
        transform: translateY(10px);
        transition-duration: 0.4s;
    }
    
    /* Faster stagger */
    .property-card.fade-in-element:nth-child(n),
    .agency-card.fade-in-element:nth-child(n),
    .agent-card.fade-in-element:nth-child(n) {
        transition-delay: 30ms;
    }
    
    /* Reduce delays on mobile */
    .property-card.fade-in-element:nth-child(n+7),
    .agency-card.fade-in-element:nth-child(n+7),
    .agent-card.fade-in-element:nth-child(n+7) {
        transition-delay: 300ms;
    }
}

/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */

@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .property-card:hover,
    .agency-card:hover,
    .agent-card:hover {
        transform: none;
    }
    
    /* Faster animations for touch */
    .fade-in-element {
        transition-duration: 0.3s;
    }
}

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

@media (prefers-contrast: high) {
    .fade-in-element {
        /* Simpler animations for high contrast */
        transform: none;
        transition: opacity 0.3s ease;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    /* Show all elements immediately */
    .fade-in-element {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Disable animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================
   DEBUG MODE STYLES
   ========================================== */

/* Enable with ?debug=scroll in URL */
body.scroll-debug .fade-in-element {
    outline: 2px dashed #ff6b35;
    outline-offset: 2px;
}

body.scroll-debug .fade-in-visible {
    outline-color: #00c851;
}

body.scroll-debug::before {
    content: '🚀 Scroll Debug Mode Active';
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1f2937;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================
   PERFORMANCE MODE
   ========================================== */

/* Low-performance devices can add this class to <body> */
body.performance-mode .fade-in-element {
    /* Disable animations on low-end devices */
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================
   BROWSER-SPECIFIC FIXES
   ========================================== */

/* Firefox specific */
@-moz-document url-prefix() {
    .fade-in-element {
        /* Firefox sometimes needs explicit will-change */
        will-change: opacity, transform;
    }
}

/* Safari specific */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .fade-in-element {
        /* Safari GPU acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ==========================================
   GLOBAL PERFORMANCE SETTINGS
   ========================================== */

/* Optimize all transitions site-wide */
* {
    /* Use transform and opacity only - fastest properties */
    transition-property: transform, opacity, background-color, color, box-shadow;
    
    /* Hardware acceleration hint */
    transform: translateZ(0);
}

/* Remove transform for static elements */
body,
html,
main,
section,
article,
div:not([class]) {
    transform: none;
}