/**
 * Section Band – shared CSS for Build2026 section backgrounds.
 * Use with section-band-helper.js. Include this file in any section that uses the band base (Location, Sponsor, Schedule, etc.).
 *
 * - Sets up CSS custom properties used by sections: --ee-section-bg-image, --ee-section-bg-color, --ee-section-header-color, --ee-section-body-color
 * - Animation modifiers: [data-ee-band-animation="ScrollFixed"], [data-ee-band-animation="ZoomInOut"]
 * - Scope is handled by each section (header-only = band strip; full-section = band wraps all content)
 */

/* ========== Animation: background fixed while content scrolls (parallax-style) ========== */
.ee-section-band[data-ee-band-animation="ScrollFixed"],
[data-ee-band-animation="ScrollFixed"] {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Reset for mobile – fixed attachment and heavy animations can be janky */
@media (max-width: 768px) {
    .ee-section-band[data-ee-band-animation="ScrollFixed"],
    [data-ee-band-animation="ScrollFixed"] {
        background-attachment: scroll;
    }
    .ee-section-band[data-ee-band-animation="ZoomInOut"],
    [data-ee-band-animation="ZoomInOut"] {
        animation: none;
        background-size: cover;
    }
}

/* ========== Animation: subtle zoom in/out (keyframes) ========== */
.ee-section-band[data-ee-band-animation="ZoomInOut"],
[data-ee-band-animation="ZoomInOut"] {
    background-image: var(--ee-section-bg-image);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    animation: ee-section-bg-zoom 24s ease-in-out infinite alternate;
    will-change: background-size;
}

@keyframes ee-section-bg-zoom {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 110% 110%;
    }
}

/* ========== Optional: video overlay (sections that render <video> can use .ee-section-band__video) ========== */
.ee-section-band__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.ee-section-band__video + .ee-section-band__overlay,
.ee-section-band__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Default dark overlay when band has image/video so text is readable */
.ee-section-band--has-image .ee-section-band__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.55) 100%);
}

/* Typography: sections can use these variables for header/body when band is present */
.ee-section-band .ee-section-band__header-title {
    color: var(--ee-section-header-color, #fff);
}

.ee-section-band .ee-section-band__body {
    color: var(--ee-section-body-color, inherit);
}

/* ========== Content readability (background/text helper) ==========
 * When a section uses a background image, wrap the content that sits on the band
 * in a div with class ee-section-band__content-readability so text stays readable
 * (frosted panel: semi-transparent background + backdrop blur). Use for Location,
 * Sponsor, Schedule, Products category bands, Featured Photo, etc.
 */
.ee-section-band__content-readability {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}