/* ═══════════════════════════════════════════
   WHEN WE LOOK AT THE SUN
   Base layout, camera, narrator, regions
   System fonts only. Minimal CSS — let HTML do the work.
   ═══════════════════════════════════════════ */

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

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:#000;
  cursor:default;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
}

/* ── CAMERA + CANVAS ── */
#camera { position:fixed; inset:0; overflow:hidden; }

#canvas {
  position:absolute; top:0; left:0;
  width:13500px; height:4500px;
  background:#000;
  transition: transform 2.8s cubic-bezier(0.22, 0.0, 0.0, 1);
}

/* ── REGIONS ── */
.region { position:absolute; width:100vw; height:100vh; overflow:hidden; }
.region-inner { width:100%; height:100%; position:relative; }

/* Region positions — HORIZONTAL spread in px (viewport-independent)
   Canvas: 12000 × 8000. Regions: 100vw × 100vh each.
   Scattered across the full plane, staggered vertically.
   Big gaps between some, tighter between others. */
#region-a { left:200px;    top:400px; }
#region-b { left:2200px;   top:1800px; }
#region-c { left:3800px;   top:300px; }
#region-d { left:5600px;   top:2200px; }
#region-e { left:7000px;   top:600px; }
#region-f { left:8800px;   top:1400px; }
#region-g { left:10200px;  top:200px; }
#region-h { left:11000px;  top:2800px; }
#region-i { left:12300px;  top:1500px; }

/* Credits scroll animation */
@keyframes creditsScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* ── SHARED ── */
.blink { animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cursor { display:inline-block; animation:blink 600ms step-end infinite; color:inherit; }
.hidden { display:none !important; }

/* ═══════════════════════════════════════════
   NARRATOR BAR
   ═══════════════════════════════════════════ */
#narrator {
  position:fixed; bottom:0; left:0; right:0;
  z-index:500;
  background:rgba(0,0,0,0.92);
  border-top:1px solid #222;
  padding:14px 48px 18px;
  pointer-events:none;
}
#narrator-label {
  font-family:'Courier New', Courier, monospace;
  font-size:9px; color:#333;
  letter-spacing:0.25em; text-transform:uppercase;
  margin-bottom:6px;
}
#narrator-text {
  font-family:'Courier New', Courier, monospace;
  font-size:15px; color:#e0e0e0;
  line-height:1.6; max-width:900px; min-height:1.6em;
}
#narrator-hint {
  font-family:'Courier New', Courier, monospace;
  font-size:10px; color:#333;
  letter-spacing:0.15em; margin-top:8px;
  animation:blink 1.4s step-end infinite;
  display:none; pointer-events:auto; cursor:pointer;
}
#narrator-hint.show { display:block; }

/* ═══════════════════════════════════════════
   REGION A: OPENING
   ═══════════════════════════════════════════ */
