/* === 0xd.ir — Retro Effects ===
 * CRT scanlines (base: subtle; amber: bold), chroma headers, ghost trail, desync swipe
 * Progressions (by posts read): default → amber(1) → matrix(3) → cyberpunk(5) → alien(all)
 * Konami: type "konami" → horror/glitch mode with a degauss
 * Load after index.css
 */

/* ==========================================================================
   Progression: Smooth Palette Transitions
   ========================================================================== */

body {
  transition:
    background-color 3s ease,
    color 3s ease;
}

/* ==========================================================================
   Chroma Headers (Always On)
   ========================================================================== */

th {
  text-shadow:
    -1px 0 rgba(255,80,80,0.6),
     1px 0 rgba(80,180,255,0.6);
}
th:hover {
  text-shadow:
    -1.5px 0 rgba(255,100,100,0.8),
     1.5px 0 rgba(100,200,255,0.8);
}

pre.prompt { text-shadow: 0 0 4px rgba(214,214,214,0.3); }

/* ==========================================================================
   Ghost Trail on Hover (Always On)
   ========================================================================== */

td a:hover, th:hover { animation: ghost-trail 0.5s ease-out; }

@keyframes ghost-trail {
  from {
    text-shadow:
      0 0 6px currentColor,
       4px 0 8px rgba(158,195,255,0.6),
      -4px 0 8px rgba(158,195,255,0.6);
  }
  to {
    text-shadow: 0 0 6px currentColor;
  }
}

/* ==========================================================================
   Desync Swipe Overlay
   ========================================================================== */

#desync-swipe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  pointer-events: none;
  z-index: 10001;
}

#desync-swipe.swipe-active { animation: desync-scan 0.5s ease-in-out; }

@keyframes desync-scan {
  0%   { top: -1%;  height: 2px; background: var(--link); box-shadow: 0 0 12px var(--link), 0 0 28px var(--link); opacity: 1; }
  6%   { height: 1px; opacity: 0.2; }
  8%   { height: 4px; opacity: 1; box-shadow: 0 0 24px var(--link), 0 0 48px var(--link); }
  9%   { height: 1px; opacity: 0.1; }
  12%  { height: 2px; opacity: 1; box-shadow: 0 0 16px var(--link), 0 0 36px var(--link); }
  18%  { height: 3px; opacity: 0.3; }
  20%  { height: 1px; opacity: 1; box-shadow: 0 0 20px var(--link), 0 0 44px var(--link); }
  25%  { height: 2px; opacity: 0.8; }
  35%  { height: 1px; opacity: 1; box-shadow: 0 0 14px var(--link), 0 0 30px var(--link); }
  40%  { height: 3px; opacity: 0.15; }
  42%  { height: 1px; opacity: 1; box-shadow: 0 0 22px var(--link), 0 0 46px var(--link); }
  50%  { height: 2px; opacity: 0.7; }
  58%  { height: 1px; opacity: 1; box-shadow: 0 0 18px var(--link), 0 0 38px var(--link); }
  62%  { height: 4px; opacity: 0.2; }
  64%  { height: 2px; opacity: 1; box-shadow: 0 0 20px var(--link), 0 0 42px var(--link); }
  72%  { height: 1px; opacity: 0.5; }
  78%  { height: 1px; opacity: 1; box-shadow: 0 0 16px var(--link), 0 0 34px var(--link); }
  85%  { height: 2px; opacity: 0.6; }
  92%  { height: 1px; opacity: 1; box-shadow: 0 0 12px var(--link), 0 0 26px var(--link); }
  100% { top: 101%; height: 1px; opacity: 0; box-shadow: none; }
}

/* ==========================================================================
   Progression 1 — Amber (1+ posts read)
   ========================================================================== */

body.progression-1 {
  --glow-color: rgba(255, 140, 0, 0.75);
}

body.progression-1 main {
  --text:             #ffb000;
  --heading:          #ffb000;
  --link:             #ff8c00;
  --link-hover:       #ffa500;
  --link-visited:     #cc7000;
  --terminal-prompt:  #ff6b00;
  --terminal-success: #ffb000;
  --border-strong:    #4a3000;
  --border:           #2a1a00;
  background: linear-gradient(180deg, #1a1a08 0%, #1f1f0a 100%);
  box-shadow:
    inset 0 0 60px rgba(255,140,0,0.03),
    0 4px 24px rgba(0,0,0,0.5),
    0 0 60px rgba(255,140,0,0.05);
}

body.progression-1 th {
  text-shadow: -1px 0 rgba(255,140,0,0.6), 1px 0 rgba(255,200,50,0.6);
}
body.progression-1 th:hover {
  text-shadow: -1.5px 0 rgba(255,160,0,0.8), 1.5px 0 rgba(255,220,80,0.8);
}

/* Amber CRT: bolder scanlines + deeper flicker */
body.progression-1 main::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.25) 2px,
    rgba(0, 0, 0, 0.25) 4px
  );
  animation: crt-scan-amber 6s steps(1) infinite;
}

