/**
 * V3 Navigation Hub Styles
 * 
 * Central navigation interface with cube grid system
 * All spacing follows 6n system
 */

/* Main container */
.v3-navigation-hub {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Above header (300) but below loader (10002) */
    background-color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
    will-change: opacity, visibility; /* Optimize for transitions */
    transform: translateZ(0); /* Force GPU acceleration */
}

/* START CLEAN-FIX-P5-SESSION7-NAVHUB-FLASHOUT-MITIGATION
   Defensive mitigation for sporadic nav-hub flash-out per Session-7 Step 3 Track A
   (zany-crystal v3 plan). Diagnostic recipe ran 6 vectors:
   - Vector 1 (V3Component init race): inconclusive without runtime evidence
   - Vector 2 (CSS animation end-state): no animation ends at opacity:0/visibility:hidden
     after .visible — clean
   - Vector 3 (z-index): nav-hub z-index 9999, no clashes with header(300)/loader(10002)
   - Vector 4 (reduced-motion gap): CONFIRMED — no @media (prefers-reduced-motion: reduce)
     block in this CSS file; closed by the @media block added below
   - Vector 5 (browser-specific): inconclusive without cross-browser testing on real devices
   - Vector 6 (L7 init-pathway-divergence): NOT APPLICABLE — V3NavigationHub instantiated
     via V3App.js:150-152 NOT inside HomeV3Reference.initializeProjectComponents() if/else
     emergency-fallback. No hoist concern for this surface.
   Vectors 1/2/3/5 deferred to Phase B B.1 (real-environment diagnostic with Chrome
   DevTools Performance trace + cross-browser device testing).
   Mitigation applied here: pointer-events guard prevents click pass-through to
   underlying elements during transition windows + ensures non-visible state is
   truly inert. Reversibility: trivial. To revert: search for
   CLEAN-FIX-P5-SESSION7-NAVHUB-FLASHOUT-MITIGATION and delete between START and END. */
.v3-navigation-hub:not(.visible) {
    pointer-events: none;
}
/* END CLEAN-FIX-P5-SESSION7-NAVHUB-FLASHOUT-MITIGATION */

.v3-navigation-hub.visible {
    opacity: 1;
    visibility: visible;
}

/* START CLEAN-FIX-P5-SESSION7-NAVHUB-REDUCED-MOTION
   Closes Vector 4 gap in 6-vector nav-hub flash-out diagnostic (Session-7 Step 3
   Track A per zany-crystal v3 plan). Phase 10.14 prefers-reduced-motion completeness
   audit surfaced that v3-navigation-hub.css had ZERO `prefers-reduced-motion: reduce`
   blocks despite being a load-bearing brand surface with motion-heavy keyframes
   (cubeMinimize, cubeExpand, pathPulse, targetPulse, pageMinimize, hubGridDrift,
   hubAccentDrift, cursorPulse, cursorRotate, v3-fade-in). Honors V3 brutalist-
   geometric a11y discipline (per design-system convention used in adjacent CSS
   files like v3-overview-overlay.css L716 V-S9 reduced-motion gate). For users
   with prefers-reduced-motion enabled, transitions snap to end-state and animations
   stop after first iteration. To revert: search for CLEAN-FIX-P5-SESSION7-NAVHUB-
   REDUCED-MOTION and delete between START and END. */
@media (prefers-reduced-motion: reduce) {
    .v3-navigation-hub,
    .v3-navigation-hub * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* END CLEAN-FIX-P5-SESSION7-NAVHUB-REDUCED-MOTION */

/* Background layers */
.nav-hub-bg-layer-1,
.nav-hub-bg-layer-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.nav-hub-bg-layer-1 {
    background-image: 
        linear-gradient(0deg, var(--darkest) 1px, transparent 1px),
        linear-gradient(90deg, var(--darkest) 1px, transparent 1px);
    background-size: 42px 42px; /* 6n: 7×6 */
    opacity: 0.15; /* More subtle grid */
    animation: hubGridDrift 30s linear infinite;
}

.nav-hub-bg-layer-2 {
    background-image: 
        linear-gradient(45deg, transparent 48%, var(--dark) 49%, var(--dark) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, var(--darkest) 49%, var(--darkest) 51%, transparent 52%);
    background-size: 102px 102px; /* 6n: 17×6 */
    opacity: 0.05; /* Very subtle accent */
    animation: hubAccentDrift 25s linear infinite reverse;
    mix-blend-mode: screen;
}

/* Custom cursor - Hidden for automatic transitions */
.nav-cursor-node {
    display: none;
}

@keyframes cursorRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.nav-cursor-node::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; /* 6n: 1×6 */
    height: 6px; /* 6n: 1×6 */
    background-color: var(--cyan);
    opacity: 0.8;
    animation: cursorPulse 2s ease-in-out infinite;
}

