/**
 * Header Scroll Animation Styles
 * Styles for sticky header with animated logo
 */

/* Header Container - Front Page */
body.home #home-header-container,
body.front-page #home-header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 77px;
    overflow: visible; /* Allow logo to overflow */
    background-color: #7E2D2D40;
    transition: background-color 0.3s ease, max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
}

/* Header Container - Other Pages */
body:not(.home) #home-header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 152px;
    overflow: visible; /* Allow logo to overflow */
    background-color: #7E2C2C; /* Background when at top (not scrolled) */
    transition: background-color 0.3s ease, max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
}

/* Logo Container - Front Page */
body.home .logo-home-img,
body.front-page .logo-home-img {
    max-height: 200px !important;
    width: auto;
    transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                margin-top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: block;
    position: relative;
    z-index: 1001;
    /* Allow logo to overflow container */
    margin: 100px auto 0 auto; /* margin-top: 100px when at top */
    overflow: visible;
    transform-origin: center center;
    will-change: max-height, margin-top, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Logo Container - Other Pages */
.logo-home-img {
    max-height: 120px !important;
    width: auto;
    transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                margin-top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: block;
    position: relative;
    z-index: 1001;
    /* Allow logo to overflow container */
    margin: 0 auto; /* No margin-top for other pages */
    overflow: visible;
    transform-origin: center center;
    will-change: max-height, margin-top, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Logo Image inside container - Front Page */
body.home .logo-home-img img,
body.front-page .logo-home-img img {
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.6s ease !important;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    will-change: max-height, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Logo Image inside container - Other Pages */
body:not(.home) .logo-home-img img {
    max-height: 120px !important;
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
    transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                max-width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.6s ease !important;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    will-change: max-height, max-width, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Scrolled state - applied via JavaScript */
body.home #home-header-container.scrolled,
body.front-page #home-header-container.scrolled {
    background-color: rgba(126, 45, 45, 0.25) !important;
}

/* Scrolled state for other pages */
body:not(.home) #home-header-container.scrolled {
    background-color: rgba(126, 45, 45, 0.9) !important;
    max-height: 112px !important;
}

/* Scrolled state for logo - applies to both front page and other pages */
.logo-home-img.scrolled,
.logo-home-img[data-state="scrolled"],
body.home .logo-home-img.scrolled,
body.front-page .logo-home-img.scrolled {
    max-height: 64px !important;
    margin-top: 0 !important; /* Remove margin-top when scrolled */
    transform: scale(0.98) !important; /* Slight scale for smoothness */
}

.logo-home-img.scrolled img,
.logo-home-img[data-state="scrolled"] img,
body.home .logo-home-img.scrolled img,
body.front-page .logo-home-img.scrolled img {
    max-height: 64px !important;
    transform: scale(0.98) !important; /* Slight scale for smoothness */
}

/* Scrolled state for other pages logo image */
body:not(.home) .logo-home-img.scrolled img,
body:not(.home) .logo-home-img[data-state="scrolled"] img {
    max-height: 64px !important;
    max-width: 64px !important;
    transform: scale(0.98) !important; /* Slight scale for smoothness */
}

/* Ensure container doesn't expand with logo */
#home-header-container {
    display: flex;
    align-items: flex-start; /* Align items to top */
    justify-content: center;
}

/* Smooth transitions */
#home-header-container,
.logo-home-img {
    will-change: background-color, max-height;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Responsive adjustments - Mobile */
@media (max-width: 768px) {
    /* Home page mobile styles - Navigation container */
    body.home #home-header-container,
    body.front-page #home-header-container {
        max-height: 56px !important;
        height: 56px !important;
    }
    
    body.home .logo-home-img,
    body.front-page .logo-home-img {
        max-height: 120px !important;
    }
    
    body.home .logo-home-img img,
    body.front-page .logo-home-img img {
        max-height: 120px !important;
    }
    
    /* Home page mobile scrolled state - Navigation container stays at 56px */
    body.home #home-header-container.scrolled,
    body.front-page #home-header-container.scrolled {
        max-height: 56px !important;
        height: 56px !important;
    }
    
    body.home .logo-home-img.scrolled,
    body.front-page .logo-home-img.scrolled,
    body.home .logo-home-img[data-state="scrolled"],
    body.front-page .logo-home-img[data-state="scrolled"] {
        max-height: 50px !important;
        margin-top: 0 !important;
    }
    
    body.home .logo-home-img.scrolled img,
    body.front-page .logo-home-img.scrolled img,
    body.home .logo-home-img[data-state="scrolled"] img,
    body.front-page .logo-home-img[data-state="scrolled"] img {
        max-height: 50px !important;
    }
    
    /* Other pages mobile styles */
    body:not(.home) #home-header-container {
        max-height: 60px;
    }
    
    body:not(.home) .logo-home-img {
        max-height: 150px;
    }
    
    body:not(.home) .logo-home-img.scrolled {
        max-height: 50px;
    }
}