/* ============================================
   cbdc.studio - Styles
   Dark-mode surveillance aesthetic
   ma-negative-space layout philosophy
   ============================================ */

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

:root {
    --void-black: #0A0F0A;
    --carbon: #111A11;
    --phosphor-green: #39FF14;
    --canopy-green: #1B5E20;
    --lichen: #3D6B3D;
    --concrete: #C8C8C0;
    --fog: #707A70;
    --signal-red: #FF1744;
    --morph-easing: cubic-bezier(0.76, 0, 0.24, 1);
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

body {
    background-color: var(--void-black);
    color: var(--concrete);
    font-family: 'Darker Grotesque', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
.headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--phosphor-green);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.accent-headline {
    font-size: clamp(56px, 8vw, 96px);
}

.subtext {
    font-family: 'Darker Grotesque', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.7;
    color: var(--concrete);
    max-width: 520px;
    margin-top: 32px;
}

.mono-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--lichen);
    letter-spacing: 0.08em;
    display: block;
    margin-top: 24px;
}

.mono-value {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.phosphor {
    color: var(--phosphor-green);
}

.signal-red {
    color: var(--signal-red);
}

.fog-text {
    color: var(--fog);
}

/* --- Navigation --- */
#nav-trigger {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 1000;
}

#skyline-icon {
    cursor: pointer;
    transition: transform 0.3s var(--morph-easing);
}

#skyline-icon:hover {
    transform: scale(1.05);
}

#skyline-icon .building {
    transition: fill 0.4s ease, filter 0.4s ease;
}

#skyline-icon .window {
    transition: fill 0.4s ease;
}

#skyline-icon:hover .building {
    fill: var(--canopy-green);
    filter: drop-shadow(0 0 6px var(--phosphor-green));
}

#skyline-icon:hover .window {
    fill: var(--phosphor-green);
}

#nav-menu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--morph-easing), opacity 0.4s ease;
    opacity: 0;
    margin-top: 12px;
}

#nav-menu.open {
    max-height: 300px;
    opacity: 1;
}

#nav-menu li {
    margin-bottom: 6px;
}

#nav-menu a {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fog);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 2px 0;
}

#nav-menu a:hover {
    color: var(--phosphor-green);
}

/* --- Sections Base --- */
.content-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--morph-easing), transform 0.8s var(--morph-easing);
}

.content-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* --- Broadcast Block --- */
.broadcast-block .broadcast-content {
    max-width: 45%;
    padding-left: 4%;
}

.broadcast-block .headline {
    font-size: clamp(56px, 9vw, 120px);
}

.broadcast-centered {
    max-width: 60% !important;
    padding-left: 8% !important;
}

/* Morph clip-path animations */
.broadcast-block {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 1.2s var(--morph-easing), opacity 0.8s var(--morph-easing), transform 0.8s var(--morph-easing);
}

.broadcast-block.morph-active {
    clip-path: polygon(2% 0, 98% 2%, 96% 98%, 0 100%);
}

/* --- Data Slab --- */
.data-slab .slab-container {
    width: 80%;
    margin: 0 auto;
}

.data-slab .slab-visual {
    background: var(--carbon);
    border: 1px solid var(--canopy-green);
    padding: 24px;
    height: 30vh;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.data-slab .slab-visual svg {
    width: 100%;
    height: 100%;
}

.slab-caption {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--fog);
    letter-spacing: 0.08em;
    margin-top: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--canopy-green);
}

/* --- Stencil Wall --- */
.stencil-wall .stencil-cascade {
    padding-left: 4%;
}

.stencil-paragraph {
    font-family: 'Darker Grotesque', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.7;
    color: var(--concrete);
    max-width: 480px;
    margin-bottom: 40px;
}

.stencil-paragraph.offset-0 {
    margin-left: 0;
}

.stencil-paragraph.offset-1 {
    margin-left: calc(2 * (100vw / 16));
}

.stencil-paragraph.offset-2 {
    margin-left: calc(4 * (100vw / 16));
}

