/**
 * Aria Creative - About Page CSS
 * Premium Minimalist Hero Section with Fixed Video Background + 3D Spline Scene
 * Singleton Pattern Fix - Hydration Loop Prevention
 */

/* ===== Global Canvas Transparency - Force All Layers ===== */
#FINAL_ABOUT_MOUNT, 
#FINAL_ABOUT_MOUNT > div, 
canvas {
    background-color: transparent !important;
    background: transparent !important;
}

.main-content {
    background: none !important;
    background-color: transparent !important;
}

/* ===== GLOBAL BACKGROUND PURGE - Force Transparency ===== */
html, 
body, 
body[data-page="about"],
.main-content,
#FINAL_ABOUT_MOUNT,
.about-react-app {
    background: none !important;
    background-color: transparent !important;
}

/* ===== HTML & Body - Pure Black Background ===== */
html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000000 !important;
}

body[data-page="about"] {
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    display: block !important;
}

/* ===== Navbar (Header) - z-index: 1000, position: relative ===== */
body[data-page="about"] .main-header {
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

body[data-page="about"] .main-header * {
    pointer-events: auto !important;
}

body[data-page="about"] .main-header a,
body[data-page="about"] .main-header nav,
body[data-page="about"] .main-header ul,
body[data-page="about"] .main-header li {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ===== Footer - Last Child of Content Container ===== */
body[data-page="about"] .main-footer {
    position: relative !important;
    clear: both !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    height: auto !important;
}

body[data-page="about"] .main-footer * {
    pointer-events: auto !important;
}

body[data-page="about"] .main-footer a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ===== Main Content Container - Visual Purge ===== */
body[data-page="about"] .main-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100vh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000000 !important;
    background: #000000 !important;
    overflow: visible !important;
}

body[data-page="about"] main {
    background: transparent !important;
    overflow: visible !important;
}

body[data-page="about"] main > * {
    background: transparent !important;
    overflow: visible !important;
}

/* ===== Container Wrapper (if any) ===== */
body[data-page="about"] .container {
    background: transparent !important;
}

body[data-page="about"] .main-content .container {
    background: transparent !important;
}

/* ===== Spline Mount Point - Visual Purge ===== */
#FINAL_ABOUT_MOUNT {
    width: 100% !important;
    min-width: 100vw !important;
    min-height: 200vh !important;
    height: auto !important;
    position: relative !important;
    z-index: 10 !important;
    background-color: transparent !important;
    background: none !important;
    display: block !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important; /* VITAL: Allows clicks to pass through to Navbar */
}

/* ===== Remove All Transparency, Blur, and Haze ===== */
#FINAL_ABOUT_MOUNT > *,
#FINAL_ABOUT_MOUNT > * > * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* ===== Video Background Container (z-index: 1 - Absolute Base Layer) ===== */
#aria-video-background.about-video-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important; /* Absolute base layer - nothing can slip under it */
    overflow: hidden !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== Background Video - zIndex 1 ===== */
.about-video-background {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: brightness(0.6) saturate(0.8) !important;
    transition: filter 0.5s ease !important;
}

/* ===== Cinematic Video Overlay - Radial gradient for focus ===== */
.video-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%) !important;
    z-index: 5 !important; /* Between video (1) and Spline (10) */
    pointer-events: none !important;
}

/* ===== Overlay Layer (z-index: -9) - Readability Foundation ===== */
.about-video-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)) !important;
    z-index: -9 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== React App Container - position: relative, z-index: 10 ===== */
.about-react-app {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: transparent !important;
    background: none !important;
    z-index: 10 !important;
    display: block !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important; /* Allows clicks to pass through */
}

/* ===== Spline Canvas - pointer-events: auto ONLY on canvas ===== */
.about-react-app canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    pointer-events: auto !important; /* ONLY canvas is interactive */
    background-color: transparent !important;
    background: none !important;
}

/* ===== Force Spline container/wrapper to be transparent ===== */
.about-react-app > div,
.about-react-app > div > div {
    background-color: transparent !important;
    background: none !important;
}

/* ===== Spline Scale Wrapper - 0.7 scale ===== */
.about-react-app > div > div {
    transform: scale(0.7) !important;
    transform-origin: center center !important;
}

/* ===== Branding Text - width: max-content, pointer-events: none ===== */
.about-typography-overlay {
    position: absolute !important;
    top: 15% !important;
    left: 5% !important;
    z-index: 100 !important;
    pointer-events: none !important; /* Text does not block clicks */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    width: max-content !important; /* Prevents large invisible bounding box */
}

.about-brand-headline {
    pointer-events: none !important; /* Text does not block clicks */
    width: max-content !important; /* Prevents large invisible bounding box */
}

/* ===== Prevent layout collapse from flex parents ===== */
body[data-page="about"] > * {
    display: block !important;
    background: transparent !important;
}

/* ===== Remove problematic z-index from header orbs ===== */
body[data-page="about"] .fixed.inset-0 {
    z-index: -50 !important;
    pointer-events: none !important;
}

