/* 
   Penkey Délicaf & Gifts - Header Images Styles
   Adds attractive header images as backgrounds to hero sections
*/

/* Hero Section Background Images */
.hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Page-specific hero background images */
.hero-home {
    overflow: hidden; /* ensure animated bg stays within hero */
}

.hero-order {
    /* Optimized responsive background for Order hero */
    background-image: -webkit-image-set(
        url('../new-images/amanda- order-1600x1205.avif') type("image/avif"),
        url('../new-images/amanda- order-1600x1205.webp') type("image/webp"),
        url('../new-images/amanda- order.jpg') type("image/jpeg")
    );
    background-image: image-set(
        url('../new-images/amanda- order-1600x1205.avif') type("image/avif"),
        url('../new-images/amanda- order-1600x1205.webp') type("image/webp"),
        url('../new-images/amanda- order.jpg') type("image/jpeg")
    );
}

.hero-menu {
    background-image: url('../images_optimized/images/hero-images/menu-1920x1364.webp');
}

.hero-about {
    background-image: url('../images_optimized/images/headers/about-header-1920x1446.webp');
}

.hero-support {
    background-image: url('../images_optimized/images/hero-images/local-1920x1364.webp');
}

.hero-contact {
    background-image: url('../images_optimized/images/hero-images/contact-1920x1364.webp');
}

/* Legal pages hero */
.hero-legal {
    background-image: url('../images_optimized/images/headers/about-header-1920x1446.webp');
}

/* Page-specific legal heroes */
.hero-privacy {
    background-image: url('../images_optimized/images/hero-images/privacy-1920x1364.webp');
}

.hero-terms {
    background-image: url('../images_optimized/images/hero-images/terms-1920x1364.webp');
}

.hero-cookies {
    background-image: url('../images_optimized/images/hero-images/cookies-1920x1364.webp');
}

/* Allergen disclaimer hero */
.hero-allergen {
    background-image: url('../images_optimized/images/hero-images/allergen-1920x1364.webp');
}

/* Home hero: animated background image (subtle Ken Burns effect) */
.hero-home::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0; /* under overlay and content */
    background-image: url('../images_optimized/images/cafe-interior-1920x1741.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.08) translate3d(0, 0, 0);
    transform-origin: center;
    will-change: transform;
    animation: hero-kenburns 50s ease-in-out infinite alternate;
}

/* Slightly lighter overlay on home to show more of the image */
.hero-home::before {
    background: linear-gradient(to bottom, rgba(46, 61, 66, 0.45), rgba(46, 61, 66, 0.65));
}

@keyframes hero-kenburns {
    0% {
        transform: scale(1.03) translate3d(0%, 0%, 0);
    }
    100% {
        /* gentle pan slightly to the left */
        transform: scale(1.12) translate3d(-2%, 0%, 0);
    }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-home::after {
        animation: none;
        transform: scale(1.06);
    }
}

/* Mobile: even slower to keep it gentle */
@media (max-width: 768px) {
    .hero-home::after {
        animation-duration: 65s;
    }
}

/* Mobile performance: reduce heavy background animations to cut main-thread work */
@media (max-width: 640px) {
    .hero-home::after,
    .hero-buffet::after {
        /* Disable Ken Burns on small screens to improve mobile LCP/TBT */
        animation: none;
        transform: scale(1.04); /* keep slight zoom for look, no pan */
    }
}

/* Home-only: bring back a subtle shaded content panel for readability */
.hero-home .hero-content {
    background-color: rgba(46, 61, 66, 0.62) !important; /* slightly darker for better readability */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(2px);
}

/* Increase contrast on small screens where text overlaps busier areas */
@media (max-width: 768px) {
    .hero-home .hero-content {
        background-color: rgba(46, 61, 66, 0.72) !important; /* slightly darker on mobile */
    }
}

/* --------------------------------------------- */
/* Buffet hero: animated background (Ken Burns)   */
/* --------------------------------------------- */
.hero-buffet {
    overflow: hidden; /* ensure animated bg stays within hero */
}

.hero-buffet::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0; /* under overlay and content */
    background-image: url('../images_optimized/images/hero-images/buffet-1920x1364.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.08) translate3d(0, 0, 0);
    transform-origin: center;
    will-change: transform;
    animation: hero-kenburns 50s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .hero-buffet::after {
        animation: none;
        transform: scale(1.06);
    }
}

