/* =========================================================
   KAIGENREI.COM  //  SPLIT-SCREEN RETRO-TECH MANIFESTO
   Palette: sunset-warm + terminal amber
   Typography: Share Tech Mono / Dela Gothic One / Chakra Petch
   ========================================================= */

:root {
    --abyss-black: #0a0a0f;
    --signal-orange: #ff6b35;
    --amber-crt: #e8a030;
    --sunset-magenta: #c7385f;
    --horizon-gold: #f5b942;
    --ash-gray: #3a3a42;
    --bleached-bone: #f0e6d8;
    --rust-oxide: #8b3a2a;

    --font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --font-display: 'Dela Gothic One', 'Inter', sans-serif;
    --font-accent: 'Chakra Petch', 'Inter', sans-serif;

    --split-left: 55%;
    --split-right: 45%;
    --divider-width: 3px;
}

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

html, body {
    background: var(--abyss-black);
    color: var(--amber-crt);
    font-family: var(--font-mono);
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    position: relative;
}

/* ==================================================
   GLOBAL BACKDROP  //  KANJI GHOST, VIGNETTE
   ================================================== */

.kanji-ghost {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(15rem, 25vw, 30rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    color: var(--amber-crt);
    opacity: 0.04;
    top: 20vh;
    left: -4vw;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.kanji-ghost-right {
    position: absolute;
    color: var(--rust-oxide);
    opacity: 0.08;
    top: 6vh;
    right: -8vw;
    left: auto;
    font-size: clamp(12rem, 20vw, 24rem);
}

.viewport-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    background:
        radial-gradient(ellipse at center,
            transparent 0%,
            transparent 55%,
            rgba(10, 10, 15, 0.45) 100%);
    mix-blend-mode: multiply;
}

/* Global CRT scanline overlay on body */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8000;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(10, 10, 15, 0.22) 2px,
        rgba(10, 10, 15, 0.22) 4px
    );
    mix-blend-mode: multiply;
    opacity: 0.6;
}

/* ==================================================
   PULSE DIVIDER (SITE HEARTBEAT)
   ================================================== */

.pulse-divider {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--split-left);
    width: var(--divider-width);
    background: var(--signal-orange);
    z-index: 500;
    transform: translateX(-50%);
    animation: pulse-divider 2s ease-in-out infinite;
    transition: width 300ms ease, box-shadow 300ms ease;
}

.pulse-divider.intensified {
    width: 6px;
    box-shadow:
        0 0 18px var(--signal-orange),
        0 0 36px rgba(255, 107, 53, 0.55),
        0 0 54px rgba(255, 107, 53, 0.3);
}

@keyframes pulse-divider {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 4px var(--signal-orange);
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 12px var(--signal-orange),
            0 0 24px rgba(255, 107, 53, 0.3);
    }
}

/* ==================================================
   NAV INDICATORS (CENTER DOTS ON DIVIDER)
   ================================================== */

.nav-indicators {
    position: fixed;
    top: 50%;
    left: var(--split-left);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 600;
    padding: 14px 8px;
    background: rgba(10, 10, 15, 0.65);
    border: 1px solid rgba(232, 160, 48, 0.25);
}

.nav-dot {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--ash-gray);
    border: 1px solid rgba(232, 160, 48, 0.35);
    text-decoration: none;
    transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.nav-dot:hover {
    background: var(--horizon-gold);
    transform: scale(1.25);
}

.nav-dot.active {
    background: var(--amber-crt);
    box-shadow:
        0 0 6px var(--amber-crt),
        0 0 12px rgba(232, 160, 48, 0.5);
}

/* ==================================================
   SPLIT VIEWPORT
   ================================================== */

.split-viewport {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 2;
}

.transmission-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--split-left);
    background: var(--abyss-black);
    min-height: 100%;
    z-index: 2;
    overflow: hidden;
}

.transmission-inner {
    padding: 8vh 6vw 10vh 6vw;
    position: relative;
    z-index: 2;
}

