/* ==========================================================================
   blueprints.net.au - DESIGN SYSTEM & STYLESHEET
   Aesthetics: Technical Luxury / Engineering Precision / Live CAD HUD
   ========================================================================== */

/* 1. GLOBAL VARIABLES & DESIGN TOKENS */
:root {
    /* Color Palette */
    --color-bg-dark: #0F1B30;       /* Ultra-clean deep Prussian Navy background */
    --color-bg-cobalt: #16294A;     /* Soft matte Steel Navy for cards */
    --color-accent-blue: #4A6385;   /* Subdued, low-contrast Slate/Drafting Blue */
    --color-text-white: #FAFAFA;    /* Crisp White */
    --color-text-muted: #8496AD;    /* Faded Slate for spacious, soft readability */
    
    /* Glowing Effects */
    --glow-light-white: rgba(250, 250, 250, 0.75);
    --glow-cobalt: rgba(22, 41, 74, 0.4);
    --border-glass: rgba(90, 125, 175, 0.12); /* Extremely soft, thin border lines */
    
    /* Font Stacks */
    --font-monospace: 'Space Mono', 'Roboto Mono', monospace;
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
    
    /* Transition Speed */
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-medium: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. BASE CALIBRATIONS & RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}

html {
    scroll-behavior: smooth;
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.cad-dark-theme {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Custom Scrollbar - CAD Slider Style */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
    border-left: 1px solid var(--border-glass);
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent-blue);
    border-radius: 0px;
    border: 2px solid var(--color-bg-dark);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-white);
}

/* 3. DYNAMIC BACKGROUND CAD GRIDS */
.cad-bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    background-color: var(--color-bg-dark);
    /* Double Grid Layout: Major 100px (Very faint), Minor 10px (Almost imperceptible) */
    background-image: 
        linear-gradient(to right, rgba(90, 125, 175, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(90, 125, 175, 0.035) 1px, transparent 1px),
        linear-gradient(to right, rgba(250, 250, 250, 0.005) 10px, transparent 10px),
        linear-gradient(to bottom, rgba(250, 250, 250, 0.005) 10px, transparent 10px);
    background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
    background-position: center center;
    opacity: 0.95;
}

.cad-bg-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    /* Soft, low-contrast radial gradient to keep the center clean and dark */
    background: radial-gradient(circle at 50% 50%, rgba(22, 41, 74, 0.5) 0%, rgba(15, 27, 48, 0.99) 80%);
}

/* 4. CAD COORDINATES & CROP MARKS OVERLAYS */
.viewport-crop-marks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
}

.crop-mark {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(74, 107, 156, 0.35);
}

.crop-mark.top-left { top: 30px; left: 30px; border-right: none; border-bottom: none; }
.crop-mark.top-right { top: 30px; right: 30px; border-left: none; border-bottom: none; }
.crop-mark.bottom-left { bottom: 30px; left: 30px; border-right: none; border-top: none; }
.crop-mark.bottom-right { bottom: 30px; right: 30px; border-left: none; border-top: none; }

.cad-coordinate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
    pointer-events: none;
}

.coord-tag {
    position: absolute;
    font-family: var(--font-monospace);
    font-size: 10px;
    color: var(--color-accent-blue);
    letter-spacing: 0.1em;
}

.coord-tag.top-left-coord { top: 35px; left: 60px; }
.coord-tag.top-right-coord { top: 35px; right: 60px; }
.coord-tag.bottom-left-coord { bottom: 35px; left: 60px; }
.coord-tag.bottom-right-coord { bottom: 35px; right: 60px; }

/* 5. HERO SECTION */
.hero-container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

/* Three.js Monogram Canvas Viewport - Positioned in the upper half */
.monogram-canvas-container {
    position: absolute;
    top: 5vh;
    left: 0;
    width: 100%;
    height: 48vh;
    z-index: 1;
    pointer-events: auto; /* Allow mouse tilt interactions */
}

/* Absolute Floating CAD lines on screen */
.cad-axis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Central crosshair representing reference origin */
.cad-crosshair {
    position: absolute;
    top: 30%; /* Shifted to match the monogram's center */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    opacity: 0.25;
}
.cad-crosshair::before,
.cad-crosshair::after {
    content: '';
    position: absolute;
    background-color: var(--color-text-white);
}
.cad-crosshair::before { top: 20px; left: 0; width: 40px; height: 1px; }
.cad-crosshair::after { top: 0; left: 20px; width: 1px; height: 40px; }

/* Floating Coordinates */
.cad-label-float {
    position: absolute;
    font-family: var(--font-monospace);
    font-size: 9px;
    color: rgba(74, 107, 156, 0.4);
    pointer-events: none;
}

.cad-label-float.f1 { top: 12%; left: 30%; }
.cad-label-float.f2 { top: 14%; left: 30.5%; border-top: 1px solid rgba(74, 107, 156, 0.2); width: 40px; padding-top: 3px; }
.cad-label-float.f3 { top: 8%; right: 28%; }
.cad-label-float.f4 { top: 10%; right: 28%; border-top: 1px solid rgba(74, 107, 156, 0.2); width: 40px; padding-top: 3px; }
.cad-label-float.f5 { top: 48%; left: 49%; transform: translateX(-50%); text-align: center; }