.opening {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:#000;
}
.opening::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 5% 10%,#fff 100%,transparent),
    radial-gradient(1px 1px at 15% 30%,#aaf 100%,transparent),
    radial-gradient(1px 1px at 25% 55%,#fff 100%,transparent),
    radial-gradient(1px 1px at 35% 15%,#ffa 100%,transparent),
    radial-gradient(1px 1px at 48% 70%,#fff 100%,transparent),
    radial-gradient(1px 1px at 58% 25%,#aff 100%,transparent),
    radial-gradient(1px 1px at 68% 80%,#fff 100%,transparent),
    radial-gradient(1px 1px at 78% 40%,#faf 100%,transparent),
    radial-gradient(1px 1px at 88% 60%,#fff 100%,transparent),
    radial-gradient(1px 1px at 92% 12%,#aaf 100%,transparent),
    radial-gradient(1px 1px at 10% 85%,#fff 100%,transparent),
    radial-gradient(1px 1px at 42% 92%,#ffa 100%,transparent),
    radial-gradient(1px 1px at 72% 5%,#fff 100%,transparent),
    radial-gradient(1.5px 1.5px at 30% 45%,rgba(255,255,255,0.5) 100%,transparent),
    radial-gradient(1.5px 1.5px at 60% 65%,rgba(200,200,255,0.4) 100%,transparent);
  pointer-events:none;
}
#opening-scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,0.1) 2px 4px);
}
.file-icon {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; z-index:3; animation:bob 3s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.file-icon-body { width:52px; height:60px; background:#fff; border:1px solid #808080; position:relative; }
.file-icon-fold { position:absolute; top:0; right:0; width:0; height:0; border-left:12px solid #c0c0c0; border-bottom:12px solid transparent; }
.file-icon-ext { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-family:Tahoma,sans-serif; font-size:9px; color:#000080; font-weight:bold; }
.file-icon-name { font-family:'Courier New',monospace; font-size:11px; color:#888; }
#opening-title {
  margin-top:30px; font-family:Georgia, 'Times New Roman', serif;
  font-size:32px; color:#fff; text-align:center; z-index:3;
  min-height:1.2em; font-weight:normal; letter-spacing:0.02em;
}

/* ═══════════════════════════════════════════
   REGION B: Pinboard / scrapbook
   ═══════════════════════════════════════════ */
.ac-section { display:none; }
.ac-section.active { display:block; }

.pinboard {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
  padding:20px 40px 60px;
  max-width:920px;
  margin:0 auto;
}
.pinboard .span-full { grid-column:1 / -1; }
.pinboard .col-left  { grid-column:1; }
.pinboard .col-right { grid-column:2; }
.pin {
  margin-bottom:0;
  padding:12px 14px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:13px;
  color:#cccccc;
  line-height:1.6;
}
/* win95 file window style */
.pin.note, .pin.note-grey, .pin.note-purple {
  background:#c0c0c0;
  color:#000;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  box-shadow:2px 2px 0 #000;
  padding:0;
}
.pin.note > *, .pin.note-grey > *, .pin.note-purple > * { padding:0; }
.pin.note::before, .pin.note-grey::before, .pin.note-purple::before {
  content:'';
  display:block;
  height:18px;
  background:linear-gradient(90deg,#000080,#1084d0);
  margin-bottom:0;
}
.pin.note, .pin.note-grey, .pin.note-purple {
  padding:8px 10px;
  padding-top:0;
}
.pin.note-sm {
  background:none;
  border:none;
  box-shadow:none;
  font-family:'Courier New',monospace;
  font-size:11px;
  color:#888888;
}
.pin.quote {
  background:#c0c0c0;
  color:#333;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  box-shadow:2px 2px 0 #000;
  border-left:5px solid #000080;
  padding:10px 14px;
  font-style:italic;
}
.pin.quote cite {
  display:block;
  margin-top:6px;
  font-family:'Times New Roman',Times,serif;
  font-size:12px;
  color:#555;
  font-style:italic;
}
.pin.artifact {
  text-align:center;
  padding:8px;
}
.pin.artifact img { image-rendering:pixelated; }
.pin.artifact .cap {
  font-family:'Comic Sans MS',cursive;
  font-size:11px;
  color:#aa99cc;
  margin-top:4px;
}
.pin.diagram {
  background:#1a1a1a;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  box-shadow:2px 2px 0 #000;
  font-family:'Courier New',monospace;
  font-size:12px;
  color:#8a8;
  white-space:pre-wrap;
  line-height:1.7;
}
.pin.label {
  font-family:Georgia,serif;
  font-size:18px;
  color:#ccccff;
  text-align:center;
  font-weight:bold;
  padding:8px 0;
  background:none;
}
.pin.highlight {
  background:#c0c0c0;
  color:#000;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  box-shadow:2px 2px 0 #000;
  padding:8px 10px;
}
.pin.highlight::before {
  content:'';
  display:block;
  height:18px;
  background:linear-gradient(90deg,#000080,#1084d0);
  margin:-8px -10px 8px;
}
.pin.highlight em {
  font-family:'Courier New',monospace;
  color:#cc0000;
  font-style:normal;
}
.pin.divider {
  text-align:center;
  padding:4px 0;
  background:none;
}

/* colour variations */
.pin.note-grey {
  background:rgba(180,180,180,0.12);
  border:1px solid #555;
  color:#ddd;
}
.pin.note-purple {
  background:rgba(80,40,120,0.25);
  border:1px solid #554477;
  color:#ccaaee;
}
.pin.quote-warm {
  background:rgba(60,30,20,0.5);
  border-left:3px solid #884433;
  padding-left:16px;
  font-style:italic;
  color:#cc9977;
}
.pin.diagram-dark {
  background:rgba(10,10,10,0.8);
  border:1px solid #333;
  font-family:'Courier New',monospace;
  font-size:12px;
  color:#6a8a6a;
  white-space:pre-wrap;
  line-height:1.7;
}

/* rotations removed — CSS transforms did not exist in 1997 */

/* ═══════════════════════════════════════════
   REGIONS C + D: Screenshot slideshows
   ═══════════════════════════════════════════ */
.slideshow { position:relative; }
.slide { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.slide img { max-width:100%; max-height:100%; object-fit:contain; }
.slide:not(.slide-active) { display:none; }

/* ═══════════════════════════════════════════
   REGION E: THE SUN — all inline, 1:1 from archived art.htm
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   REGION F: 90s WEB CULTURE — Cameron's-World-style gif tile
   ═══════════════════════════════════════════ */
.flow-page {
  width:100%; padding:0;
}
/* small entrance — door anchored near top, not floating in 100vh of dead space */
.flow-entrance {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 20px 30px;
}
/* centered "hero" gifs — mark narrative milestones inside the gif tile */
.flow-hero {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 20px;
}
/* dense gif mosaic — flex-wrap so gifs pack tightly like Cameron's World */
.gif-wall {
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:3px;
  padding:10px 8px;
}
.gif-wall img {
  image-rendering:pixelated;
  display:block;
  max-height:170px;
}
.flow-img { image-rendering:pixelated; }
.flow-caption {
  font-family:'Courier New',monospace;
  font-size:10px; color:#777;
  margin-top:8px; text-align:center;
}
.flow-footer {
  text-align:center; padding:40px 20px 80px;
  font-family:'Courier New',monospace;
  font-size:11px; color:#777;
  line-height:2.2;
}

/* ═══════════════════════════════════════════
   REGION G: SHAMANIX KETHER
   ═══════════════════════════════════════════ */
.shamanix-page {
  background:#000 url('../assets/images/pents2.gif');
  overflow-y:auto;
}
.shx-page { width:640px; margin:0 auto; }

/* ═══════════════════════════════════════════
   REGION H: CLOSING — pure black
   ═══════════════════════════════════════════ */
.closing { background:#000; }

/* ═══════════════════════════════════════════
   POPUPS (spawned by events)
   ═══════════════════════════════════════════ */
#popups { position:fixed; inset:0; z-index:400; pointer-events:none; }
#popups * { pointer-events:auto; }

/* ═══════════════════════════════════════════
   PRINT LAYOUT
   ═══════════════════════════════════════════ */
@media print {
  #narrator { display:none !important; }
  #camera { position:static; overflow:visible; }
  #canvas {
    position:static; transform:none !important;
    width:auto; height:auto;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  }
  .region { position:static; width:100%; height:auto; min-height:600px; page-break-inside:avoid; }
}

/* ═══════════════════════════════════════════
   UNIFIED PANELS — wordsoup structure × yesterweb palette
   added 2026-05-06 · one panel grammar everywhere
   ═══════════════════════════════════════════ */
.pin,
.pin.note, .pin.note-grey, .pin.note-purple,
.pin.quote, .pin.quote-warm,
.pin.diagram, .pin.diagram-dark,
.pin.highlight,
.pin.artifact {
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid #e0479e !important;
  border-color: #e0479e !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #f0e8e8 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  line-height: 1.5 !important;
  padding: 14px 18px !important;
  /* font scales with panel width — short lines fill big panels */
  container-type: inline-size;
  font-size: clamp(15px, 4.8cqi, 30px) !important;
}

/* drop the win95 gradient title bars */
.pin.note::before, .pin.note-grey::before, .pin.note-purple::before,
.pin.highlight::before {
  content: none !important;
  display: none !important;
}

/* artifact panels (image cards): same border, centered, italic-pink caption */
.pin.artifact { text-align:center !important; padding:12px !important; }
.pin.artifact .cap {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 12px !important;
  color: #ff7ab8 !important;
  margin-top: 6px !important;
}

/* diagram boxes keep monospace (ASCII art needs it) but recoloured pink */
.pin.diagram, .pin.diagram-dark {
  font-family: 'Courier New', monospace !important;
  font-size: 12px !important;
  color: #f7c4dc !important;
  white-space: pre-wrap !important;
  line-height: 1.7 !important;
}

/* note-sm: small mono annotation, no box */
.pin.note-sm {
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  color: #cc8fb0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}

/* section labels (i. / ii. / iii. ...): no box, just hot-pink text */
.pin.label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ff3399 !important;
  font-family: Georgia, serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  text-align: center !important;
  padding: 10px 0 !important;
}

/* dividers: bare images, no box */
.pin.divider {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

/* highlight em ("imago", "IMAGE") -> hot-pink italic, not red courier */
.pin.highlight em {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  color: #ff3399 !important;
}

/* quote citations: subtle pink */
.pin.quote cite {
  color: #cc8fb0 !important;
  font-style: italic !important;
}