/* =========================================================================
   undo.quest // ctrl+Z reality
   Glitch-art aesthetic, scroll-driven corruption recovery narrative.
   ========================================================================= */

:root {
    /* Palette: Dark-Mode Glitch Spectrum */
    --void-dark: #0A0A10;
    --memory-corrupt: #0E0810;
    --buffer-clean: #101014;
    --signal-white: #E0E0E8;
    --restored-white: #D0D0D8;
    --buffer-gray: #A0A0B0;
    --channel-r: #E84040;
    --channel-g: #40E880;
    --channel-b: #4080E8;
    --artifact-white: #FFFFFF;
    --error-red: #E84040;

    /* Glitch intensity (driven by scroll). 1.0 = full corruption, 0.0 = clean */
    --glitch-level: 1;
    --flicker-mult: 1;
    --effective-glitch: calc(var(--glitch-level) * var(--flicker-mult));

    /* Background mix shifts with scroll: corrupt -> clean -> corrupt again */
    --bg-current: var(--memory-corrupt);
}

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

html {
    scroll-behavior: auto;
    background: var(--void-dark);
}

body {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--buffer-gray);
    background: var(--bg-current);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 200ms linear;
    /* Allow ~500vh of scroll content via section heights */
}

/* =========================================================================
   Recovery progress bar (top of viewport)
   ========================================================================= */
.recovery-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    z-index: 100;
    pointer-events: none;
}

.recovery-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--channel-g);
    box-shadow: 0 0 6px var(--channel-g), 0 0 12px rgba(64, 232, 128, 0.5);
    transition: width 80ms linear, background-color 200ms linear, box-shadow 200ms linear;
}

.recovery-bar-fill.fragmented {
    background: var(--channel-r);
    box-shadow: 0 0 8px var(--channel-r), 0 0 16px rgba(232, 64, 64, 0.6);
    /* Fragmented: dashed gradient breaks into segments */
    background-image: repeating-linear-gradient(
        90deg,
        var(--channel-r) 0px,
        var(--channel-r) 18px,
        transparent 18px,
        transparent 28px,
        var(--channel-r) 28px,
        var(--channel-r) 38px,
        transparent 38px,
        transparent 50px
    );
}

/* =========================================================================
   Scan lines (full-viewport)
   ========================================================================= */
.scan-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(255, 255, 255, 0.04) 2px,
        rgba(255, 255, 255, 0.04) 3px
    );
    opacity: calc(var(--effective-glitch) * 0.15 + 0.02);
    mix-blend-mode: screen;
}

/* =========================================================================
   Noise overlay (SVG turbulence)
   ========================================================================= */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    opacity: calc(0.04 + var(--effective-glitch) * 0.08);
    mix-blend-mode: overlay;
}

.noise-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================================================
   Hex data stream (slow upward scroll background)
   ========================================================================= */
.hex-stream {
    position: fixed;
    inset: -200px 0 -200px 0;
    pointer-events: none;
    z-index: 5;
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 10px;
    line-height: 1.4;
    color: var(--channel-g);
    opacity: calc(0.05 + var(--effective-glitch) * 0.05);
    white-space: pre;
    overflow: hidden;
    padding: 0 14px;
    word-spacing: 0;
    letter-spacing: 0.5px;
    transform: translateY(0);
    will-change: transform;
}

.hex-stream-row {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* =========================================================================
   Flicker overlay (intermittent flash)
   ========================================================================= */
.flicker-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    background: rgba(232, 64, 64, 0);
    mix-blend-mode: difference;
    transition: background-color 60ms linear;
}

.flicker-overlay.flashing {
    background: rgba(232, 64, 64, 0.08);
}

/* =========================================================================
   Page layout — full bleed
   ========================================================================= */
.page {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
}

.section {
    position: relative;
    width: 100%;
    padding: 80px 6vw 80px 6vw;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border: none;
    overflow: hidden;
}

.section-corrupt {
    min-height: 100vh;
    background: var(--memory-corrupt);
    justify-content: center;
}

.section-partial {
    min-height: 150vh;
    background: linear-gradient(180deg, var(--memory-corrupt) 0%, var(--void-dark) 100%);
    justify-content: center;
}

.section-recovery {
    min-height: 130vh;
    background: var(--void-dark);
    justify-content: center;
}

.section-clean {
    min-height: 70vh;
    background: var(--buffer-clean);
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-catch {
    min-height: 60vh;
    background: var(--memory-corrupt);
    justify-content: center;
}

/* =========================================================================
   Typography
   ========================================================================= */
.hero-title {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 12vw, 180px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--signal-white);
    text-shadow:
        calc(var(--effective-glitch) * -3px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 3px) 0 var(--channel-b),
        0 0 transparent;
    transform: translateX(calc(var(--effective-glitch) * 8px - 4px));
    will-change: transform, text-shadow;
    position: relative;
}

.section-title {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 8vw, 96px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--signal-white);
    text-shadow:
        calc(var(--effective-glitch) * -3px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 3px) 0 var(--channel-b),
        0 0 transparent;
    will-change: transform, text-shadow;
    position: relative;
}