.signal-zone {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--split-right);
    min-height: 100%;
    background: var(--bleached-bone);
    z-index: 2;
    overflow: hidden;
}

.signal-inner {
    padding: 8vh 4vw 10vh 4vw;
    position: relative;
    z-index: 2;
    will-change: transform;
}

/* Circuit-trace decorations on transmission zone edges */
.transmission-zone::before,
.transmission-zone::after {
    content: "";
    position: absolute;
    background: rgba(232, 160, 48, 0.25);
    z-index: 1;
}

.transmission-zone::before {
    top: 15vh;
    left: 2vw;
    width: 1px;
    height: 40vh;
    box-shadow:
        0 0 0 0 var(--amber-crt);
}

.transmission-zone::after {
    top: 70vh;
    left: 2vw;
    width: 3vw;
    height: 1px;
}

/* ==================================================
   BOOT SEQUENCE
   ================================================== */

.boot-sequence {
    min-height: 60vh;
    padding-bottom: 10vh;
    border-bottom: 1px solid rgba(232, 160, 48, 0.2);
    margin-bottom: 6vh;
    font-family: var(--font-mono);
    color: var(--amber-crt);
    position: relative;
}

.boot-line {
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    opacity: 0;
    color: var(--amber-crt);
    text-shadow: 0 0 4px rgba(232, 160, 48, 0.4);
    white-space: pre-wrap;
}

.boot-line.typed {
    opacity: 1;
}

.boot-line-primary {
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    color: var(--horizon-gold);
    margin-bottom: 1.5rem;
}

.boot-cursor {
    display: inline-block;
    color: var(--signal-orange);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    margin-top: 0.5rem;
    animation: cursor-blink 0.9s steps(1) infinite;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ==================================================
   MANIFESTO BLOCKS
   ================================================== */

.manifesto-block {
    padding: 8vh 0;
    position: relative;
}

.block-index {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal-orange);
    margin-bottom: 2rem;
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--signal-orange);
    background: rgba(255, 107, 53, 0.05);
}

.manifesto-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 0.88;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--bleached-bone);
    margin-bottom: 2.5rem;
    mix-blend-mode: difference;
}

.manifesto-body {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: var(--amber-crt);
    margin-bottom: 1.6rem;
    max-width: 44ch;
    text-align: left;
}

.manifesto-body::first-line {
    color: var(--horizon-gold);
}

.pulse-rule {
    width: 100%;
    height: 1px;
    background: var(--signal-orange);
    margin: 2vh 0;
    opacity: 0.7;
    position: relative;
    animation: pulse-rule 2s ease-in-out infinite;
}

.pulse-rule::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 8px;
    height: 7px;
    background: var(--signal-orange);
}

.pulse-rule::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 7px;
    background: var(--signal-orange);
}

@keyframes pulse-rule {
    0%, 100% { opacity: 0.5; box-shadow: 0 0 2px var(--signal-orange); }
    50% { opacity: 1; box-shadow: 0 0 10px var(--signal-orange); }
}

/* Redacted spans — toggled on hover */
.redacted {
    background-color: var(--amber-crt);
    color: var(--amber-crt);
    padding: 0 0.3em;
    transition: background-color 200ms ease, color 200ms ease;
    cursor: help;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.25);
}

.redacted:hover {
    background-color: transparent;
    color: var(--sunset-magenta);
}

/* Directive list */
.directive-list {
    list-style: none;
    margin: 2.5rem 0 0 0;
    padding: 0;
    border-top: 1px solid rgba(232, 160, 48, 0.2);
    border-bottom: 1px solid rgba(232, 160, 48, 0.2);
}

