/* ═══════════════════════════════════════════════════════
   FAUX OS V2.1 - CHAOS ENGINE
   Where Apple sleekness crashes into brutalism crashes
   into Road 96 crashes into pure entropy.
   This is the layer that makes people go "what the f—"
   ═══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   A. CURSOR DISTORTION FIELD
   Elements near the cursor physically react — repel,
   skew, blur, corrupt. The cursor IS the chaos source.
   ══════════════════════════════════════════════════════ */

/* Cursor field is invisible — no visual element, only felt through
   the physical repulsion of nearby desktop-folders. */


/* ══════════════════════════════════════════════════════
   B. TEXT SCRAMBLE / CORRUPTION
   Hover on text → characters glitch, scramble, then
   resolve. Like a corrupted transmission finding signal.
   ══════════════════════════════════════════════════════ */

.scramble-char {
  display: inline-block;
  transition: none;
}

.scramble-char.is-glitching {
  color: var(--accent);
  opacity: 0.7;
  animation: char-corrupt 0.06s steps(1) infinite;
}

@keyframes char-corrupt {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1px) skewX(8deg); }
  100% { transform: translateY(0); }
}

/* ── Scramble targets: titles that react ── */
.window__title,
.menubar__brand,
.dock__label,
.desktop-folder__label {
  cursor: pointer;
}


/* ══════════════════════════════════════════════════════
   C. MAGNETIC DOCK — Spring Physics
   Dock items physically repel from cursor like magnets
   of the same polarity. Smooth, physics-based, unsettling.
   ══════════════════════════════════════════════════════ */

.dock__item {
  /* Allow JS to control transform directly */
  will-change: transform;
}

.dock.is-magnetic .dock__item {
  transition: none !important; /* JS handles interpolation */
}


/* ══════════════════════════════════════════════════════
   D. SCREEN TEAR
   Full-viewport horizontal displacement — like a GPU
   artifact or a reality glitch. The top half and bottom
   half of the screen briefly desync.
   ══════════════════════════════════════════════════════ */

.screen-tear {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 10);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.screen-tear.is-tearing {
  opacity: 1;
  animation: tear-flash 0.1s steps(2) forwards;
}

@keyframes tear-flash {
  0%   { opacity: 1; }
  50%  { opacity: 0.8; }
  100% { opacity: 0; }
}

.screen-tear__top,
.screen-tear__bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: transparent;
}

.screen-tear__top {
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.screen-tear__bottom {
  bottom: 0;
  border-top: 1px solid rgba(232, 93, 48, 0.06);
}

/* During tear, body shifts */
body.is-screen-tearing {
  animation: body-tear 0.08s steps(3) forwards;
}

@keyframes body-tear {
  0%   { clip-path: inset(0); transform: translateX(0); }
  33%  { clip-path: inset(0); transform: translateX(3px); }
  66%  { clip-path: inset(0); transform: translateX(-2px); }
  100% { clip-path: inset(0); transform: translateX(0); }
}


/* ══════════════════════════════════════════════════════
   E. ENTROPY ENGINE
   The site degrades over time. CSS classes applied by JS
   as entropy accumulates. Clean → worn → corrupted.
   ══════════════════════════════════════════════════════ */

/* Phase 1: Worn (entropy 30-60) — barely noticeable, just a feeling */
body.entropy--worn {
  .texture--grain { opacity: 0.15 !important; }
  .texture--scanlines { opacity: 0.1 !important; }
  .texture--chroma { opacity: 0.02 !important; }
}

/* Phase 2: Glitched (entropy 60-90) — something's off */
body.entropy--glitched {
  .texture--grain { opacity: 0.2 !important; }
  .texture--scanlines { opacity: 0.13 !important; }
  .texture--chroma { opacity: 0.035 !important; }

  .menubar {
    border-bottom-color: rgba(232, 93, 48, 0.15) !important;
  }

  .dock {
    border-color: rgba(232, 93, 48, 0.08) !important;
  }

  .deko-glyph {
    opacity: 0.06 !important;
    animation: deko-breathe 6s ease-in-out infinite alternate;
  }
}

@keyframes deko-breathe {
  0% { opacity: 0.03; transform: scale(1); }
  100% { opacity: 0.07; transform: scale(1.02); }
}

/* Phase 3: Corrupted (entropy 90+) — clearly decayed, but still tasteful */
body.entropy--corrupted {
  .texture--grain { opacity: 0.25 !important; }
  .texture--scanlines { opacity: 0.16 !important; }
  .texture--chroma { opacity: 0.05 !important; }

  .menubar {
    border-bottom-color: rgba(232, 93, 48, 0.2) !important;
  }

  .window {
    border-color: rgba(232, 93, 48, 0.06) !important;
  }

  .crop-mark {
    opacity: 0.1 !important;
    border-color: var(--accent) !important;
  }

  .diagonal-band {
    opacity: 0.1 !important;
  }
}


/* ══════════════════════════════════════════════════════
   F. BRUTAL TYPOGRAPHY INTRUSIONS
   Oversized characters that punch through the layout.
   They don't belong. They don't care. They're here.
   ══════════════════════════════════════════════════════ */

.brutal-glyph {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  user-select: none;
  line-height: 0.8;
  mix-blend-mode: overlay;
  animation: brutal-intrude 8s var(--ease-out) forwards;
}

@keyframes brutal-intrude {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(var(--brutal-rot, 0deg));
    filter: blur(20px);
  }
  8% {
    opacity: var(--brutal-peak, 0.04);
    transform: scale(1) rotate(var(--brutal-rot, 0deg));
    filter: blur(0);
  }
  80% {
    opacity: var(--brutal-peak, 0.04);
    transform: scale(1) rotate(var(--brutal-rot, 0deg));
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.02) rotate(var(--brutal-rot, 0deg));
    filter: blur(8px);
  }
}

