:root { --bg:#000; --text:#00ff00; --text-dim:#00cc00; }
* { margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Courier Prime', monospace;
  line-height:1.5;
  min-height:100vh;
}

#page{
  padding:2rem;
  max-width:900px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

h1{
  font-size:4rem;
  text-align:center;
  margin-bottom:1rem;
  text-shadow:0 0 10px var(--text);
}

.subtitle{
  font-size:1.8rem;
  text-align:center;
  font-style:italic;
  margin-bottom:3rem;
  color:var(--text-dim);
}

.manifesto{
  font-size:1.4rem;
  margin-bottom:4rem;
  text-align:center;
}
.manifesto p{ margin-bottom:1.5rem; }

.rant-section{
  background:rgba(0,255,0,0.05);
  border:1px solid var(--text-dim);
  padding:2rem;
  margin:3rem 0;
  border-radius:4px;
}
.rant-section h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  text-align:center;
}

.random-rant{
  font-size:1.5rem;
  font-style:italic;
  text-align:center;
  padding:1.5rem;
  border-left:4px solid var(--text);
  background:rgba(0,0,0,0.5);
  display:block;
  white-space:normal;
  word-break:break-word;
  line-height:1.6;
}

form{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  max-width:700px;
  margin:0 auto;
}

label{ font-size:1.3rem; color:var(--text-dim); }

textarea, select{
  background:#111;
  color:var(--text);
  border:1px solid var(--text-dim);
  padding:1rem;
  font-family:inherit;
  font-size:1.2rem;
  resize:vertical;
  min-height:120px;
}

button{
  background:var(--text);
  color:#000;
  border:none;
  padding:1rem 2rem;
  font-size:1.4rem;
  font-weight:bold;
  cursor:pointer;
  align-self:center;
  margin-top:1rem;
}
button:hover{ background:#00cc00; }

#form-message{
  text-align:center;
  font-size:1.3rem;
  margin-top:1rem;
  min-height:1.5em;
}
.success{ color:#0f0; }
.error{ color:#f00; }

footer{
  margin-top:auto;
  padding-top:4rem;
  text-align:center;
  font-size:1rem;
  color:var(--text-dim);
}

/* ===== Timer box ===== */
#timer{
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 1.1rem;
  color: #00cc00;
  opacity: 1;
  font-family: 'Courier Prime', monospace;
  white-space: pre;
  background: rgba(0,0,0,0.5);
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  min-width: 280px;
  text-align: right;
  pointer-events: none;
  will-change: transform, filter;
  z-index: 99999;
}

@keyframes timerTwitch {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2px,1px); }
  50%  { transform: translate(2px,-1px); }
  75%  { transform: translate(-1px,-2px); }
  100% { transform: translate(0,0); }
}
#timer.hostile-timer{
  animation: timerTwitch 120ms infinite linear;
  text-shadow: 2px 0 rgba(255,0,0,0.85), -2px 0 rgba(0,255,255,0.85);
}

/* ===== Page-only glitch effects (never on body) ===== */
#page.glitch{
  animation: shake 0.07s infinite, flicker 0.12s infinite, rgbShift 0.05s infinite;
  filter: contrast(160%) brightness(130%);
}

@keyframes shake {
  0%  { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(-12px, 8px) rotate(-1deg); }
  40% { transform: translate(10px, -10px) rotate(1deg); }
  60% { transform: translate(-8px, 6px) rotate(-0.5deg); }
  80% { transform: translate(6px, -6px) rotate(0.5deg); }
  100%{ transform: translate(0,0) rotate(0deg); }
}

@keyframes flicker {
  0%   { opacity: 1; }
  15%  { opacity: 0.4; }
  30%  { opacity: 1; }
  45%  { opacity: 0.5; }
  60%  { opacity: 1; }
  75%  { opacity: 0.3; }
  90%  { opacity: 1; }
  100% { opacity: 0.8; }
}

@keyframes rgbShift {
  0%   { filter: contrast(160%) brightness(130%); }
  25%  { filter: contrast(200%) brightness(150%) hue-rotate(20deg); }
  50%  { filter: contrast(180%) brightness(120%) hue-rotate(-15deg); }
  75%  { filter: contrast(220%) brightness(160%) hue-rotate(10deg); }
  100% { filter: contrast(160%) brightness(130%); }
}

#page.glitch-hard{
  animation: shakeHard 60ms infinite linear;
}
@keyframes shakeHard {
  0% { transform: translate(0,0); }
  20% { transform: translate(-4px,3px); }
  40% { transform: translate(5px,-2px); }
  60% { transform: translate(-6px,4px); }
  80% { transform: translate(3px,-5px); }
  100% { transform: translate(0,0); }
}

.rgb-split{ position: relative; }
.rgb-split::before,
.rgb-split::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.rgb-split::before{ color:red; transform: translate(-4px,0); }
.rgb-split::after{ color:cyan; transform: translate(4px,0); }

.flash-frame{ background:white !important; color:black !important; }
.slice-tear{ clip-path: inset(10% 0 60% 0); transform: translateX(20px); }

#page.hostile-1{ filter: contrast(170%) brightness(125%); }
#page.hostile-2{ filter: contrast(200%) brightness(135%) saturate(140%) hue-rotate(6deg); }
#page.hostile-3{ filter: contrast(240%) brightness(145%) saturate(170%) hue-rotate(12deg); }


/* ============================================= */
/* VOID BACKGROUND - Faint, scattered immortalised rants */
/* ============================================= */

.void-background {
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
    pointer-events: none;        /* clicks pass through to content below */
    overflow: hidden;
    z-index: -1;                 /* behind all other content */
    user-select: none;           /* can't accidentally select text */
    transform: translate3d(0,0,0);          /* ← add this line */
    -webkit-transform: translate3d(0,0,0);  /* ← and this for older Safari */
    will-change: transform;
    
}

.void-text {
    position: absolute;
    color: rgba(180, 60, 60, 1);          /* full red – we'll control opacity in JS */
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.4rem, 1.3vw, 1.8rem);
    font-weight: normal;
    white-space: nowrap;
    line-height: 1.1;
    transform-origin: center;
    will-change: transform, opacity;
}

/* Slow, hypnotic drifting movement */
@keyframes drift {
    0% {
        transform: translate(0, 0) rotate(var(--rot)) scale(1);
    }
    100% {
        transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) + 5deg)) scale(1.03);
    }
}
}