* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
  cursor: default;
  font-family: 'Times New Roman', serif;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ───────────────────────────────────
 
──────────────────────────────────── */
/* YOU KNOW, DR. JEREMY WAINE WAS ALWAYS A LITTLE BIT COWARDLY.
HE ALWAYS RAN AWAY FROM THINGS HE WASN'T CERTAIN ABOUT.
THINGS HE WAS SCARED OF.
I'M SURPRISED HE EVEN GOT THE JOB.
NOT TO DISCREDIT HIS WORK OF COURSE. HE'S AMAZING, REALLY.
WAS IT HIS UNCLE OR HIS FATHER THAT WORKED IN THE COMPANY BACK WHEN IT WAS CALLED MANMAKES?
WELL.
IT'S JUST REALLY UNFORTUNATE WHAT HAPPENED TO HIM.
*/
.draggable-box {
  background: black;
  cursor: grab;
  height: 200px;
  left: 100px;
  position: absolute;
  top: 100px;
  transition: outline 0.2s;
  width: 200px;
  z-index: 2;
}

.draggable-box.active {
  outline: 1px solid white;
}

.draggable-box.panic {
  animation: panic-shake 0.15s infinite;
}

/* ───────────────────────────────────
  Static Background
──────────────────────────────────── */
.static {
  animation: staticAnimation 0.2s infinite alternate;
  background: 
    repeating-radial-gradient(
      #000 0 0.0001%,
      #fff 0 0.0002%,
      #ff0000 0 0.0003%,
      #00ff00 0 0.0004%,
      #0000ff 0 0.0005%
    ) 50% 0/2500px 2500px,
    repeating-conic-gradient(
      #000 0 0.0001%,
      #fff 0 0.0002%,
      #ff0000 0 0.0003%,
      #00ff00 0 0.0004%,
      #0000ff 0 0.0005%
    ) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  border: 2px solid black;
  height: 200px;
  left: 100px;
  pointer-events: none;
  position: fixed;
  top: 100px;
  width: 200px;
  z-index: 0;
}

/* ───────────────────────────────────
  Centered Question Mark Reveal
──────────────────────────────────── */
.centered {
  color: white;
  font-size: 2em;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  user-select: none;
  z-index: 1;
}

.centered.revealed {
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}

/* ───────────────────────────────────
  Hidden Text & Link Reveal
──────────────────────────────────── */
.hidden-text {
  color: white;
  font-size: 2em;
}

.hidden-reveal {
  animation: none;
  color: transparent;
  font-size: 0.9em;
  left: 0;
  max-width: 100%;
  pointer-events: none;
  position: absolute;
  text-decoration: none;
  top: 60px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  user-select: none;
  word-break: break-word;
}

.revealed .hidden-reveal {
  animation: glitch 1s linear infinite;
  color: red;
  pointer-events: auto;
  text-decoration: underline;
  text-shadow: 0 0 3px red;
  user-select: auto;
}

/* ───────────────────────────────────
  Trail Effect
──────────────────────────────────── */
.trail-container {
  display: none;
  pointer-events: none;
  position: fixed;
  z-index: 8;
}

.trail-q {
  color: red;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  user-select: none;
}

.trail-q.glitch {
  animation: glitch-shake 0.2s infinite;
}

/* ───────────────────────────────────
  Terminal Message
──────────────────────────────────── */
.terminal-msg {
  background: black;
  bottom: 10px;
  color: lime;
  font-family: monospace;
  left: 10px;
  opacity: 1;
  padding: 1rem;
  position: fixed;
  transition: opacity 2s ease;
  white-space: pre;
}

/* ───────────────────────────────────
  Animations
──────────────────────────────────── */
@keyframes glitch {
  0%     { transform: translate(7%, 3%); }
  1.75%  { transform: translate(35%, 74%); }
  3.5%   { transform: translate(5%, 7%); }
  5.25%  { transform: translate(1%, 2%); }
  7%     { transform: translate(3%, 4%); }
  8.75%  { transform: translate(4%, 1%); }
  10.53% { transform: translate(2%, 4%); }
  12.28% { transform: translate(5%, 5%); }
  14.03% { transform: translate(5%, 5%); }
  15.78% { transform: translate(-100%, 78%); }
  17.53% { transform: translate(2%, 4%); }
  19.28% { transform: translate(5%, 7%); }
  21.03% { transform: translate(4%, 3%); }
  22.78% { transform: translate(100%, -98%); }
  24.53% { transform: translate(2%, 1%); }
  26.28% { transform: translate(4%, 2%); }
  28.03% { transform: translate(1%, 5%); }
  29.78% { transform: translate(5%, 3%); }
  31.53% { transform: translate(-32%, -48%); }
  33.28% { transform: translate(4%, 7%); }
  35.03% { transform: translate(3%, 1%); }
  100%   { transform: none; }
}

@keyframes glitch-shake {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  20%  { transform: translate(-1px, 1px) rotate(-1deg); }
  40%  { transform: translate(1px, -1px) rotate(1deg); }
  60%  { transform: translate(-1px, -2px) rotate(0deg); }
  80%  { transform: translate(1px, 2px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes panic-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(2px, -2px); }
  50%  { transform: translate(-2px, 2px); }
  75%  { transform: translate(2px, 1px); }
  100% { transform: translate(-1px, -2px); }
}

@keyframes shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 2px); }
  50%  { transform: translate(2px, -2px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

@keyframes staticAnimation {
  100% {
    background-position: 50% 0, 60% 50%;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}