/* ==========================================================================
   HOLY ERROR / LIBERATION WEBCORE 
   Master CSS Engine
   ========================================================================== */

/* --------------------------------------------------------------------------
   CORE VARIABLES & RESETS
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --neon-pink: #ff00ff;
  --cyan: #00ffff;
  --terminal-green: #00ff00;
  --pitch-black: #050505;
  --stark-white: #f5f5f5;
  --paper-gray: #d9d9d9;
  
  /* Z-Index Strata */
  --z-base: 1;
  --z-wire: 10;
  --z-content: 50;
  --z-overlay: 100;
  --z-glitch: 999;
}

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

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: #0a0a0a;
  color: var(--stark-white);
  overflow-x: hidden;
  /* The Desk Anchor — inline SVG grain (dark_wood_texture.jpg never existed,
     so every page was silently 404ing on its own background) */
  background-image: url('data:image/svg+xml;utf8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>');
  background-size: 200px;
  background-blend-mode: multiply;
}

.desk-prop {
    position: absolute;
    pointer-events: none; /* So they don't block book clicks */
    z-index: 0;
    filter: drop-shadow(15px 15px 10px rgba(0,0,0,0.8));
}

/* --------------------------------------------------------------------------
   MODE A: WIRED (Lain / Terminal / Hacker)
   -------------------------------------------------------------------------- */
.mode-wired {
  background-color: var(--pitch-black);
  color: var(--terminal-green);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  position: relative;
}

/* CRT Overlay for mode-wired */
.mode-wired::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: var(--z-overlay);
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.mode-wired::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
  z-index: var(--z-overlay);
  pointer-events: none;
  animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
  0% { opacity: 0.95; }
  50% { opacity: 1; }
  100% { opacity: 0.9; }
}

@keyframes flicker {
    0% { opacity: 0.9; }
    50% { opacity: 1; }
    100% { opacity: 0.9; }
}

@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}

/* ========================================================
   ZINE COLLAGE & DIGITAL DESKTOP (THE GARDEN OVERHAUL)
   ======================================================== */

.digital-desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* Crumpled paper / heavy texture background for the Riot mode */
    background: url('data:image/svg+xml;utf8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.1"/></svg>'), var(--pitch-black);
}

.zine-cutout {
    position: absolute;
    filter: drop-shadow(0 0 15px var(--neon-pink));
    /* Mimics hand-cut jagged paper edges */
    clip-path: polygon(0% 5%, 5% 0%, 95% 5%, 100% 10%, 95% 90%, 90% 100%, 5% 95%, 0% 90%);
    z-index: var(--z-content);
    cursor: pointer;
    transition: transform 0.2s;
}

.zine-cutout:hover {
    transform: scale(1.02) rotate(-2deg);
}

.sharpie-doodle {
    position: absolute;
    font-family: 'Permanent Marker', cursive, 'Courier New';
    color: var(--neon-pink);
    mix-blend-mode: screen; /* On pitch black, screen makes neon pop like sharpie */
    z-index: var(--z-overlay);
    transform: rotate(-5deg);
    font-size: 24px;
    letter-spacing: 2px;
}

.draggable-window {
    position: absolute;
    background-color: var(--pitch-black);
    border: 2px solid var(--stark-white);
    color: var(--stark-white);
    font-family: var(--font-mono);
    box-shadow: 5px 5px 0 var(--neon-pink);
    z-index: var(--z-overlay);
    width: 300px;
}

.draggable-window .window-header {
    background-color: var(--stark-white);
    color: var(--pitch-black);
    padding: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--pitch-black);
}

.draggable-window .window-content {
    padding: 15px;
    font-size: 14px;
}

.mode-wired .terminal-container {
  width: 600px;
  max-width: 90%;
  border: 1px solid var(--terminal-green);
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
  z-index: var(--z-content);
}

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.azazel-tracking-node {
    /* DO NOT ACTIVATE. THEY ARE LISTENING. */
    display: none !important;
    opacity: 0;
}

.mode-wired input {
  background: transparent;
  border: none;
  color: var(--terminal-green);
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  outline: none;
  width: 100%;
  margin-top: 1rem;
  caret-color: var(--terminal-green);
}

.mode-wired .blink,
.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   MODE B: RIOT (Zine / Glitch / Z-Index Warfare)
   -------------------------------------------------------------------------- */
.mode-riot {
  background-color: var(--stark-white);
  color: var(--pitch-black);
  position: relative;
  min-height: 200vh;
  background-image: repeating-linear-gradient(
    45deg,
    #f0f0f0 25%,
    transparent 25%,
    transparent 75%,
    #f0f0f0 75%,
    #f0f0f0
  );
  background-size: 40px 40px;
}