@media (max-width: 768px) {
    .hero-buffet::after {
        animation-duration: 65s;
    }
}

/* Remove heavy gradient overlay for non-home hero sections to reveal images */
.hero.hero-order::before,
.hero.hero-menu::before,
.hero.hero-about::before,
.hero.hero-support::before,
.hero.hero-contact::before,
.hero.hero-legal::before,
.hero.hero-allergen::before,
.hero.hero-buffet::before,
.hero.hero-construction::before {
    content: none !important;
    background: none !important;
}

/* Standardize translucent content panel across all non-home heroes */
.hero:not(.hero-home) .hero-content {
    background-color: rgba(46, 61, 66, 0.62) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    .hero:not(.hero-home) .hero-content {
        background-color: rgba(46, 61, 66, 0.72) !important;
    }
}

/* Under-construction: darker translucent content panel for readability */
.hero.hero-construction .hero-content {
    background-color: rgba(46, 61, 66, 0.78) !important;
}
@media (max-width: 768px) {
    .hero.hero-construction .hero-content {
        background-color: rgba(46, 61, 66, 0.88) !important;
    }
}

/* Enhance the overlay for better text visibility */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(46, 61, 66, 0.6), rgba(46, 61, 66, 0.8));
    z-index: 1;
}

/* Override home overlay AFTER generic rule so it takes effect */
.hero.hero-home::before {
    content: none !important; /* remove gradient overlay for home */
    background: none !important;
}

/* Hide grain overlay on home to reveal image more */
.hero-home .grain-overlay {
    display: none !important;
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------- */
/* Under-Construction hero with gentle movement  */
/* Reuse cafe interior with Ken Burns effect     */
/* --------------------------------------------- */
.hero-construction::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images_optimized/images/hero-images/under-conscruction-1920x1446.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Make background black & white for under-construction */
    filter: grayscale(100%) contrast(1.05) brightness(0.95);
    transform: scale(1.08) translate3d(0, 0, 0);
    transform-origin: center;
    will-change: transform;
    animation: hero-kenburns 55s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .hero-construction::after {
        animation: none;
        transform: scale(1.06);
    }
}

@media (max-width: 768px) {
    .hero-construction::after {
        animation-duration: 70s;
    }
}

/* Ensure hero content is visible over the background */
.hero-content {
    position: relative;
    z-index: 3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero {
        background-position: center center;
    }
}

/* Small hero section for inner pages */
.hero-small {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 38vh; /* shorter hero for inner/legal pages */
}

.hero-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(46, 61, 66, 0.6), rgba(46, 61, 66, 0.8));
    z-index: 1;
}

.hero-small .container {
    position: relative;
    z-index: 2;
}

/* Give small heroes the same translucent content panel */
.hero-small .hero-content {
    background-color: rgba(46, 61, 66, 0.62) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    .hero-small .hero-content {
        background-color: rgba(46, 61, 66, 0.72) !important;
    }
}

/* Remove gradient overlay specifically for legal small hero */
.hero-small.hero-legal::before {
    content: none !important;
    background: none !important;
}