.directive-list li {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    line-height: 1.75;
    letter-spacing: 0.04em;
    padding: 0.9rem 0;
    border-bottom: 1px dashed rgba(232, 160, 48, 0.18);
    color: var(--amber-crt);
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.directive-list li:last-child {
    border-bottom: none;
}

.directive-tag {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 0.75em;
    letter-spacing: 0.15em;
    color: var(--signal-orange);
    flex-shrink: 0;
    min-width: 4.5em;
}

/* Spec grid inside manifesto */
.spec-grid {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(232, 160, 48, 0.2);
    border: 1px solid rgba(232, 160, 48, 0.25);
}

.spec-cell {
    background: var(--abyss-black);
    padding: 1.2rem 1rem;
}

.spec-label {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal-orange);
    margin-bottom: 0.4rem;
}

.spec-value {
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    color: var(--horizon-gold);
    text-shadow: 0 0 6px rgba(245, 185, 66, 0.3);
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.spec-unit {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ash-gray);
    color: rgba(232, 160, 48, 0.6);
}

/* ==================================================
   SIGNAL ZONE PANELS
   ================================================== */

.signal-panel {
    margin-bottom: 8vh;
    background: var(--bleached-bone);
    border: 1px solid rgba(139, 58, 42, 0.3);
    position: relative;
    box-shadow:
        0 2px 0 rgba(139, 58, 42, 0.25),
        4px 4px 0 rgba(199, 56, 95, 0.15);
}

.panel-meta {
    display: flex;
    gap: 1.2rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(139, 58, 42, 0.3);
    background: rgba(139, 58, 42, 0.08);
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.65rem, 0.85vw, 0.8rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rust-oxide);
    flex-wrap: wrap;
}

.meta-time {
    margin-left: auto;
    color: var(--sunset-magenta);
}

.panel-artwork {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(175deg,
        var(--sunset-magenta) 0%,
        var(--signal-orange) 40%,
        var(--horizon-gold) 70%,
        var(--amber-crt) 100%);
}

.panel-caption {
    display: flex;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-top: 1px solid rgba(139, 58, 42, 0.3);
    background: var(--bleached-bone);
    align-items: baseline;
    flex-wrap: wrap;
}

.caption-label {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal-orange);
}

.caption-text {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.04em;
    color: var(--rust-oxide);
    flex: 1;
}

/* Scanline overlay on every signal artwork */
.scanline-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(10, 10, 15, 0.15) 2px,
        rgba(10, 10, 15, 0.15) 4px
    );
    mix-blend-mode: multiply;
    z-index: 5;
}

/* ==================================================
   SIGNAL ARTWORK: SUNSET
   ================================================== */

.artwork-sunset {
    position: relative;
}

.artwork-sunset .artwork-horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34%;
    height: 2px;
    background: var(--abyss-black);
    box-shadow: 0 0 10px rgba(10, 10, 15, 0.4);
    z-index: 3;
}

.artwork-sunset .artwork-sun {
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
    width: 35%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        #fff5e0 0%,
        var(--horizon-gold) 35%,
        var(--signal-orange) 75%,
        var(--sunset-magenta) 100%);
    box-shadow:
        0 0 60px rgba(255, 107, 53, 0.4),
        0 0 120px rgba(255, 107, 53, 0.2);
    z-index: 2;
}

.artwork-sunset .artwork-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    background:
        linear-gradient(to bottom,
            rgba(10, 10, 15, 0.6) 0%,
            rgba(10, 10, 15, 0.9) 100%),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 8%,
            rgba(232, 160, 48, 0.35) 8%,
            rgba(232, 160, 48, 0.35) calc(8% + 1px)),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 16%,
            rgba(232, 160, 48, 0.35) 16%,
            rgba(232, 160, 48, 0.35) calc(16% + 1px));
    transform: perspective(200px) rotateX(55deg);
    transform-origin: top center;
    z-index: 4;
}

/* ==================================================
   SIGNAL ARTWORK: GLITCH PORTRAIT
   ================================================== */

.artwork-portrait {
    position: relative;
    background: linear-gradient(180deg,
        var(--rust-oxide) 0%,
        var(--sunset-magenta) 50%,
        var(--abyss-black) 100%);
}