.section-title-clean {
    color: var(--signal-white);
    text-shadow: none;
}

.section-title-catch {
    color: var(--signal-white);
    text-shadow:
        calc(var(--effective-glitch) * -4px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 4px) 0 var(--channel-b),
        0 0 transparent;
}

.hero-subtitle {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 3vw, 32px);
    color: var(--buffer-gray);
    margin-top: 12px;
    text-shadow:
        calc(var(--effective-glitch) * -1.5px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 1.5px) 0 var(--channel-b);
    transform: translateX(calc(var(--effective-glitch) * -6px + 3px));
}

.prose-block {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.prose-block-wide {
    max-width: 880px;
}

.prose-block-narrow {
    max-width: 640px;
}

.prose-line {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--buffer-gray);
    transform: translateX(calc(var(--effective-glitch) * 5px - 2px));
}

.prose-line.restored {
    color: var(--restored-white);
    transform: translateX(calc(var(--effective-glitch) * 1px));
}

.prose-line-large {
    font-size: 22px;
    line-height: 1.5;
    color: var(--signal-white);
    font-weight: 500;
}

.catch-line {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 3vw, 32px);
    line-height: 1.4;
    color: var(--signal-white);
    text-shadow:
        calc(var(--effective-glitch) * -2.5px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 2.5px) 0 var(--channel-b);
    margin-bottom: 6px;
}

/* =========================================================================
   Section meta strip
   ========================================================================= */
.section-meta {
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.4;
    color: var(--buffer-gray);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border-top: 1px solid rgba(160, 160, 176, 0.18);
    border-bottom: 1px solid rgba(160, 160, 176, 0.18);
    padding: 10px 0;
}

.section-meta-clean {
    color: var(--restored-white);
    border-top-color: rgba(208, 208, 216, 0.25);
    border-bottom-color: rgba(208, 208, 216, 0.25);
}

.section-meta-catch {
    color: var(--error-red);
    border-top-color: rgba(232, 64, 64, 0.5);
    border-bottom-color: rgba(232, 64, 64, 0.5);
}

.meta-label {
    color: var(--buffer-gray);
    opacity: 0.7;
}

.section-meta-catch .meta-label,
.section-meta-catch .meta-value,
.section-meta-catch .meta-divider {
    text-shadow:
        calc(var(--effective-glitch) * -1.5px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 1.5px) 0 var(--channel-b);
}

.meta-value {
    color: var(--signal-white);
}

.section-meta-clean .meta-value {
    color: var(--restored-white);
}

.section-meta-catch .meta-value {
    color: var(--signal-white);
}

.meta-divider {
    color: rgba(160, 160, 176, 0.5);
}

/* =========================================================================
   Error / OK / hex streams
   ========================================================================= */
.error-stream {
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--error-red);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    padding: 12px 16px;
    border-left: 2px solid var(--error-red);
    background: rgba(232, 64, 64, 0.04);
    transform: translateX(calc(var(--effective-glitch) * 6px - 3px));
}

.error-stream-light {
    color: var(--channel-g);
    border-left-color: var(--channel-g);
    background: rgba(64, 232, 128, 0.04);
}

.error-stream-light .err,
.error-stream-light .err-msg,
.error-stream-light .err-hex {
    color: var(--channel-g);
}

.error-stream-fatal {
    color: var(--error-red);
    border-left-color: var(--error-red);
    background: rgba(232, 64, 64, 0.08);
    border-top: 1px solid rgba(232, 64, 64, 0.4);
    border-bottom: 1px solid rgba(232, 64, 64, 0.4);
}

