/* ============================================
   CONCURRENGINE v2 - Neubrutalist Industrial Control Room
   ============================================
   Fonts: "Space Grotesk" (Google Fonts), "IBM Plex Mono" (Google Fonts),
          "Bebas Neue" (Google Fonts)
   IBM Plex Mono for ALL body text (not just code snippets) --
   a deliberate choice to reinforce the terminal/control-room atmosphere.
   IntersectionObserver used to trigger `stroke-dashoffset` animations
   on different SVG groups for scroll-driven reveals.
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --void-black: #0B0C10;
    --slate-steel: #2B2D42;
    --signal-orange: #E85D04;
    --concrete-white: #EDF2F4;
    --iron-gray: #8D99AE;
    --reactor-teal: #06D6A0;
    --fault-red: #EF233C;
    --capacitor-yellow: #FFD166;

    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'IBM Plex Mono', monospace;
    --font-label: 'Bebas Neue', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--void-black);
    color: var(--concrete-white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.7;
    overflow-x: hidden;
    /* Blueprint grid underlay - major/minor grid hierarchy */
    background-image:
        linear-gradient(var(--slate-steel) 0.5px, transparent 0.5px),
        linear-gradient(90deg, var(--slate-steel) 0.5px, transparent 0.5px),
        linear-gradient(rgba(43, 45, 66, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 45, 66, 0.4) 1px, transparent 1px);
    background-size:
        120px 120px,
        120px 120px,
        40px 40px,
        40px 40px;
    background-blend-mode: normal;
    background-position: 0 0;
}

/* --- SECTION HEADERS (stamped metal labels) --- */
.section-header {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 36px);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--concrete-white);
    text-shadow: 1px 1px 0 var(--void-black), -1px -1px 0 rgba(237, 242, 244, 0.1);
    padding: 40px 5vw 20px;
}

/* ============================================
   HERO SECTION
   ============================================ */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--void-black);
}

#blueprint-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--slate-steel) 0.5px, transparent 0.5px),
        linear-gradient(90deg, var(--slate-steel) 0.5px, transparent 0.5px),
        linear-gradient(rgba(43, 45, 66, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 45, 66, 0.3) 1px, transparent 1px);
    background-size:
        120px 120px,
        120px 120px,
        40px 40px,
        40px 40px;
    opacity: 0.2;
}

#rail-tracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rail-line {
    stroke: var(--signal-orange);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    opacity: 0;
}

.rail-line.animate {
    opacity: 1;
    animation: drawRailLine 500ms ease-out forwards;
}

.junction {
    fill: var(--signal-orange);
    opacity: 0;
}

.junction.animate {
    animation: fadeInJunction 300ms ease-out forwards;
}

@keyframes drawRailLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInJunction {
    to {
        opacity: 1;
    }
}

/* Hero Title */
#hero-title {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15em;
}

.hero-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 6vw, 96px);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--concrete-white);
    opacity: 0;
    will-change: transform, opacity;
}

#word-concurr {
    transform: translateX(-120vw);
}

#word-engine {
    transform: translateX(120vw);
}

.hero-word.animate {
    animation: slideInWord 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#word-concurr.animate {
    animation-name: slideFromLeft;
}

#word-engine.animate {
    animation-name: slideFromRight;
}

@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-120vw);
    }
    70% {
        opacity: 1;
        transform: translateX(2%);
    }
    85% {
        transform: translateX(-0.5%) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(120vw);
    }
    70% {
        opacity: 1;
        transform: translateX(-2%);
    }
    85% {
        transform: translateX(0.5%) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Hero Status Bar */
#hero-status-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 5vw;
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: rgba(11, 12, 16, 0.85);
    border-top: 2px solid var(--signal-orange);
    z-index: 10;
    opacity: 0;
    transform: translateY(100%);
}

#hero-status-bar.animate {
    animation: slideUpBar 400ms ease-out forwards;
}

