/* MEMORY LOG - CSS for ERRx Digital Archive */

/* Base styles and resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Courier New', monospace, sans-serif;
    background-color: #000;
    color: #0f0;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Video background and scanline effects */
.shell {
    min-height: 100vh;
    position: relative;
    padding: 2rem 1.5rem;
}

/* Grain texture overlay */
.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' viewBox=\'0 0 100 100\'><rect width=\'100\' height=\'100\' fill=\'%23000\' opacity=\'0.05\'/><circle cx=\'10\' cy=\'20\' r=\'3\' fill=\'%230f0\' opacity=\'0.1\'/><circle cx=\'50\' cy=\'80\' r=\'4\' fill=\'%230f0\' opacity=\'0.15\'/><circle cx=\'90\' cy=\'30\' r=\'2\' fill=\'%230f0\' opacity=\'0.1\'/></svg>');
    pointer-events: none;
    z-index: 9999;
}

/* Scanlines overlay */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        rgba(0, 255, 0, 0.1) 1px,
        rgba(0, 255, 0, 0.1) 2px,
        transparent 3px
    );
    opacity: 0.05;
    pointer-events: none;
    z-index: 9998;
}

/* CRT Signal Sweep effect */
.crt-sweep {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.20; /* Increased from 0.15 to 0.20 for slightly more visibility */
    background: linear-gradient(
        to bottom,
        rgba(0, 255, 0, 0.15) 0%,
        rgba(0, 255, 0, 0.1) 10%,
        rgba(0, 255, 0, 0.03) 20%,
        rgba(0, 255, 0, 0.03) 80%,
        rgba(0, 255, 0, 0.1) 90%,
        rgba(0, 255, 0, 0.15) 100%
    );
    background-size: 100% 25%;
    animation: crt-sweep 10s linear infinite;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 30%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-size: 100% 40%;
    animation-play-state: running;
}

/* Digital Interference effect */
.digital-interference {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.25; /* Increased to make interference more visible */
    animation-play-state: running;
}

/* Interference lines */
.digital-interference-lines {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Individual interference line */
.interference-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: rgba(0, 255, 150, 0.25); /* Brighter green for better visibility */
    filter: blur(1px);
    animation: interference-fade-in-out 0.25s ease-in-out;
}

/* Interference animation */
@keyframes crt-sweep {
    0% {
        background-position: 0% 0%;
        mask-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
        mask-position: 0% 100%;
    }
}

/* Interference fade in/out animation */
@keyframes interference-fade-in-out {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; } /* Increased from 0.2 to 0.3 for better visibility */
}

/* FX OFF state - disable animations */
.fx-off .crt-sweep,
.fx-off .digital-interference {
    animation-play-state: paused !important;
}

/* Ensure interference lines don't interfere with content */
.fx-off .interference-line {
    display: none !important;
}

/* Main content */
main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 10;
}

/* Header styles */
.memory-header {
    text-align: center;
    padding: 2rem 0;
    border-bottom: 1px solid #0f0;
    margin-bottom: 2rem;
    position: relative;
}

.memory-header h1 {
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #0f0, #08f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glow 2s infinite alternate;
}

