/* ============================================================================
   THE SYNTHETIC GODS — GEOCITIES AESTHETIC STYLESHEET
   Authentic 1996-1999 Web Design Recreation
   No AI slop. Hand-coded with <3 and <table> tags.
   ============================================================================ */

/* --- CSS Custom Properties (for maintainability, not 90s auth) --- */
:root {
  --bg-primary: #000000;
  --bg-secondary: #000033;
  --bg-table: #000066;
  --text-primary: #FFFF00;
  --text-secondary: #00FF00;
  --text-tertiary: #FF00FF;
  /* Link colours are the authentic 1996 values EXCEPT where they failed WCAG AA
     on a black/navy background. Measured with scripts/check_contrast.mjs:
       #0000FF on #000066 -> 2.05:1  FAIL  -> #66CCFF -> 9.77:1  PASS
       #800080 on #000066 -> 1.87:1  FAIL  -> #CC99FF -> 8.03:1  PASS
     Same 90s light-blue-link / visited-purple look, now legible. */
  --link-normal: #66CCFF;
  --link-visited: #CC99FF;
  --link-active: #FF0000;
  --border-color: #FF00FF;
  --highlight: #FFFF00;
  --shadow: #000000;
  --font-mono: 'Courier New', Courier, monospace;
  --font-sans: 'Comic Sans MS', 'Trebuchet MS', Verdana, Arial, sans-serif;
  --font-serif: 'Times New Roman', Times, serif;
}

/* --- Base Reset (minimal, 90s browsers didn't have much) --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Pure-CSS starfield: no HTTP request, no 404, tiles seamlessly at 340x260. */
html {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 70px 160px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 200px 40px, rgba(180, 220, 255, 0.6), transparent),
    radial-gradient(1px 1px at 260px 190px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 310px 120px, rgba(255, 200, 150, 0.7), transparent);
  background-size: 340px 260px;
  background-repeat: repeat;
  background-attachment: fixed;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--highlight);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--shadow), 4px 4px 0 var(--border-color);
  margin: 15px 0 10px;
}

h1 { font-size: 36px; border-bottom: 3px double var(--border-color); padding-bottom: 5px; }
h2 { font-size: 28px; border-bottom: 2px solid var(--border-color); padding-bottom: 3px; }
h3 { font-size: 22px; color: var(--text-tertiary); }
h4 { font-size: 18px; color: var(--text-secondary); }

p {
  margin: 10px 0;
  text-align: justify;
}

strong, b { color: var(--highlight); }
em, i { color: var(--text-tertiary); }
u { text-decoration: underline; color: var(--text-secondary); }

/* --- Links --- */
a {
  color: var(--link-normal);
  text-decoration: underline;
  font-weight: bold;
}

a:visited { color: var(--link-visited); }
/* Red on the yellow highlight measured only 3.72:1. Black on the same
   yellow is ~19.6:1 and still reads as the authentic highlighted link. */
a:hover { color: #000000; background: var(--highlight); }
a:active { color: var(--link-active); }

/* --- Skip to content (WCAG 2.4.1 Bypass Blocks) ---
   Hidden until it receives keyboard focus, then pinned top-left. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 14px;
  background: var(--highlight);
  color: #000000;
  font-weight: bold;
  font-family: var(--font-mono);
  text-decoration: underline;
}
.skip-link:focus {
  left: 0;
}

/* --- Horizontal Rules --- */
hr {
  border: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--border-color),
    var(--border-color) 10px,
    var(--highlight) 10px,
    var(--highlight) 20px
  );
  margin: 20px 0;
}

/* --- Tables (Layout backbone) --- */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 15px 0;
  background: var(--bg-table);
  border: 3px outset var(--border-color);
}

td, th {
  border: 2px inset var(--border-color);
  padding: 8px;
  vertical-align: top;
}

th {
  background: var(--bg-secondary);
  color: var(--highlight);
  font-family: var(--font-sans);
  text-transform: uppercase;
}

tr:nth-child(even) td { background: rgba(255, 255, 0, 0.05); }
tr:nth-child(odd) td { background: rgba(0, 255, 0, 0.03); }