@keyframes crt-scan-amber {
  0%, 88%   { opacity: 0.95; }
  89%       { opacity: 0.35; }
  90%       { opacity: 0.90; }
  91%       { opacity: 0.18; }
  92%       { opacity: 0.82; }
  93%       { opacity: 0.45; }
  94%       { opacity: 0.96; }
  95%       { opacity: 0.22; }
  96%       { opacity: 0.78; }
  97%       { opacity: 0.50; }
  98%       { opacity: 0.92; }
  99%       { opacity: 0.28; }
  100%      { opacity: 0.95; }
}

/* ==========================================================================
   Progression 2 — Matrix (3+ posts read)
   ========================================================================== */

body.progression-2 {
  --glow-color: rgba(0, 255, 65, 0.7);
}

body.progression-2 main {
  --text:             #00ff41;
  --heading:          #00ff41;
  --link:             #00cc33;
  --link-hover:       #00ff41;
  --link-visited:     #009926;
  --terminal-prompt:  #00ff41;
  --terminal-success: #00ff41;
  --border-strong:    #003300;
  --border:           #002200;
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 100%);
  box-shadow:
    inset 0 0 60px rgba(0,255,65,0.03),
    0 4px 24px rgba(0,0,0,0.5),
    0 0 60px rgba(0,255,65,0.05);
}

body.progression-2 th {
  text-shadow: -1px 0 rgba(0,200,0,0.6), 1px 0 rgba(0,255,100,0.6);
}
body.progression-2 th:hover {
  text-shadow: -1.5px 0 rgba(0,220,0,0.8), 1.5px 0 rgba(0,255,130,0.8);
}
body.progression-2 pre.prompt {
  animation: p2-reverse-flash 8s steps(1) infinite, glitch 4s infinite;
}

@keyframes p2-reverse-flash {
  0%, 94%   { filter: none; }
  95%, 100% { filter: invert(1) hue-rotate(180deg); }
}

/* Matrix dots */
body.progression-2 main::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 10002;
  width: 3px; height: 3px;
  border-radius: 50%;
  animation: dot-cycle 8s steps(1) infinite;
}