.stencil-paragraph.offset-3 {
    margin-left: calc(6 * (100vw / 16));
}

/* --- Redaction Bars --- */
.redacted {
    position: relative;
    display: inline;
    cursor: pointer;
}

.redact-bar {
    position: absolute;
    top: -2px;
    left: -4px;
    right: -4px;
    bottom: -2px;
    background: var(--void-black);
    border: 1px solid var(--phosphor-green);
    z-index: 2;
    transition: transform 0.3s var(--morph-easing);
    transform-origin: center center;
    pointer-events: none;
}

.redacted:hover .redact-bar {
    transform: scaleY(0);
}

.redacted:hover {
    color: var(--phosphor-green);
}

/* --- Control Data Rows --- */
.control-data {
    margin-top: 48px;
    border-top: 1px solid var(--canopy-green);
    padding-top: 24px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 400px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(27, 94, 32, 0.3);
}

.data-row .mono-label {
    margin-top: 0;
    font-size: 11px;
}

.data-row .mono-value {
    letter-spacing: 0.08em;
}

/* --- Void Spacers --- */
.void-spacer {
    height: 60vh;
    position: relative;
    overflow: hidden;
}

.void-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--canopy-green);
    transition: none;
}

.void-spacer.active .void-line {
    animation: drawLine 2s var(--morph-easing) forwards;
}

@keyframes drawLine {
    0% { width: 0; left: 0; }
    100% { width: 100%; left: 0; }
}

/* Void dot grid */
.void-spacer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, var(--carbon) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.void-spacer.active::before {
    animation: dotPulse 1.5s ease-in-out;
}

@keyframes dotPulse {
    0% { opacity: 0; }
    50% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* --- Skyline Full Section --- */
.skyline-full {
    min-height: 100vh;
}

.skyline-macro {
    width: 100%;
    height: 70vh;
    min-height: 400px;
}

.macro-skyline {
    width: 100%;
    height: 100%;
}

.sky-building {
    transition: fill 0.4s ease, filter 0.4s ease;
}

.sky-window {
    transition: fill 0.6s ease;
}

.skyline-full.visible .sky-window {
    fill: var(--phosphor-green);
    animation: windowFlicker 3s ease-in-out infinite;
    animation-delay: var(--flicker-delay, 0s);
}

@keyframes windowFlicker {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.3; }
    60% { opacity: 0.8; }
    80% { opacity: 0.2; }
}

.sky-building:hover {
    fill: var(--canopy-green);
    filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.3));
}

/* --- Transmission Section Windows --- */
.tx-window {
    transition: fill 0.6s ease;
}

.data-slab.visible .tx-window {
    fill: var(--phosphor-green);
    animation: windowFlicker 2.5s ease-in-out infinite;
}

.data-slab.visible .tx-window:nth-child(odd) {
    animation-delay: 0.3s;
}

.data-slab.visible .tx-window:nth-child(even) {
    animation-delay: 1.2s;
}

.tx-building {
    transition: fill 0.4s ease;
}

/* --- Circuit Node Pulse --- */
.circuit-node {
    animation: nodePulse 2s ease-in-out infinite;
}

.circuit-node:nth-child(1) { animation-delay: 0s; }
.circuit-node:nth-child(2) { animation-delay: 0.3s; }
.circuit-node:nth-child(3) { animation-delay: 0.6s; }
.circuit-node:nth-child(4) { animation-delay: 0.9s; }
.circuit-node:nth-child(5) { animation-delay: 1.2s; }
.circuit-node:nth-child(6) { animation-delay: 1.5s; }

@keyframes nodePulse {
    0%, 100% { r: 3; opacity: 1; }
    50% { r: 5; opacity: 0.6; }
}

/* --- Pulse Animation for Circuit Lines --- */
.pulse-line {
    animation: pulseDash 4s linear infinite;
}

.pulse-line-2 {
    animation: pulseDash 6s linear infinite reverse;
}

@keyframes pulseDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -48; }
}

