/* ============================================
   PERFORMANCE OPTIMIZATIONS - 35 FRAMES
   ============================================ */

/* GPU acceleration on animated/transitioning elements */
.hero-slide,
.hero-slide img,
.portfolio-item,
.gallery-item,
.navbar,
.back-to-top,
.btn,
.nav-link,
.social-link,
.footer-social-link {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* will-change only on elements about to animate - reduces repaint */
.hero-slide.active img {
    will-change: transform;
}

.portfolio-item:hover,
.gallery-item:hover {
    will-change: transform, box-shadow;
}

/* Fix: transition: all is very expensive — replaced with specific properties */
.navbar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

.nav-link {
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-link::before {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease;
}

.portfolio-item {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-image img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-overlay {
    transition: opacity 0.4s ease;
}

.gallery-item {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item img {
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-overlay {
    transition: opacity 0.35s ease;
}

.gallery-expand {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                background-color 0.3s ease;
}

.social-link,
.footer-social-link {
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.back-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-item {
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-answer {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn {
    transition: color 0.3s ease, background 0.3s ease,
                border-color 0.3s ease, transform 0.3s ease;
}

.achievement-item {
    transition: transform 0.3s ease, background 0.3s ease;
}

.contact-detail-item {
    transition: background 0.3s ease, transform 0.3s ease;
}

.contact-icon {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-group input,
.form-group select,
.form-group textarea {
    transition: border-color 0.25s ease, background-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.2s ease;
}

/* Reduce kenBurns scale — smaller scale = less GPU work */
@keyframes kenBurns {
    0%   { transform: scale(1) translateZ(0); }
    50%  { transform: scale(1.08) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

/* Only animate active slide, not all slides */
.hero-slide img {
    animation: none;
}

.hero-slide.active img {
    animation: kenBurns 20s ease infinite;
}

/* Reduce body::before animation — was repainting entire viewport */
body::before {
    animation: none;
}

/* Reduce blur on decorative elements — blur is the most expensive filter */
.portfolio::before,
.portfolio::after,
.about::before,
.gallery::after,
.contact::before {
    filter: blur(40px);
}

/* Mobile: disable expensive effects entirely */
@media (max-width: 768px) {
    /* Disable 3D transforms on mobile — causes jank */
    .portfolio-item:hover {
        transform: translateY(-8px) scale(1.01);
    }

    .gallery-item:hover {
        transform: translateY(-8px) scale(1.01);
    }

    /* No rotate on mobile hover */
    .gallery-item:hover img {
        transform: scale(1.08);
    }

    .portfolio-item:hover .portfolio-image img {
        transform: scale(1.08);
    }

    /* Disable backdrop-filter on mobile — very slow on low-end devices */
    .nav-menu,
    .lightbox,
    .hero-arrow,
    .lightbox-arrow,
    .filter-btn,
    .nav-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Simplify body background */
    body::before {
        display: none;
    }

    /* Reduce decorative blobs */
    .portfolio::before,
    .portfolio::after,
    .about::before,
    .gallery::after,
    .contact::before {
        display: none;
    }

    /* Disable ken burns on mobile */
    .hero-slide.active img {
        animation: none;
    }
}

/* Reduce motion for accessibility + performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Image rendering optimization */
img {
    image-rendering: auto;
    content-visibility: auto;
}

/* Contain layout for large sections */
.portfolio,
.gallery,
.about,
.faqs,
.contact {
    contain: layout style;
}

/* Location pages - fix animation on hero */
.location-hero::before {
    animation: none;
}

/* Location page transition fixes */
.location-gallery-item,
.work-item,
.service-feature,
.cta-section {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ============================================
   SCROLL REVEAL — smooth fade-in-up
   ============================================ */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* Stagger children inside section-header */
.section-header.reveal-on-scroll .section-subtitle { transition-delay: 0s; }
.section-header.reveal-on-scroll .section-title    { transition-delay: 0.1s; }
.section-header.reveal-on-scroll .section-description { transition-delay: 0.2s; }

/* Portfolio items stagger */
.portfolio-item:nth-child(2).reveal-on-scroll { transition-delay: 0.1s; }
.portfolio-item:nth-child(3).reveal-on-scroll { transition-delay: 0.2s; }
.portfolio-item:nth-child(4).reveal-on-scroll { transition-delay: 0.1s; }
.portfolio-item:nth-child(5).reveal-on-scroll { transition-delay: 0.2s; }
.portfolio-item:nth-child(6).reveal-on-scroll { transition-delay: 0.3s; }

/* FAQ stagger */
.faq-item:nth-child(2).reveal-on-scroll { transition-delay: 0.08s; }
.faq-item:nth-child(3).reveal-on-scroll { transition-delay: 0.16s; }
.faq-item:nth-child(4).reveal-on-scroll { transition-delay: 0.24s; }
.faq-item:nth-child(5).reveal-on-scroll { transition-delay: 0.32s; }

/* Font display swap already handled by Google Fonts, but ensure no FOIT */