/* ============================================
   VILLA PRECIOSA RESORT — Mobile Performance
   GPU-safe animations, backdrop-blur discipline,
   content-visibility, paint containment
   ============================================ */

/* ═══════════════════════════════════════════
   SECTION 1: GPU-SAFE ANIMATION PRACTICES
   Only animate transform + opacity
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card,
    .gallery-item,
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-gold,
    .header-cta,
    .mobile-nav a,
    .btn-reserve-mobile,
    .social-link,
    .testimonial-prev,
    .testimonial-next,
    .gallery-filter,
    .activity-chip {
        will-change: transform;
    }

    /* Remove will-change after animation completes */
    .room-card.revealed,
    .activity-showcase-card.revealed,
    .amenity-item.revealed,
    .bento-card.revealed,
    .gallery-item.revealed {
        will-change: auto;
    }

    /* Disable hover transforms on mobile */
    .room-card:hover,
    .activity-showcase-card:hover,
    .amenity-item:hover,
    .bento-card:hover,
    .gallery-item:hover {
        transform: none;
    }

    /* Remove grain texture for performance */
    body::after {
        display: none !important;
    }

    /* Disable parallax */
    .amenities-parallax,
    .yacht-bg {
        background-attachment: scroll !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════
   SECTION 2: BACKDROP-BLUR DISCIPLINE
   Only on fixed/sticky elements
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Scrolling containers must NOT have blur */
    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Only fixed/sticky elements get blur */
    .header,
    .mobile-menu,
    .lightbox {
        backdrop-filter: blur(24px) saturate(1.2);
        -webkit-backdrop-filter: blur(24px) saturate(1.2);
    }

    .header.scrolled {
        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
    }
}

/* ═══════════════════════════════════════════
   SECTION 3: PAINT OPTIMIZATION
   Simplify gradients, reduce shadow complexity
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Simplified Overlays */
    .hero-overlay {
        background: rgba(10, 51, 71, 0.6);
    }

    .section-amenities .amenities-overlay {
        background: rgba(10, 51, 71, 0.92);
    }

    .yacht-overlay {
        background: rgba(10, 51, 71, 0.85);
    }

    /* Simplified Gradients */
    .room-card-info {
        background: var(--color-ocean-dark);
    }

    .activity-stat-icon {
        background: var(--color-ocean);
    }

    .amenity-icon {
        background: rgba(201, 168, 76, 0.15);
    }

    .pillar-icon {
        background: rgba(201, 168, 76, 0.08);
    }

    /* Reduced Shadow Complexity */
    .room-card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    .activity-showcase-card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .amenity-item {
        box-shadow: none;
    }

    .bento-card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    /* Simplified Borders */
    .room-card::before,
    .activity-showcase-card::before,
    .amenity-item::before {
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* ═══════════════════════════════════════════
   SECTION 4: LAYOUT CONTAINMENT
   CSS containment for render performance
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .rooms-grid,
    .amenities-grid,
    .activities-showcase,
    .activities-stats,
    .gallery-grid,
    .explore-bento {
        contain: layout style;
    }

    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card {
        contain: layout style paint;
    }

    .room-card-img img,
    .activity-showcase-img img,
    .gallery-item img,
    .about-img-main img,
    .yacht-fleet-main,
    .yacht-fleet-secondary,
    .yacht-fleet-third {
        content-visibility: auto;
    }

    .hero-title,
    .section-title,
    .room-card-content h3,
    .activity-showcase-content h3,
    .amenity-item h4 {
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
    }

    .hero-title,
    .section-title {
        font-display: swap;
    }
}

