/* ============================================================
   Arctic Robots – base.css
   Full HTML/CSS layout, no canvas-based rendering
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'TEXT';
  src: url('../fonts/Topaz_a500_v1.0.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'ASCII';
  src: url('../fonts/Topaz_a500_v1.0.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'HEADER';
  src: url('../fonts/BMSLA___.TTF') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Rufa';
  src: url('../fonts/RUFA.ttf') format('truetype');
  font-display: swap;
}

/* ---- Color palette ---- */
:root {
  --c0: #000000;
  --c1: #F2F0F0;
  --c2: #F6995C;
  --c3: #7469B6;
  --c4: #638889;
  --c5: #92C7CF;
  --c6: #FF9094;
  --c7: #56AD60;
  --ui-base: #3A394B;
  --border: #FFFFFF;
  --font-text: 'TEXT', 'Courier New', monospace;
  --font-header: 'HEADER', sans-serif;
  --font-ascii: 'ASCII', 'Courier New', monospace;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: var(--c1);
  font-family: var(--font-text);
  font-size: 16px;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAoMDwACAg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiAAAAAAAAAAAAAAAAAAAAIgAAAAAAAAAAAAAAAAAAIiIRAAAAAAAAAAAAAAAAACIiEQAAAAAAAAAAAAAAACIiEQAAAAAAAAAAAAAAAAAiIhEAAAAAAAAAAAAAAAAiIhEAAAAAAAAAAAAAAAAAIiIRAAAAAAAAAAAAIiIAIiIRAAAAAAAAAAAAACIiACIiEQAAAAAAAAAAAAAiIiIiEQAAAAAAAAAAAAAAIiIiIhEAAAAAAAAAAAAAACIiIhEAAAAAAAAAAAAAAAAiIiIRAAAAAAAAAAAAAAAAIiIiIhEAAAAAAAAAAAAAACIiIiIRAAAAAAAAAAAAAAAREREREQAAAAAAAAAAAAAAEREREREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////8/////P////A////wP///wA///8AP//8AP///AD//DAD//wwA//wAA//8AAP//AAP//wAD//8AD///AA///wAD//8AA///AAP//wAD//8AD///AA///w=='), auto;
}

/* ---- Background canvas ---- */
/* Fixed so it always covers the full browser viewport, not just #app's max-width */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- App shell ---- */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* ---- Header ---- */
#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding: 44px 12px 0;
  pointer-events: none;
}

#logo {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  image-rendering: pixelated;
  margin: 0 auto;
  transform: rotate(-4deg);
  transform-origin: center center;
  transition: max-width 0.35s ease;
}

/* Logo link: disabled on big logo, active only in compact mode */
#header a {
  display: block;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  cursor: default;
}

#header.compact a {
  pointer-events: auto;
  cursor: pointer;
}

/* Compact mode: all articles except #100 */
#header.compact #logo {
  max-width: 512px;
  margin: 0;        /* left-align in compact mode */
}

/* ---- Article content area ---- */
#content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 0;  /* bottom padding set dynamically by nav.js to match footer height */
  position: relative;
  z-index: 2;
  /* margin-top is set dynamically by nav.js to match the header height */
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--ui-base) #000;
}

#content::-webkit-scrollbar { width: 8px; }
#content::-webkit-scrollbar-track { background: #000; }
#content::-webkit-scrollbar-thumb { background: var(--ui-base); }
#content::-webkit-scrollbar-thumb:hover { background: var(--c3); }

/* ---- Footer ---- */
#footer {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 4px 8px;
  height: 100px;
  background: transparent;
  pointer-events: none;
}

/* ---- Music player bar ---- */
/* Replaces #music-visualizer; built dynamically by js/player.js */

#player-bar {
  display: flex;
  align-items: center;
  flex: 7;              /* 70% of the middle space */
  gap: 20px;
  height: 100px;         /* match cube button height */
  min-width: 0;         /* prevent flex overflow */
  pointer-events: auto;
}

/* Spacer consuming the remaining 30% of middle space */
#player-spacer {
  flex: 3;
  min-width: 0;
}

/* Play / stop button (image) */
#player-btn {
  width: 80px;
  height: 100px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: inherit;
  transition: transform 0.1s, opacity 0.15s;
}
#player-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
#player-btn:hover  { opacity: 0.85; }
#player-btn:active { transform: scale(0.9); }

/* Waveform canvas – fills available space */
#waveform-canvas {
  flex: 1;
  height: 100px;         /* match cube button / full footer height */
  min-width: 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Current song title */