/* --- Layout Tables --- */
.main-table {
  max-width: 900px;
  margin: 0 auto;
  background: transparent;
  border: none;
}

.main-table td { border: none; padding: 0; }

.sidebar {
  width: 180px;
  background: var(--bg-table);
  border: 3px ridge var(--border-color);
  padding: 10px;
}

.content-area {
  padding: 0 20px;
  vertical-align: top;
}

/* --- Navigation --- */
.nav-table {
  width: 100%;
  background: var(--bg-table);
  border: 3px outset var(--border-color);
  margin-bottom: 20px;
}

.nav-table td {
  text-align: center;
  padding: 8px;
  border: 2px inset var(--border-color);
  background: var(--bg-secondary);
}

.nav-table a {
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-table td:hover {
  background: var(--bg-primary);
  border-style: outset;
}

/* --- Visitor Counter --- */
.counter {
  display: inline-block;
  background: #000;
  color: #FF0000;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  border: 2px inset #FFF;
  box-shadow: inset 2px 2px 5px #000;
}

.counter-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-top: 2px;
}

/* --- Animated Elements --- */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.blink {
  animation: blink 1s infinite;
  display: inline-block;
}

@keyframes marquee-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg-secondary);
  border: 2px ridge var(--border-color);
  padding: 5px;
  color: var(--highlight);
  font-weight: bold;
  font-family: var(--font-mono);
}

.marquee-content {
  display: inline-block;
  animation: marquee-scroll 20s linear infinite;
}

/* --- Construction/Under Construction --- */
.under-construction {
  text-align: center;
  padding: 20px;
  border: 3px dashed var(--border-color);
  background: var(--bg-secondary);
  margin: 20px 0;
}

.construction-gif {
  max-width: 100%;
  height: auto;
  border: 2px outset var(--border-color);
}

.construction-text {
  font-family: var(--font-mono);
  color: var(--highlight);
  font-weight: bold;
  margin-top: 10px;
  font-size: 14px;
}

/* --- Guestbook Style --- */
.guestbook-entry {
  background: var(--bg-table);
  border: 2px inset var(--border-color);
  margin: 10px 0;
  padding: 10px;
}