/* -------------------------------------------------- */
/* Sitewide fade-up animation for hero content/cards  */
/* Ensures initial state exists before JS adds class  */
/* -------------------------------------------------- */
.feature-card, .hero-content, .hero-image {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.feature-card.animated, .hero-content.animated, .hero-image.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger hero elements slightly */
.hero-content {
    transition-delay: 0.2s;
}

.hero-image {
    transition-delay: 0.4s;
}

/* -------------------------------------------------- */
/* Performance improvements for hero backgrounds       */
/* -------------------------------------------------- */
/* Disable expensive backdrop filters (reduce paint cost) */
.hero-home .hero-content,
.hero:not(.hero-home) .hero-content,
.hero-small .hero-content {
    backdrop-filter: none !important;
}

/* Reduce motion pressure on tablets as well */
@media (max-width: 1024px) {
    .hero-home::after,
    .hero-buffet::after,
    .hero-construction::after,
    .hero-contact::after {
        animation: none;
        transform: scale(1.04);
    }
}

/* Responsive hero background sizes (serve smaller images on smaller screens) */
@media (max-width: 1024px) {
    /* Page backgrounds */
    .hero-order {
        background-image: -webkit-image-set(
            url('../new-images/amanda- order-1024x771.avif') type("image/avif"),
            url('../new-images/amanda- order-1024x771.webp') type("image/webp"),
            url('../new-images/amanda- order.jpg') type("image/jpeg")
        );
        background-image: image-set(
            url('../new-images/amanda- order-1024x771.avif') type("image/avif"),
            url('../new-images/amanda- order-1024x771.webp') type("image/webp"),
            url('../new-images/amanda- order.jpg') type("image/jpeg")
        );
    }
    .hero-menu { background-image: url('../images_optimized/images/hero-images/menu-1920x1364-1024x727.webp'); }
    .hero-about { background-image: url('../images_optimized/images/headers/about-header-1920x1446-1024x771.webp'); }
    .hero-support { background-image: url('../images_optimized/images/hero-images/local-1920x1364-1024x727.webp'); }
    .hero.hero-contact { background-image: url('../images_optimized/images/hero-images/contact-1920x1364-1024x727.webp'); }
    .hero-legal { background-image: url('../images_optimized/images/headers/about-header-1920x1446-1024x771.webp'); }
    .hero-privacy { background-image: url('../images_optimized/images/hero-images/privacy-1920x1364-1024x727.webp'); }
    .hero-terms { background-image: url('../images_optimized/images/hero-images/terms-1920x1364-1024x727.webp'); }
    .hero-cookies { background-image: url('../images_optimized/images/hero-images/cookies-1920x1364-1024x727.webp'); }
    .hero-allergen { background-image: url('../images_optimized/images/hero-images/allergen-1920x1364-1024x727.webp'); }

    /* Pseudo-element backgrounds */
    .hero-home::after { background-image: url('../images_optimized/images/cafe-interior-1920x1741-1024x929.webp'); }
    .hero-buffet::after { background-image: url('../images_optimized/images/hero-images/buffet-1920x1364-1024x727.webp'); }
    .hero-construction::after { background-image: url('../images_optimized/images/hero-images/under-conscruction-1920x1446-1024x771.webp'); }
}

@media (max-width: 768px) {
    /* Page backgrounds */
    .hero-order {
        background-image: -webkit-image-set(
            url('../new-images/amanda- order-768x578.avif') type("image/avif"),
            url('../new-images/amanda- order-768x578.webp') type("image/webp"),
            url('../new-images/amanda- order.jpg') type("image/jpeg")
        );
        background-image: image-set(
            url('../new-images/amanda- order-768x578.avif') type("image/avif"),
            url('../new-images/amanda- order-768x578.webp') type("image/webp"),
            url('../new-images/amanda- order.jpg') type("image/jpeg")
        );
    }
    .hero-menu { background-image: url('../images_optimized/images/hero-images/menu-1920x1364-768x546.webp'); }
    .hero-about { background-image: url('../images_optimized/images/headers/about-header-1920x1446-768x578.webp'); }
    .hero-support { background-image: url('../images_optimized/images/hero-images/local-1920x1364-768x546.webp'); }
    .hero.hero-contact { background-image: url('../images_optimized/images/hero-images/contact-1920x1364-768x546.webp'); }
    .hero-legal { background-image: url('../images_optimized/images/headers/about-header-1920x1446-768x578.webp'); }
    .hero-privacy { background-image: url('../images_optimized/images/hero-images/privacy-1920x1364-768x546.webp'); }
    .hero-terms { background-image: url('../images_optimized/images/hero-images/terms-1920x1364-768x546.webp'); }
    .hero-cookies { background-image: url('../images_optimized/images/hero-images/cookies-1920x1364-768x546.webp'); }
    .hero-allergen { background-image: url('../images_optimized/images/hero-images/allergen-1920x1364-768x546.webp'); }

    /* Pseudo-element backgrounds */
    .hero-home::after { background-image: url('../images_optimized/images/cafe-interior-1920x1741-768x696.webp'); }
    .hero-buffet::after { background-image: url('../images_optimized/images/hero-images/buffet-1920x1364-768x546.webp'); }
    .hero-construction::after { background-image: url('../images_optimized/images/hero-images/under-conscruction-1920x1446-768x578.webp'); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .feature-card, .hero-content, .hero-image {
        opacity: 1;
        transform: none;
        transition: none;
    }
}