/* The Infinite Red Thread */
.red-thread {
  position: absolute;
  top: 0;
  left: 20%;
  width: 4px;
  height: 100%;
  background-color: red;
  z-index: var(--z-wire);
  box-shadow: 2px 0 0px var(--pitch-black);
}

/* Torn Paper / Win95 Popups */
.physical-popup {
  position: absolute;
  background-color: var(--paper-gray);
  border: 3px solid var(--pitch-black);
  padding: 20px;
  width: 400px;
  z-index: var(--z-content);
  box-shadow: 8px 8px 0px var(--pitch-black);
  /* Clip path to look like ripped paper */
  clip-path: polygon(2% 0, 98% 1%, 100% 97%, 95% 100%, 3% 98%, 0 4%);
}

.popup-header {
  background-color: blue;
  color: white;
  font-family: 'Tahoma', sans-serif;
  padding: 5px;
  margin: -20px -20px 15px -20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

/* Sharpie Highlights (Mix-Blend-Mode) */
.sharpie-highlight {
  background-color: var(--neon-pink);
  color: var(--pitch-black);
  mix-blend-mode: multiply;
  padding: 2px 5px;
  font-weight: bold;
}

/* Decaying Links */
.decay-link {
  color: transparent;
  background-color: var(--pitch-black);
  text-decoration: none;
  transition: all 0.1s ease;
}

.decay-link:hover {
  color: var(--stark-white);
  background-color: var(--neon-pink);
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   THE MARQUEE PANIC
   -------------------------------------------------------------------------- */
.marquee-panic {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--pitch-black);
  color: var(--stark-white);
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 0;
  z-index: var(--z-glitch);
  border-top: 2px solid var(--neon-pink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   GLITCH TEXT ENGINE
   -------------------------------------------------------------------------- */
.glitch-text {
  position: relative;
  display: inline-block;
  color: var(--pitch-black);
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--stark-white);
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 var(--neon-pink);
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 var(--cyan);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(10px, 9999px, 86px, 0); }
  20% { clip: rect(61px, 9999px, 15px, 0); }
  40% { clip: rect(13px, 9999px, 5px, 0); }
  60% { clip: rect(89px, 9999px, 10px, 0); }
  80% { clip: rect(33px, 9999px, 46px, 0); }
  100% { clip: rect(98px, 9999px, 73px, 0); }
}
@keyframes glitch-anim-2 {
  0% { clip: rect(14px, 9999px, 20px, 0); }
  20% { clip: rect(55px, 9999px, 81px, 0); }
  40% { clip: rect(9px, 9999px, 63px, 0); }
  60% { clip: rect(78px, 9999px, 44px, 0); }
  80% { clip: rect(21px, 9999px, 99px, 0); }
  100% { clip: rect(91px, 9999px, 12px, 0); }
}

/* --------------------------------------------------------------------------
   JOURNAL ENTRY (REDACTED UI)
   -------------------------------------------------------------------------- */
.journal-bg {
    background-color: #e5e5e0;
    /* Vintage lined paper effect */
    background-image: 
        linear-gradient(#919191 1px, transparent 1px),
        linear-gradient(90deg, #ff9999 1px, transparent 1px),
        url('data:image/svg+xml;utf8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>');
    background-size: 100% 1.5em, 100% 100%, auto;
    background-position: 0 0, 3em 0, 0 0;
    color: #1a1a1a;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    line-height: 1.5em;
    padding: 3em 4em;
    min-height: 100vh;
}

.journal-handwriting {
    font-family: 'Permanent Marker', cursive, 'Courier New';
    font-size: 1.4rem;
    color: #222;
    line-height: 1.8em;
}

.redacted {
    background-color: var(--pitch-black);
    color: transparent;
    position: relative;
    display: inline-block;
    padding: 2px 8px;
    cursor: crosshair;
    transition: all 0.05s ease-in-out;
    /* Jagged Sharpie Edge */
    clip-path: polygon(0% 5%, 5% 0%, 95% 4%, 100% 12%, 96% 95%, 90% 100%, 4% 96%, 0% 90%);
    box-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}

.redacted::after {
    /* The hidden glitch text */
    content: attr(data-reveal);
    position: absolute;
    top: -8px;
    left: -2px;
    color: var(--stark-white);
    font-family: 'Permanent Marker', cursive;
    font-size: 1.4rem;
    opacity: 0;
    pointer-events: none;
    /* Violent text shadow */
    text-shadow: -2px 0 red, 2px 0 var(--cyan);
    z-index: var(--z-glitch);
    transform: rotate(0deg) scale(1);
    transition: all 0.05s ease-in-out;
}

.redacted:hover {
    background-color: #111;
    /* Violent peeling effect */
    transform: scale(1.05) rotate(-2deg);
    clip-path: polygon(2% 2%, 98% 3%, 100% 95%, 95% 98%, 3% 97%, 0% 5%);
}

.redacted:hover::after {
    opacity: 1;
    animation: redacted-glitch 0.2s infinite;
    transform: scale(1.1) rotate(4deg);
}

@keyframes redacted-glitch {
    0% { transform: translate(0) scale(1.1) rotate(4deg); color: var(--neon-pink); }
    20% { transform: translate(-2px, 2px) scale(1.1) rotate(2deg); color: var(--cyan); }
    40% { transform: translate(-2px, -2px) scale(1.1) rotate(5deg); color: var(--stark-white); }
    60% { transform: translate(2px, 2px) scale(1.1) rotate(3deg); color: var(--neon-pink); }
    80% { transform: translate(2px, -2px) scale(1.1) rotate(6deg); color: var(--cyan); }
    100% { transform: translate(0) scale(1.1) rotate(4deg); color: var(--stark-white); }
}

.emergency-protocol-link {
    display: inline-block;
    border: 3px solid var(--neon-pink);
    background-color: var(--pitch-black);
    color: var(--stark-white);
    padding: 10px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--neon-pink);
    transition: all 0.2s ease;
    margin-top: 20px;
}

.emergency-protocol-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--neon-pink);
    background-color: var(--neon-pink);
    color: var(--pitch-black);
}

