/* ============================================
   simulai.dev - Sentient Simulation Diagnostic
   ============================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    line-height: 1.72;
    color: #B8C4D6;
    background: #0A0C14;
    overflow-x: hidden;
}

/* --- Layer 0: Substrate --- */
.substrate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #0A0C14 0%, #050710 100%);
    z-index: 0;
}

.substrate-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(26, 255, 213, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 255, 213, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* --- Layer 1: Signal Field --- */
.signal-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(26, 255, 213, 0.06);
}

@keyframes scanDrift {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

.scan-line-1 {
    animation: scanDrift 8s linear infinite;
    top: 0;
}

.scan-line-2 {
    animation: scanDrift 12s linear infinite 3s;
    top: 0;
    opacity: 0.15;
    height: 2px;
    background: rgba(26, 255, 213, 0.1);
}

.scan-line-3 {
    animation: scanDrift 6s linear infinite 5s;
    top: 0;
    opacity: 0.08;
}

/* --- Layer 3: Annotation Glyphs --- */
.annotation-glyphs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.glyph {
    position: absolute;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.8vw, 0.85rem);
    font-weight: 400;
    color: #1AFFD5;
    opacity: 0.3;
    letter-spacing: 0.06em;
}

@keyframes glyphDrift1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -6px); }
}

@keyframes glyphDrift2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-5px, 10px); }
}

.glyph-1 {
    top: 15%;
    right: 8%;
    font-size: 1.2rem;
    animation: glyphDrift1 25s ease-in-out infinite;
}

.glyph-2 {
    top: 35%;
    left: 3%;
    animation: glyphDrift2 30s ease-in-out infinite;
}

.glyph-3 {
    bottom: 25%;
    right: 5%;
    font-size: 1rem;
    animation: glyphDrift1 20s ease-in-out infinite 5s;
}

.glyph-4 {
    top: 60%;
    left: 6%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1AFFD5;
    animation: statusPulse 4s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { background: #1AFFD5; opacity: 0.3; }
    50% { background: #FF3E6C; opacity: 0.6; }
}

.glyph-5 {
    bottom: 10%;
    right: 12%;
    animation: glyphDrift2 22s ease-in-out infinite 3s;
}

/* --- Layer 4: Focus Overlay --- */
.focus-scan-line {
    position: fixed;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(26, 255, 213, 0.2);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.focus-scan-line.visible {
    opacity: 1;
}

.depth-readout {
    position: fixed;
    z-index: 11;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: #1AFFD5;
    opacity: 0;
    pointer-events: none;
    letter-spacing: 0.06em;
    transition: opacity 0.15s ease;
}

.depth-readout.visible {
    opacity: 0.7;
}

/* --- Floating Coordinate Labels --- */
.coord-label {
    position: fixed;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.8vw, 0.85rem);
    font-weight: 400;
    color: #1AFFD5;
    opacity: 0.3;
    letter-spacing: 0.06em;
    z-index: 5;
    pointer-events: none;
}

.coord-label-top {
    top: 20px;
    left: 20px;
}

.coord-label-bottom {
    bottom: 20px;
    right: 20px;
}

/* --- Main Inference Stack --- */
.inference-stack {
    position: relative;
    z-index: 2;
}

/* --- Layer: Sections --- */
.layer {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 4rem 2rem;
}

/* --- INPUT LAYER (Hero) --- */
.layer-input {
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.neural-constellation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, 90vw);
    height: auto;
    opacity: 0.6;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 500;
    color: #E8EDF5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    min-height: 1.2em;
}

.hero-title .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.hero-title .char.visible {
    opacity: 1;
}

.hero-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.2rem);
    font-weight: 300;
    color: #B8C4D6;
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-subtitle.visible {
    opacity: 1;
}

/* --- Oscilloscope Wave Dividers --- */
.wave-divider {
    width: 100%;
    height: 40px;
    position: relative;
    z-index: 2;
}

.wave-divider svg {
    width: 100%;
    height: 100%;
}

.wave-path {
    fill: none;
    stroke: #1AFFD5;
    stroke-width: 1;
    opacity: 0.15;
}

.wave-pulse {
    opacity: 0.5;
}