/* Variant: stroke-only (brutalist hollow) */
.brutal-glyph--stroke {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
}

/* Variant: accent bleed */
.brutal-glyph--accent {
  color: var(--accent);
  mix-blend-mode: screen;
}


/* ══════════════════════════════════════════════════════
   G. DOUBLE EXPOSURE — Chromatic Element Duplication
   Active windows occasionally show a subtle RGB-offset
   ghost of themselves. Like a misaligned print.
   ══════════════════════════════════════════════════════ */

.window.is-double-exposed {
  /* position stays absolute (from .window) — do NOT override to relative */
}

.window.is-double-exposed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 93, 48, 0.04);
  border-radius: inherit;
  transform: translate(2px, -1px);
  pointer-events: none;
  opacity: 0;
  animation: double-expose 3s ease-in-out forwards;
  mix-blend-mode: screen;
  background: linear-gradient(
    135deg,
    rgba(255, 50, 50, 0.015) 0%,
    transparent 40%,
    rgba(50, 100, 255, 0.015) 100%
  );
}

@keyframes double-expose {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: 1; transform: translate(3px, -2px); }
  80%  { opacity: 1; transform: translate(2px, -1px); }
  100% { opacity: 0; transform: translate(0, 0); }
}


/* ══════════════════════════════════════════════════════
   H. CURSOR INK TRAIL
   The cursor leaves a slowly-fading mark, like a
   leaking pen on paper. Canvas-based, but styled here.
   ══════════════════════════════════════════════════════ */

#chaos-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
}


/* ══════════════════════════════════════════════════════
   I. SYSTEM MESSAGES — The OS talks back
   Random passive-aggressive notifications from the OS.
   ══════════════════════════════════════════════════════ */

.sys-message {
  position: fixed;
  z-index: calc(var(--z-modal) + 5);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--c-black);
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  white-space: nowrap;
  opacity: 0;
  animation: sys-msg-life 5s var(--ease-out) forwards;
  user-select: none;
}

.sys-message::before {
  content: '> ';
  color: var(--accent);
  opacity: 0.5;
}

@keyframes sys-msg-life {
  0%   { opacity: 0; transform: translateY(4px); }
  8%   { opacity: 0.7; transform: translateY(0); }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-2px); }
}


/* ══════════════════════════════════════════════════════
   RESPONSIVE: Tone down on mobile
   ══════════════════════════════════════════════════════ */
body.mode--mobile {
  .cursor-field,
  .brutal-glyph,
  #chaos-canvas,
  .screen-tear { display: none; }
}