#player-title {
  font-family:   var(--font-text);
  font-size:     14px;
  color:         var(--c4);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     140px;
  flex-shrink:   0;
  opacity:       0.8;
  align-self:    flex-end;
  padding-bottom: 4px;
}

/* ---- Legacy vol-bar styles kept in case anything references them ---- */
#music-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  padding-bottom: 2px;
}

.vol-bar {
  width: 6px;
  background: rgba(0, 200, 0, 0.6);
  height: 0;
  transition: height 60ms linear;
}

/* ---- CSS 3D cube menu buttons ---- */
#menu-buttons {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 4px;
  pointer-events: auto;
}

/* ---- Image menu buttons ---- */
.menu-btn {
  width: 80px;
  height: 100px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: inherit;
  transition: transform 0.1s, opacity 0.15s;
}
.menu-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.menu-btn:hover  { opacity: 0.85; }
.menu-btn:active { transform: scale(0.9); }
.menu-btn.pressed { transform: scale(0.9); opacity: 0.75; }

/* ---- Article ID display (bottom right) ---- */
#article-id-display {
  font-family: var(--font-text);
  font-size: 28px;
  color: var(--c2);
  opacity: 0.35;
  padding-bottom: 4px;
  min-width: 5ch;
  text-align: right;
  letter-spacing: 1px;
  flex-shrink: 0;
}

#article-id-display.typing {
  opacity: 1;
  color: var(--c2);
}

/* ---- Article typography ---- */

/* Article-level wrapper */
.article-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

.article-content h1 {
  font-family: var(--font-header);
  font-size: 1.6em;
  color: var(--c2);
  margin: 0.6em 0 0.3em;
  letter-spacing: 1px;
}

.article-content h2 {
  font-family: var(--font-header);
  font-size: 1.2em;
  color: var(--c3);
  margin: 0.8em 0 0.2em;
  letter-spacing: 1px;
}

.article-content p {
  margin: 0.3em 0;
}

.article-content a {
  color: var(--c5);
  text-decoration: none;
  cursor: inherit;
}

.article-content a:hover {
  color: var(--c2);
  text-decoration: underline;
}

/* Inline color classes */
.c0 { color: var(--c0); }
.c1 { color: var(--c1); }
.c2 { color: var(--c2); }
.c3 { color: var(--c3); }
.c4 { color: var(--c4); }
.c5 { color: var(--c5); }
.c6 { color: var(--c6); }
.c7 { color: var(--c7); }

/* Tab stop */
.tab {
  display: inline-block;
  min-width: 3em;
}

/* Right-align span */
.align-r {
  float: right;
}

/* Font size variants */
.sz-up  { font-size: 1.15em; }
.sz-dn  { font-size: 0.85em; }

/* ASCII art blocks */
pre.ascii {
  font-family: var(--font-ascii);
  font-size: 0.85em;
  color: var(--c5);
  white-space: pre;
  line-height: 1.15;
  margin: 0.3em 0;
  overflow-x: auto;
}

/* Article images */
img.article-img {
  display: block;
  max-width: 100%;
  margin: 1em auto;
}

/* Two-column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
}

@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  /* ---- Mobile layout: full-page scroll, fixed footer ---- */

  html, body {
    overflow: auto;
    height: auto;
  }

  #app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* Header flows naturally so content follows it */
  #header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 16px 12px 8px;
  }

  /* Always use compact (small) logo, centered */
  #logo,
  #header.compact #logo {
    max-width: 480px;
    margin: 0 auto;
  }

  /* Content scrolls with the page; no internal scrollbar */
  /* Bottom padding is set dynamically by nav.js to match footer height */
  #content {
    overflow-y: visible;
  }

  /* Footer sticks to the bottom of the viewport above the Safari address bar */
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    padding-bottom: max(env(safe-area-inset-bottom), 4px);
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
  }
}

/* ---- Keyboard article-number entry overlay ---- */
#article-id-display.typing::after {
  content: '_';
  animation: blink 0.8s step-end infinite;
}

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

/* ==========================================================
   Demo scene text-reveal effects
   nav.js applies a random .fx-* class to .article-content
   on every article load and removes it after the animation.
   ========================================================== */

/* EXIT – slides current content out to the left before navigation */
@keyframes fx-exit {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-110%); opacity: 0; }
}
.fx-exit {
  animation: fx-exit 0.28s cubic-bezier(0.55, 0, 1, 0.45) both;
  pointer-events: none;
}