@keyframes slideUpBar {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-label {
    font-family: var(--font-label);
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--signal-orange);
}

.status-value {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(13px, 1.2vw, 16px);
    color: var(--concrete-white);
}

.status-nominal {
    color: var(--reactor-teal);
}

.status-divider {
    color: var(--iron-gray);
    font-family: var(--font-body);
}

/* ============================================
   PROCESS MONITOR ZONE
   ============================================ */
#process-monitor {
    position: relative;
    padding: 80px 5vw 100px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    min-height: 80vh;
}

.monitor-module {
    position: relative;
    border: 3px solid var(--signal-orange);
    border-radius: 0;
    background-color: rgba(43, 45, 66, 0.4);
    padding: 40px 20px 20px;
    overflow: hidden;
}

.module-label {
    position: absolute;
    top: 8px;
    left: 12px;
    font-family: var(--font-label);
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--signal-orange);
    text-shadow: 1px 1px 0 var(--void-black), -1px -1px 0 rgba(237, 242, 244, 0.1);
}

.module-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.module-indicator.active {
    background-color: var(--reactor-teal);
    animation: pulse 2s infinite;
}

.module-indicator.processing {
    background-color: var(--signal-orange);
    animation: pulse 2s infinite;
}

.module-indicator.warning {
    background-color: var(--fault-red);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Module grid placement (broken-grid, intentional overlaps) */
.module-1 {
    grid-column: 1 / 5;
    grid-row: 1;
    z-index: 2;
}

.module-2 {
    grid-column: 4 / 10;
    grid-row: 1 / 3;
    z-index: 1;
    margin-top: 30px;
    border-color: var(--iron-gray);
}

.module-3 {
    grid-column: 9 / 13;
    grid-row: 1;
    z-index: 3;
    margin-top: -10px;
}

.module-4 {
    grid-column: 1 / 5;
    grid-row: 2;
    z-index: 2;
    margin-top: -40px;
    border-color: var(--iron-gray);
}

.module-5 {
    grid-column: 9 / 13;
    grid-row: 2;
    z-index: 2;
    margin-top: -20px;
}

/* Counter module */
.counter-display {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 0;
}

.counter-prefix {
    font-family: var(--font-label);
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.15em;
    color: var(--signal-orange);
}

.counter-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 72px);
    color: var(--concrete-white);
    letter-spacing: -0.03em;
}

/* Log feed module */
.log-feed {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.log-entry {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 2;
    color: var(--reactor-teal);
    white-space: nowrap;
}

.log-entry:nth-child(odd) {
    color: var(--iron-gray);
}

.log-feed-inner {
    animation: scrollLog 12s linear infinite;
}

@keyframes scrollLog {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* Fork diagram */
.fork-svg {
    width: 100%;
    height: auto;
}

.fork-path {
    stroke: var(--concrete-white);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.fork-path.animate {
    animation: drawForkPath 1s ease-out forwards;
}

.fork-node {
    fill: var(--signal-orange);
    opacity: 0;
}

.fork-node.animate {
    animation: fadeInJunction 400ms ease-out forwards;
}

@keyframes drawForkPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* Queue bars */
.queue-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 150px;
    padding-top: 10px;
}

.queue-bar {
    flex: 1;
    height: var(--bar-height, 50%);
    background-color: var(--capacitor-yellow);
    border-radius: 0;
    animation: queuePulse 3s ease-in-out infinite alternate;
}

.queue-bar:nth-child(odd) {
    background-color: var(--signal-orange);
    animation-delay: 0.5s;
}

.queue-bar:nth-child(3n) {
    background-color: var(--reactor-teal);
    animation-delay: 1s;
}

@keyframes queuePulse {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.6);
    }
    100% {
        transform: scaleY(1.1);
    }
}

/* Mutex grid */
.mutex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0;
}

.mutex-cell {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    padding: 12px 8px;
    border: 2px solid;
}

.mutex-cell.locked {
    border-color: var(--fault-red);
    color: var(--fault-red);
    background-color: rgba(239, 35, 60, 0.1);
}

