/* NEO-KOM Animation Styles */

/* Ensure smooth scrolling behavior handled by GSAP, kill native behavior if needed */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Main Container */
#brx-content {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 
 * GSAP Panels (Common Class) 
 * If the user hasn't added .gsap-panel yet, we also target by ID for safety 
 */
#home-section,
#aboutus-section,
#history-section,
#philosophy-section,
/* 
   Neokom V2: Geometric Reveal
   Style adjustments for stacking and 3D perspective.
*/

:root {
    --header-height: 0px;
    /* Adjust if you have a fixed header */
}

body,
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

main#brx-content {
    position: relative;
    width: 100%;
    /* No overflow hidden here to allow sticky/fixed to work */
}

/* 
   GSAP Panel - "Geometric Stack"
   We still use the panel concept. 
   GSAP will pin these. 
*/
.gsap-panel {
    width: 100%;
    min-height: 100vh;
    position: relative;
    /* GSAP will change to fixed during pin */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: var(--header-height, 0px);

    /* Ensure backgrounds work for layering */
    background-color: var(--content-bg, #fff);
    box-sizing: border-box;

    /* 3D Perspective for Tunnel Effect */
    /* Deeper perspective for "Zoom" feel */
    perspective: 2000px;
    transform-style: preserve-3d;
}

/* Menu Section Overlay */
#menu-section {
    position: fixed !important;
    /* Force fixed to cover screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    /* Highest priority */
    background-color: #000;
    /* Fallback bg */
    display: none;
    /* Initially hidden */
    opacity: 0;
}

/* 
   Wipe Layer 
   In V2, this layer might be the one doing the revealing, 
   OR the panel itself clips.
   We keep it for background color usage.
*/
.gsap-wipe-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Ensure Bricks content containers sit ABOVE the wipe layer */
/* We use :not(.gsap-wipe-layer) to prevent the wipe layer itself */
.gsap-panel>.brxe-container,
.gsap-panel>.brxe-block:not(.gsap-wipe-layer),
.gsap-panel>.brxe-div:not(.gsap-wipe-layer),
#menu-section>.brxe-container,
#menu-section>.brxe-block:not(.gsap-wipe-layer),
#menu-section>.brxe-div:not(.gsap-wipe-layer) {
    position: relative;
    z-index: 2;
    /* Enable 3D transforms for children */
    transform-style: preserve-3d;
}

/* 
   Helper for 3D Text 
   If user adds .gsap-3d-text to a container/heading, we ensure it's ready 
*/
.gsap-3d-text {
    display: inline-block;
    /* Needed for transform */
    transform-origin: center bottom;
}

/* Inner Animation Targets - Initial States */
/* We'll handle initial states via GSAP defaults. 
   Removing visibility: hidden to prevent permanent invisibility if JS hangs. */
.gsap-title,
.gsap-text,
.gsap-subtitle,
.gsap-icon {
    /* visibility: hidden; Removed to fix opacity issue */
}

/* Exception: Menu items should be managed by JS manually */
#menu-section .gsap-subtitle,
#menu-section .gsap-icon {
    visibility: visible;
    /* Let JS handle opacity from 0 */
}

.brxe-container {
    position: relative;
    z-index: 2;
}