.title{
  position:relative;
  color:#fff;
}
.title::before,
.title::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0;
}
.title::before{
  color:#ff5a90;
  transform:translate(2px,0);
  clip-path:inset(0 0 55% 0);
  animation:gl1 6s infinite steps(2);
}
.title::after{
  color:#3bffd6;
  transform:translate(-2px,0);
  clip-path:inset(58% 0 0 0);
  animation:gl2 7s infinite steps(2);
}
@keyframes gl1{
  0%,90%,100%{opacity:0}
  91%{opacity:.6; transform:translate(4px,-2px)}
  95%{opacity:.45; transform:translate(-3px,1px)}
}
@keyframes gl2{
  0%,86%,100%{opacity:0}
  88%{opacity:.65; transform:translate(-4px,2px)}
  96%{opacity:.8; transform:translate(3px,-2px)}
}

body.mode-glitch{
  animation:flick 7s infinite;
}
body.mode-glitch::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:130;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, transparent, rgba(255,255,255,.03));
  mix-blend-mode:overlay;
}
body.mode-glitch .title{
  text-shadow:2px 0 rgba(255,0,102,.38), -2px 0 rgba(0,255,255,.38);
}
@keyframes flick{
  0%,98%,100%{filter:none}
  99%{filter:hue-rotate(25deg) contrast(1.15)}
}

body.mode-void{
  --bg:#010206;
  --bg-soft:#060811;
  --panel:#060a12d9;
  --panel-solid:#070c16;
  --line:rgba(126,142,186,.12);
  --line-strong:rgba(126,142,186,.2);
  --muted:#7c87a4;
  background:#010206 !important;
}
body.mode-void .nav,
body.mode-void .card,
body.mode-void .door,
body.mode-void .feature,
body.mode-void .project-card{
  box-shadow:none;
}
body.mode-void .invis{color:var(--acid)}

body.mode-archive{
  --bg:#e8decc;
  --bg-soft:#efe7d7;
  --panel:rgba(251,245,232,.85);
  --panel-solid:#f8f1e2;
  --ink:#2c2418;
  --muted:#6b5d46;
  --faint:#8c7a62;
  --line:rgba(91,72,46,.18);
  --line-strong:rgba(91,72,46,.24);
  --accent:#7c4a22;
  --accent-2:#a56634;
  --accent-3:#7aa064;
  --shadow:0 26px 70px rgba(104,76,44,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.1)),
    radial-gradient(1000px 700px at 85% 0%, rgba(160,130,95,.12), transparent 55%),
    var(--bg) !important;
}
body.mode-archive .nav,
body.mode-archive .door,
body.mode-archive .feature,
body.mode-archive .card,
body.mode-archive .project-card{
  background:linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.28)), var(--panel);
}
body.mode-archive a{color:#6f3a16}
body.mode-archive .title,
body.mode-archive .hero-copy,
body.mode-archive .page h1,
body.mode-archive .white{color:#2b2418 !important}
body.mode-archive .btn{
  background:rgba(255,255,255,.46);
}

body.mode-joke{
  --bg:#fb4ab8;
  --panel:rgba(255,255,255,.62);
  --ink:#2d0920;
  --muted:#5c2649;
  --accent:#2f6fff;
  --accent-3:#fff15a;
  background:radial-gradient(1000px 600px at 50% 0%, rgba(255,255,255,.28), transparent 60%), hotpink !important;
}
body.mode-joke *{
  font-family:"Comic Sans MS", "Trebuchet MS", cursive !important;
}
body.mode-joke .orb-core{
  filter:hue-rotate(80deg);
}

body.mode-night{
  --accent:#9ab8ff;
  --accent-3:#8fffe5;
}
body.mode-night .hero,
body.mode-night .page{
  filter:saturate(.86) brightness(.9);
}
body.mode-night .whisper::after{
  content:" · it is late";
  color:var(--accent-3);
}

body.mode-aurora{
  --accent:#7de2ff;
  --accent-2:#9d7dff;
  --accent-3:#85ffba;
  --hero-gradient:
    radial-gradient(1000px 700px at 15% 0%, rgba(27,180,219,.22), transparent 58%),
    radial-gradient(1000px 750px at 100% 0%, rgba(127,76,255,.26), transparent 58%),
    radial-gradient(900px 620px at 50% 100%, rgba(84,255,178,.18), transparent 55%);
}
body.mode-aurora .orb-core{
  filter:hue-rotate(-18deg) saturate(1.15);
}
body.mode-aurora .door::after,
body.mode-aurora .project-card::after{
  background:radial-gradient(circle, rgba(133,255,186,.22), transparent 62%);
}

.corrupt{
  display:inline-block;
  animation:corrupt 1.2s infinite steps(6);
}
@keyframes corrupt{
  0%{transform:translate(0,0)}
  20%{transform:translate(1px,-1px)}
  40%{transform:translate(-1px,1px)}
  60%{transform:translate(2px,0)}
  80%{transform:translate(-2px,1px)}
  100%{transform:translate(0,0)}
}