/* =========================================================
   BASE RESET & GLOBALS
========================================================= */

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #0b0b0b;
  color: #cfcfc8;
  overflow: hidden;
  font-family: 'VT323', monospace;
  cursor: crosshair;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  background: none;
  color: inherit;

  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    0 0 14px currentColor,
    0 0 28px currentColor;
}



/* =========================================================
   CRT GLOBAL EFFECTS
========================================================= */

body {
  animation: crt-flicker 7s infinite;
}

body::before {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 1;
  inset: 0;

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

  mix-blend-mode: overlay;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.97; }
  45% { opacity: 0.93; }
  50% { opacity: 0.96; }
  55% { opacity: 0.92; }
  60% { opacity: 0.98; }
}

@keyframes crt-jitter {
  0% { transform: translateX(0); }
  15% { transform: translateX(0.8px); }
  30% { transform: translateX(-1px); }
  45% { transform: translateX(0.6px); }
  60% { transform: translateX(-0.6px); }
  75% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* =========================================================
   BACKGROUND MEMORY CANVAS
========================================================= */

#memory-bg {
  position: fixed;
  pointer-events: none;
  z-index: 0;

  opacity: 0;
  animation: memory-fade-in 6s ease-out forwards;

  filter:
    blur(0.9px)
    contrast(1.15)
    brightness(0.9)
    saturate(0.75);
}

@keyframes memory-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.25; }
}

/* =========================================================
   NODE SYSTEM (MAP / WORKS)
========================================================= */

.node {
  position: absolute;
  padding: 5px;
  font-size: 8px;
  opacity: 0.85;
  white-space: pre;
  z-index: 2;

  text-shadow:
    0 0 1px rgba(207, 207, 200, 0.4),
    0 0 4px rgba(207, 207, 200, 0.25),
    0 0 10px rgba(207, 207, 200, 0.1);

  animation:
    node-breathe 9s ease-in-out infinite,
    crt-jitter 11s steps(1) infinite,
    crt-flicker 6.5s infinite;
}

/* ===============================
   OVERDRIVEN RED CRT HOVER
   =============================== */

.node:hover,
.node:hover {
  color: #ff4b4b; /* hot phosphor red */

  text-shadow:
    /* core beam burn */
    0 0 2px rgba(255, 75, 75, 1),
    0 0 6px rgba(255, 75, 75, 0.95),

    /* phosphor bloom */
    0 0 14px rgba(255, 55, 55, 0.75),
    0 0 28px rgba(255, 40, 40, 0.45),

    /* outer halo spill */
    0 0 48px rgba(255, 30, 30, 0.25);
}

/* subtle instability while hovered */
.node:hover {
  animation: red-flicker 0.9s steps(2) infinite;
}

@keyframes red-flicker {
  0%   { opacity: 1; }
  46%  { opacity: 0.96; }
  50%  { opacity: 1; }
  58%  { opacity: 0.93; }
  62%  { opacity: 1; }
  100% { opacity: 1; }
}



/* --- Node breathing --- */

@keyframes node-breathe {
  0% {
    opacity: 0.55;
    text-shadow:
      0 0 2px rgba(120, 255, 120, 0.25),
      0 0 6px rgba(120, 255, 120, 0.12);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(120, 255, 120, 0.75),
      0 0 16px rgba(120, 255, 120, 0.45),
      0 0 32px rgba(120, 255, 120, 0.25);
  }
  100% {
    opacity: 0.55;
    text-shadow:
      0 0 2px rgba(120, 255, 120, 0.25),
      0 0 6px rgba(120, 255, 120, 0.12);
  }
}

.footer-note {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 3;

  font-size: 14px;
  color: #555;

  opacity: 0.7;

  text-shadow:
    0 0 1px rgba(207, 207, 200, 0.25),
    0 0 4px rgba(207, 207, 200, 0.15);
}


/* --- Drift presets --- */

.drift-1 { animation: drift1 34s infinite alternate ease-in-out; animation-delay: -1.2s; }
.drift-2 { animation: drift2 40s infinite alternate ease-in-out; animation-delay: -3.4s; }
.drift-3 { animation: drift3 46s infinite alternate ease-in-out; animation-delay: -5.8s; }
.drift-4 { animation: drift4 38s infinite alternate ease-in-out; animation-delay: -2.6s; }

@keyframes drift1 { to { transform: translate(28px, -18px); } }
@keyframes drift2 { to { transform: translate(-36px, 22px); } }
@keyframes drift3 { to { transform: translate(24px, 40px); } }
@keyframes drift4 { to { transform: translate(-26px, -34px); } }

/* === DISABLE NODE DRIFT (STATIC MAP) === */

.node {
  animation-name:
    node-breathe,
    crt-jitter,
    crt-flicker;
}

/* neutralize drift keyframes */
.drift-1,
.drift-2,
.drift-3,
.drift-4 {
  animation: none !important;
}


