/* reset default browser spacing */
html, body {
  margin: 0;
  padding: 0;
}

/* full-page background */
body {
  background-image: url("Screenshot%202026-01-09%20at%2017.59.01.png"); /* CHANGE if your file name is different */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  height: 100vh;
  overflow: hidden;

  font-family: Arial, Helvetica, sans-serif;
}

/* ENTER button */
.enter {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: red;
  color: black;

  padding: 12px 20px;

  font-size: 14px;
  letter-spacing: 3px;

  text-decoration: none;

  border: 3px dashed black;
  font-family: "Comic Sans MS", "Arial Black", sans-serif;

  opacity: 0.9;
}

/* hover effect */
.enter:hover {
  background: white;
  color: black;
  opacity: 1;
}

/* mobile fix */
@media (max-width: 600px) {
  body {
    background-size: contain;
    background-color: black;
  }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.enter {
  animation: blink 1s steps(1) infinite;
}

/* LOADING SCREEN */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: #1b3cff;
  color: white;

  display: none;
  align-items: center;
  justify-content: center;

  font-family: "Courier New", monospace;
  font-size: 32px;
  letter-spacing: 6px;

  text-shadow:
    2px 0 red,
   -2px 0 cyan;

  z-index: 9999;
  overflow: hidden;
}

#loading p {
  animation: flicker 0.15s infinite;
}

#loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );

  pointer-events: none;
}

@keyframes flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.9; }
  40%  { opacity: 1; }
  60%  { opacity: 0.8; }
  80%  { opacity: 1; }
  100% { opacity: 0.95; }
}

@keyframes vhs-jitter {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

#loading {
  animation: vhs-jitter 0.1s infinite;
}

@keyframes jitter {
  0%   { transform: translate(-50%, -50%) translate(0, 0); }
  20%  { transform: translate(-50%, -50%) translate(-2px, 2px); }
  40%  { transform: translate(-50%, -50%) translate(2px, -2px); }
  60%  { transform: translate(-50%, -50%) translate(-1px, 1px); }
  80%  { transform: translate(-50%, -50%) translate(1px, -1px); }
  100% { transform: translate(-50%, -50%) translate(0, 0); }
}

.enter {
  animation:
    blink 1.2s steps(1) infinite,
    jitter 0.3s infinite;
}

/* VHS-style loading screen */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: #1b3cff;
  color: white;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  font-family: "Courier New", monospace;
  font-size: 32px;
  letter-spacing: 6px;

  text-shadow: 2px 0 red, -2px 0 cyan;

  z-index: 9999;
  overflow: hidden;

  animation: vhs-jitter 0.1s infinite;
}

/* fake scanlines */
#loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );

  pointer-events: none;
}

/* flicker effect */
#loading p {
  animation: flicker 0.15s infinite;
}

/* VHS UI text */
.vhs-ui {
  font-size: 16px;
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
}

.vhs-ui.top {
  position: absolute;
  top: 10px;
  left: 10px;
}

.vhs-ui.bottom {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

/* flicker animation */
@keyframes flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.9; }
  40%  { opacity: 1; }
  60%  { opacity: 0.8; }
  80%  { opacity: 1; }
  100% { opacity: 0.95; }
}

/* vertical jitter */
@keyframes vhs-jitter {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* MAP PAGE */

.map {
  background-image: url("MAP.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: white;
  font-family: Arial, Helvetica, sans-serif;

  height: 100vh;
  overflow: hidden;
}

.map-container::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,255,255,0.2);
  pointer-events: none;
}

body.map::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes bg-drift {
  0% { background-position: 50% 50%; }
  100% { background-position: 52% 48%; }
}

