/* Main Scrollytelling Container */
        .scrolly-container {
            position: relative;
            --scrolly-stable-height: 100vh;
            --scrolly-visible-height: 100vh;
            --scrolly-stage-max-width: 177.778vh;
            /* Scroll space for the three product panels. */
            height: 300vh;
        }

        /* Sticky Viewport frame */
        .sticky-wrapper {
            position: sticky;
            top: 0;
            height: var(--scrolly-stable-height);
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .scrolly-product-link {
            position: absolute;
            inset: 0;
            z-index: 3;
            cursor: pointer;
        }

        .scrolly-product-link,
        .nav-item {
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
        }

        .scrolly-product-link:focus-visible {
            outline: 2px solid #ffffff;
            outline-offset: -6px;
        }

        /* Text and empty space pass clicks to the full-panel product link. */
        .scrolly-product-link:not([hidden]) ~ .content-layer .scrolly-header,
        .scrolly-product-link:not([hidden]) ~ .content-layer .content-wrapper,
        .scrolly-product-link:not([hidden]) ~ .content-layer .slide-text {
            pointer-events: none;
        }

        /* Background Image Stack */
        .bg-stack {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        .bg-image {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0; 
            transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Active background fades in and scales slightly down for a subtle parallax feel */
        .bg-image.active {
            opacity: 1; 
        }

        /* Gradient Overlay for Text Readability */
        .bg-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top, 
                rgba(0, 0, 0, 0.85) 0%, 
                rgba(0, 0, 0, 0.3) 60%, 
                rgba(0, 0, 0, 0.5) 100%
            );
            z-index: 2;
        }
/* Ensure the content layer spans the full height of the sticky frame */
.content-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
    /* Clear the fixed logo/menu row, with breathing room below it. */
    padding-top: calc(var(--site-header-top-padding, 0.5rem) + max(var(--site-header-control-size, 3rem), var(--site-header-logo-width, 15rem) * 0.237333) + clamp(2rem, 4vh, 3rem));
    padding-bottom: max(clamp(1.5rem, 4vw, 3.5rem), env(safe-area-inset-bottom));
    box-sizing: border-box;
    pointer-events: none; /* Let scroll/clicks pass through empty spaces */
}

/* Header bar container & content wrapper share the same max-width baseline */
.scrolly-header,
.content-wrapper {
    width: 100%;
    /* max-width: 75rem; */
    margin-inline: auto;
    pointer-events: auto;
}

.scrolly-header {
    display: flex;
    align-items: center;
}

/* Clean Top-Left Eyebrow */
.scrolly-eyebrow {
    font-size: clamp(1.1125rem, 1.4vw, 1.1375rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.856);
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vh, 2rem);
}

/* Text Container */
.text-slider {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    max-width: 43.75rem; /* Converted 700px to rem to follow scale rules */
}

.slide-text {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(1.25rem);
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-text.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.slide-text h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.slide-text p {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-weight: 400;
}

/* =========================================
   LITEBEAM INTERACTIVE STAGE (Slide 2)
   ========================================= */

/* =========================================
   LITEBEAM INTERACTIVE STAGE (Slide 2)
   ========================================= */

/* Outer full-screen viewport frame */
.bg-image.litebeam-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    
    /* Full-screen universal background image */
    background-image: url("assets/main-pics/litebeam/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    transition: opacity 0.5s ease;
    pointer-events: none;
    transform: none !important;
}

/* Activated via scrolly.js */
.bg-image.litebeam-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.litebeam-stage {
    --device-y: 37%;
    --device-width: 32%;
    --offset-left: 0%;
    --offset-right: 0%;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    
    max-width: var(--scrolly-stage-max-width);
    max-height: var(--scrolly-stable-height);
    box-sizing: border-box;
    
    /* CHANGE THIS FROM hidden TO visible */
    overflow: visible; 
}

/* Image Positioning inside Box */
.litebeam-device {
    position: absolute;
    top: var(--device-y);
    transform: translateY(-50%); /* Keeps vertical anchor point dead-centered */
    width: var(--device-width);
    height: auto;
}
.litebeam-left {
    left: var(--offset-left);
}

.litebeam-right {
    right: var(--offset-right);
    z-index: 10;
}

.litebeam-svg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    
    /* ADD THIS */
    overflow: visible;
}


