/* 
 * 1. THE MATH & GEOMETRY
 */
:root {
    --panel-width: 75vw;
    --panel-height: calc(var(--panel-width) * 9 / 16);

    --radius: 120vw;
    --angle-x: 36deg;

    /* Bumped up to create the vertical gap */
    --angle-y: 21.25deg;
}

@media only screen and (min-width: 768px) {
    :root {
        --panel-width: 60vw;
        --panel-height: calc(var(--panel-width) * 9 / 16);

        --radius: 95vw;
        --angle-x: 35.7deg;

        /* Bumped up to match the horizontal gaps */
        --angle-y: 20.75deg;
    }
}

/* 
 * 2. THE CAMERA
 */
#home-page {
    position: fixed;
    inset: 0;
    perspective: 800px;
    /* A nice natural lens */
    overflow: hidden;
}
@media only screen and (min-width: 768px) {
    #home-page {perspective: 1600px;}
}

/* 
 * 3. THE WORLD
 */
#world {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;

    /* FIX: We pull the entire world FORWARD. 
       This moves the camera inside the cylinder so the center panel lands at Z=0. */
    transform: translateZ(var(--radius));
}

/* 4. THE DYNAMIC SPHERE PANELS */
.panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--panel-width);
    height: var(--panel-height);

    margin-top: calc(var(--panel-height) / -2);
    margin-left: calc(var(--panel-width) / -2);

    /* THE STRICT AXIS SLOTS MATH */
    transform:
        /* Horizontal rotation only evaluates relative to this panel's specific --curr-x */
        rotateY(calc((var(--curr-x, 0) - var(--x, 0)) * var(--angle-x)))
        /* Vertical rotation only evaluates relative to this panel's specific --curr-y */
        rotateX(calc((var(--y, 0) - var(--curr-y, 0)) * var(--angle-y)))
        /* Push backward into the tunnel cylinder */
        translateZ(calc(var(--radius) * -1));

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: rgb(0, 0, 0);

    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.panel.active-axis {
    opacity: 0.5;
}

.panel.current-center {
    opacity: 1;
}

.panel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* 
 * 5. INVISIBLE NAVIGATION ZONES 
 */
.nav-zone {
    position: fixed;
    z-index: 190;
    /* Uncomment the line below if you want to see the hitboxes while testing! */
    /* background: rgba(255, 0, 0, 0.2); */
}

/* 
 * These percentages leave a clear "hole" in the dead center of the screen
 * that matches your panel sizes perfectly, ensuring the center is clickable! 
 */
.nav-zone.top { top: 0; left: 20vw; right: 20vw; height: 25vh; }
.nav-zone.bottom { bottom: 0; left: 20vw; right: 20vw; height: 25vh; }
.nav-zone.left { top: 0; left: 0; bottom: 0; width: 20vw; }
.nav-zone.right { top: 0; right: 0; bottom: 0; width: 20vw; }

/* 
 * UPDATE: Add the cursor property to your existing current-center class 
 */
.panel.current-center {
    opacity: 1;
    cursor: pointer; /* Lets the user know this is a link */
}