/* ═══════════════════════════════════════════
   SECTION 5: SCROLL PERFORMANCE
   IntersectionObserver, not scroll events
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-blur,
    .img-reveal {
        opacity: 0;
        will-change: transform, opacity;
    }

    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed,
    .reveal-scale.revealed,
    .reveal-blur.revealed,
    .img-reveal.revealed {
        will-change: auto;
    }

    .hero-stats,
    .gallery-filters,
    .category-items {
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .scroll-progress {
        transition: width 0.15s linear;
    }

    .scroll-indicator::after {
        animation-duration: 3s;
    }
}

/* ═══════════════════════════════════════════
   SECTION 6: TOUCH PERFORMANCE
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-gold,
    .header-cta,
    .btn-reserve-mobile,
    .gallery-filter,
    .activity-chip,
    .social-link,
    .testimonial-prev,
    .testimonial-next,
    .dot,
    .step,
    .mobile-nav a,
    .mobile-close {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card,
    .gallery-item {
        touch-action: pan-y;
    }

    .hero-stats {
        touch-action: pan-x;
        scroll-snap-type: x mandatory;
    }

    .gallery-filters {
        touch-action: pan-x;
        scroll-snap-type: x mandatory;
    }

    .category-items {
        touch-action: pan-x;
        scroll-snap-type: x mandatory;
    }
}

/* ═══════════════════════════════════════════
   SECTION 7: MEMORY OPTIMIZATION
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .particle {
        display: none;
    }

    .hero-particles {
        display: none;
    }

    .room-card-img::after,
    .gallery-item::before {
        display: none;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(10, 51, 71, 0.5) 0%, rgba(26, 26, 46, 0.7) 100%);
    }

    .amenities-overlay {
        background: linear-gradient(180deg, rgba(10, 51, 71, 0.9) 0%, rgba(26, 26, 46, 0.95) 100%);
    }

    :root {
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    }
}

/* ═══════════════════════════════════════════
   SECTION 8: ANIMATION TIMING
   Faster on mobile, reduced stagger
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed {
        transition-duration: 0.45s;
    }

    .reveal-scale.revealed {
        transition-duration: 0.35s;
    }

    .reveal-blur.revealed {
        transition-duration: 0.55s;
    }

    .stagger-children.revealed > *:nth-child(1) { transition-delay: 0.03s; }
    .stagger-children.revealed > *:nth-child(2) { transition-delay: 0.06s; }
    .stagger-children.revealed > *:nth-child(3) { transition-delay: 0.09s; }
    .stagger-children.revealed > *:nth-child(4) { transition-delay: 0.12s; }
    .stagger-children.revealed > *:nth-child(5) { transition-delay: 0.15s; }
    .stagger-children.revealed > *:nth-child(6) { transition-delay: 0.18s; }
    .stagger-children.revealed > *:nth-child(7) { transition-delay: 0.21s; }
    .stagger-children.revealed > *:nth-child(8) { transition-delay: 0.24s; }

    body.loaded .hero-tag {
        animation-duration: 0.5s;
    }

    body.loaded .hero-title {
        animation-duration: 0.6s;
    }

    body.loaded .hero-subtitle {
        animation-duration: 0.5s;
    }

    body.loaded .hero-actions {
        animation-duration: 0.5s;
    }

    .section {
        transition-duration: 0.5s;
    }

    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card {
        transition-duration: 0.35s;
    }
}

/* ═══════════════════════════════════════════
   SECTION 9: RESOURCE OPTIMIZATION
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .room-card-img img,
    .activity-showcase-img img,
    .gallery-item img,
    .about-img-main img,
    .yacht-fleet-main,
    .yacht-fleet-secondary,
    .yacht-fleet-third {
        loading: lazy;
        decoding: async;
    }

    .hero-slide.active {
        loading: eager;
        decoding: sync;
    }

    .room-card-img img,
    .activity-showcase-img img {
        image-rendering: auto;
    }

    .hero-slide {
        background-size: cover;
        background-position: center;
    }
}

/* ═══════════════════════════════════════════
   SECTION 10: CRITICAL CSS
   Above-fold styles forced visible
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .header,
    .hero,
    .hero-content,
    .hero-title,
    .hero-subtitle,
    .hero-actions,
    .btn,
    .btn-primary,
    .btn-outline {
        opacity: 1;
        visibility: visible;
    }

    .section,
    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card,
    .gallery-item {
        content-visibility: auto;
        contain-intrinsic-size: auto 300px;
    }

    .hero-overlay {
        contain: layout style paint;
    }

    .section-amenities .amenities-overlay {
        contain: layout style paint;
    }

    .yacht-overlay {
        contain: layout style paint;
    }
}

/* ═══════════════════════════════════════════
   SECTION 11: REDUCED MOTION
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .reveal-up,
        .reveal-left,
        .reveal-right,
        .reveal-scale,
        .reveal-blur,
        .img-reveal {
            opacity: 1;
            transform: none;
            filter: none;
            clip-path: none;
        }

        .room-card:hover,
        .activity-showcase-card:hover,
        .amenity-item:hover,
        .bento-card:hover,
        .gallery-item:hover,
        .btn:hover,
        .btn-primary:hover,
        .btn-outline:hover,
        .btn-gold:hover,
        .social-link:hover,
        .testimonial-prev:hover,
        .testimonial-next:hover {
            transform: none;
        }

        .amenities-parallax,
        .yacht-bg {
            background-attachment: scroll;
        }

        body::after {
            display: none;
        }
    }
}

/* ═══════════════════════════════════════════
   SECTION 12: BATTERY OPTIMIZATION
   Slower infinite animations, hidden particles
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .scroll-indicator::after {
        animation: scrollDown 3s linear infinite;
    }

    .about-badge {
        animation: float 5s ease-in-out infinite;
    }

    .yacht-badge {
        animation: floatSlow 8s ease-in-out infinite;
    }

    .particle {
        display: none;
    }

    .hero-particles {
        display: none;
    }

    .hero-title em {
        animation-duration: 8s;
    }

    .category-items .activity-chip {
        animation: chipFloat 4s ease-in-out infinite;
    }

    .scroll-wheel {
        animation-duration: 3s;
    }

    .loader-logo-img {
        animation-duration: 3s;
    }
}

/* ═══════════════════════════════════════════
   SECTION 13: NETWORK OPTIMIZATION
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .room-card-img img,
    .activity-showcase-img img,
    .gallery-item img {
        loading: lazy;
        decoding: async;
    }

    .hero-slide.active {
        loading: eager;
        decoding: sync;
    }

    link[rel="preconnect"] {
        crossorigin: anonymous;
    }

    .font-awesome {
        font-display: swap;
    }

    link[rel="stylesheet"] {
        media: all;
    }
}

/* ═══════════════════════════════════════════
   SECTION 14: FINAL PERFORMANCE AUDIT
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .room-card,
    .activity-showcase-card,
    .amenity-item,
    .bento-card {
        contain: layout style paint;
    }

    .hero-overlay,
    .section-amenities .amenities-overlay,
    .yacht-overlay {
        contain: layout style paint;
    }

    .room-card-img img,
    .activity-showcase-img img,
    .gallery-item img {
        contain: layout style paint;
    }

    .reveal-up,
    .reveal-left,
    .reveal-right {
        contain: layout style;
    }

    .particle,
    .hero-particles {
        display: none;
    }

    body::after {
        display: none;
    }
}