/* Safari-compatible hero backgrounds
 * Safari doesn't properly support background-attachment: fixed with background-size: cover
 * This CSS uses pseudo-elements and feature detection to provide a compatible solution
 */

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Detect Safari/iOS and disable fixed attachment */
@supports (-webkit-touch-callout: none) {
    .hero-section::before {
        background-attachment: scroll;
    }
}

/* For non-Safari browsers, use fixed attachment */
@supports not (-webkit-touch-callout: none) {
    .hero-section::before {
        background-attachment: fixed;
    }
}

.hero-section .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}

.hero-section .hero-content {
    position: relative;
    z-index: 10;
}

/* Page-specific hero backgrounds */

/* Root-level pages (index.html, acknowledgements.html, projects.html) */
.hero-home::before {
    background-image: url('../assets/home/hero.webp');
}

.hero-acknowledgements::before {
    background-image: url('../assets/home/hero.webp');
}

.hero-projects::before {
    background-image: url('../assets/projects-hero.jpeg');
}

/* Damage subfolder pages */
.hero-agriculture::before {
    background-image: url('../assets/agri/agri-hero.webp');
}

.hero-management::before {
    background-image: url('../assets/management/man-hero.webp');
}

.hero-gallery::before {
    background-image: url('../assets/management/man.webp');
}

.hero-infrastructure::before {
    background-image: url('../assets/home/wala-after.webp');
}

.hero-veterinary::before {
    background-image: url('../assets/veterinary/vet-hero.webp');
}

/* Initial hidden state for hero animations - prevents flash before JS loads */
.hero-animate,
.hero-animate-delay-1,
.hero-animate-delay-2 {
    opacity: 0;
}