.mutex-cell.free {
    border-color: var(--reactor-teal);
    color: var(--reactor-teal);
    background-color: rgba(6, 214, 160, 0.1);
}

.mutex-cell.contended {
    border-color: var(--capacitor-yellow);
    color: var(--capacitor-yellow);
    background-color: rgba(255, 209, 102, 0.1);
    animation: mutexBlink 1.5s infinite;
}

@keyframes mutexBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ============================================
   ARCHITECTURE DIAGRAM
   ============================================ */
#architecture {
    padding: 60px 0 80px;
    overflow: hidden;
}

.architecture-scroll {
    width: 90vw;
    margin: 0 auto;
    overflow-x: auto;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
}

#arch-svg {
    width: 100%;
    min-width: 900px;
    height: auto;
}

.arch-pipe {
    stroke: var(--signal-orange);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.arch-pipe.animate {
    animation: drawArchPipe 1.5s ease-out forwards;
}

@keyframes drawArchPipe {
    to {
        stroke-dashoffset: 0;
    }
}

.arch-pipe-secondary {
    stroke: var(--iron-gray);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.arch-pipe-secondary.animate {
    animation: drawArchPipe 1.5s ease-out forwards;
}

.arch-station {
    fill: none;
    stroke: var(--signal-orange);
    stroke-width: 3;
    opacity: 0;
}

.arch-station.animate {
    animation: fadeInStation 600ms ease-out forwards;
}

@keyframes fadeInStation {
    to {
        opacity: 1;
    }
}

.arch-station-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    fill: var(--concrete-white);
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
}

.arch-station-label.animate {
    animation: fadeInStation 600ms ease-out forwards;
}

.arch-worker {
    fill: rgba(43, 45, 66, 0.6);
    stroke: var(--reactor-teal);
    stroke-width: 2;
    opacity: 0;
}

.arch-worker.animate {
    animation: fadeInStation 600ms ease-out forwards;
}

.arch-worker-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    fill: var(--reactor-teal);
    text-anchor: middle;
    letter-spacing: 0.1em;
    opacity: 0;
}

.arch-worker-label.animate {
    animation: fadeInStation 600ms ease-out forwards;
}

.conveyor {
    stroke: var(--iron-gray);
    stroke-width: 1;
    stroke-dasharray: 6 4;
    stroke-dashoffset: 0;
    opacity: 0;
}

.conveyor.animate {
    opacity: 0.6;
    animation: conveyorMove 2s linear infinite;
}

@keyframes conveyorMove {
    to {
        stroke-dashoffset: -20;
    }
}

/* Gear assemblies */
.gear-outline {
    fill: none;
    stroke: var(--concrete-white);
    stroke-width: 1.5;
    opacity: 0;
}

.gear-spoke {
    stroke: var(--concrete-white);
    stroke-width: 1;
    opacity: 0;
}

.gear-assembly.animate .gear-outline,
.gear-assembly.animate .gear-spoke {
    opacity: 0.6;
}

.gear-assembly.animate {
    animation: gearRotate 8s linear infinite;
    transform-origin: center;
}

@keyframes gearRotate {
    to {
        transform: rotate(360deg);
    }
}

/* Fix gear rotation with translate preserved */
#gear-1.animate { animation: gearRotate1 8s linear infinite; }
#gear-2.animate { animation: gearRotate2 8s linear infinite; }
#gear-3.animate { animation: gearRotate3 8s linear infinite; }

@keyframes gearRotate1 {
    from { transform: translate(400px, 300px) rotate(0deg); }
    to   { transform: translate(400px, 300px) rotate(360deg); }
}
@keyframes gearRotate2 {
    from { transform: translate(700px, 300px) rotate(0deg); }
    to   { transform: translate(700px, 300px) rotate(-360deg); }
}
@keyframes gearRotate3 {
    from { transform: translate(1000px, 300px) rotate(0deg); }
    to   { transform: translate(1000px, 300px) rotate(360deg); }
}

