/* ==========================================================================
   Home Mattress Center - Custom Stylesheet
   Maintained in static/css/custom.css
   ========================================================================== */

/* Typography */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-serif-luxury {
    font-family: 'Playfair Display', serif;
}

.font-script {
    font-family: 'Alex Brush', cursive;
}

/* --------------------------------------------------------------------------
   Dynamic Header & Brand Logo Scaling on Scroll
   -------------------------------------------------------------------------- */
#mainHeader {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#headerInner {
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#mainLogo {
    height: 2.75rem; /* ~44px on small mobile to fit smoothly inline with search and hamburger */
    width: auto;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
    #mainLogo {
        height: 4.25rem;
    }
}

@media (min-width: 1024px) {
    #mainLogo {
        height: 5rem; /* ~80px on desktop */
    }
}

/* Scrolled Compact State */
#mainHeader.is-scrolled {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

#mainHeader.is-scrolled #headerInner {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

#mainHeader.is-scrolled #mainLogo {
    height: 2.75rem; /* ~44px compact smooth shrink when scrolled */
}

/* --------------------------------------------------------------------------
   Top Navbar Marquee Ticker
   -------------------------------------------------------------------------- */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: inline-flex;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Authorized Luxury Dealer - Infinite Continuous Auto-Slider
   -------------------------------------------------------------------------- */
@keyframes brandsSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-brands-slide {
    display: flex;
    width: max-content;
    animation: brandsSlide 28s linear infinite;
    will-change: transform;
}

.animate-brands-slide:hover {
    animation-play-state: paused;
}

@media (max-width: 640px) {
    .animate-brands-slide {
        animation-duration: 20s;
    }
}

/* --------------------------------------------------------------------------
   Smooth Fade Masks & Utilities
   -------------------------------------------------------------------------- */
.mask-fade-horizontal {
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* --------------------------------------------------------------------------
   Mobile Bottom Navigation Bar
   -------------------------------------------------------------------------- */
#mobileBottomNav {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}