/* ============================================
   mosoon.xyz -- Glitch-Core Digital Decay
   ============================================ */

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

:root {
    --void-black: #0A0A0A;
    --pure-white: #F0F0F0;
    --glitch-gray: #808080;
    --scan-dark: #1A1A1A;
    --fragment-white: #FFFFFF;
    --decay-gray: #404040;
}

html {
    scroll-behavior: auto;
}

body {
    background: var(--void-black);
    color: var(--pure-white);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(12px, 0.8vw, 14px);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

/* --- SVG Filters (hidden) --- */
#svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* --- Noise Overlay --- */
#noise-overlay {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.12;
    filter: url(#noise);
    background: var(--glitch-gray);
    mix-blend-mode: overlay;
}

/* --- Glitch Burst Overlay --- */
#glitch-burst {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    background: var(--void-black);
}

#glitch-burst.active {
    animation: glitchBurst 0.2s steps(4) forwards;
}

@keyframes glitchBurst {
    0% {
        opacity: 0.6;
        clip-path: inset(0);
        transform: translateX(0);
    }
    25% {
        opacity: 0.8;
        clip-path: inset(20% 0 60% 0);
        transform: translateX(-4px);
    }
    50% {
        opacity: 0.5;
        clip-path: inset(50% 0 30% 0);
        transform: translateX(4px);
    }
    75% {
        opacity: 0.7;
        clip-path: inset(10% 0 70% 0);
        transform: translateX(-2px);
    }
    100% {
        opacity: 0;
        clip-path: inset(0);
        transform: translateX(0);
    }
}

/* --- Scanline Overlay --- */
#scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(10, 10, 10, 0.15) 2px,
        rgba(10, 10, 10, 0.15) 4px
    );
    z-index: 3;
}

/* --- Hero Section --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--void-black);
    overflow: hidden;
}

#hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* --- Logotype --- */
#logotype-container {
    position: relative;
    display: inline-block;
}

.logotype-layer {
    font-family: 'Press Start 2P', cursive;
    font-weight: 400;
    font-size: clamp(16px, 2.5vw, 28px);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    display: block;
    white-space: nowrap;
}

.logotype-main {
    color: var(--pure-white);
    position: relative;
    z-index: 3;
}