.nav-cursor-node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 18px; /* 6n: 3×6 */
    height: 18px; /* 6n: 3×6 */
    border: 1px solid var(--cyan);
    opacity: 0.4;
    animation: cursorRotate 3s linear infinite reverse;
}

@keyframes cursorPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.4; }
}

/* Removed hovering-page state - not needed for automatic transitions */

/* Cursor scanner lines - Hidden for automatic transitions */
.nav-cursor-scanner-h,
.nav-cursor-scanner-v {
    display: none;
}

/* Cube grid */
.nav-cube-grid {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    z-index: 10;
}

/* Individual cubes */
.nav-cube {
    position: absolute;
    border: 1px solid var(--dark);
    background-color: transparent;
    transition: all 0.3s var(--ease-out);
    opacity: 0;
    transform: scale(0.8) translateZ(0); /* GPU acceleration */
    cursor: default;
    will-change: transform, opacity; /* Optimize for animations */
}

.nav-cube.animated-in {
    opacity: 1;
    transform: scale(1) translateZ(0); /* Maintain GPU acceleration */
}

/* Page cubes */
.nav-cube.page-cube {
    border: 3px solid var(--dark); /* 6n: 0.5×6 */
    background-color: var(--darkest);
    cursor: default;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-cube.current-page {
    border-color: var(--page-color, var(--cyan));
    background-color: rgba(0, 247, 255, 0.05);
}

/* Cube corners */
.cube-corner {
    position: absolute;
    width: 6px; /* 6n: 1×6 */
    height: 6px; /* 6n: 1×6 */
    background-color: var(--page-color, var(--dark));
    opacity: 0.4;
    transition: all 0.3s ease;
}

.cube-corner.tl { top: -3px; left: -3px; } /* 6n: -0.5×6 */
.cube-corner.tr { top: -3px; right: -3px; } /* 6n: -0.5×6 */
.cube-corner.bl { bottom: -3px; left: -3px; } /* 6n: -0.5×6 */
.cube-corner.br { bottom: -3px; right: -3px; } /* 6n: -0.5×6 */

/* Removed hover state - not needed for automatic transitions */

/* Cube titles */
.cube-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-specialized);
    font-weight: var(--font-weight-bold);
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    transition: all 0.3s ease;
    text-align: center;
    padding: 6px; /* 6n: 1×6 */
    /* START CLEAN-FIX-8A-B4-NAVHUB-MULTILINE
       V2 multi-line enhancements — allow page names to wrap within cubes.
       To revert: Delete everything between START and END markers. */
    white-space: normal;        /* Allow text wrapping */
    word-break: break-word;     /* Break long page names */
    line-height: 1.2;           /* Tighter line-height for multi-line */
    display: flex;              /* Flex centering for wrapped text */
    align-items: center;
    justify-content: center;
    hyphens: auto;              /* Browser-assisted hyphenation */
    /* END CLEAN-FIX-8A-B4-NAVHUB-MULTILINE */
}

/* Removed hover state for title - automatic transitions only */

.nav-cube.current-page .cube-title {
    color: var(--page-color, var(--cyan));
    opacity: 1;
}

/* START CLEAN-FIX-8A-B8-C2-NAVHUB-ACTIVE-STYLE
   Component .2 active cube styling: V3 Circuit diamond nodes + trace lines,
   V4 Ember glow effects at half intensity. Passive cubes retain production base.
   To revert: Search for CLEAN-FIX-8A-B8-C2-NAVHUB-ACTIVE-STYLE and delete between START/END. */

/* Active cube — page-color-aware bg + V4 Ember glow at half */
.nav-cube.current-page {
    background-color: rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.05);
    box-shadow:
        inset 0 0 18px rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.05),
        0 0 18px rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.12);
}

/* Active cube — subtle page-color background tint (V4 Ember at half) */
.nav-cube.current-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.02);
    pointer-events: none;
}

/* Active corner nodes — V3 Circuit diamond rotation + combined glow */
.nav-cube.current-page .cube-corner {
    opacity: 0.9;
    transform: rotate(45deg);
    box-shadow:
        0 0 6px var(--page-color, var(--cyan)),
        0 0 12px rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.3);
}

/* Active trace lines — V3 Circuit, 12px lines extending inward from each corner */
.nav-cube.current-page .cube-corner::after {
    content: '';
    position: absolute;
    background: var(--page-color, var(--cyan));
    opacity: 0.3;
}
.nav-cube.current-page .cube-corner.tl::after {
    top: 3px;    /* 6n: 0.5×6 */
    left: 3px;
    width: 12px; /* 6n: 2×6 */
    height: 1px;
}
.nav-cube.current-page .cube-corner.tr::after {
    top: 3px;
    right: 3px;
    width: 12px;
    height: 1px;
}
.nav-cube.current-page .cube-corner.bl::after {
    bottom: 3px;
    left: 3px;
    width: 12px;
    height: 1px;
}
.nav-cube.current-page .cube-corner.br::after {
    bottom: 3px;
    right: 3px;
    width: 12px;
    height: 1px;
}