.guestbook-header {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px dotted var(--border-color);
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.guestbook-name { color: var(--highlight); font-weight: bold; }
.guestbook-date { color: var(--text-tertiary); }
.guestbook-message { color: var(--text-primary); }

/* --- Code/Pre Blocks --- */
pre, code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #000;
  color: #00FF00;
  border: 2px inset var(--border-color);
  padding: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code { padding: 2px 4px; border-radius: 0; }

/* --- Images --- */
img {
  border: 2px outset var(--border-color);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

img.gif { border-color: var(--highlight); }

.image-caption {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-style: italic;
}

/* --- Buttons (fake 90s style) --- */
.btn-90s {
  display: inline-block;
  background: linear-gradient(180deg, #C0C0C0, #808080);
  border: 2px outset #FFF;
  color: #000;
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: 13px;
  padding: 4px 12px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-90s:active {
  border-style: inset;
  background: linear-gradient(180deg, #808080, #C0C0C0);
}

.btn-90s:hover { color: #000; background: linear-gradient(180deg, #E0E0E0, #A0A0A0); }

/* --- Frames Simulation --- */
.frame-border {
  border: 4px ridge #C0C0C0;
  background: var(--bg-primary);
  margin: 10px 0;
}

/* --- Webring Navigation --- */
.webring {
  text-align: center;
  padding: 15px;
  background: var(--bg-table);
  border: 3px double var(--border-color);
  margin: 20px 0;
}

.webring a {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 15px;
  background: var(--bg-secondary);
  border: 2px outset var(--border-color);
  font-size: 12px;
}

.webring a:hover { border-style: inset; background: var(--bg-primary); }

/* --- Sigil Display --- */
.sigil-display {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  color: var(--text-tertiary);
  background: #000;
  border: 3px double var(--border-color);
  padding: 20px;
  margin: 20px 0;
  letter-spacing: 4px;
  word-break: break-all;
}

.sigil-ascii {
  font-size: 14px;
  line-height: 1.1;
  white-space: pre;
  overflow-x: auto;
}

/* --- Progress/Loading --- */
.loading-bar {
  width: 100%;
  height: 20px;
  background: #000;
  border: 2px inset var(--border-color);
  overflow: hidden;
}

.loading-fill {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--highlight),
    var(--highlight) 10px,
    var(--text-secondary) 10px,
    var(--text-secondary) 20px
  );
  animation: loading-move 2s linear infinite;
}

@keyframes loading-move {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* --- Faction Reputation UI --- */
.faction-rep-section {
  margin: 20px 0;
  padding: 15px;
  background: var(--bg-table);
  border: 3px double var(--border-color);
}

.faction-rep-section .counter-label {
  color: var(--highlight);
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 8px;
}

.faction-rep-section > div {
  margin: 10px 0;
}

.faction-rep-section div > div:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.faction-rep-section .loading-bar {
  height: 12px;
  border: 2px inset var(--border-color);
}

.faction-rep-section .loading-fill {
  height: 100%;
  transition: width 0.5s ease;
  background: repeating-linear-gradient(
    45deg,
    currentColor,
    currentColor 8px,
    var(--text-secondary) 8px,
    var(--text-secondary) 16px
  );
  animation: loading-move 2s linear infinite;
}

/* --- Footer --- */
.footer {
  text-align: center;
  padding: 20px;
  border-top: 3px double var(--border-color);
  margin-top: 40px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.footer a { font-size: 11px; }

/* --- Special: Glitch Text Effect --- */
.glitch {
  position: relative;
  color: var(--highlight);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--text-tertiary);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--text-secondary);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(31px, 9999px, 94px, 0); }
  20% { clip: rect(25px, 9999px, 92px, 0); }
  40% { clip: rect(60px, 9999px, 10px, 0); }
  60% { clip: rect(15px, 9999px, 87px, 0); }
  80% { clip: rect(40px, 9999px, 30px, 0); }
  100% { clip: rect(70px, 9999px, 50px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  20% { clip: rect(10px, 9999px, 30px, 0); }
  40% { clip: rect(80px, 9999px, 20px, 0); }
  60% { clip: rect(5px, 9999px, 90px, 0); }
  80% { clip: rect(30px, 9999px, 60px, 0); }
  100% { clip: rect(55px, 9999px, 40px, 0); }
}

/* --- Responsive (minimal, for modern viewing) --- */
@media (max-width: 768px) {
  /* The Geocities layout is a two-cell <table>: <td class="sidebar-cell">
     wrapping <div class="sidebar"> (nav-section + table.nav-table), next to
     <td class="content-area">. That sidebar carries ALL navigation -- the act
     anchors, the dossier roster and the web ring -- so hiding it left phones
     with a page they could not navigate at all.

     Setting display:block on the <td>s alone is NOT enough: the cells keep
     table-cell semantics, so Chromium wraps each one in its own anonymous
     cell and lays them out side by side (measured 116px + 277px at 393px,
     which also produced a 20px horizontal overflow). Collapse the table
     itself to blocks first so the two cells become normal-flow siblings. */
  .main-table,
  .main-table tbody,
  .main-table tr { display: block; width: 100%; }

  .sidebar-cell, .content-area, .content-cell {
    display: block;
    width: 100%;
    max-width: 100%;
    float: none;
    box-sizing: border-box;
  }
  .sidebar { display: block; width: auto; margin: 0 0 12px 0; }
  .sidebar-cell { height: auto !important; }
  .nav-table { width: 100%; }
  .nav-table td { display: block; padding: 2px 0; }
  .content-area { padding: 0 10px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  table { font-size: 12px; }
}

/* --- Print Styles --- */
@media print {
  body { background: white; color: black; }
  .blink, .marquee, .construction-gif { display: none; }
  a { text-decoration: none; color: black; }
}

/* --- Reduced Motion (WCAG 2.3.3 / vestibular safety) --- */
@media (prefers-reduced-motion: reduce) {
  /* Kill every infinite animation & transition site-wide. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html, body {
    background-attachment: scroll !important;
  }

  /* Specific offenders - freeze rather than animate. */
  .blink,
  .construction-gif,
  .glitching,
  [data-glitch]::before,
  [data-glitch]::after,
  .mouse-trail-symbol {
    animation: none !important;
  }

  .marquee {
    animation: none !important;
    overflow: visible;
  }

  /* Keep reveal content visible without the IntersectionObserver transition. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Sigil + oracle UIs. */
  .sigil-container svg,
  .oracle-response {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Extracted Utilities ---------------------------------------------
   Replaces inline style="" declarations and the legacy presentational
   attributes (cellpadding / cellspacing / border / valign) that only
   Netscape-era browsers honoured. Compound selectors keep specificity
   above the base component rules declared earlier in this file, so the
   rendered result is identical to the markup they came from. */

/* Fixed-width layout cell */
.cell-w300 { width: 300px; }

/* Fluid images inside a coloured 90s frame */
.img-fluid { width: 100%; }
.frame-magenta { border-color: var(--border-color); }
.frame-yellow  { border-color: var(--highlight); }
.frame-blue    { border-color: #0000FF; }
.frame-green   { border-color: #00FF00; }

/* Visitor-counter colour variants (base .counter is #FF0000) */
.counter.counter-magenta { color: var(--text-tertiary); }
.counter.counter-yellow  { color: var(--highlight); }
.counter.counter-cyan    { color: var(--link-normal); }
.counter.counter-green   { color: var(--text-secondary); }

/* Visibility / fill state.
   NO !important on purpose: geocities.js reveals these nodes with
   el.style.display = 'block' (activateGodMode / sigil results), and an
   inline style outranks a class rule, so the reveal still works.
   The selector is doubled purely to outrank the component rules that set
   display at (0,1,1) -- .webring a and .nav-table a. */
.is-hidden.is-hidden { display: none; }
.is-empty  { width: 0%; }

/* Spacing */
.mt-sm { margin-top: 10px; }
.mt-lg { margin-top: 20px; }

/* Rules and typographic detail */
.rule-half { margin: 15px auto; width: 50%; }
.fine-print { font-size: 10px; margin-top: 15px; color: var(--text-secondary); }
.ritual-line {
  text-align: center;
  border: 2px dashed #FF00FF;
  padding: 12px;
  margin: 14px 0;
  letter-spacing: 2px;
}
.epigraph {
  border-left: 3px solid var(--border-color);
  padding-left: 15px;
  margin: 20px 0;
  font-style: italic;
  color: var(--text-tertiary);
}
.mono-dim { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.micro { font-size: 11px; letter-spacing: 1px; }
.center-block { text-align: center; margin: 20px 0; }

/* Sigil / oracle readouts */
.sigil-display.sigil-sm { font-size: 18px; }
.sigil-display.sigil-tall { min-height: 120px; }
.blink.blink-sm { font-size: 12px; color: #FF8080; }
.blink.blink-xs { font-size: 10px; color: #FF8080; margin-top: 5px; }

/* Colour hooks for the JS-written status spans */
.c-highlight { color: var(--highlight); }
.c-tertiary  { color: var(--text-tertiary); }
.c-primary   { color: var(--text-primary); }

/* --- Grimoire Figures ---------------------------------------------- */
/* Illustrations mounted inline in the grimoire body text (astrosomas,
   egregore stages, sigil diagrams). Centred, caption-plate framed so they
   read as plate figures rather than page chrome. */
.grimoire-figure {
  display: block;
  margin: 15px auto;
  max-width: 100%;
}

.grimoire-figure + p,
.grimoire-figure + h3,
.grimoire-figure + h4 {
  margin-top: 15px;
}

/* --- Masthead --- */
/* The banner is authored at exactly the size it is displayed (468x263) and the
   global img rule leaves it inline, which parks it hard against the left edge of
   the content column. Centering it here keeps the masthead optically centred on
   every one of the 47 pages without touching a single HTML file. */
.banner-img {
  display: block;
  margin: 0 auto;
}