/* Prevents the 'ghost' horizontal scrollbar */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* 1. THE MAIN BAR */
.glass-nav {
    position: fixed !important;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 1200px;
    z-index: 9999;
    height: 65px !important; 
    padding: 0 30px !important; 
    box-sizing: border-box !important;

    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 100px;

    /* Force EVERYTHING inside to align to the dead center */
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: space-between !important;
}

/* 2. THE LOGO: Nuke all internal spacing */
.glass-nav .wp-block-site-logo, 
.glass-nav .wp-block-site-logo a,
.glass-nav .wp-block-image {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

/* 3. THE NAVIGATION: The "Ghost Container" Reset */
.glass-nav .wp-block-navigation,
.glass-nav .wp-block-navigation__responsive-container,
.glass-nav .wp-block-navigation__responsive-container-content,
.glass-nav .wp-block-navigation__container {
    display: flex !important;
    align-items: center !important; /* Force center */
    justify-content: center !important;
    height: 100% !important; /* Take up full 65px bar height */
    min-height: auto !important; /* Kill default WP heights */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. THE LINKS: Final baseline fix */
.glass-nav .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important; /* Adjust side-to-side gap here */
    line-height: 1 !important; 
    text-decoration: none !important;
}

/* Remove default link margins */
.glass-nav li {
    margin: 0 !important;
    list-style: none !important;
}

/* Forces the menu item container to be as wide as the text needs */
.glass-nav .wp-block-navigation-item {
    width: max-content !important;
    max-width: none !important;
    flex-shrink: 0 !important; /* Prevents the bar from "squeezing" the link */
    white-space: nowrap !important;
}

/* Double-down on the link text itself */
.glass-nav .wp-block-navigation-item__content {
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
}

/* This forces the whole menu to stay on one single line */
.glass-nav .wp-block-navigation__container {
    flex-wrap: nowrap !important;
}

/* Rounds only the button inside your glass nav */
.glass-nav .wp-block-button__link, 
.glass-nav .uagb-buttons-repeater {
    border-radius: 50px !important; /* Forces a "pill" shape */
    padding: 10px 24px !important; /* Adjusts the "breathability" of the button */
    font-size: 14px !important;
    font-weight: 500 !important;
}

@media (max-width: 768px) {
    /* 1. Hide the navigation links on mobile */
    .glass-nav .wp-block-navigation {
        display: none !important;
    }

    /* 2. Slim down the bar for mobile screens */
    .glass-nav {
        height: 55px !important; /* Slightly thinner for small screens */
        width: 95% !important;   /* Take up a bit more width on mobile */
        padding: 0 15px !important;
        top: 10px; /* Move it closer to the top on mobile */
    }

    /* 3. Scale down the logo so it doesn't feel huge */
    .glass-nav img {
        max-height: 28px !important;
    }

    /* 4. Make the button smaller for mobile */
    .glass-nav .wp-block-button__link {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
}

/* This ensures the big container is the anchor for the background */
/* 1. Force the Outer Section to actually have height */
/* THE OUTER STAGE */
.hero-outer-section {
    position: relative !important;
    height: 100vh !important;
    width: 100dvw !important; /* Use dynamic width to ignore scrollbar gaps */
    margin-left: calc(-50dvw + 50%) !important; 
    margin-right: calc(-50dvw + 50%) !important;
    min-height: 600px;
    overflow: hidden; /* CRITICAL: This hides the zoom-in 'spillover' */
    background-color: transparent !important;
}

/* 2. Ensure the Content Layer isn't covering the image with white */
.hero-content-layer {
    position: relative !important;
    z-index: 10; 
    height: 100vh !important;
    width: 100%;
    background-color: transparent !important; /* THE FIX: Keeps it see-through */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* This allows you to interact with buttons/links inside the layer */
.hero-content-layer * {
    pointer-events: auto;
}

/* THE EXPANDING BACKGROUND */
.hero-bg-frame {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    
    /* 1. FORCE THE BASELINE: Always start cropped! */
    clip-path: inset(12% 10% 12% 10%);
    opacity: 1;
    transform: scale(1);

    /* 2. THE ANIMATION */
    animation: expand-and-fade linear forwards;
    
    /* 3. THE BYPASS: Ignore theme wrappers, watch the main window */
    animation-timeline: scroll(root); 
    
    /* Starts at the very top, finishes 800px down */
    animation-range: 0px 800px; 
    
    will-change: clip-path, opacity, transform;
}

/* 2. THE IMAGE (Inside the Frame) */
.hero-bg-frame img,
.hero-bg-frame .wp-block-uagb-image,
.hero-bg-frame figure {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important; /* Keeps image from stretching */
    display: block !important;
    margin: 0 !important;
}

/* 3. THE ANIMATION STEPS */
@keyframes expand-and-fade {
    0% {
        /* Starts as the 'framed' barbarian poster */
        clip-path: inset(8% 6% 8% 6%); 
        opacity: 1;
        transform: scale(0.80);
    }
    
    /* At 70% of the scroll range (~560px down):
       The image hits full width, but it's already 70% faded out.
    */
    90% {
        clip-path: inset(0% 0% 0% 0%);
        opacity: 0.5;
			  transform: scale(1);
    }

    100% {
        /* Final state: fully transparent and slightly zoomed in */
        opacity: 0; 
        transform: scale(1.2);
        clip-path: inset(0% 0% 0% 0%);
    }
}