/* xbom.wiki - Neon Nordic Technical Magazine */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --nordic-dark: #0A0A12;
    --panel-dark: #141420;
    --neon-green: #00F0A0;
    --neon-pink: #F040A0;
    --neon-blue: #4080F0;
    --text-light: #F0F0F8;
    --text-body: #D0D0E0;
    --divider-neon: rgba(0, 240, 160, 0.4);
    --scandi-white: rgba(240, 240, 248, 0.08);
}

body {
    background: var(--nordic-dark);
    color: var(--text-light);
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
    overflow-x: hidden;
}

/* Hero */
.hero-spread {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.neon-line {
    width: 0;
    height: 2px;
    background: var(--neon-green);
    margin-bottom: 2rem;
    animation: lineGrow 0.6s ease forwards 0.3s;
    box-shadow: 0 0 8px rgba(0, 240, 160, 0.5);
}
@keyframes lineGrow {
    to { width: min(80%, 600px); }
}
.hero-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 400;
    color: var(--text-light);
    opacity: 0;
    animation: fadeUp 0.5s ease forwards 0.8s;
}
.hero-sub {
    font-family: 'Karla', sans-serif;
    font-size: 1.125rem;
    color: var(--text-body);
    opacity: 0;
    animation: fadeUp 0.5s ease forwards 1s;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Watercolor Washes */
.watercolor-wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
}
.wash-1 { width: 400px; height: 400px; background: rgba(0, 240, 160, 0.05); top: 10%; left: 20%; }
.wash-2 { width: 300px; height: 300px; background: rgba(240, 64, 160, 0.05); bottom: 15%; right: 15%; }
.wash-3 { width: 250px; height: 250px; background: rgba(0, 240, 160, 0.06); top: 20%; left: 30%; }
.wash-4 { width: 300px; height: 300px; background: rgba(64, 128, 240, 0.05); top: 15%; right: 25%; }
.wash-5 { width: 280px; height: 280px; background: rgba(240, 64, 160, 0.05); bottom: 20%; left: 20%; }

/* Neon Divider */
.neon-divider {
    height: 2px;
    background: var(--divider-neon);
    box-shadow: 0 0 4px rgba(0, 240, 160, 0.3);
}

/* Magazine Spread */
.mag-spread {
    display: flex;
    min-height: 90vh;
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.mag-spread.visible { opacity: 1; }
.spread-left { flex-direction: row; }
.spread-right { flex-direction: row-reverse; }

.spread-content {
    width: 55%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(-40px);
    transition: transform 0.5s ease;
}
.spread-right .spread-content { transform: translateX(40px); }
.mag-spread.visible .spread-content { transform: translateX(0); }

.spread-visual {
    width: 45%;
    background: var(--panel-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 60px;
    transform: translateX(40px);
    transition: transform 0.5s ease;
}
.spread-right .spread-visual { transform: translateX(-40px); }
.mag-spread.visible .spread-visual { transform: translateX(0); }

.neon-bar {
    position: absolute;
    width: 4px;
    top: 0;
    bottom: 0;
    background: var(--neon-green);
    box-shadow: 0 0 8px rgba(0, 240, 160, 0.5);
    height: 0;
    transition: height 0.4s ease 0.3s;
}
.spread-left .neon-bar { right: 45%; }
.spread-right .neon-bar { left: 45%; }
.mag-spread.visible .neon-bar { height: 100%; }

/* Typography */
.spread-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 400;
    color: var(--text-light);
    margin-bottom: 1rem;
    max-width: 520px;
}
.spread-body {
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 1.5rem;
}
.tech-data {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.part-num {
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--neon-green);
    letter-spacing: 0.03em;
    transition: text-shadow 0.2s ease;
}
.part-num:hover {
    text-shadow: 0 0 8px rgba(0, 240, 160, 0.5);
}

/* Node Diagrams */
.node-diagram {
    width: 100%;
    max-width: 300px;
    position: relative;
    z-index: 1;
}
.node-link {
    stroke: var(--divider-neon);
    stroke-width: 1;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.8s ease;
}
.mag-spread.visible .node-link { stroke-dashoffset: 0; }
.node-circle {
    fill: var(--nordic-dark);
    stroke: var(--neon-green);
    stroke-width: 1.5;
    transition: transform 0.2s ease, r 0.2s ease;
    cursor: pointer;
}
.node-circle:hover {
    r: 16;
    fill: rgba(0, 240, 160, 0.1);
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 3rem 2rem;
}
.footer-text {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--text-body);
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
    .mag-spread { flex-direction: column !important; min-height: auto; }
    .spread-content, .spread-visual { width: 100%; }
    .spread-visual { min-height: 300px; }
    .neon-bar { display: none; }
    .spread-content { padding: 24px; }
    .tech-data { flex-direction: column; gap: 0.5rem; }
}