.memory-header .header-subtitle {
    color: #0a8; 
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* Navigation */
.memory-nav {
    text-align: center;
    margin-bottom: 2rem;
}

.back-link {
    color: #0f0;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    border: 1px solid #0f0;
    transition: all 0.3s ease;
}

.back-link:hover {
    background-color: #0f0;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

/* Posts container */
.memory-posts-container {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Attachment styling */
.memory-post-attachment {
    margin-top: 1rem;
}

.youtube-embed {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    border: none;
    margin-top: 0.5rem;
}

.attachment-image {
    max-width: 100%;
    height: auto;
    margin-top: 0.5rem;
    border-radius: 4px;
}

.attachment-video {
    width: 100%;
    max-width: 560px;
    margin-top: 0.5rem;
    border-radius: 4px;
}
/* Archive layout and effects. All post text remains selectable and readable. */
:root { color-scheme: dark; }
.memory-nav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
button { font:inherit; color:#0f0; border:1px solid #0f0; padding:.5rem 1rem; background:#001208; cursor:pointer; }
a:focus-visible, button:focus-visible { outline:2px solid #82faff; outline-offset:5px; }
.memory-post { border:1px solid #165c3b; border-left:3px solid #00ad76; padding:1.5rem; background:#001008d9; min-width:0; }
.memory-post-date { color:#82bda5; font-size:.8rem; letter-spacing:.12em; }
.memory-post-title { color:#80ffce; font-size:1.2rem; margin:.3rem 0 1rem; overflow-wrap:anywhere; }
.memory-post-content { overflow-wrap:anywhere; }
.memory-footer { margin-top:5rem; padding:1.5rem 0; border-top:1px solid #165c3b; color:#82bda5; text-align:center; font-size:.8rem; }
#archive-status { color:#82bda5; font-size:.8rem; letter-spacing:.08em; }
.loading-indicator { height:6px; margin-top:12px; background:#09281b; overflow:hidden; }
.loading-indicator::after { content:''; display:block; width:35%; height:100%; background:#0f0; animation:loading-sweep 1.2s ease-in-out infinite; }
.scanlines { opacity:.32; }
.scanlines::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 40%,#00ff8809 50%,transparent 60%); animation:screen-scan 12s linear infinite; }
.corrupted-text { display:inline-block; color:#b8ffdc; text-shadow:1px 0 #ff4fbe,-1px 0 #00dfff; animation:corrupt 7s steps(1,end) infinite; }
.glitch-text { display:inline-block; position:relative; color:#a7ffff; text-shadow:1px 0 #ff4fbe,-1px 0 #00dfff; animation:corrupt 9s steps(1,end) infinite; }
.glitch-text::after { content:attr(data-glitch); position:absolute; left:1px; top:0; color:#f58bdd; clip-path:inset(42% 0 35% 0); opacity:.65; pointer-events:none; }
.binary { color:#72bdaa; font-size:.9em; letter-spacing:.08em; }
.terminal { color:#8ef4ff; background:#04272b; padding:.1em .25em; }
.corrupted-file { color:#ffb3d9; border-bottom:1px dashed #cf629e; }
.scanline-effect { display:inline-block; position:relative; color:#b4ffcf; background:#07331e; padding:0 .25em; overflow:hidden; vertical-align:bottom; }
.scanline-effect::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 40%,#caffdf88 50%,transparent 60%); transform:translateY(-100%); animation:text-scan 4s linear infinite; pointer-events:none; }
@keyframes loading-sweep { from {transform:translateX(-100%)} to {transform:translateX(390%)} }
@keyframes screen-scan { from {transform:translateY(-100%)} to {transform:translateY(100%)} }
@keyframes text-scan { to {transform:translateY(100%)} }
@keyframes corrupt { 0%,92%,96%,100% {transform:none} 93% {transform:translateX(1px);text-shadow:2px 0 #ff4fbe,-2px 0 #00dfff} 95% {transform:translateX(-1px)} }
@keyframes glow { from {filter:drop-shadow(0 0 2px #00ff7733)} to {filter:drop-shadow(0 0 5px #00ff7755)} }
.fx-off *, .fx-off *::before, .fx-off *::after { animation:none !important; }
.fx-off .grain, .fx-off .scanlines, .fx-off .glitch-text::after, .fx-off .scanline-effect::after { display:none; }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto} *, *::before, *::after {animation:none !important;transition:none !important} .scanlines::after, .scanline-effect::after, .glitch-text::after {display:none} }
@media(max-width:600px) { .shell {padding:1rem} main {padding:1rem 0} .memory-header h1 {font-size:2rem} .memory-header .header-subtitle {font-size:.85rem} .memory-post {padding:1rem} .back-link {font-size:.8rem} }