/* Active title — white text + V3 Circuit text shadow */
.nav-cube.current-page .cube-title {
    color: var(--white);
    text-shadow: 0 0 12px rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.3);
}

/* END CLEAN-FIX-8A-B8-C2-NAVHUB-ACTIVE-STYLE */

/* Path animation */
.nav-cube.path-active {
    --path-color: var(--cyan); /* Default color, overridden by JS */
    background-color: rgba(var(--path-color-rgb, var(--cyan-rgb)), 0.15);
    border-width: 2px;
    border-color: var(--path-color);
    z-index: 10;
    animation: pathPulse 0.6s ease;
    box-shadow: 0 0 30px var(--path-color), 
                inset 0 0 15px rgba(var(--path-color-rgb, var(--cyan-rgb)), 0.3);
}

@keyframes pathPulse {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.3);
        opacity: 0.9;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Active target cube animation */
.nav-cube.active-target {
    animation: targetPulse 1s ease infinite;
    border-color: var(--page-color, var(--cyan)) !important;
    background-color: var(--black);
    z-index: 20;
    will-change: transform, box-shadow; /* Optimize for pulse animation */
}

@keyframes targetPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 rgba(var(--page-color-rgb, var(--cyan-rgb)), 0);
    }
    50% { 
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(var(--page-color-rgb, var(--cyan-rgb)), 0.5);
    }
}

/* Minimizing from page animation */
.nav-cube.minimizing-from-page {
    animation: pageMinimize 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes pageMinimize {
    0% {
        transform: scale(10);
        opacity: 0.1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Minimize/expand animations */
.nav-cube.minimizing {
    animation: cubeMinimize 0.8s var(--ease-out) forwards;
}

.nav-cube.minimized {
    transform: scale(0.1);
    opacity: 0.5;
}

.nav-cube.expanding {
    animation: cubeExpand 0.8s var(--ease-out) forwards;
    z-index: 1000;
}

@keyframes cubeMinimize {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    100% { 
        transform: scale(0.1);
        opacity: 0.5;
    }
}

@keyframes cubeExpand {
    0% { 
        transform: scale(1);
        border-radius: 0;
    }
    100% { 
        transform: scale(50);
        border-radius: 0;
        background-color: var(--black);
    }
}

/* Navigation header */
.nav-hub-header {
    position: absolute;
    top: 42px; /* 6n: 7×6 */
    left: 60px; /* 6n: 10×6 */
    right: 60px; /* 6n: 10×6 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    padding: 24px; /* 6n: 4×6 */
    background-color: var(--darkest);
    border: 1px solid var(--dark);
    clip-path: polygon(
        12px 0, 100% 0, 100% calc(100% - 12px),
        calc(100% - 12px) 100%, 0 100%, 0 12px
    ); /* 6n: 2×6 corners */
}

.nav-hub-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 6px; /* 6n: 1×6 */
}

.nav-hub-status {
    font-family: var(--font-secondary);
    font-size: var(--font-size-small);
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Current page indicator */
.nav-current-page {
    position: absolute;
    bottom: 42px; /* 6n: 7×6 */
    left: 60px; /* 6n: 10×6 */
    display: flex;
    align-items: center;
    gap: 18px; /* 6n: 3×6 */
    z-index: 20;
    padding: 18px 24px; /* 6n: 3×6, 4×6 */
    background-color: var(--darkest);
    border: 1px solid var(--dark);
}

.current-label {
    font-family: var(--font-secondary);
    font-size: var(--font-size-small);
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 3px; /* 6n: 0.5×6 */
    opacity: 0.7;
}

.current-page-name {
    font-family: var(--font-primary);
    font-size: var(--font-size-standard);
    font-weight: var(--font-weight-bold);
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 3px; /* 6n: 0.5×6 */
}

/* Animations */
@keyframes hubGridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(42px, 42px); } /* 6n: 7×6 */
}

@keyframes hubAccentDrift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-48px, -48px) rotate(1deg); } /* 6n: -8×6 */
}

/* Responsive adjustments — 5-tier system ported from V2 (iframe-navigation-hub-v2.html)
   START CLEAN-FIX-8A-B4-NAVHUB-PORT
   Cube width/height NOT ported — JS sets inline styles (V3NavigationHub.js:105-106).
   Only .cube-title typography, .nav-current-page positioning, grid/header geometry ported.
   To revert: Delete everything between START and END markers.
   Re-add original single-breakpoint block from git history (commit 8c9c4c9). */