.portrait-shape {
    position: absolute;
    background: var(--signal-orange);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.portrait-shape-1 {
    top: 12%;
    left: 18%;
    width: 64%;
    height: 72%;
    clip-path: polygon(
        50% 0%, 80% 10%, 95% 35%, 92% 65%,
        75% 90%, 50% 100%, 25% 90%, 8% 65%,
        5% 35%, 20% 10%
    );
    background: var(--horizon-gold);
    animation: vhs-track 7s ease-in-out infinite;
}

.portrait-shape-2 {
    top: 20%;
    left: 22%;
    width: 56%;
    height: 60%;
    clip-path: polygon(
        50% 5%, 75% 15%, 85% 40%, 80% 65%,
        65% 85%, 50% 90%, 35% 85%, 20% 65%,
        15% 40%, 25% 15%
    );
    background: var(--sunset-magenta);
    mix-blend-mode: multiply;
    opacity: 0.6;
    animation: vhs-track 9s ease-in-out infinite 0.8s;
}

.portrait-shape-3 {
    top: 55%;
    left: 30%;
    width: 40%;
    height: 12%;
    background: var(--abyss-black);
    clip-path: polygon(0 40%, 100% 20%, 100% 80%, 0 70%);
    opacity: 0.7;
}

.portrait-eye {
    position: absolute;
    top: 38%;
    width: 14%;
    height: 6%;
    background: var(--abyss-black);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px var(--amber-crt),
        0 0 14px var(--signal-orange);
    animation: eye-blink 4.3s ease-in-out infinite;
}

.portrait-eye-left { left: 27%; }
.portrait-eye-right { right: 27%; animation-delay: 0.15s; }

@keyframes eye-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes vhs-track {
    0%   { clip-path: inset(30% 0 60% 0); transform: translateX(0); }
    48%  { clip-path: inset(30% 0 60% 0); transform: translateX(0); }
    50%  { clip-path: inset(12% 0 70% 0); transform: translateX(6px); }
    52%  { clip-path: inset(30% 0 60% 0); transform: translateX(0); }
    70%  { clip-path: inset(55% 0 20% 0); transform: translateX(-4px); }
    72%  { clip-path: inset(0 0 0 0); transform: translateX(0); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

.vhs-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    height: 8%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.05));
    mix-blend-mode: overlay;
    animation: vhs-band-shift 6s linear infinite;
    z-index: 4;
}

@keyframes vhs-band-shift {
    0%   { transform: translateY(-80%); opacity: 0.0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(600%); opacity: 0.0; }
}

/* ==================================================
   SIGNAL ARTWORK: WAVEFORM
   ================================================== */

.artwork-waveform {
    position: relative;
    background:
        linear-gradient(180deg,
            var(--abyss-black) 0%,
            var(--rust-oxide) 80%,
            var(--sunset-magenta) 100%);
}

.waveform-svg {
    position: absolute;
    inset: 8% 4%;
    width: 92%;
    height: 84%;
}

.waveform-path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.waveform-back {
    stroke: var(--horizon-gold);
    opacity: 0.3;
    stroke-width: 1;
}

.waveform-mid {
    stroke: var(--signal-orange);
    opacity: 0.6;
    stroke-width: 1.25;
}

.waveform-front {
    stroke: var(--amber-crt);
    opacity: 1;
    stroke-width: 1.75;
    filter: drop-shadow(0 0 3px rgba(232, 160, 48, 0.6));
}

.circuit-trace {
    position: absolute;
    background: rgba(232, 160, 48, 0.25);
    z-index: 2;
}

.circuit-trace-1 {
    top: 12%;
    left: 6%;
    width: 1px;
    height: 25%;
    box-shadow: 0 -4px 0 -3px var(--amber-crt);
}

.circuit-trace-1::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -3.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-crt);
    box-shadow: 0 0 6px var(--amber-crt);
}

.circuit-trace-2 {
    bottom: 10%;
    right: 5%;
    width: 25%;
    height: 1px;
}