body[data-page="about"] .fixed.inset-0 > * {
    z-index: -50 !important;
    pointer-events: none !important;
}

/* ===== Force all parent elements to transparent ===== */
body[data-page="about"] section {
    background: transparent !important;
}

body[data-page="about"] section > * {
    background: transparent !important;
}

/* ===== Override: All content sections need solid backgrounds ===== */
body[data-page="about"] .aria-identity-section,
body[data-page="about"] .aria-service-grid-section,
body[data-page="about"] .aria-connect-section {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* ===== Sharp Section Transitions ===== */
body[data-page="about"] section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== Fixed Hero Container - Locked at Top ===== */
#video-pass-through-spline {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    background: none !important;
    background-color: transparent !important;
    pointer-events: none !important;
}

#video-pass-through-spline > div {
    filter: contrast(1.1) brightness(1.1) !important;
    background: none !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* ===== PRESERVING DOCUMENT FLOW - Content Container ===== */
.aria-identity-section {
    position: relative !important;
    z-index: 100 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    padding: 20vh 15% !important;
    opacity: 1 !important;
    width: 100% !important;
}

.aria-service-grid-section,
.aria-connect-section {
    position: relative !important;
    background: #000000 !important;
    background-color: #000000 !important;
    opacity: 1 !important;
    z-index: 100 !important;
    width: 100% !important;
}

/* ===== Alignment Purge - Reset Widths ===== */
body[data-page="about"] .main-content,
body[data-page="about"] .container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== Quality Control - Remove Blurs and Filters ===== */
#hero-fixed-layer,
#hero-fixed-layer > *,
#video-pass-through-spline,
#video-pass-through-spline > * {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    blur: none !important;
}

/* ===== Service Cards - Refined Styling ===== */
.aria-service-grid-section .service-card {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    opacity: 1 !important;
}

/* ===== STACKING CONTEXT FIX - Clean Blend Mode Container ===== */
/* OUTER WRAPPER: No transform/filter to preserve stacking context */
#video-pass-through-spline {
    background: transparent !important;
    /* NO transform, NO filter, NO opacity - these break stacking context */
}

/* INNER WRAPPER: Has mix-blend-mode, applied to parent of canvas */
#video-pass-through-spline > div {
    mix-blend-mode: screen !important;
    background: transparent !important;
    /* NO transform, NO filter here - applied to child instead */
}

/* TRANSFORM WRAPPER: Transform applied here, NOT on blend-mode container */
#video-pass-through-spline > div > div {
    /* Transform is applied via inline styles in React */
    background: transparent !important;
}

/* ===== VIDEO BACKGROUND LAYER ===== */
video {
    pointer-events: none !important;
}

/* ===== PHONE MODEL CANVAS - Native Transparency (No Hacks) ===== */
#video-pass-through-spline canvas {
    background: transparent !important;
    pointer-events: none !important;
}

/* ===== Ensure no stacking context issues ===== */
#video-pass-through-spline {
    background: transparent !important;
}

/* ===== Smooth scroll behavior ===== */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background: #000000;
}

/* ===== THE DEEP MERGER - Closing the Gap ===== */
#identity-section {
    margin-top: -25vh !important;
}

/* ===== Portal Architecture - No Negative Margins ===== */
/* Negative margins removed - Section 2 now properly covers Hero Portal */

/* ===== Canvas Hard Override ===== */
canvas {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===== About React App - No Background ===== */
.about-react-app,
.about-react-app > *,
.about-react-app > * > * {
    background: none !important;
    background-color: transparent !important;
}

/* ===== Responsive Design - Premium Mobile Experience ===== */
@media (max-width: 1024px) {
    #FINAL_ABOUT_MOUNT {
        width: 100vw !important;
        min-height: 100vh !important;
    }
    
    /* Service Grid - Single Column */
    .aria-service-grid-section {
        grid-template-columns: 1fr !important;
        gap: 4vh !important;
        padding: 12vh 8% !important;
    }
    
    /* Identity Section - Single Column */
    .aria-identity-section > div {
        grid-template-columns: 1fr !important;
        gap: 5vh !important;
    }
}

@media (max-width: 768px) {
    /* Hero Typography - Smaller on Mobile */
    #hero-typography h1 {
        font-size: 8vw !important;
    }
    
    /* Sections - Reduced Padding */
    .aria-identity-section,
    .aria-service-grid-section,
    .aria-connect-section {
        padding: 15vh 6% !important;
    }
    
    /* Service Cards - Full Width */
    .service-card {
        padding: 5vh 5vw !important;
    }
    
    /* Discord Button - Mobile Optimized */
    a[href*="discord"] {
        padding: 2.5vh 8vw !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    #hero-typography h1 {
        font-size: 10vw !important;
        letter-spacing: -0.01em !important;
    }
    
    .aria-identity-section,
    .aria-service-grid-section,
    .aria-connect-section {
        padding: 12vh 5% !important;
    }
}