/* 1 – Horizontal scroll-in from the right (classic Amiga scroller) */
@keyframes fx-hscroll {
  from { transform: translateX(110%); }
  to   { transform: translateX(0); }
}
.fx-hscroll {
  animation: fx-hscroll 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* 2 – Raster-bar wipe: stepped clip-path sweeps top to bottom */
@keyframes fx-raster {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0%   0); }
}
.fx-raster {
  animation: fx-raster 0.5s steps(20, end) both;
}

/* 3 – Rotozoomer: zoom in from large with slight spin */
@keyframes fx-zoom {
  from { transform: scale(5) rotate(12deg); opacity: 0; }
  50%  { opacity: 1; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}
.fx-zoom {
  animation: fx-zoom 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
  transform-origin: center top;
}

/* 4 – Bouncer: drop from above with gravity overshoot */
@keyframes fx-bounce {
  0%   { transform: translateY(-100px); opacity: 0; }
  55%  { transform: translateY(14px);   opacity: 1; }
  75%  { transform: translateY(-7px); }
  90%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}
.fx-bounce {
  animation: fx-bounce 0.55s ease both;
}

/* 5 – Glitch: chromatic-aberration jitter then settle */
@keyframes fx-glitch {
  0%   { transform: translateX(-12px) skewX(-8deg); filter: hue-rotate(180deg) brightness(2.5); opacity: 0; }
  12%  { transform: translateX(8px)   skewX(5deg);  filter: hue-rotate(90deg)  brightness(1.8); opacity: 1; }
  25%  { transform: translateX(-5px)  skewX(-3deg); filter: hue-rotate(45deg)  brightness(1.3); }
  40%  { transform: translateX(3px)   skewX(2deg);  filter: hue-rotate(20deg); }
  60%  { transform: translateX(-1px)  skewX(-1deg); filter: hue-rotate(5deg); }
  100% { transform: translateX(0)     skewX(0);     filter: none; opacity: 1; }
}
.fx-glitch {
  animation: fx-glitch 0.6s ease-out both;
}

/* 6 – Copper: sepia+hue-rotate wash clears to true colours */
@keyframes fx-copper {
  0%   { filter: sepia(1) hue-rotate(330deg) brightness(2.5) contrast(1.4); opacity: 0; }
  20%  { opacity: 1; }
  60%  { filter: sepia(0.6) hue-rotate(20deg) brightness(1.3) contrast(1.1); }
  100% { filter: none; opacity: 1; }
}
.fx-copper {
  animation: fx-copper 0.7s ease-out both;
}

/* 7 – Dissolve: heavy blur+brightness flash sharpens to clear */
@keyframes fx-dissolve {
  0%   { filter: blur(24px) brightness(3); opacity: 0; }
  25%  { opacity: 1; }
  100% { filter: blur(0) brightness(1); opacity: 1; }
}
.fx-dissolve {
  animation: fx-dissolve 0.65s ease-out both;
}

/* ==========================================================
   CRT Monitor Effect
   SVG #crt-bloom filter is defined inline in index.html
   ========================================================== */

/* Dark bezel visible through body's rounded corners */
html {
  background: #1a1a1a;
}

/* Screen-glass rounding + phosphor ambient glow ring */
body {
  border-radius: 18px;
  box-shadow:
    0 0 80px 12px rgba(70, 190, 70, 0.08),
    0 0 160px 40px rgba(50, 150, 50, 0.04);
  animation: crt-flicker 40s step-end infinite;
}

/* Phosphor bloom + subtle colour grading on the whole app */
#app {
  filter: url(#crt-bloom) brightness(1.06) contrast(1.07) saturate(1.15);
  transform: perspective(1200px) scale(1.02);
  transform-origin: center center;
  border-radius: 8px;
}

/* Scanlines overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    to bottom,
    transparent           0px,
    transparent           2px,
    rgba(0, 0, 0, 0.18)   2px,
    rgba(0, 0, 0, 0.18)   4px
  );
}

/* Vignette + CRT edge curvature simulation */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 92% 92% at 50% 50%,
    transparent 30%,
    rgba(0, 0, 0, 0.30) 55%,
    rgba(0, 0, 0, 0.70) 100%
  );
}

/* Occasional luminance flicker */
@keyframes crt-flicker {
  0%, 14%, 16%, 50%, 52%,
  80%, 82%, 100%  { opacity: 1; }
  15%             { opacity: 0.87; }
  51%             { opacity: 0.91; }
  81%             { opacity: 0.85; }
}

/* ---- VHS noise canvas ---- */
/* Fixed alongside bg-canvas so it covers the full viewport */
#noise-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9996;
  pointer-events: none;
  opacity: 0.045;
  /* Scale up the low-res canvas to full screen */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- WebGL cube canvas (desktop only) ---- */
#webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}