/* B4-A: XL (≥1200px) — Base typography with overflow protection */
@media (min-width: 1200px) {
    .cube-title {
        font-size: var(--font-size-specialized);
        padding: 6px; /* 6n: 1×6 (V2 had 8px, fixed for 6n) */
        max-height: calc(100% - 12px); /* 6n: 2×6 — prevent text overflow */
        overflow: hidden;
    }
}

/* B4-B: LG (992-1199px) — Same typography, no additional overrides needed */
@media (min-width: 992px) and (max-width: 1199px) {
    .cube-title {
        font-size: var(--font-size-specialized);
        padding: 6px; /* 6n: 1×6 */
    }
}

/* B4-C: MD (768-991px) — Smaller font for tighter cubes */
@media (min-width: 768px) and (max-width: 991px) {
    .cube-title {
        font-size: var(--font-size-small);
        padding: 6px; /* 6n: 1×6 */
    }

    .nav-current-page {
        bottom: 24px; /* 6n: 4×6 — closer to grid at tablet */
        left: 48px;   /* 6n: 8×6 */
    }
}

/* B4-D: SM (600-767px) — Compact grid, stacked header, tighter indicator */
@media (min-width: 600px) and (max-width: 767px) {
    .cube-title {
        font-size: var(--font-size-small);
        padding: 6px;          /* 6n: 1×6 (V2 had 4px, fixed for 6n) */
        letter-spacing: 1px;   /* (V2 had 0.5px, fixed for 6n — matches base) */
    }

    .nav-cube-grid {
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

    .nav-hub-header {
        top: 24px;    /* 6n: 4×6 */
        left: 24px;   /* 6n: 4×6 */
        right: 24px;  /* 6n: 4×6 */
        flex-direction: column;
        gap: 12px;    /* 6n: 2×6 */
    }

    .nav-hub-instructions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px; /* 6n: 2×6 */
    }

    .nav-current-page {
        bottom: 12px;          /* 6n: 2×6 */
        left: 36px;            /* 6n: 6×6 */
        padding: 12px 18px;    /* 6n: 2×6, 3×6 */
    }
}

/* B4-E: XS (≤599px) — Tightest layout, centered indicator, compact text */
@media (max-width: 599px) {
    .cube-title {
        font-size: var(--font-size-small); /* V2 had 9px, using design token instead */
        padding: 6px;          /* 6n: 1×6 (V2 had 4px, fixed for 6n) */
        letter-spacing: 0;
        line-height: 1.1;
    }

    .nav-cube-grid {
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

    .nav-hub-header {
        top: 24px;    /* 6n: 4×6 */
        left: 24px;   /* 6n: 4×6 */
        right: 24px;  /* 6n: 4×6 */
        flex-direction: column;
        gap: 12px;    /* 6n: 2×6 */
    }

    .nav-hub-instructions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px; /* 6n: 2×6 */
    }

    .nav-current-page {
        bottom: 6px;           /* 6n: 1×6 — flush to bottom, below grid */
        left: 24px;            /* 6n: 4×6 */
        right: 24px;           /* 6n: 4×6 — full width for centering */
        padding: 12px 18px;    /* 6n: 2×6, 3×6 */
        justify-content: center;
    }
}
/* END CLEAN-FIX-8A-B4-NAVHUB-PORT */

/* START CLEAN-FIX-8A-B8-NAVHUB-TEXT-STATES
   3-state responsive text system CSS hooks.
   data-text-state attribute set on .nav-cube-grid by JS (V3NavigationHub.js).
   States: "default" (XL/LG), "thinner" (MD), "abbreviated" (SM/XS).
   To revert: Search for CLEAN-FIX-8A-B8-NAVHUB-TEXT-STATES and delete between START/END. */

/* Abbreviated state — shorter strings, tighter spacing */
[data-text-state="abbreviated"] .cube-title {
    letter-spacing: 0;
    word-break: normal; /* Short strings don't need word-break */
    hyphens: none;
}

/* Thinner state — inherits multiline CLEAN-FIX-8A-B4 styles (white-space: normal, etc.) */
/* No additional overrides needed; the base .cube-title multiline styles handle line breaks */

/* END CLEAN-FIX-8A-B8-NAVHUB-TEXT-STATES */

/* ===== LOADING SCREEN ANIMATIONS ===== */

/* Old loading overlay styles removed - using V3PageLoader component instead */
/* Expansion now handled by simple overlay approach */

/* Smooth fade-in for loading text */
@keyframes v3-fade-in {
    from { 
        opacity: 0; 
        transform: translateY(12px); /* 6n: 2×6 */
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}