/* ============================================
   THREAD TIMELINE STRIP
   ============================================ */
#thread-timeline {
    padding: 60px 0;
    overflow: hidden;
}

.timeline-container {
    position: relative;
    width: 90vw;
    margin: 0 auto;
    height: 200px;
    border: 2px solid var(--slate-steel);
    background-color: rgba(11, 12, 16, 0.8);
    overflow: hidden;
}

.timeline-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.timeline-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--slate-steel);
    opacity: 0.5;
}

.timeline-tick-label {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--iron-gray);
    text-transform: uppercase;
}

.timeline-bars {
    position: relative;
    width: 100%;
    height: 100%;
}

.timeline-bar {
    position: absolute;
    top: var(--bar-top, 10px);
    left: 0;
    height: 12px;
    width: 0;
    border-radius: 0;
    animation: extendBar var(--bar-duration, 4s) var(--bar-delay, 0s) infinite;
}

.bar-orange { background-color: var(--signal-orange); }
.bar-teal { background-color: var(--reactor-teal); }
.bar-yellow { background-color: var(--capacitor-yellow); }
.bar-red { background-color: var(--fault-red); }

@keyframes extendBar {
    0% {
        width: 0;
        opacity: 1;
    }
    30% {
        width: calc(var(--bar-width, 50%) * 0.5);
        opacity: 1;
    }
    35% {
        width: calc(var(--bar-width, 50%) * 0.5);
        opacity: 0.5;
    }
    40% {
        width: calc(var(--bar-width, 50%) * 0.5);
        opacity: 1;
    }
    80% {
        width: var(--bar-width, 50%);
        opacity: 1;
    }
    90% {
        width: var(--bar-width, 50%);
        opacity: 0.7;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

/* ============================================
   TECHNICAL MANIFESTO
   ============================================ */
#manifesto {
    padding: 120px 5vw;
    background-color: var(--void-black);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manifesto-content {
    max-width: 1000px;
    width: 100%;
}

.manifesto-line {
    overflow: hidden;
    padding: 4px 0;
}

.manifesto-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 4vw, 60px);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--concrete-white);
    display: inline-block;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.manifesto-text.highlight-orange {
    color: var(--signal-orange);
    font-size: clamp(28px, 4.5vw, 68px);
}

.manifesto-line.in-view .manifesto-text {
    transform: none;
    opacity: 1;
}

.manifesto-line:nth-child(odd) .manifesto-text {
    transform: translateX(-20px) rotate(-0.5deg);
    opacity: 0.7;
}

.manifesto-line:nth-child(even) .manifesto-text {
    transform: translateX(20px) rotate(0.5deg);
    opacity: 0.7;
}

.manifesto-line.in-view:nth-child(odd) .manifesto-text {
    transform: translateX(0) rotate(-0.5deg);
    opacity: 1;
}

.manifesto-line.in-view:nth-child(even) .manifesto-text {
    transform: translateX(0) rotate(0.5deg);
    opacity: 1;
}

.manifesto-line.in-view .manifesto-text.highlight-orange {
    transform: scale(1.05);
}

/* ============================================
   FOOTER STATUS BAR
   ============================================ */
#footer-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 5vw;
    border-top: 2px solid var(--signal-orange);
    background-color: rgba(11, 12, 16, 0.95);
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-left .module-indicator {
    position: static;
    width: 8px;
    height: 8px;
}

.footer-domain {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(14px, 1.5vw, 20px);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--concrete-white);
}

.footer-center {
    text-align: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #process-monitor {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .module-1,
    .module-2,
    .module-3,
    .module-4,
    .module-5 {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
    }

    .module-2 {
        margin-top: 0;
    }

    #hero-title {
        flex-direction: column;
        align-items: center;
    }

    .timeline-container {
        height: 250px;
    }

    .timeline-bar {
        height: 10px;
    }

    #footer-status {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}