body.map {
  animation: bg-drift 40s infinite alternate linear;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* NODES */

.node {
  position: absolute;
}

.node img {
  max-width: 160px;
  display: block;
  border: 2px solid white;
}

.node img:hover {
  filter: invert(1);
  cursor: pointer;
}

/* NODE POSITIONS */

.node:nth-child(2) { top: 10%; left: 8%; }
.node:nth-child(3) { bottom: 10%; left: 8%; }
.node:nth-child(4) { top: 10%; right: 8%; }
.node:nth-child(5) { bottom: 10%; right: 8%; }

/* SECRET NODE POSITION */

.node.secret {
  bottom: 8%;
  left: 50%;
  transform: translateX(50%);
}


/* SECRET NODE VISIBILITY */

.node.secret {
  opacity: 0;
  pointer-events: none;
}

/* SECRET ANIMATION */

@keyframes ghost-fade {
  0%   { opacity: 0; transform: scale(0.95); }
  50%  { opacity: 0.7; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(0.95); }
}

.node.secret img {
  animation: ghost-fade 3.5s infinite;
  filter: contrast(140%) brightness(110%);
}

/* CENTER TEXT */

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.center-text p {
  position: relative;
  margin: 10px 0;
  font-family: 'Rock Salt', cursive;
  font-size: 16px;
  letter-spacing: 4px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.9;

  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}

.center-text p:first-child {
  font-size: 100px;
  letter-spacing: 6px;
}

.center-text p:first-child {
  font-size: 24px;
  letter-spacing: 6px;
}

.center-text {
  filter: contrast(140%) brightness(110%);
}

.center-text p {
  animation: jitter 6s infinite;
}


/* HOVER TEXT */

.node a {
  position: relative;
}

.hover-text {
  position: absolute;
  top: -26px;
  left: 0;
  font-size: 12px;
  letter-spacing: 3px;
  color: white;
  opacity: 0;
  pointer-events: none;
}

.node a:hover .hover-text {
  opacity: 1;
  animation: flicker 0.2s infinite;
}

/* EXIT WARNING */

.node:nth-child(5) .hover-text {
  color: red;
  background: black;
  padding: 4px 6px;
}

/* ANIMATIONS */

@keyframes flicker {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* NODE ANIMATIONS */

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

@keyframes float-pulse {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-12px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes scan-slip {
  0% { transform: translateX(0); }
  40% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

@keyframes flicker-slow {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* INDIVIDUAL NODE ANIMATIONS — FINAL FIX */

/* ABOUT — nervous */
.node.about img {
  animation: jitter 0.15s infinite;
}

/* ENTRIES — obvious / important */
.node.entries img {
  animation: float-pulse 2.2s infinite ease-in-out;
}

/* LINKS — glitchy */
.node.links img {
  animation: scan-slip 1.1s infinite steps(2);
}

/* EXIT — warning */
.node.exit img {
  animation: flicker-slow 1.3s infinite;
}

/* ENTRIES PAGE */

body.entries {
  background: black url("Entries bg.png") center / cover no-repeat fixed;
  color: #00ff66;
  font-family: "Courier New", monospace;
  font-size: 24px;
  letter-spacing: 4px;
}

.entries * {
  text-shadow:
    0 0 2px rgba(0,255,100,0.6),
    0 0 6px rgba(0,255,100,0.3);
}


/* Back link */

.back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 12px;
  letter-spacing: 3px;
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

.back:hover {
  opacity: 1;
}

/* Container */

.entries-container {
  max-width: 600px;
}

/* Title */

.entries h1 {
  font-size: 32px;
  letter-spacing: 6px;
  margin-bottom: 40px;
}

/* Entry blocks */

.entry {
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
}

.entry h2 {
  font-size: 18px;
  letter-spacing: 4px;
  margin-bottom: 5px;
}

.entry .date {
  font-size: 10px;
  opacity: 0.5;
  display: block;
  margin-bottom: 10px;
}

.entry p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}

/* CALENDAR */

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  max-width: 600px;
  margin-top: 40px;
}

.day {
  height: 70px;
  border: 1px dashed rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0.3;
  position: relative;
  cursor: default;
}

.day:hover {
  outline: 2px solid red;
}

.day.entry-day {
  opacity: 1;
  cursor: pointer;
  animation: flicker-slow 2s infinite;
}

.day.entry-day:hover {
  background: white;
  color: black;
}

/* ENTRY MODAL */

.entry-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.entry-content {
  max-width: 500px;
  padding: 30px;
  border: 1px solid white;
  position: relative;
}

.entry-content h2 {
  margin-bottom: 10px;
}

.entry-content p {
  line-height: 1.6;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 20px;
}

/* FULL CALENDAR */

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  max-width: 600px;
  margin-top: 40px;
}

/* Past days */

.day.past {
  opacity: 0.8;
  pointer-events: auto;
}

/* Today */

.day.today {
  opacity: 1;
  border-color: #00ff66;
  animation: cursor-blink 1s steps(2) infinite;
  pointer-events: auto;
}

/* Future days */

.day.future {
  opacity: 0.15;
}

/* Hover feedback */

.day.past:hover,
.day.today:hover {
  background: white;
  color: black;
}

.day.past::after {
  content: "×";
  position: absolute;
  opacity: 0.1;
  font-size: 40px;
}

/* CALENDAR HEADER */

.calendar-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.calendar-header h1 {
  font-size: 18px;
  letter-spacing: 4px;
}

.calendar-header button {
  background: black;
  border: 1px solid #00ff66;
  color: #00ff66;
  font-family: inherit;
  padding: 4px 10px;
  opacity: 0.6;
}

.calendar-header button:hover:not(:disabled) {
  opacity: 1;
}

.calendar-header button:disabled {
  opacity: 0.2;
}

body.entries::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.15) 3px
    );
  pointer-events: none;
  z-index: 999;
}

@keyframes screen-flicker {
  0% { opacity: 1; }
  98% { opacity: 1; }
  99% { opacity: 0.95; }
  100% { opacity: 1; }
}

body.entries {
  animation: screen-flicker 6s infinite;
}