/* --- Character Morph Animation for Headlines --- */
.headline .char {
    display: inline-block;
    transform: scaleY(0);
    transition: transform 0.4s var(--morph-easing);
    transform-origin: bottom center;
    opacity: 0;
}

.visible .headline .char {
    transform: scaleY(1);
    opacity: 1;
}

/* --- Morph Transitions for Sections --- */
.content-section[data-morph] {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 1.2s var(--morph-easing), opacity 0.8s var(--morph-easing), transform 0.8s var(--morph-easing);
}

.stencil-wall.visible {
    clip-path: polygon(0 2%, 100% 0, 98% 100%, 2% 98%);
}

.data-slab.visible {
    clip-path: polygon(1% 0, 99% 1%, 100% 99%, 0 100%);
}

/* --- Stencil paragraph stagger animation --- */
.stencil-paragraph {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s var(--morph-easing), transform 0.6s var(--morph-easing);
}

.visible .stencil-paragraph.offset-0 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.visible .stencil-paragraph.offset-1 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

.visible .stencil-paragraph.offset-2 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s;
}

.visible .stencil-paragraph.offset-3 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.7s;
}

/* --- Data row entrance animation --- */
.data-row {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s var(--morph-easing), transform 0.4s var(--morph-easing);
}

.visible .data-row:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.visible .data-row:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.35s;
}

.visible .data-row:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s;
}

.visible .data-row:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.65s;
}

/* --- Subtext fade-in --- */
.subtext {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.visible .subtext {
    opacity: 1;
    transform: translateY(0);
}

/* --- Mono label fade-in --- */
.broadcast-content > .mono-label {
    opacity: 0;
    transition: opacity 0.6s ease 0.6s;
}

.visible .broadcast-content > .mono-label {
    opacity: 1;
}

/* --- Footer --- */
#section-footer {
    padding: 60px 48px 40px;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.footer-line {
    width: 120px;
    height: 1px;
    background: var(--canopy-green);
    margin: 20px auto;
}

#section-footer .mono-label {
    margin-top: 0;
}

/* --- Scroll progress indicator --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--phosphor-green);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .broadcast-block .broadcast-content {
        max-width: 70%;
    }

    .broadcast-centered {
        max-width: 85% !important;
    }

    .stencil-paragraph.offset-1 {
        margin-left: calc(1 * (100vw / 16));
    }

    .stencil-paragraph.offset-2 {
        margin-left: calc(2 * (100vw / 16));
    }

    .stencil-paragraph.offset-3 {
        margin-left: calc(3 * (100vw / 16));
    }
}

@media (max-width: 768px) {
    .section-inner {
        padding: 0 24px;
    }

    .broadcast-block .broadcast-content {
        max-width: 90%;
        padding-left: 0;
    }

    .broadcast-centered {
        max-width: 95% !important;
        padding-left: 0 !important;
    }

    .broadcast-block .headline {
        font-size: clamp(40px, 12vw, 72px);
    }

    .accent-headline {
        font-size: clamp(40px, 10vw, 72px);
    }

    .data-slab .slab-container {
        width: 95%;
    }

    .stencil-paragraph.offset-0,
    .stencil-paragraph.offset-1,
    .stencil-paragraph.offset-2,
    .stencil-paragraph.offset-3 {
        margin-left: 0;
    }

    .stencil-wall .stencil-cascade {
        padding-left: 0;
    }

    .void-spacer {
        height: 40vh;
    }

    #nav-trigger {
        top: 16px;
        left: 16px;
    }

    .control-data {
        margin-top: 32px;
    }

    .data-row {
        max-width: 100%;
    }

    #section-footer {
        padding: 40px 24px 24px;
    }
}

@media (max-width: 480px) {
    .broadcast-block .headline {
        font-size: clamp(32px, 14vw, 56px);
    }

    .subtext {
        font-size: 16px;
    }

    .stencil-paragraph {
        font-size: 16px;
        max-width: 100%;
    }
}