/* Clean typography panel floating below the 3D Monogram */
.hero-content-panel {
    position: absolute;
    bottom: 75px; /* Floats perfectly above the live status bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    max-width: 900px;
    width: 92%;
    text-align: center;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transform: translateX(-50%) translateY(0);
    transition: transform var(--transition-slow);
}

.hero-content-panel::before,
.hero-content-panel::after {
    display: none; /* Removed heavy border decorations for floating aesthetic */
}

/* Typography elements */
.technical-monospace {
    font-family: var(--font-monospace);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-accent-blue);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.main-headline {
    font-family: var(--font-sans);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-white);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.highlight-text {
    background: linear-gradient(135deg, var(--color-text-white) 30%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-headline {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 650px;
    margin: 0 auto 40px auto;
}

/* Premium Buttons Styling */
.button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn {
    position: relative;
    padding: 16px 36px;
    font-family: var(--font-monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    border-radius: 0px;
    overflow: hidden;
    transition: all var(--transition-medium);
}

.btn-primary {
    background-color: var(--color-text-white);
    color: var(--color-bg-cobalt);
    box-shadow: 0 4px 20px rgba(250, 250, 250, 0.15);
}

.btn-primary:hover {
    background-color: var(--color-bg-cobalt);
    color: var(--color-text-white);
    box-shadow: 0 4px 30px rgba(74, 107, 156, 0.4);
    transform: translateY(-2px);
    border: 1px solid var(--color-text-white);
    padding: 15px 35px; /* Adjust for border */
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-white);
    border: 1px solid rgba(250, 250, 250, 0.35);
}

.btn-secondary:hover {
    border-color: var(--color-text-white);
    background-color: rgba(250, 250, 250, 0.05);
    box-shadow: 0 4px 20px rgba(250, 250, 250, 0.08);
    transform: translateY(-2px);
}

/* 6. BOTTOM UX LIVE STATUS BAR */
.hero-status-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 40px;
    border-top: 1px solid var(--border-glass);
    background: rgba(28, 28, 40, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator-blink {
    width: 6px;
    height: 6px;
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(250, 250, 250, 0.8);
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0.1; }
}

.hero-status-bar .technical-monospace {
    margin-bottom: 0;
    color: var(--color-text-white);
    opacity: 0.85;
    letter-spacing: 0.1em;
}

.status-right {
    opacity: 0.55;
    color: var(--color-accent-blue);
    font-size: 9px;
}

/* 7. METHODOLOGY SECTION (Below the fold) */
.methodology-container {
    width: 100%;
    min-height: 100vh;
    padding: 120px 10%;
    position: relative;
    border-top: 1px solid var(--border-glass);
    background: linear-gradient(180deg, rgba(0, 32, 91, 0.45) 0%, rgba(28, 28, 40, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2;
}

.methodology-header {
    max-width: 800px;
    margin-bottom: 80px;
    text-align: left;
}

.methodology-header .section-number {
    color: var(--color-text-white);
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 5px;
}

.methodology-header .section-status {
    color: var(--color-accent-blue);
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 25px;
}

.methodology-headline {
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-white);
    letter-spacing: 0.02em;
    margin-bottom: 25px;
}

.methodology-sub-headline {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 600px;
}

/* Operational Build Phases Grid */
.phases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

/* The Technical Blueprints Phase Cards */
.phase-card {
    position: relative;
    background: rgba(28, 28, 40, 0.45);
    border: 1px solid var(--border-glass);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-medium);
}

.phase-card:hover {
    border-color: rgba(250, 250, 250, 0.35);
    background: rgba(0, 32, 91, 0.25);
    box-shadow: 0 15px 40px rgba(0, 32, 91, 0.3);
    transform: translateY(-5px);
}

/* Corner Decorator Crosshairs */
.card-corner-decorators .corner-dec {
    position: absolute;
    font-family: var(--font-monospace);
    font-size: 12px;
    color: rgba(74, 107, 156, 0.45);
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.corner-dec.top-l { top: 5px; left: 8px; }
.corner-dec.top-r { top: 5px; right: 8px; }
.corner-dec.bottom-l { bottom: 10px; left: 8px; }
.corner-dec.bottom-r { bottom: 10px; right: 8px; }

.phase-card:hover .card-corner-decorators .corner-dec {
    color: var(--color-text-white);
}

/* Content components inside cards */
.phase-number-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent-blue);
    border: 1px solid var(--border-glass);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all var(--transition-medium);
}

.phase-card:hover .phase-number-badge {
    color: var(--color-bg-cobalt);
    background-color: var(--color-text-white);
    border-color: var(--color-text-white);
}

.phase-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-text-white);
    margin-bottom: 6px;
}

.phase-subtitle {
    font-size: 9px;
    font-weight: 400;
    color: var(--color-accent-blue);
    letter-spacing: 0.12em;
    line-height: 1.4;
    margin-bottom: 25px;
}