.circuit-trace-2::after {
    content: "";
    position: absolute;
    right: -3.5px;
    top: -3.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-crt);
    box-shadow: 0 0 6px var(--amber-crt);
}

/* ==================================================
   SIGNAL ARTWORK: CIRCUIT BOARD
   ================================================== */

.artwork-circuit {
    position: relative;
    background: linear-gradient(160deg,
        var(--rust-oxide) 0%,
        var(--sunset-magenta) 55%,
        var(--horizon-gold) 100%);
}

.circuit-board {
    position: absolute;
    inset: 6%;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(232, 160, 48, 0.4);
    box-shadow: inset 0 0 30px rgba(10, 10, 15, 0.6);
}

.circuit-trace-h,
.circuit-trace-v {
    position: absolute;
    background: rgba(232, 160, 48, 0.55);
}

.circuit-trace-h {
    height: 1px;
    left: 10%;
    right: 10%;
}

.trace-h-1 { top: 20%; }
.trace-h-2 { top: 50%; }
.trace-h-3 { top: 78%; }

.circuit-trace-v {
    width: 1px;
    top: 10%;
    bottom: 10%;
}

.trace-v-1 { left: 28%; }
.trace-v-2 { right: 28%; }

.circuit-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-crt);
    box-shadow: 0 0 6px var(--amber-crt);
    transform: translate(-50%, -50%);
}

.node-1 { top: 20%; left: 28%; }
.node-2 { top: 50%; left: 28%; }
.node-3 { top: 50%; left: 72%; }
.node-4 { top: 78%; left: 72%; }

.circuit-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22%;
    height: 16%;
    transform: translate(-50%, -50%);
    background: var(--abyss-black);
    border: 1px solid var(--horizon-gold);
    box-shadow:
        0 0 0 2px rgba(232, 160, 48, 0.2),
        inset 0 0 0 2px rgba(232, 160, 48, 0.25);
}

.circuit-chip::before {
    content: "K-07";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: clamp(0.6rem, 0.9vw, 0.85rem);
    color: var(--horizon-gold);
    letter-spacing: 0.2em;
}

/* ==================================================
   SIGNAL ARTWORK: FINAL FRAME
   ================================================== */