/* Custom background color and styling for Slide 2 (LiteBeam) */
.bg-image.litebeam-slide {
    background-color: #090b11; /* <-- Change this to any desired background color */
    transform: none !important; /* Disables zoom transform artifact */
}

/* Hides dark gradient overlay when Slide 2 is active */
.scrolly-container:has(.litebeam-slide.active) .bg-overlay {
    opacity: 0;
    transition: opacity 0.5s ease;
}



/* =========================================
   LITEBEAM SVG BEAM TRANSMISSION ANIMATION
   ========================================= */

/* =========================================
   LITEBEAM HORIZONTAL BEAM TRANSMISSION
   ========================================= */

.litebeam-svg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.wifi-beam {
    transform-box: fill-box;
    transform-origin: center center;
    /* filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(7276%) hue-rotate(357deg) brightness(101%) contrast(124%); */
    animation: transmitBeam var(--beam-speed) linear infinite;
    opacity: 0; /* Prevents initial pop-in before animation starts */
}

/* Stagger delays (Negative values ensure seamless looping right when the page loads) */
.wifi-beam.beam-1 { animation-delay: 0s; }
.wifi-beam.beam-2 { animation-delay: calc(var(--beam-gap) * -1); }
.wifi-beam.beam-3 { animation-delay: calc(var(--beam-gap) * -2); }

@keyframes transmitBeam {
    0% {
        transform: translate(209px, 177px) scale(0.35);
        opacity: 0;
    }
    10% {
        opacity: 1; /* Smooth fade-in at beam launch */
    }
    90% {
        opacity: 1; /* Smooth fade-out before disappearing */
    }
    100% {
        transform: translate(1150px, 177px) scale(4);
        opacity: 0;
    }
}

/* =========================================
   EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEND
   ========================================= */

        /* Progress Navigation Bar */
        .progress-nav {
            pointer-events: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            width: 100%;
        }

        .nav-item {
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            padding: 0;
            color: #ffffff;
            font-family: inherit;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            outline: none;
            user-select: none;
        }

        .nav-item:focus-visible {
            outline: 2px solid #ffffff;
            outline-offset: 6px;
        }

        /* The horizontal indicator line */
        .line-container {
            position: relative;
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.25);
            border-radius: 2px;
            overflow: hidden;
        }

        .line-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
            transform: scaleX(0);
            transform-origin: left;
            will-change: transform;
        }

        .nav-label {
            font-size: clamp(0.75rem, 1.5vw, 0.9rem);
            font-weight: 600;
            color: rgba(255, 255, 255, 0.45);
            transition: color 0.3s ease;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; 
            letter-spacing: 0.05em;
        }

        .nav-item.active .nav-label {
            color: #ffffff;
        }

        /* Responsive adjustments for mobile viewports */
        @media (max-width: 768px) {
            /* Small background-only bleed prevents elastic scrolling from exposing an edge. */
            .bg-stack > img.bg-image {
                inset: -1.5%;
                width: 103%;
                height: 103%;
                max-width: none;
            }

            .content-layer {
                padding-inline: 2rem;
                padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
            }
            
            .content-wrapper {
                gap: 1rem;
            }

            /* Keep shorter descriptions close to the navigation, too. */
            .text-slider {
                align-items: end;
            }

            .progress-nav {
                gap: 0.75rem;
            }
        }

        /*
         * Mobile browser chrome changes the visible viewport without changing the
         * visual canvas. The background remains tied to the largest viewport while
         * foreground groups follow the currently visible height.
         */
        @media (hover: none) and (pointer: coarse) {
            @supports (height: 100lvh) {
                .scrolly-container {
                    --scrolly-stable-height: 100lvh;
                    --scrolly-visible-height: 100dvh;
                    --scrolly-stage-max-width: 177.778lvh;
                    height: 300lvh;
                }

                .content-layer {
                    inset: 0 0 auto;
                    height: var(--scrolly-visible-height);
                }

                .bg-image.litebeam-slide {
                    align-items: flex-start;
                }

                .litebeam-stage {
                    position: absolute;
                    top: calc(var(--scrolly-visible-height) / 2);
                    transform: translateY(-50%);
                }
            }
        }