/* --- Diagnostic Panels --- */
.diagnostic-panel {
    position: relative;
    background: rgba(10, 18, 32, 0.85); /* #0A1220 */
    border: 1px solid rgba(26, 255, 213, 0.05);
    padding: 2.5rem 3rem;
    max-width: 680px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.diagnostic-panel.revealed {
    opacity: 1;
    transform: translateX(0) !important;
}

.slide-from-left {
    transform: translateX(-60px);
}

.slide-from-right {
    transform: translateX(60px);
}

.slide-from-bottom {
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-from-bottom.revealed {
    opacity: 1;
    transform: translateY(0);
}

.panel-left {
    margin-right: auto;
}

.panel-right {
    margin-left: auto;
}

/* --- Panel Corner Brackets --- */
.panel-brackets {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bracket {
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0.25;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

.bracket-tl {
    top: 0;
    left: 0;
    border-top: 1px solid #1AFFD5;
    border-left: 1px solid #1AFFD5;
}

.bracket-tr {
    top: 0;
    right: 0;
    border-top: 1px solid #1AFFD5;
    border-right: 1px solid #1AFFD5;
}

.bracket-bl {
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #1AFFD5;
    border-left: 1px solid #1AFFD5;
}

.bracket-br {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #1AFFD5;
    border-right: 1px solid #1AFFD5;
}

.diagnostic-panel:hover .bracket {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    border-color: #FF3E6C;
}

/* --- Panel Status Bar --- */
.panel-status-bar {
    height: 2px;
    background: rgba(26, 255, 213, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.status-fill {
    height: 100%;
    width: 0;
    background: #1AFFD5;
    transition: width 2s ease;
}

.diagnostic-panel.revealed .status-fill {
    width: 100%;
}

/* --- Panel Typography --- */
.panel-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.8vw, 0.85rem);
    font-weight: 400;
    color: #1AFFD5;
    opacity: 0.7;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.panel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 500;
    color: #E8EDF5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.panel-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    line-height: 1.72;
    color: #B8C4D6;
    max-width: 560px;
}

.panel-body a {
    color: #3D7EFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(61, 126, 255, 0.3);
}

/* --- Probability Glyphs --- */
.probability-glyphs {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.prob-glyph {
    width: 48px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.diagnostic-panel.revealed .prob-glyph {
    opacity: 1;
}

/* --- Decision Tree --- */
.decision-tree {
    margin-top: 2rem;
    width: 300px;
    height: 180px;
}

.tree-node {
    transition: opacity 0.3s ease, r 0.3s ease;
}

.tree-branch {
    transition: opacity 0.3s ease;
}

.diagnostic-panel.revealed .tree-node {
    opacity: 0.8;
}

.diagnostic-panel.revealed .tree-branch {
    opacity: 0.5;
}

/* --- Bar Chart --- */
.bar-chart {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    height: 120px;
    margin-top: 2rem;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.bar {
    width: 100%;
    max-width: 40px;
    height: 0;
    background: var(--bar-color);
    transition: height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: var(--bar-delay);
}

.diagnostic-panel.revealed .bar {
    height: var(--bar-height);
}

.bar-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    color: #4A5568;
    letter-spacing: 0.06em;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

/* Palette reference: #0A1220 panel bg, #3D7EFF links, #FFAA2C thermal amber */
.warning-accent {
    color: #FFAA2C;
}

/* --- Perception Layer Layout --- */
.layer-perception {
    padding-left: 6%;
}

/* --- Reasoning Layer Layout --- */
.layer-reasoning {
    padding-right: 6%;
    justify-content: flex-end;
}

/* --- Synthesis Layer Layout --- */
.layer-synthesis {
    padding-left: 6%;
}

/* --- OUTPUT LAYER --- */
.layer-output {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.output-content {
    max-width: 600px;
}

.output-statement {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    color: #E8EDF5;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 3rem;
}

.output-scan-line {
    width: 0;
    height: 1px;
    background: #1AFFD5;
    margin: 2rem auto;
    transition: width 1.5s ease;
}

.output-content.revealed .output-scan-line {
    width: 100%;
}

.output-status {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1.5rem;
}

.output-coord {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.8vw, 0.85rem);
    color: #1AFFD5;
    opacity: 0;
    letter-spacing: 0.06em;
    transition: opacity 0.6s ease 1.5s;
}

.output-content.revealed .output-coord {
    opacity: 0.5;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .diagnostic-panel {
        max-width: 100%;
        padding: 1.5rem;
    }

    .panel-left,
    .panel-right {
        margin: 0;
    }

    .layer-perception,
    .layer-reasoning,
    .layer-synthesis {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .slide-from-left,
    .slide-from-right {
        transform: translateY(30px);
    }

    .bar-chart {
        height: 80px;
    }
}

@media (max-width: 640px) {
    .coord-label,
    .annotation-glyphs {
        display: none;
    }
}