/* ============================================
   TNHEC.COM — The Never Happy Ending Chronicle
   ============================================ */

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

html {
    scroll-behavior: smooth;
    background: #0a0e1a;
}

body {
    background: #0a0e1a;
    color: #8a94b8;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    image-rendering: pixelated;
}

/* --- Pixel Grid Background --- */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(26,39,68,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,39,68,0.08) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 0;
}

/* --- Title Gate --- */
#title-gate {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

#title-line {
    width: 60vw;
    height: 2px;
    margin-bottom: 0;
}

#title-line line {
    transition: stroke-dashoffset 0.8s ease-in-out;
}

#title-line.drawn line {
    stroke-dashoffset: 0;
}

#title-text {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1rem, 3vw, 2rem);
    color: #c0c8e0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 2px 2px 0px #0a0e1a, 4px 4px 0px #1a2744;
    text-align: center;
    padding: 0 1rem;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
    margin-bottom: 1.5rem;
}

#title-text.visible {
    opacity: 1;
    transform: scale(1);
}

#title-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    color: #4a5680;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #3366ff;
    width: 0;
    max-width: max-content;
}

#title-subtitle.typing {
    opacity: 1;
    animation: typewriter 2s steps(44) forwards, blink-cursor 0.6s step-end infinite;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-cursor {
    50% { border-color: transparent; }
}

#title-chevrons {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    gap: 60vw;
    opacity: 0;
    pointer-events: none;
}

#title-chevrons.spread {
    opacity: 1;
    transition: opacity 0.3s ease;
}

#title-chevrons .chevron-left,
#title-chevrons .chevron-right {
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    color: #d4daf0;
    animation: pulse-chevron 2s ease-in-out infinite;
}

@keyframes pulse-chevron {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* --- Chronicle Spine --- */
#chronicle-spine {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding: 4rem 1.5rem 8rem;
    z-index: 1;
}