/* =========================================================
   SITE MARK / NAV
========================================================= */

#site-mark {
  position: fixed;
  top: 30px;
  left: 18px;
  z-index: 3;
  opacity: 0.85;
  pointer-events: none;

  animation:
    mark-breathe 14s ease-in-out infinite,
    crt-flicker 6.5s infinite;
}

#site-mark pre {
  margin: 0;
  font-size: 14px;
  line-height: 14px;
  white-space: pre;

  text-shadow:
    0 0 1px rgba(207, 207, 200, 0.35),
    0 0 6px rgba(207, 207, 200, 0.15);
}

@keyframes mark-breathe {
  0% { opacity: 0.65; }
  50% { opacity: 0.9; }
  100% { opacity: 0.65; }
}

/* --- Back nav --- */

.back-nav {
  margin-left: 14px;
  margin-top: 6px;
  font-size: 16px;
}

.back-nav a {
  color: #b84545;
  text-shadow:
    0 0 1px rgba(184, 69, 69, 0.4),
    0 0 6px rgba(184, 69, 69, 0.25);
}

.back-nav a:hover {
  color: #ff3b3b;
  background: none;
  box-shadow: none;
  text-shadow:
    0 0 2px rgba(255, 59, 59, 0.9),
    0 0 8px rgba(255, 59, 59, 0.75),
    0 0 18px rgba(255, 59, 59, 0.5),
    0 0 36px rgba(255, 59, 59, 0.35);
}

/* =========================================================
   TERMINAL TEXT (REVEAL SYSTEM)
========================================================= */

[data-terminal] {
  visibility: hidden;
}

/* =========================================================
   ABOUT PAGE — FORCE VT323
========================================================= */

/* extra safety: ASCII box itself */
body.about .about-box {
  font-family: 'VT323', monospace;
  font-size: 19px;
  line-height: 16px; /* CRITICAL */
  white-space: pre;
  padding: 20px;

  text-shadow:
    0 0 2px rgba(207, 207, 200, 0.4),
    0 0 10px rgba(207, 207, 200, 0.15);
}


/* =========================================================
   SHARED ASCII FRAME (ABOUT + WORKS)
========================================================= */

.about-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--page-scale, 1));
  transform-origin: center top;
  z-index: 2;
  width: fit-content;
}

/* default */
body.about,
body.works {
  --page-scale: 1;
}

/* tablet */
@media (max-width: 900px) {
  body.about,
  body.works {
    --page-scale: 0.9;
  }
}

/* mobile */
@media (max-width: 600px) {
  body.about,
  body.works {
    --page-scale: 0.75;
  }
}

/* very small phones */
@media (max-width: 420px) {
  body.about,
  body.works {
    --page-scale: 0.65;
  }
}

/* =========================================================
   WORKS PAGE ASCII (MATCH ABOUT)
========================================================= */

body.works .works-box {
  font-family: 'VT323', monospace;
  font-size: 19px;
  line-height: 16px; /* CRITICAL */
  white-space: pre;
  padding: 20px;

  text-shadow:
    0 0 2px rgba(207, 207, 200, 0.4),
    0 0 10px rgba(207, 207, 200, 0.15);
}

/* =========================================================
   MOBILE VERTICAL ALIGN — CENTER IN VIEWPORT
========================================================= */

@media (max-width: 600px) {
  body.about .about-frame,
  body.works .about-frame {
    margin-top: calc(50vh - 300px);
    margin-bottom: 80px;
  }
}

@media (max-width: 420px) {
  body.about .about-frame,
  body.works .about-frame {
    margin-top: calc(50vh - 280px);
  }
}

/* ================================
   WORKS – LINK HOVER FIX
================================ */

/* ensure links inherit ASCII color */
body.works .works-box a {
  color: inherit;
  text-decoration: none;
}

/* force deep red CRT glow on hover */
body.works .works-box a:hover,
body.works .works-box a:hover{
  color: #e35b5b;

  text-shadow:
    /* core beam burn */
    0 0 2px rgba(255, 75, 75, 1),
    0 0 6px rgba(255, 75, 75, 0.95),

    /* phosphor bloom */
    0 0 14px rgba(255, 55, 55, 0.75),
    0 0 28px rgba(255, 40, 40, 0.45),

    /* outer halo spill */
    0 0 48px rgba(255, 30, 30, 0.25);
}

/* kill any background inversion from global rules */
body.works .works-box a:hover {
  background: none;
  box-shadow: none;
}

/* =========================================================
   WORK SUBPAGE — ASCII BOX + VIDEO BALANCE FIX
   Drop-in patch (safe override)
========================================================= */