.phase-description {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: 30px;
    flex-grow: 1;
}

/* SVG CAD Wireframe Graph Visualizer Component */
.phase-graph-container {
    width: 100%;
    height: 90px;
    margin-bottom: 30px;
    border: 1px solid rgba(74, 107, 156, 0.15);
    background-color: rgba(28, 28, 40, 0.5);
    overflow: hidden;
    position: relative;
}

.cad-svg-graph {
    width: 100%;
    height: 100%;
}

.graph-grid-line {
    stroke: rgba(74, 107, 156, 0.12);
    stroke-width: 0.5;
    stroke-dasharray: 2, 2;
}

.graph-grid-line-vertical {
    stroke: rgba(74, 107, 156, 0.08);
    stroke-width: 0.5;
    stroke-dasharray: 2, 2;
}

.graph-data-curve-bg {
    transition: opacity var(--transition-medium);
    opacity: 0.6;
}

.graph-dot {
    fill: var(--color-accent-blue);
    stroke: var(--color-bg-dark);
    stroke-width: 1;
}

.graph-dot.active-dot {
    fill: var(--color-text-white);
    stroke: var(--color-accent-blue);
    stroke-width: 1.5;
    animation: ping 2s infinite ease-in-out;
}

@keyframes ping {
    0%, 100% { r: 4; fill: var(--color-text-white); }
    50% { r: 6; fill: var(--color-accent-blue); }
}

.graph-text {
    font-size: 7px;
    fill: var(--color-accent-blue);
    opacity: 0.8;
}

.phase-card:hover .cad-svg-graph .graph-data-curve {
    stroke: var(--color-text-white);
}

.phase-card:hover .cad-svg-graph .graph-text {
    fill: var(--color-text-white);
}

/* CAD Technical Specifications Table inside Card */
.phase-specs-table {
    border-top: 1px solid rgba(74, 107, 156, 0.15);
    padding-top: 15px;
    font-size: 9px;
    color: var(--color-accent-blue);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
}

.spec-label {
    opacity: 0.7;
}

.spec-val {
    color: var(--color-text-white);
    font-weight: 700;
}

/* 8. SECTION 03: TECHNICAL SPECS SHEET */
.specs-details-container {
    width: 100%;
    padding: 80px 10%;
    background-color: var(--color-bg-dark);
    border-top: 1px solid var(--border-glass);
    z-index: 2;
    position: relative;
}

.specs-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px dashed rgba(74, 107, 156, 0.25);
    padding: 50px;
    background: rgba(28, 28, 40, 0.2);
}

.specs-header {
    margin-bottom: 40px;
    border-left: 2px solid var(--color-text-white);
    padding-left: 20px;
}

.specs-title {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-text-white);
    margin-top: 5px;
}

.specs-grid-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid rgba(74, 107, 156, 0.1);
    padding-bottom: 15px;
}

.spec-item .label {
    font-size: 9px;
    color: var(--color-accent-blue);
    letter-spacing: 0.1em;
}

.spec-item .value {
    font-size: 11px;
    color: var(--color-text-white);
    font-weight: 700;
}

/* 9. RESPONSIVE MEDIA QUERIES */
@media (max-width: 1200px) {
    .phases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .main-headline {
        font-size: 36px;
    }
    
    .hero-content-panel {
        padding: 30px;
        margin: 20px;
    }
    
    .methodology-headline {
        font-size: 32px;
    }
    
    .specs-grid-data {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .phases-grid {
        grid-template-columns: 1fr;
    }

    .hero-status-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px 20px;
    }

    .status-right {
        display: none;
    }

    .viewport-crop-marks, .cad-coordinate-overlay {
        display: none;
    }

    .methodology-container {
        padding: 80px 6%;
    }

    .specs-details-container {
        padding: 60px 6%;
    }

    .specs-inner {
        padding: 30px 25px;
    }
}

@media (max-width: 480px) {
    .main-headline {
        font-size: 26px;
        letter-spacing: -0.02em;
    }

    .methodology-headline {
        font-size: 24px;
    }

    .sub-headline {
        font-size: 13px;
    }

    .methodology-sub-headline {
        font-size: 13px;
    }

    .hero-content-panel {
        bottom: 95px;
        width: 96%;
    }

    .monogram-canvas-container {
        height: 38vh;
    }

    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 14px 20px;
    }

    .methodology-container {
        padding: 70px 5%;
    }

    .methodology-header {
        margin-bottom: 50px;
    }

    .specs-details-container {
        padding: 50px 5%;
    }

    .specs-inner {
        padding: 20px 15px;
    }

    .phase-card {
        padding: 25px 18px;
    }

    .hero-status-bar {
        padding: 10px 15px;
    }

    .technical-monospace {
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .specs-title {
        font-size: 18px;
    }
}

/* 10. ENTRY ANIMATIONS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-element {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#hero-pre-headline { animation-delay: 0.2s; }
#hero-headline { animation-delay: 0.4s; }
#hero-sub-headline { animation-delay: 0.6s; }
#hero-buttons { animation-delay: 0.8s; }