.err {
    color: var(--error-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.err-msg {
    color: var(--buffer-gray);
}

.error-stream-fatal .err-msg {
    color: var(--signal-white);
}

.err-hex {
    color: var(--channel-r);
    opacity: 0.85;
    letter-spacing: 0.04em;
}

.ok {
    color: var(--channel-g);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ok-msg {
    color: var(--restored-white);
}

/* =========================================================================
   Block displacement (clip-path slicing)
   ========================================================================= */
.block-displaced {
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--signal-white);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.displaced-line {
    position: relative;
    color: var(--signal-white);
    text-shadow:
        calc(var(--effective-glitch) * -2px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 2px) 0 var(--channel-b);
    transform: translateX(calc(var(--effective-glitch) * (var(--line-offset, 0)) * 1px));
}

.displaced-line-fatal {
    color: var(--error-red);
    text-shadow:
        calc(var(--effective-glitch) * -3px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 3px) 0 var(--channel-b);
}

/* glitchable wrapper: pseudo-elements create sliced ghost copies */
.glitchable {
    position: relative;
}

.glitchable[data-text]::before,
.glitchable[data-text]::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: inherit;
    font: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    overflow: hidden;
    opacity: calc(var(--effective-glitch) * 0.85);
    will-change: transform, clip-path;
}

.glitchable[data-text]::before {
    color: var(--channel-r);
    clip-path: inset(0 0 65% 0);
    transform: translate(calc(var(--effective-glitch) * -6px), -1px);
    mix-blend-mode: screen;
    animation: glitchShiftA 2.4s steps(1) infinite;
}

.glitchable[data-text]::after {
    color: var(--channel-b);
    clip-path: inset(60% 0 0 0);
    transform: translate(calc(var(--effective-glitch) * 6px), 1px);
    mix-blend-mode: screen;
    animation: glitchShiftB 3.1s steps(1) infinite;
}

.glitchable-extreme[data-text]::before {
    clip-path: inset(0 0 55% 0);
    transform: translate(calc(var(--effective-glitch) * -10px), -2px);
}

.glitchable-extreme[data-text]::after {
    clip-path: inset(50% 0 0 0);
    transform: translate(calc(var(--effective-glitch) * 10px), 2px);
}

/* Block displaced wrapper: simulate sliced offset */
.block-displaced.glitchable[data-text]::before,
.block-displaced.glitchable[data-text]::after {
    /* Hide pseudo content for block lists where data-text isn't usable */
    content: "";
    background: transparent;
}

@keyframes glitchShiftA {
    0%   { transform: translate(calc(var(--effective-glitch) * -6px), -1px); clip-path: inset(0 0 65% 0); }
    20%  { transform: translate(calc(var(--effective-glitch) * -10px), -1px); clip-path: inset(10% 0 55% 0); }
    40%  { transform: translate(calc(var(--effective-glitch) * -3px), -2px); clip-path: inset(20% 0 70% 0); }
    60%  { transform: translate(calc(var(--effective-glitch) * -8px), -1px); clip-path: inset(0 0 80% 0); }
    80%  { transform: translate(calc(var(--effective-glitch) * -5px), 0); clip-path: inset(5% 0 60% 0); }
    100% { transform: translate(calc(var(--effective-glitch) * -6px), -1px); clip-path: inset(0 0 65% 0); }
}

@keyframes glitchShiftB {
    0%   { transform: translate(calc(var(--effective-glitch) * 6px), 1px); clip-path: inset(60% 0 0 0); }
    25%  { transform: translate(calc(var(--effective-glitch) * 9px), 2px); clip-path: inset(70% 0 0 0); }
    50%  { transform: translate(calc(var(--effective-glitch) * 4px), 1px); clip-path: inset(50% 0 5% 0); }
    75%  { transform: translate(calc(var(--effective-glitch) * 11px), 2px); clip-path: inset(65% 0 0 0); }
    100% { transform: translate(calc(var(--effective-glitch) * 6px), 1px); clip-path: inset(60% 0 0 0); }
}

/* =========================================================================
   Hex readout panel
   ========================================================================= */
.hex-readout {
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--restored-white);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    background: rgba(64, 232, 128, 0.03);
    border-left: 2px solid var(--channel-g);
    max-width: 640px;
    letter-spacing: 0.04em;
}

.hex-row {
    white-space: pre;
    color: var(--restored-white);
}

/* =========================================================================
   Title block layout
   ========================================================================= */
.title-block {
    display: block;
    position: relative;
}

.subtitle-block {
    display: block;
    margin-top: -8px;
}

/* =========================================================================
   Scroll hint
   ========================================================================= */
.scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 6vw;
    font-family: "Space Mono", monospace;
    font-size: 12px;
    color: var(--buffer-gray);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.85;
}

.scroll-hint-text {
    text-shadow:
        calc(var(--effective-glitch) * -1px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 1px) 0 var(--channel-b);
}

.scroll-hint-arrow {
    font-size: 14px;
    animation: arrowBob 1.6s ease-in-out infinite;
}

@keyframes arrowBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* =========================================================================
   Clean section marker
   ========================================================================= */
.clean-marker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: "Space Mono", monospace;
    font-size: 12px;
    color: var(--buffer-gray);
    letter-spacing: 0.08em;
    margin-top: 24px;
}

.marker-line {
    flex: 1;
    height: 1px;
    background: rgba(208, 208, 216, 0.3);
    max-width: 200px;
}

.marker-text {
    white-space: nowrap;
    color: var(--restored-white);
    opacity: 0.8;
}

/* =========================================================================
   End stamp (catch section)
   ========================================================================= */
.end-stamp {
    margin-top: 30px;
    font-family: "Space Mono", monospace;
    font-size: 14px;
    color: var(--error-red);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-top: 1px solid rgba(232, 64, 64, 0.4);
    padding-top: 18px;
}

.end-stamp-text {
    text-shadow:
        calc(var(--effective-glitch) * -3px) 0 var(--channel-r),
        calc(var(--effective-glitch) * 3px) 0 var(--channel-b);
    position: relative;
}

/* =========================================================================
   Responsive tweaks (still full bleed, just tightened type)
   ========================================================================= */
@media (max-width: 720px) {
    .section {
        padding: 60px 5vw 60px 5vw;
    }

    .section-clean {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .scroll-hint {
        left: 5vw;
        bottom: 24px;
    }

    .prose-line-large {
        font-size: 18px;
    }
}