/* frame holding ascii box + video */
body.works .work-frame {
  margin-top: 42px;          /* move composition UP */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* tighten slightly more on large screens */
@media (min-width: 900px) {
  body.works .work-frame {
    margin-top: 24px;
  }
}

/* ascii description box (inherits about scaling logic) */
body.works .work-box {
  font-size: 19px;
  line-height: 16px;
  white-space: pre;
}

/* video wrapper */
body.works .work-video {
  width: 100%;
  max-width: 100%;
  margin-top: 16px;          /* balanced gap under ascii box */
  display: flex;
  justify-content: center;
}

/* FIX: make embedded video tall + stable */
body.works .work-video iframe {
  width: 100%;
  max-width: 100%;

  /* presence without distortion */
  height: 52vh;
  max-height: 520px;
  min-height: 320px;

  border: none;
  display: block;


  box-shadow:
    0 0 30px rgba(0,0,0,0.6),
    inset 0 0 40px rgba(0,0,0,0.25);
}

/* mobile safety — ensure video never collapses */
@media (max-width: 600px) {
  body.works .work-video iframe {
    height: 48vh;
    min-height: 260px;
  }
}

/* --- micro vertical balance tweak --- */
body.works .work-video {
  margin-top: 2px;     /* was 16px → pulls video UP */
  margin-bottom: 48px; /* keeps it off the page edge */
}

/* mobile fine-tune */
@media (max-width: 600px) {
  body.works .work-video {
    margin-top: 5px;
    margin-bottom: 56px;
  }
}

body.works .about-box {
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  body.works .about-box {
    margin-bottom: 8px;
  }
}

/* ======================================
   MOBILE VERTICAL OFFSET (NO SCALING)
====================================== */

@media (max-width: 600px) {
  body.works .about-frame {
    margin-top: 180px; /* slightly lower */
  }
}

@media (max-width: 420px) {
  body.works .about-frame {
    margin-top: 160px; /* still a bit lower on very small phones */
  }
}

body.works .work-video {
  opacity: 0;
  transform: translateY(12px);
  animation: video-fade-in 1.4s ease forwards;
  animation-delay: 0.6s;
}

@keyframes video-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================
   PANEL SYSTEM (WORK PAGES)
============================== */

body.works {
  overflow: hidden; /* no page scroll */
}

/* frame */
.panel-frame {
  position: relative;
  margin-top: 140px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* nav buttons */
.panel-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-nav button {
  font-family: "VT323", monospace;
  font-size: 18px;
  background: none;
  color: #aaa;
  border: 1px solid #444;
  padding: 6px 14px;
  cursor: pointer;
}

.panel-nav button.active {
  color: #fff;
  border-color: #fff;
}

/* horizontal track */
.panel-track {
  display: flex;
  width: 200%;
  transition: transform 0.45s ease;
}

/* single panel */
.panel {
  width: 100vw;
  display: flex;
  justify-content: center;
}

/* video sizing */
.work-video iframe {
  width: 80vw;
  max-width: 900px;
  height: 50vh;
  min-height: 320px;
  border: none;
}

/* mobile adjustment */
@media (max-width: 600px) {
  .panel-frame {
    margin-top: 180px;
  }

  .work-video iframe {
    width: 90vw;
    height: 45vh;
  }
}

/* =====================================
   HORIZONTAL PANEL SYSTEM — FIXED
===================================== */

body.works {
  overflow: hidden; /* no scroll */
}

/* wrapper */
.panel-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* navigation */
.panel-nav {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.panel-nav button {
  background: none;
  border: 1px solid #aaa;
  color: #aaa;
  font-family: VT323, monospace;
  padding: 6px 14px;
  cursor: pointer;
}

.panel-nav button.active {
  color: #fff;
  border-color: #fff;
}

/* panel track */
.panel-track {
  display: flex;
  width: 200vw;
  height: 100vh;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* panel */
.panel {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* content column (CRITICAL FIX) */
.panel-content {
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: center;
}

/* ASCII box */
.about-box {
  font-size: 19px;
  line-height: 16px;
}

/* video */
.work-video {
  width: 100%;
  display: flex;
  justify-content: center;
}

.work-video iframe {
  width: 100%;
  height: 52vh;
  min-height: 320px;
  max-height: 520px;
  border: none;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

/* mobile adjustment */
@media (max-width: 600px) {
  .panel-nav {
    top: 160px;
  }

  .work-video iframe {
    height: 46vh;
    min-height: 260px;
  }
}

/* =====================================
   ASCII PANEL NAV — POSITION FIX
===================================== */

.ascii-nav {
  position: absolute;
  top: 150px;            /* ⬅️ LOWERED */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 20;
  font-family: VT323, monospace;
}

.ascii-nav a {
  text-decoration: none;
  color: #888;
  font-size: 18px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.ascii-nav a:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.ascii-nav a.active {
  color: #fff;
}

/* mobile adjustment */
@media (max-width: 600px) {
  .ascii-nav {
    top: 240px;
  }
}