- Stacking Context & Z-Index Failure The Bug: The Navbar (z-index: 9999) is appearing behind the Hero section.
Why? The .hero-wrapper-trap uses transform: translateZ(0). In CSS, applying a transform creates a new stacking context. Even though the Navbar has a higher z-index, it is trapped in a different context layer than the hero wrapper, making global z-index values irrelevant.
- The Invisible "Shield" (Pointer-Events) The Bug: Users cannot click the Mission/Review links or select text in the Hero area.
Why? The .invisible-overlay::after pseudo-element covers the screen with pointer-events: all and a massive z-index. It acts like an invisible pane of glass, catching all mouse interactions before they reach the elements underneath.
- Scroll & Anchor Sabotage The Bug: Clicking "Mission" scrolls to the middle of nowhere.
Why? * Scroll-Padding: scroll-padding-top: 500px on the body tells the browser to stop scrolling 500px before the element actually starts.
Scroll-Behavior Conflict: The !important flag on scroll-behavior: auto overrides the smooth scrolling, causing jarring, broken jumps.
- Sticky Interference & Overflow Traps The Bug: The Review section disappears or overlaps weirdly when scrolling.
Why? * Position Sticky: .scroll-lock-zone has position: sticky but a very small height. This causes it to "stick" but immediately get overlapped by the following content.
Overflow Trap: Using overflow: hidden on the .event-box and body without proper height/width management clips off data, making it impossible for the user to see the full content or scroll horizontally.