/* ---------- random rage fonts (1.ttf ... 10.ttf) ---------- */
@font-face { font-family: "rage1";  src: url("1.ttf"); }
@font-face { font-family: "rage2";  src: url("2.ttf"); }
@font-face { font-family: "rage3";  src: url("3.ttf"); }
@font-face { font-family: "rage4";  src: url("4.ttf"); }
@font-face { font-family: "rage5";  src: url("5.ttf"); }
@font-face { font-family: "rage6";  src: url("6.ttf"); }
@font-face { font-family: "rage7";  src: url("7.ttf"); }
@font-face { font-family: "rage8";  src: url("8.ttf"); }
@font-face { font-family: "rage9";  src: url("9.ttf"); }
@font-face { font-family: "rage10"; src: url("10.ttf"); }

/* ---------- base ---------- */
html, body {
  margin: 0;
  height: 100%;
  background: #ffffff;
  transition: background-color 0.6s ease;
}
body {
  overflow: hidden;
  position: relative;
}

/* ---------- 1. nginx 403 page ---------- */
#nginx-page {
  font-family: Times, "Times New Roman", serif;
  color: #000;
  padding-top: 20px;
  transition: opacity 0.6s ease;
}
#nginx-page h1 { font-weight: bold; }
#nginx-page hr { width: 100%; }

/* ---------- 2. trust button (intentionally unstyled) ---------- */
#trust-btn {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* ---------- 3. rage (red) layer ---------- */
#rage-layer, #calm-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.8s ease;
}

.rage-text {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  font-family: var(--font, "Courier New"), "Courier New", monospace;
  font-weight: 800;
  font-size: var(--size, 42px);
  color: #e21b1b;
  text-align: center;
  max-width: 70vw;
  text-shadow: 2px 0 #773131, -2px 0 #600400;
  animation: glitch-in 0.45s steps(2, end) both;
  white-space: pre-wrap;
  opacity: 1;
  transition: color 0.9s ease, text-shadow 0.9s ease, opacity 0.9s ease;
  pointer-events: none;
}
@keyframes glitch-in {
  0%   { opacity: 0; clip-path: inset(45% 0 50% 0); transform: translate(-50%,-50%) translateX(-14px) rotate(var(--rot,0deg)) scale(1.08); }
  15%  { opacity: 1; clip-path: inset(0 0 85% 0);   transform: translate(-50%,-50%) translateX(12px)  rotate(var(--rot,0deg)); }
  30%  { clip-path: inset(80% 0 2% 0);  transform: translate(-50%,-50%) translateX(-8px) rotate(var(--rot,0deg)); }
  45%  { clip-path: inset(10% 0 60% 0); transform: translate(-50%,-50%) translateX(6px)  rotate(var(--rot,0deg)); }
  60%  { clip-path: inset(50% 0 20% 0); transform: translate(-50%,-50%) translateX(-4px) rotate(var(--rot,0deg)); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-50%,-50%) rotate(var(--rot,0deg)); }
}

/* darker tiers for previous messages so the newest stays readable */
.rage-text.dim1 { color: #8e1414; text-shadow: 1px 0 #773131, -1px 0 #600400; }
.rage-text.dim2 { color: #541010; text-shadow: 1px 0 #773131, -1px 0 #600400; }
.rage-text.dim3 { color: #2a0a0a; text-shadow: none; opacity: 0.75; }
.rage-text.dim4 { color: #180606; text-shadow: none; opacity: 0.5; }

/* permanent subtle flicker after landing */
.rage-text.settled { animation: flicker 2.4s infinite steps(3); }
@keyframes flicker {
  0%,100% { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.72; text-shadow: 3px 0 #773131, -3px 0 #600400; }
  52% { opacity: 1; }
}

/* ---------- 6. calm (green) layer ---------- */
.calm-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Courier New", monospace;
  font-size: clamp(18px, 3.2vw, 32px);
  color: #6fae7e;              /* desaturated calm green */
  text-align: center;
  width: 90%;
  opacity: 0;
  transition: opacity 1.1s ease;
  text-shadow: 0 0 10px rgba(111,174,126,0.25);
}
.calm-text.show { opacity: 1; }

/* ---------- 7. download bars ---------- */
#download-layer {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(620px, 86vw);
  font-family: "Courier New", monospace;
  color: #8fb6d6;
}
.bar-group { margin: 22px 0; }
.bar-label { font-size: 13px; margin-bottom: 6px; letter-spacing: 1px; }
.bar {
  height: 18px;
  background: #0f1520;
  border: 1px solid #22334a;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: #2f6fd1;
  box-shadow: 0 0 14px #2f6fd1;
}
.bar-fill.overall { background: #3b86f7; box-shadow: 0 0 14px #3b86f7; }

/* ---------- 8. shatter to black ---------- */
#shatter {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s linear;
}
#shatter.crack { animation: crack 0.5s steps(6) forwards; }
@keyframes crack {
  0%   { opacity: 0; clip-path: polygon(0 0,100% 0,100% 0,0 0); }
  20%  { opacity: 1; clip-path: polygon(0 0,100% 0,60% 40%,0 30%); }
  40%  { opacity: 1; clip-path: polygon(0 0,100% 0,100% 55%,0 45%); }
  60%  { opacity: 1; clip-path: polygon(0 0,100% 0,100% 80%,0 70%); }
  100% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
}
/* ---------- final link on black ---------- */
#final-link {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  font-family: "Courier New", monospace;
  font-size: clamp(16px, 2.6vw, 24px);
  color: #6fae7e;                 /* same calm green */
  text-decoration: none;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(111,174,126,0.4);
  padding-bottom: 2px;
  opacity: 0;
  transition: opacity 1.4s ease;
  text-shadow: 0 0 12px rgba(111,174,126,0.25);
}
#final-link.show { opacity: 1; }
#final-link:hover { color: #8fd49e; border-bottom-color: #8fd49e; }
/* ---------- 404 Not Found (second nginx page) ---------- */
#forgiven-page {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: #ffffff;
  font-family: Times, "Times New Roman", serif;
  color: #000;
  padding-top: 20px;
  transition: background-color 1.6s ease;
}
#forgiven-page h1 { font-weight: bold; }
#forgiven-page hr { width: 100%; }
#forgiven-page.darken { background: #0a0806; color: #2a2a2a; }

/* ---------- orange-yellow glow behind cat ---------- */
#cat-glow {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,180,70,0.85) 0%,
    rgba(255,130,30,0.55) 25%,
    rgba(180,60,10,0.25) 55%,
    rgba(0,0,0,0) 80%);
  opacity: 0;
  transition: opacity 2.5s ease;
  mix-blend-mode: screen;
  filter: blur(10px);
}
#cat-glow.show { opacity: 1; animation: glowPulse 3.6s ease-in-out infinite; }
@keyframes glowPulse {
  0%,100% { transform: scale(1);   opacity: 0.9; }
  50%     { transform: scale(1.06); opacity: 1;   }
}

#cat-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 97;
  pointer-events: none;
  display: block;
}
#cat-canvas[hidden] { display: none; }