/**
 * Featured Properties - Enhanced Animations
 * 
 * Specialized animations for featured property cards with optimized
 * behavior for mobile (one card at a time) and desktop (grid layout).
 */

/* ==========================================================================
   FEATURED PROPERTIES GRID ANIMATIONS
   ========================================================================== */

.featured-properties-grid {
    /* Ensure proper stacking context for animations */
    position: relative;
    z-index: 1;
}

/* Individual card animation states */
.featured-property-card-overlay.reveal-item {
    /* Initial hidden state */
    opacity: 0;
    /* Smooth transition */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* GPU acceleration */
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Revealed state */
.featured-property-card-overlay.reveal-item.revealed {
    opacity: 1;
    will-change: auto; /* Remove will-change after animation */
}

/* ==========================================================================
   MOBILE ANIMATIONS (One Card at a Time)
   ========================================================================== */

@media (max-width: 768px) {
    /* More pronounced animation on mobile for better visibility */
    /* Each card animates individually as it scrolls into view */
    .featured-property-card-overlay.reveal-item--up {
        transform: translateY(70px) scale(0.93);
        opacity: 0;
    }
    
    .featured-property-card-overlay.reveal-item--up.revealed {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    
    /* Ensure each card has enough space to animate individually */
    .featured-property-card-overlay {
        margin-bottom: 35px;
    }
    
    /* Slightly longer animation on mobile for better visibility */
    .featured-property-card-overlay.reveal-item {
        transition-duration: 0.8s;
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Enhanced stagger delays for mobile - each card animates as it scrolls into view */
    /* On mobile, cards show one at a time, so delays are shorter */
    .featured-properties-grid .reveal-item--delay-1 {
        transition-delay: 0.1s;
    }
    
    .featured-properties-grid .reveal-item--delay-2 {
        transition-delay: 0.2s;
    }
    
    .featured-properties-grid .reveal-item--delay-3 {
        transition-delay: 0.3s;
    }
    
    .featured-properties-grid .reveal-item--delay-4 {
        transition-delay: 0.4s;
    }
    
    .featured-properties-grid .reveal-item--delay-5 {
        transition-delay: 0.5s;
    }
    
    .featured-properties-grid .reveal-item--delay-6 {
        transition-delay: 0.6s;
    }
    
    /* Ensure grid shows one card at a time on mobile */
    .featured-properties-grid {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }
}

/* ==========================================================================
   TABLET ANIMATIONS (2 Columns)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
    /* Alternating left/right animation for visual interest */
    .featured-properties-grid .reveal-item--up:nth-child(odd) {
        transform: translateY(50px) translateX(-15px) scale(0.96);
    }
    
    .featured-properties-grid .reveal-item--up:nth-child(even) {
        transform: translateY(50px) translateX(15px) scale(0.96);
    }
    
    .featured-properties-grid .reveal-item--up:nth-child(odd).revealed,
    .featured-properties-grid .reveal-item--up:nth-child(even).revealed {
        transform: translateY(0) translateX(0) scale(1);
    }
}

/* ==========================================================================
   DESKTOP ANIMATIONS (3 Columns)
   ========================================================================== */

@media (min-width: 1200px) {
    /* More pronounced alternating animation for desktop */
    .featured-properties-grid .reveal-item--up:nth-child(3n+1) {
        /* First column: slide from left */
        transform: translateY(50px) translateX(-20px) scale(0.96);
    }
    
    .featured-properties-grid .reveal-item--up:nth-child(3n+2) {
        /* Middle column: slide from bottom */
        transform: translateY(50px) scale(0.96);
    }
    
    .featured-properties-grid .reveal-item--up:nth-child(3n) {
        /* Third column: slide from right */
        transform: translateY(50px) translateX(20px) scale(0.96);
    }
    
    .featured-properties-grid .reveal-item--up:nth-child(3n+1).revealed,
    .featured-properties-grid .reveal-item--up:nth-child(3n+2).revealed,
    .featured-properties-grid .reveal-item--up:nth-child(3n).revealed {
        transform: translateY(0) translateX(0) scale(1);
    }
}

/* ==========================================================================
   LARGE DESKTOP ANIMATIONS (3+ Columns)
   ========================================================================== */

@media (min-width: 1600px) {
    /* Even more refined animation for large screens */
    .featured-property-card-overlay.reveal-item--up {
        transform: translateY(40px) scale(0.97);
    }
    
    .featured-property-card-overlay.reveal-item--up.revealed {
        transform: translateY(0) scale(1);
    }
}

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

.featured-property-card-overlay.reveal-item {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .featured-property-card-overlay.reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .featured-property-card-overlay.reveal-item.revealed {
        opacity: 1 !important;
        transform: none !important;
    }
}