@keyframes dot-cycle {
  0%, 8%     { opacity: 0; top: 32%; left: 18%; }
  8.1%, 10%  { opacity: 1; top: 32%; left: 18%; background: #fff; box-shadow: 0 0 3px #fff, 0 0 8px rgba(0,255,65,0.7); }
  10.1%, 28% { opacity: 0; top: 32%; left: 18%; }

  28.1%, 30% { opacity: 1; top: 73%; left: 81%; background: #fff; box-shadow: 0 0 3px #fff, 0 0 8px rgba(0,255,65,0.7); }
  30.1%, 48% { opacity: 0; top: 73%; left: 81%; }

  48.1%, 50% { opacity: 1; top: 15%; left: 65%; background: #fff; box-shadow: 0 0 3px #fff, 0 0 8px rgba(0,255,65,0.7); }
  50.1%, 68% { opacity: 0; top: 15%; left: 65%; }

  68.1%, 70% { opacity: 1; top: 85%; left: 30%; background: #fff; box-shadow: 0 0 3px #fff, 0 0 8px rgba(0,255,65,0.7); }
  70.1%, 100% { opacity: 0; top: 85%; left: 30%; }
}

/* ==========================================================================
   Progression 3 — Cyberpunk (5+ posts read)
   ========================================================================== */

body.progression-3 {
  --glow-color: rgba(255, 110, 247, 0.75);
}

body.progression-3 main {
  --text:             #f0f0c0;
  --heading:          #ffe066;
  --link:             #ff6ef7;
  --link-hover:       #ff9ef9;
  --link-visited:     #b44dff;
  --terminal-prompt:  #ff6ef7;
  --terminal-success: #ffe066;
  --border-strong:    #3a1a4a;
  --border:           #220a30;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,110,247,0.07) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(255,224,102,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #0d0010 0%, #120018 100%);
  box-shadow:
    inset 0 0 60px rgba(255,110,247,0.03),
    0 4px 24px rgba(0,0,0,0.5),
    0 0 60px rgba(255,110,247,0.06);
}

body.progression-3 th {
  text-shadow: -1px 0 rgba(255,110,247,0.6), 1px 0 rgba(255,224,102,0.6);
  animation: p3-chroma 4s ease-in-out infinite;
}

@keyframes p3-chroma {
  0%, 100% { text-shadow: -1px 0 rgba(255,110,247,0.6), 1px 0 rgba(255,224,102,0.6); }
  50%       { text-shadow: -1px 0 rgba(255,224,102,0.6), 1px 0 rgba(180,77,255,0.6); }
}

/* ==========================================================================
   Progression 4 — Alien (all posts read)
   ========================================================================== */

body.progression-4 {
  --glow-color: rgba(0, 229, 255, 0.7);
}

body.progression-4 main {
  --text:             #7df9ff;
  --heading:          #b8f5ff;
  --link:             #00e5ff;
  --link-hover:       #5cffff;
  --link-visited:     #7c4dff;
  --terminal-prompt:  #b2ff59;
  --terminal-success: #69f0ae;
  --border-strong:    #1a237e;
  --border:           #0d1542;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0,229,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(124,77,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(178,255,89,0.04) 0%, transparent 40%),
    linear-gradient(180deg, #020010 0%, #030820 50%, #020015 100%);
  box-shadow:
    inset 0 0 80px rgba(0,229,255,0.04),
    inset 0 0 40px rgba(124,77,255,0.03),
    0 0 40px rgba(0,229,255,0.1),
    0 0 80px rgba(124,77,255,0.06),
    0 0 120px rgba(178,255,89,0.03);
}

body.progression-4 th {
  animation: p4-chroma 3s ease-in-out infinite;
}

@keyframes p4-chroma {
  0%, 100% { text-shadow: -1px 0 rgba(0,229,255,0.5),   1px 0 rgba(178,255,89,0.5); }
  50%       { text-shadow: -1px 0 rgba(178,255,89,0.5),  1px 0 rgba(124,77,255,0.5); }
}

body.progression-4 th:hover {
  text-shadow:
    -1.5px 0 rgba(0,229,255,0.7),
     1.5px 0 rgba(178,255,89,0.7),
    0 0 10px rgba(0,229,255,0.4);
}

/* Row ripple */
body.progression-4 tbody tr { transition: transform 0.3s ease-out; }
body.progression-4 tbody tr:hover              { transform: scale(1.02); }
body.progression-4 tbody tr:hover ~ tr         { transform: translateY(3px); }
body.progression-4 tbody tr:has(~ tr:hover)    { transform: translateY(-3px); }

/* ==========================================================================
   Konami Mode — Horror / Glitch
   ========================================================================== */

body.konami-mode {
  --glow-color: rgba(255, 0, 0, 0.8);
}

body.konami-mode main {
  --text:             #ff3333;
  --heading:          #ff0000;
  --link:             #ff0000;
  --link-hover:       #ff5555;
  --link-visited:     #cc0000;
  --terminal-prompt:  #ff0000;
  --terminal-success: #ff3333;
  --border-strong:    #660000;
  --border:           #330000;
  background: linear-gradient(180deg, #0a0000 0%, #0d0000 100%);
  box-shadow:
    0 8px 40px rgba(255,0,0,0.4),
    0 0 80px rgba(255,0,0,0.2);
  animation: konami-chaos 0.4s infinite;
}

@keyframes konami-chaos {
  0%, 91%, 100% { transform: translate(0);         opacity: 1; }
  92%            { transform: translate(-2px,  1px); opacity: 0.95; }
  94%            { transform: translate( 2px, -1px); opacity: 1; }
  96%            { transform: translate(-1px,  2px); opacity: 0.6; }
  97%            { transform: translate( 1px, -2px); opacity: 1; }
  99%            { transform: translate(0);         opacity: 0.3; }
}

body.konami-mode th {
  color: #ff0000;
  text-shadow: -1.5px 0 rgba(255,0,0,0.8), 1.5px 0 rgba(255,50,50,0.8);
}

body.konami-mode main::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,0,0,0.04) 0px, rgba(255,0,0,0.04) 1px,
    transparent 1px, transparent 2px
  );
}

/* ==========================================================================
   Degauss (brief on Konami toggle)
   ========================================================================== */

@keyframes degauss {
  0%   { filter: saturate(1)   hue-rotate(0deg); }
  15%  { filter: saturate(5)   hue-rotate(90deg); }
  30%  { filter: saturate(3)   hue-rotate(-45deg); }
  45%  { filter: saturate(6)   hue-rotate(180deg); }
  60%  { filter: saturate(2)   hue-rotate(-90deg); }
  80%  { filter: saturate(1.5) hue-rotate(10deg); }
  100% { filter: saturate(1)   hue-rotate(0deg); }
}

body.degauss-active main { animation: degauss 0.6s ease-in-out !important; }

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.progression-1 main::before,
  body.progression-2 main::after,
  body.progression-2 pre.prompt,
  body.progression-3 th,
  body.progression-4 th,
  body.konami-mode main,
  #desync-swipe.swipe-active,
  body.degauss-active main {
    animation: none !important;
  }

  body.progression-4 tbody tr,
  body.progression-4 tbody tr:hover,
  body.progression-4 tbody tr:hover ~ tr,
  body.progression-4 tbody tr:has(~ tr:hover) {
    transform: none !important;
    transition: none !important;
  }

  body.konami-mode main {
    opacity: 1 !important;
    filter: none !important;
  }
}