.logotype-red {
    color: rgba(255, 0, 0, 0.0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    mix-blend-mode: screen;
}

.logotype-blue {
    color: rgba(0, 0, 255, 0.0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: screen;
}

/* Logotype glitch animation */
.logotype-glitching .logotype-main {
    animation: logoGlitchMain 0.15s steps(2) infinite;
}

.logotype-glitching .logotype-red {
    color: rgba(255, 0, 0, 0.4);
    animation: logoGlitchRed 0.15s steps(3) infinite;
}

.logotype-glitching .logotype-blue {
    color: rgba(0, 0, 255, 0.4);
    animation: logoGlitchBlue 0.15s steps(3) infinite;
}

/* Persistent subtle glitch */
.logotype-idle .logotype-main {
    animation: logoIdleMain 4s steps(1) infinite;
}

.logotype-idle .logotype-red {
    color: rgba(255, 0, 0, 0.15);
    animation: logoIdleRed 4s steps(1) infinite;
}

.logotype-idle .logotype-blue {
    color: rgba(0, 0, 255, 0.15);
    animation: logoIdleBlue 4s steps(1) infinite;
}

@keyframes logoGlitchMain {
    0% { transform: translateX(0); clip-path: inset(0); }
    25% { transform: translateX(-3px); clip-path: inset(30% 0 50% 0); }
    50% { transform: translateX(4px); clip-path: inset(10% 0 70% 0); }
    75% { transform: translateX(-2px); clip-path: inset(60% 0 20% 0); }
    100% { transform: translateX(0); clip-path: inset(0); }
}

@keyframes logoGlitchRed {
    0% { transform: translate(2px, 0); }
    33% { transform: translate(-3px, 1px); }
    66% { transform: translate(4px, -1px); }
    100% { transform: translate(2px, 0); }
}

@keyframes logoGlitchBlue {
    0% { transform: translate(-2px, 0); }
    33% { transform: translate(3px, -1px); }
    66% { transform: translate(-4px, 1px); }
    100% { transform: translate(-2px, 0); }
}

@keyframes logoIdleMain {
    0%, 92% { transform: translateX(0); clip-path: inset(0); }
    93% { transform: translateX(-2px); clip-path: inset(25% 0 55% 0); }
    94% { transform: translateX(3px); clip-path: inset(45% 0 35% 0); }
    95% { transform: translateX(0); clip-path: inset(0); }
    96%, 100% { transform: translateX(0); clip-path: inset(0); }
}

@keyframes logoIdleRed {
    0%, 92% { transform: translate(1px, 0); }
    93% { transform: translate(-3px, 1px); }
    95% { transform: translate(1px, 0); }
    96%, 100% { transform: translate(1px, 0); }
}

@keyframes logoIdleBlue {
    0%, 92% { transform: translate(-1px, 0); }
    93% { transform: translate(3px, -1px); }
    95% { transform: translate(-1px, 0); }
    96%, 100% { transform: translate(-1px, 0); }
}

/* --- Masonry Fragment Grid --- */
#masonry-grid {
    column-count: 4;
    column-gap: 4px;
    padding: 4px;
    background: var(--void-black);
}

/* --- Fragment Base --- */
.fragment {
    break-inside: avoid;
    margin-bottom: 4px;
    padding: 16px;
    opacity: 0;
    transition: none;
}

.fragment.visible {
    opacity: 1;
}

.fragment-dark {
    background: var(--void-black);
    color: var(--pure-white);
    border: 1px solid var(--scan-dark);
}

.fragment-light {
    background: var(--pure-white);
    color: var(--void-black);
}

.fragment-tall {
    padding: 24px 16px;
}

.fragment-wide {
    padding: 20px 16px;
}

.fragment-title {
    font-family: 'Press Start 2P', cursive;
    font-weight: 400;
    font-size: clamp(8px, 1vw, 12px);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.fragment-body {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(12px, 0.8vw, 14px);
    line-height: 1.6;
    margin-bottom: 8px;
}

.fragment-body:last-child {
    margin-bottom: 0;
}

/* --- Corrupted Fragments --- */
.fragment-corrupted[data-decay="noise"] {
    position: relative;
}

.fragment-corrupted[data-decay="noise"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--glitch-gray);
    filter: url(#noise);
    opacity: 0.25;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.fragment-corrupted[data-decay="scanline"] {
    position: relative;
}

.fragment-corrupted[data-decay="scanline"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mask-image: linear-gradient(
        to bottom,
        black 0%, black 30%,
        transparent 31%, transparent 40%,
        black 41%, black 65%,
        transparent 66%, transparent 72%,
        black 73%, black 100%
    );
    background: var(--void-black);
    opacity: 0.6;
}

.fragment-corrupted[data-decay="displacement"] {
    animation: scanDisplace 8s steps(1) infinite;
}

@keyframes scanDisplace {
    0%, 85% {
        clip-path: inset(0);
        transform: translateX(0);
    }
    86% {
        clip-path: inset(30% 0 60% 0);
        transform: translateX(-3px);
    }
    88% {
        clip-path: inset(50% 0 30% 0);
        transform: translateX(4px);
    }
    90% {
        clip-path: inset(10% 0 80% 0);
        transform: translateX(-2px);
    }
    92%, 100% {
        clip-path: inset(0);
        transform: translateX(0);
    }
}

/* Corrupted text style */
.corrupted-text {
    font-family: 'VT323', monospace;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* --- Footer --- */
#site-footer {
    padding: 40px 16px;
    text-align: center;
    background: var(--void-black);
    border-top: 1px solid var(--scan-dark);
}

.footer-text {
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: var(--decay-gray);
    letter-spacing: 0.1em;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    #masonry-grid {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    #masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    #masonry-grid {
        column-count: 1;
    }
}

/* --- Viewport Glitch State (applied to body) --- */
body.viewport-glitch::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    background: var(--pure-white);
    opacity: 0;
    animation: viewportFlash 0.2s steps(4) forwards;
}

@keyframes viewportFlash {
    0% { opacity: 0; }
    10% { opacity: 0.1; }
    30% { opacity: 0; }
    50% { opacity: 0.15; }
    70% { opacity: 0; }
    90% { opacity: 0.05; }
    100% { opacity: 0; }
}

/* --- Selection styling --- */
::selection {
    background: var(--pure-white);
    color: var(--void-black);
}

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

::-webkit-scrollbar-track {
    background: var(--void-black);
}

::-webkit-scrollbar-thumb {
    background: var(--decay-gray);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--glitch-gray);
}