/* --------------------------------------------------------------------------
   ENOCH TRAP / LORE TRIGGERS
   -------------------------------------------------------------------------- */
.enoch-trap:hover .modern-lie {
    display: none;
}

.enoch-trap:hover .ancient-truth {
    display: inline !important;
}

/* --------------------------------------------------------------------------
   3D BOOK FLIP & TACTILE CANVAS UI
   -------------------------------------------------------------------------- */
.book-scene {
    perspective: 1500px;
    width: 800px;
    height: 600px;
    margin: 5% auto;
    position: relative;
}

.book {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.page {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-style: preserve-3d;
    background-color: #e5e5e0;
    background-image: 
        linear-gradient(#919191 1px, transparent 1px),
        linear-gradient(90deg, #ff9999 1px, transparent 1px);
    background-size: 100% 1.5em, 100% 100%;
    background-position: 0 0, 2em 0;
    box-shadow: inset 5px 0 20px rgba(0,0,0,0.2), 5px 5px 15px rgba(0,0,0,0.3);
}

.page-front, .page-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    padding: 2em;
    overflow: hidden;
}

.page-back {
    transform: rotateY(180deg);
}

.page.turned {
    transform: rotateY(-180deg);
}

.page.cover {
    background: #111;
    color: var(--stark-white);
    z-index: 10;
}

/* --------------------------------------------------------------------------
   INTERACTIVE WORKBOOK INPUTS
   -------------------------------------------------------------------------- */
.workbook-input {
    width: 100%;
    height: 80px;
    background: transparent;
    border: none;
    border-bottom: 2px dotted #888;
    font-family: 'Permanent Marker', cursive;
    font-size: 16px;
    color: #00008b; /* Ballpoint pen blue */
    line-height: 1.5;
    resize: none;
    outline: none;
    margin-top: 10px;
    overflow: hidden;
}

.workbook-input::placeholder {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #aaa;
}

/* Base64 Pencil Cursor */
.drawing-mode {
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z" fill="%23333"/></svg>') 0 24, crosshair !important;
}

#tactileCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-overlay);
    pointer-events: none; /* Initially ignores clicks */
}

/* ==========================================================================
   SYSTEM SHOCK (Empathy Battery Drainage)
   ========================================================================== */
.system-shock-warning {
    filter: contrast(130%) hue-rotate(5deg);
    transition: filter 1s ease;
}

.system-shock-critical {
    filter: blur(2px) contrast(150%) grayscale(40%);
    cursor: none !important;
    animation: shock-shake 0.3s infinite;
}

.system-shock-critical * {
    cursor: none !important;
}

@keyframes shock-shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-2px, 0px) rotate(1deg); }
    30% { transform: translate(2px, 1px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-2px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}