.artwork-final {
    position: relative;
    background: linear-gradient(175deg,
        var(--sunset-magenta) 0%,
        var(--signal-orange) 40%,
        var(--horizon-gold) 70%,
        var(--amber-crt) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.final-bars {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
}

.final-bars span {
    flex: 1;
    height: 100%;
}

.final-bars span:nth-child(1) { background: #ffffff; opacity: 0.85; }
.final-bars span:nth-child(2) { background: #f5b942; opacity: 0.85; }
.final-bars span:nth-child(3) { background: #ff6b35; opacity: 0.85; }
.final-bars span:nth-child(4) { background: #c7385f; opacity: 0.85; }
.final-bars span:nth-child(5) { background: #8b3a2a; opacity: 0.85; }
.final-bars span:nth-child(6) { background: #3a3a42; opacity: 0.85; }
.final-bars span:nth-child(7) { background: #0a0a0f; opacity: 0.85; }
.final-bars span:nth-child(8) { background: #e8a030; opacity: 0.85; }

.final-kanji {
    position: relative;
    z-index: 3;
    font-family: var(--font-display);
    font-size: clamp(6rem, 18vw, 14rem);
    line-height: 1;
    color: var(--abyss-black);
    mix-blend-mode: multiply;
    text-shadow:
        2px 2px 0 var(--signal-orange),
        -2px -2px 0 var(--amber-crt);
    letter-spacing: -0.05em;
}

/* ==================================================
   CONVERGENCE ZONE
   ================================================== */

.convergence-zone {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--abyss-black);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 12vh 0;
}

.convergence-zone::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(10, 10, 15, 0.3) 2px,
        rgba(10, 10, 15, 0.3) 4px
    );
    z-index: 1;
    pointer-events: none;
}

.convergence-flood {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 55%;
    transform: translateX(-50%);
    width: var(--divider-width);
    background: var(--signal-orange);
    box-shadow:
        0 0 18px var(--signal-orange),
        0 0 38px rgba(255, 107, 53, 0.55);
    transition: width 1500ms ease, opacity 1200ms ease;
    z-index: 2;
}

.convergence-zone.merged .convergence-flood {
    width: 100%;
    opacity: 0.25;
}

.convergence-left,
.convergence-right {
    position: absolute;
    top: 50%;
    width: 38%;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 4rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    transition: transform 1400ms cubic-bezier(0.16, 0.8, 0.3, 1), opacity 1400ms ease;
    z-index: 3;
}

.convergence-left {
    left: 4%;
    transform: translate(-40%, -50%);
    color: var(--amber-crt);
    text-align: left;
    opacity: 0.95;
}

.convergence-right {
    right: 4%;
    transform: translate(40%, -50%);
    color: var(--sunset-magenta);
    text-align: right;
    opacity: 0.95;
}

.convergence-zone.merged .convergence-left {
    transform: translate(35%, -50%);
    opacity: 0.25;
}

.convergence-zone.merged .convergence-right {
    transform: translate(-35%, -50%);
    opacity: 0.25;
}

.conv-subtext {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 1rem;
    color: var(--horizon-gold);
    opacity: 0.8;
}

.convergence-core {
    position: relative;
    z-index: 4;
    text-align: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 1200ms ease 900ms, transform 1200ms ease 900ms;
    max-width: 92vw;
    padding: 4vh 3vw;
}

.convergence-zone.merged .convergence-core {
    opacity: 1;
    transform: scale(1);
}

.core-kanji {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 8rem);
    color: var(--signal-orange);
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
    text-shadow:
        0 0 12px rgba(255, 107, 53, 0.4),
        0 0 30px rgba(255, 107, 53, 0.2);
}

.core-headline {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 10rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--bleached-bone);
    margin: 0.3rem 0;
    mix-blend-mode: difference;
}

.core-tagline {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--horizon-gold);
    margin-top: 1.5rem;
}

.core-signature {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    letter-spacing: 0.18em;
    color: var(--amber-crt);
    margin-top: 2.5rem;
    opacity: 0.7;
}

/* ==================================================
   INITIAL STATE (pre-boot)
   ================================================== */

body.pre-boot .transmission-zone .manifesto-block,
body.pre-boot .transmission-zone .pulse-rule,
body.pre-boot .signal-zone,
body.pre-boot .pulse-divider,
body.pre-boot .nav-indicators,
body.pre-boot .convergence-zone,
body.pre-boot .kanji-ghost {
    opacity: 0;
    transition: opacity 800ms ease;
}

body.booted .transmission-zone .manifesto-block,
body.booted .transmission-zone .pulse-rule,
body.booted .signal-zone,
body.booted .pulse-divider,
body.booted .nav-indicators,
body.booted .convergence-zone,
body.booted .kanji-ghost {
    opacity: 1;
}

body.booted .kanji-ghost-left { opacity: 0.04; }
body.booted .kanji-ghost-right { opacity: 0.08; }

/* ==================================================
   RESPONSIVE (stack on narrow viewports)
   ================================================== */

@media (max-width: 760px) {
    :root { --split-left: 100%; --split-right: 100%; }

    .transmission-zone,
    .signal-zone {
        position: relative;
        width: 100%;
    }

    .signal-zone {
        top: auto;
        border-top: 3px solid var(--signal-orange);
    }

    .pulse-divider {
        left: 0;
        right: 0;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 3px;
        transform: none;
    }

    .nav-indicators {
        top: auto;
        bottom: 2vh;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }

    .transmission-inner,
    .signal-inner {
        padding: 6vh 6vw;
    }

    .manifesto-title { font-size: clamp(2rem, 12vw, 4rem); }
}