/* --- Chapter Gates --- */
.chapter-gate {
    padding: 6rem 0;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.chapter-gate.visible {
    opacity: 1;
    transform: translateY(0);
}

.gate-brackets {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.bracket-left, .bracket-right {
    width: 40px;
    height: 120px;
    flex-shrink: 0;
}

.chapter-gate.visible .bracket-left path,
.chapter-gate.visible .bracket-right path {
    transition: stroke-dashoffset 0.6s ease-in-out;
    stroke-dashoffset: 0;
}

.gate-scene {
    width: 160px;
    height: 120px;
    position: relative;
    overflow: hidden;
}

.gate-scene > div {
    width: 100%;
    height: 100%;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s ease-in-out 0.6s;
}

.chapter-gate.visible .gate-scene > div {
    clip-path: inset(0 0 0 0);
}

.chapter-number {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: #c0c8e0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 2px 2px 0px #0a0e1a, 4px 4px 0px #1a2744;
    margin-bottom: 0.75rem;
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
}

.chapter-gate.visible .chapter-number {
    animation: scale-bounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

@keyframes scale-bounce {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.chapter-meta {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #4a5680;
}

/* --- Pixel Art Scenes (CSS box-shadow) --- */
.pixel-art-castle {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        /* Base wall */
        0px 80px #1a2744, 4px 80px #1a2744, 8px 80px #1a2744, 12px 80px #1a2744, 16px 80px #1a2744,
        20px 80px #1a2744, 24px 80px #1a2744, 28px 80px #1a2744, 32px 80px #1a2744, 36px 80px #1a2744,
        40px 80px #1a2744, 44px 80px #1a2744, 48px 80px #1a2744, 52px 80px #1a2744, 56px 80px #1a2744,
        60px 80px #1a2744, 64px 80px #1a2744, 68px 80px #1a2744, 72px 80px #1a2744, 76px 80px #1a2744,
        /* Wall rows */
        0px 76px #1a2744, 4px 76px #1a2744, 8px 76px #1a2744, 12px 76px #1a2744, 16px 76px #1a2744,
        20px 76px #1a2744, 24px 76px #1a2744, 28px 76px #1a2744, 32px 76px #1a2744, 36px 76px #1a2744,
        40px 76px #1a2744, 44px 76px #1a2744, 48px 76px #1a2744, 52px 76px #1a2744, 56px 76px #1a2744,
        60px 76px #1a2744, 64px 76px #1a2744, 68px 76px #1a2744, 72px 76px #1a2744, 76px 76px #1a2744,
        0px 72px #1a2744, 4px 72px #1a2744, 8px 72px #1a2744, 12px 72px #1a2744, 16px 72px #1a2744,
        20px 72px #1a2744, 24px 72px #1a2744, 28px 72px #1a2744, 32px 72px #1a2744, 36px 72px #1a2744,
        40px 72px #1a2744, 44px 72px #1a2744, 48px 72px #1a2744, 52px 72px #1a2744, 56px 72px #1a2744,
        60px 72px #1a2744, 64px 72px #1a2744, 68px 72px #1a2744, 72px 72px #1a2744, 76px 72px #1a2744,
        /* Left tower */
        4px 68px #4a5680, 8px 68px #4a5680, 12px 68px #4a5680,
        4px 64px #4a5680, 8px 64px #4a5680, 12px 64px #4a5680,
        4px 60px #4a5680, 8px 60px #4a5680, 12px 60px #4a5680,
        4px 56px #4a5680, 8px 56px #4a5680, 12px 56px #4a5680,
        8px 52px #c0c8e0,
        /* Right tower (crumbling) */
        64px 68px #4a5680, 68px 68px #4a5680, 72px 68px #4a5680,
        64px 64px #4a5680, 68px 64px #4a5680,
        68px 60px #4a5680,
        /* Crumbling pixels */
        76px 64px #ff3355, 80px 60px #ff3355, 72px 56px #3366ff,
        /* Door */
        36px 80px #3366ff, 40px 80px #3366ff,
        36px 76px #3366ff, 40px 76px #3366ff,
        /* Battlements */
        0px 68px #1a2744, 16px 68px #1a2744, 20px 68px #1a2744, 24px 68px #1a2744,
        28px 68px #1a2744, 32px 68px #1a2744, 36px 68px #1a2744, 40px 68px #1a2744,
        44px 68px #1a2744, 48px 68px #1a2744, 52px 68px #1a2744, 56px 68px #1a2744, 60px 68px #1a2744, 76px 68px #1a2744,
        /* Window */
        24px 76px #3366ff, 52px 76px #3366ff;
}

.pixel-art-bridge {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        /* Left bank */
        0px 60px #1a2744, 4px 60px #1a2744, 8px 60px #1a2744, 12px 60px #1a2744,
        0px 64px #1a2744, 4px 64px #1a2744, 8px 64px #1a2744, 12px 64px #1a2744, 16px 64px #1a2744,
        0px 68px #1a2744, 4px 68px #1a2744, 8px 68px #1a2744, 12px 68px #1a2744, 16px 68px #1a2744, 20px 68px #1a2744,
        /* Bridge surface */
        16px 56px #4a5680, 20px 56px #4a5680, 24px 56px #4a5680, 28px 56px #4a5680,
        32px 56px #4a5680, 36px 56px #4a5680, 40px 56px #4a5680,
        /* Railing */
        16px 52px #c0c8e0, 24px 52px #c0c8e0, 32px 52px #c0c8e0, 40px 52px #c0c8e0,
        16px 48px #c0c8e0, 40px 48px #c0c8e0,
        /* Bridge ends abruptly */
        44px 56px #3366ff,
        /* Void below */
        20px 60px #0a0e1a, 24px 60px #0a0e1a, 28px 60px #0a0e1a, 32px 60px #0a0e1a,
        36px 60px #0a0e1a, 40px 60px #0a0e1a, 44px 60px #0a0e1a, 48px 60px #0a0e1a,
        /* Falling pixels */
        48px 60px #ff3355, 52px 64px #3366ff, 48px 68px #ff3355,
        /* Right void */
        52px 56px #0a0e1a, 56px 56px #0a0e1a, 60px 56px #0a0e1a, 64px 56px #0a0e1a,
        68px 56px #0a0e1a, 72px 56px #0a0e1a, 76px 56px #0a0e1a;
}

.pixel-art-clock {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        /* Clock face outline */
        28px 4px #4a5680, 32px 4px #4a5680, 36px 4px #4a5680, 40px 4px #4a5680,
        24px 8px #4a5680, 44px 8px #4a5680,
        20px 12px #4a5680, 48px 12px #4a5680,
        16px 16px #4a5680, 52px 16px #4a5680,
        16px 20px #4a5680, 52px 20px #4a5680,
        16px 24px #4a5680, 52px 24px #4a5680,
        16px 28px #4a5680, 52px 28px #4a5680,
        16px 32px #4a5680, 52px 32px #4a5680,
        20px 36px #4a5680, 48px 36px #4a5680,
        24px 40px #4a5680, 44px 40px #4a5680,
        28px 44px #4a5680, 32px 44px #4a5680, 36px 44px #4a5680, 40px 44px #4a5680,
        /* Center dot */
        32px 24px #c0c8e0, 36px 24px #c0c8e0,
        /* Minute hand only (pointing to 12) */
        32px 20px #3366ff, 36px 20px #3366ff,
        32px 16px #3366ff, 36px 16px #3366ff,
        32px 12px #3366ff, 36px 12px #3366ff,
        /* Missing hour hand indicator */
        40px 24px #ff3355, 44px 24px #ff3355,
        /* 12 marker */
        32px 8px #c0c8e0, 36px 8px #c0c8e0,
        /* 3 marker */
        48px 24px #c0c8e0,
        /* 6 marker */
        32px 40px #c0c8e0, 36px 40px #c0c8e0,
        /* 9 marker */
        20px 24px #c0c8e0,
        /* Broken pixels escaping */
        56px 20px #ff3355, 60px 16px #3366ff, 56px 12px #ff3355;
}

.pixel-art-book {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        /* Book cover left */
        12px 20px #4a5680, 12px 24px #4a5680, 12px 28px #4a5680, 12px 32px #4a5680,
        12px 36px #4a5680, 12px 40px #4a5680, 12px 44px #4a5680, 12px 48px #4a5680,
        12px 52px #4a5680, 12px 56px #4a5680, 12px 60px #4a5680,
        /* Book cover right */
        56px 20px #4a5680, 56px 24px #4a5680, 56px 28px #4a5680, 56px 32px #4a5680,
        56px 36px #4a5680, 56px 40px #4a5680, 56px 44px #4a5680, 56px 48px #4a5680,
        56px 52px #4a5680, 56px 56px #4a5680, 56px 60px #4a5680,
        /* Book top & bottom */
        16px 20px #4a5680, 20px 20px #4a5680, 24px 20px #4a5680, 28px 20px #4a5680,
        32px 20px #4a5680, 36px 20px #4a5680, 40px 20px #4a5680, 44px 20px #4a5680,
        48px 20px #4a5680, 52px 20px #4a5680,
        16px 60px #4a5680, 20px 60px #4a5680, 24px 60px #4a5680, 28px 60px #4a5680,
        32px 60px #4a5680, 36px 60px #4a5680, 40px 60px #4a5680, 44px 60px #4a5680,
        48px 60px #4a5680, 52px 60px #4a5680,
        /* Spine */
        32px 24px #1a2744, 32px 28px #1a2744, 32px 32px #1a2744, 32px 36px #1a2744,
        32px 40px #1a2744, 32px 44px #1a2744, 32px 48px #1a2744, 32px 52px #1a2744, 32px 56px #1a2744,
        /* Text lines left page */
        16px 28px #c0c8e0, 20px 28px #c0c8e0, 24px 28px #c0c8e0, 28px 28px #c0c8e0,
        16px 36px #c0c8e0, 20px 36px #c0c8e0, 24px 36px #c0c8e0,
        16px 44px #c0c8e0, 20px 44px #c0c8e0, 24px 44px #c0c8e0, 28px 44px #c0c8e0,
        /* Text lines right page (torn) */
        36px 28px #8a94b8, 40px 28px #8a94b8, 44px 28px #8a94b8,
        36px 36px #8a94b8, 40px 36px #8a94b8,
        /* Torn edge */
        48px 28px #ff3355, 52px 32px #ff3355, 48px 40px #ff3355, 52px 44px #3366ff,
        /* Torn page floating away */
        64px 24px #4a5680, 68px 24px #4a5680, 72px 24px #4a5680,
        64px 28px #4a5680, 68px 28px #4a5680, 72px 28px #4a5680,
        68px 20px #3366ff, 72px 20px #3366ff,
        64px 32px #ff3355;
}

/* --- Chapter Content --- */
.chapter-content {
    padding: 2rem 0 4rem;
}

.narrative {
    margin-bottom: 1.5rem;
    position: relative;
}

.narrative.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.narrative.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pixel-offset misalignment */
.chapter-content .narrative:nth-child(2) {
    padding-left: 3px;
}
.chapter-content .narrative:nth-child(3) {
    padding-left: 0;
    padding-right: 4px;
}
.chapter-content .narrative:nth-child(4) {
    padding-left: 2px;
}

/* Dramatic text highlighting */
.narrative.dramatic .highlight-word {
    color: #3366ff;
    transition: color 0.3s ease;
}

/* --- Story Fragments --- */
.story-fragment {
    display: inline;
    border: 2px solid #3366ff;
    background: #111828;
    padding: 2px 6px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    position: relative;
}

.story-fragment:hover,
.story-fragment.tapped {
    transform: scale(1.02);
    background: #1a2744;
}

.story-fragment .hidden-text {
    display: none;
    color: #e0e6ff;
    font-style: italic;
}

.story-fragment.revealed .hidden-text {
    display: inline;
}

.story-fragment.revealed .original-text {
    display: none;
}

/* --- Broken Pixels --- */
.broken-pixels {
    position: relative;
    height: 20px;
    margin-top: 2rem;
}

.broken-pixels::before,
.broken-pixels::after {
    content: '';
    position: absolute;
    right: 0;
    width: 4px;
    height: 4px;
}

.broken-pixels::before {
    bottom: 0;
    right: 8px;
    background: #3366ff;
    box-shadow:
        6px -2px #ff3355,
        -2px -6px #3366ff,
        10px -8px #ff3355,
        4px -12px #3366ff;
}

/* --- Margin Threads --- */
.margin-threads {
    position: fixed;
    top: 0;
    width: 120px;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

#margin-threads-left {
    left: 40px;
}

#margin-threads-right {
    right: 40px;
}

@media (max-width: 1024px) {
    .margin-threads {
        display: none;
    }
}

/* --- Terminal Ticker --- */
#terminal-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(to bottom, #0a0e1a, #111828);
    border-top: 1px solid #1a2744;
    overflow: hidden;
    z-index: 10;
    display: flex;
    align-items: center;
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 120s linear infinite;
}

.ticker-content {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: #4a5680;
    padding: 0 2rem;
    flex-shrink: 0;
}

.ticker-diamond {
    color: #ff3355;
    margin: 0 1rem;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Lens Flare Effect --- */
.lens-flare {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(ellipse at center, rgba(51,102,255,0.4) 0%, rgba(192,200,224,0.1) 40%, transparent 70%);
    clip-path: polygon(50% 0%, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0% 50%, 25% 25%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lens-flare.active {
    opacity: 1;
    animation: flare-pulse 1s ease-out forwards;
}

@keyframes flare-pulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- Sawtooth Dividers --- */
.chapter-gate::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        #1a2744 6px,
        #1a2744 8px
    );
    clip-path: polygon(
        0% 100%, 4% 0%, 8% 100%, 12% 0%, 16% 100%, 20% 0%, 24% 100%, 28% 0%,
        32% 100%, 36% 0%, 40% 100%, 44% 0%, 48% 100%, 52% 0%, 56% 100%, 60% 0%,
        64% 100%, 68% 0%, 72% 100%, 76% 0%, 80% 100%, 84% 0%, 88% 100%, 92% 0%,
        96% 100%, 100% 0%, 100% 100%
    );
    margin-bottom: 2rem;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0e1a;
}

::-webkit-scrollbar-thumb {
    background: #1a2744;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #3366ff;
}

/* --- Bottom padding for ticker --- */
body {
    padding-bottom: 36px;
}

/* --- Mobile adjustments --- */
@media (max-width: 680px) {
    #chronicle-spine {
        padding: 2rem 1rem 6rem;
    }

    .chapter-gate {
        padding: 4rem 0;
    }

    .gate-scene {
        width: 120px;
        height: 90px;
    }
}