/* nonri.org - The Transmission */
/* Palette: Warm Static #9B8B7A, Ash Matte #7A6B5A, Faded Signal #B5A595,
   Static White #F2EDE6, Void Brown #3A3228, Interference Red #C4564A, Ghost Blue #8BA0B5 */

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

body {
    background-color: #F2EDE6;
    color: #9B8B7A;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    position: relative;
}

/* Noise overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    transition: opacity 1s ease;
}

/* Abstract tech background */
.abstract-tech {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Signal Acquisition */
.signal-acquisition {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.glitch-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: linear-gradient(90deg, #9B8B7A, #7A6B5A, #B5A595);
    opacity: 0;
    z-index: 50;
    pointer-events: none;
}

.title-container {
    position: relative;
    text-align: center;
}

.site-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    color: #3A3228;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 3;
}

.title-rgb {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    letter-spacing: 0.04em;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.title-rgb.r { color: #C4564A; transform: translate(calc(-50% + 2px), -1px); }
.title-rgb.g { color: #8BA0B5; transform: translate(calc(-50% - 2px), 1px); }
.title-rgb.b { color: #9B8B7A; transform: translate(calc(-50%), 2px); }

.title-rgb.converged {
    opacity: 0;
    transform: translateX(-50%);
}

.org-echo {
    display: flex;
    gap: 4px;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #9B8B7A;
}

.org-echo span:nth-child(2) { transform: translateX(4px); }
.org-echo span:nth-child(3) { transform: translateX(8px); }

/* Glitch Divider */
.glitch-divider {
    position: relative;
    height: 16px;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

.glitch-divider.dense {
    height: 8px;
    margin: 4px 0;
}

.glitch-band {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}

.glitch-band.r { background-color: #9B8B7A; transform: translateX(2px); }
.glitch-band.g { background-color: #7A6B5A; transform: translateX(-2px); }
.glitch-band.b { background-color: #B5A595; transform: translateX(0); }

/* Content Blocks */
.content-block {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 32px;
    position: relative;
    z-index: 2;
    transform: translateX(var(--section-drift, 0));
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.block-inner {
    position: relative;
    z-index: 2;
    opacity: 0.85;
    transform: scale(0.96);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.block-inner.focused {
    opacity: 1;
    transform: scale(1);
}

/* Ghost Text */
.ghost-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(10rem, 25vw, 16rem);
    color: #B5A595;
    opacity: 0.08;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.ghost-text.final {
    opacity: 0.15;
    font-size: clamp(8rem, 20vw, 14rem);
}

.ghost-text.offset {
    transform: translate(-40%, -30%);
}

/* Block Headings */
.block-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #3A3228;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 24px;
}

/* Block Body */
.block-body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: #9B8B7A;
    margin-bottom: 16px;
}

.block-body.light {
    font-weight: 300;
    color: #B5A595;
}

/* Glitch Panel */
.glitch-panel {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.glitch-strip {
    width: 100%;
    background: linear-gradient(90deg, #9B8B7A 33%, #C4564A 33% 66%, #8BA0B5 66%);
    opacity: 0.4;
}

/* Void Rectangles */
.void-rectangle {
    position: absolute;
    background-color: #000000;
    z-index: 5;
    pointer-events: none;
}

.void-rectangle.large {
    position: relative;
    margin: 40px auto;
    z-index: 5;
}

/* Loss of Signal */
.loss-of-signal {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 80px 32px;
}

.loss-of-signal .block-inner {
    text-align: center;
    z-index: 3;
}

.end-transmission {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #9B8B7A;
}

.faded-title {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #3A3228;
    opacity: 0.15;
    letter-spacing: 0.04em;
    margin-top: 40px;
}

/* Section zoom-focus */
.section {
    position: relative;
}

/* Mobile */
@media (max-width: 768px) {
    .content-block {
        padding: 60px 20px;
        transform: none;
    }

    .void-rectangle {
        display: none;
    }

    .void-rectangle.large {
        display: block;
        width: 80vw;
        height: 20vh;
    }

    .ghost-text {
        font-size: 8rem;
    }
}

@media (max-width: 480px) {
    .block-heading {
        font-size: 2.5rem;
    }

    .site-title {
        font-size: 3.5rem;
    }
}