.cursor {
  font-size: 18px;
  animation: cursor-blink 1s steps(2) infinite;
  margin-top: 20px;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* CENTER CALENDAR */

.calendar-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calendar {
  margin-bottom: 20px;
}

.calendar {
  align-self: center;
  grid-auto-rows: 70px;
}

.calendar-wrapper {
  transform: translateY(-60px);
}

.terminal-cursor {
  margin-top: 20px;
  font-size: 24px;
  animation: cursor-blink 1s steps(2) infinite;
}

.entries {
  animation: text-fade 1s ease forwards;
}

@keyframes text-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* PASSWORD GATE */

body.gate {
  background: black;
  color: #00ff66;
  font-family: 'VT323', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.gate-container {
  text-align: center;
}

.prompt {
  letter-spacing: 4px;
  margin-bottom: 20px;
}

input[type="password"] {
  background: black;
  border: 1px solid #00ff66;
  color: #00ff66;
  font-family: inherit;
  font-size: 20px;
  padding: 10px;
  width: 220px;
  text-align: center;
}

button {
  display: block;
  margin: 20px auto 0;
  background: black;
  border: 1px solid #00ff66;
  color: #00ff66;
  font-family: inherit;
  padding: 8px 20px;
  cursor: pointer;
}

button:hover {
  background: #00ff66;
  color: black;
}

.error {
  margin-top: 15px;
  opacity: 0.6;
}

/* VHS PASSWORD GATE */

body.gate {
  margin: 0;
  background: black;
}

.vhs-screen {
  position: fixed;
  inset: 0;

  background: #1b3cff;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Courier New", monospace;
  letter-spacing: 6px;

  text-shadow: 2px 0 red, -2px 0 cyan;

  overflow: hidden;
  animation: vhs-jitter 0.1s infinite;
}

/* scanlines */
.vhs-screen::before {
  content: "";
  position: absolute;
  inset: 0;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );

  pointer-events: none;
}

/* gate content */
.gate-container {
  text-align: center;
  animation: flicker 0.15s infinite;
}

.prompt {
  font-size: 32px;
  margin-bottom: 30px;
}

/* input styling */
.gate-container input {
  background: transparent;
  border: none;
  border-bottom: 2px solid white;

  color: white;
  font-family: inherit;
  font-size: 24px;
  letter-spacing: 4px;

  text-align: center;
  outline: none;
  width: 260px;
}

/* enter button */
.gate-container button {
  margin-top: 30px;
  background: none;
  border: none;

  color: white;
  font-family: inherit;
  font-size: 24px;
  letter-spacing: 6px;

  cursor: pointer;
  animation: blink 1.2s steps(1) infinite;
}

/* VHS UI text reuse */
.vhs-ui {
  font-size: 14px;
  letter-spacing: 2px;
  position: absolute;
}

.vhs-ui.top {
  top: 10px;
  left: 10px;
}

.vhs-ui.bottom {
  bottom: 10px;
  left: 10px;
}

.auth {
  margin-top: 20px;
  font-size: 18px;
  letter-spacing: 4px;
  animation: flicker 0.15s infinite;
}

.hidden {
  display: none;
}

/* VHS PROGRESS BAR */

.progress-wrap {
  width: 300px;
  height: 14px;
  margin: 20px auto 0;

  border: 1px solid white;
  overflow: hidden;

  box-shadow: 2px 0 red, -2px 0 cyan;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: white;

  animation: flicker 0.15s infinite;
}

.progress-wrap {
  animation: vhs-jitter 0.1s infinite;
}

/* PERCENT DISPLAY */

.percent {
  margin-top: 10px;
  font-size: 18px;
  letter-spacing: 4px;
  animation: flicker 0.15s infinite;
}

/* CRC ERROR */

.crc {
  margin-top: 8px;
  color: red;
  font-size: 16px;
  letter-spacing: 3px;
  animation: flicker 0.1s infinite;
}

/* Near-complete colour shift */
.progress-bar.warning {
  background: yellow;
}

.progress-bar.danger {
  background: red;
}

/* HORIZONTAL TEARING */

.progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-bar span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 33%;
  background: inherit;
}

/* slice positions */
.progress-bar span:nth-child(1) { top: 0; }
.progress-bar span:nth-child(2) { top: 33%; }
.progress-bar span:nth-child(3) { top: 66%; }

/* tearing animation */
@keyframes tear {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-6px); }
  60%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

/* active tear */
.progress-bar.tearing span {
  animation: tear 0.15s steps(1);
}

.entry {
  margin-top: 40px;
  max-width: 600px;
  text-align: left;
}

.entry h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.entry p {
  white-space: pre-line;
  line-height: 1.5;
}

.entry img {
  width: 100%;
  margin-top: 15px;
  border: 1px solid #00ff66;
}

.hidden {
  display: none;
}

/* FORCE CALENDAR INTERACTION FIX */

.calendar,
.calendar * {
  pointer-events: auto;
}

.day {
  cursor: pointer;
  z-index: 5;
}

.cursor,
.terminal-cursor {
  pointer-events: none;
}