/*
Theme Name: Small Press Index
Theme URI: https://example.com
Author: Your Name
Description: Ethereal Materials — a foggy, high-contrast constellation of keywords for theatre-in-VR research zines.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: small-press-index
*/

:root{
  --void: #060607;
  --void-2: #0b0c0e;
  --fog: #F3F3F1;
  --fog-dim: rgba(243,243,241,0.55);
  --fog-faint: rgba(243,243,241,0.28);
  --glow: rgba(243,243,241,0.9);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:var(--void);
  overflow:hidden;
  color:var(--fog);
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- */
/* Fog layer — slow drifting light blooms behind everything   */
/* ---------------------------------------------------------- */
#fog-layer{
  position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.fog-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  mix-blend-mode:screen;
  opacity:0.5;
}
.fog-blob.b1{
  width:52vw; height:52vw; left:-10vw; top:-10vh;
  background:radial-gradient(circle, rgba(243,243,241,0.16), transparent 70%);
  animation: driftA 46s ease-in-out infinite alternate;
}
.fog-blob.b2{
  width:44vw; height:44vw; right:-12vw; bottom:-14vh;
  background:radial-gradient(circle, rgba(243,243,241,0.13), transparent 70%);
  animation: driftB 58s ease-in-out infinite alternate;
}
.fog-blob.b3{
  width:34vw; height:34vw; left:38vw; top:30vh;
  background:radial-gradient(circle, rgba(243,243,241,0.10), transparent 70%);
  animation: driftC 64s ease-in-out infinite alternate;
}
@keyframes driftA{ from{ transform:translate(0,0); } to{ transform:translate(6vw, 8vh); } }
@keyframes driftB{ from{ transform:translate(0,0); } to{ transform:translate(-7vw, -6vh); } }
@keyframes driftC{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4vw, -5vh) scale(1.12); } }

/* ---------------------------------------------------------- */
/* Grain — visible on dark backgrounds via 'overlay' blend     */
/* ---------------------------------------------------------- */
#grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:0.5;
  mix-blend-mode:overlay;
}

/* Always-visible faint threads between related keywords — sits below
   #stage so orbs float visually above the connective web. */
svg#kinship{
  position:fixed; inset:0; width:100%; height:100%; z-index:3;
  pointer-events:none;
}

#stage{
  position:fixed; inset:0; overflow:hidden; z-index:4;
}

.node-anchor{
  position:absolute; left:0; top:0; width:0; height:0;
  will-change:transform;
}

header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:28px 30px;
  pointer-events:none;
}
header.site-header .logo{
  font-family: Georgia, 'Times New Roman', serif;
  font-style:italic;
  font-weight:400;
  font-size:22px;
  letter-spacing:0.5px;
  line-height:1.15;
  color:var(--fog);
  text-shadow:0 0 18px rgba(243,243,241,0.35);
}
header.site-header .logo span{
  display:block;
  font-family:'Courier New', Courier, monospace;
  font-style:normal;
  font-size:10px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  margin-top:8px;
  color:var(--fog-dim);
  text-shadow:none;
}
header.site-header .hint{
  font-family:'Courier New', Courier, monospace;
  font-size:10.5px;
  letter-spacing:0.8px;
  text-align:right;
  color:var(--fog-dim);
  max-width:230px;
  line-height:1.6;
  text-transform:uppercase;
  transition:opacity 1s ease;
}
header.site-header .hint.seen{
  opacity:0;
}

svg#lines{
  position:fixed; inset:0; width:100%; height:100%; z-index:6;
  pointer-events:none;
}
svg#kinship{
  position:fixed; inset:0; width:100%; height:100%; z-index:6;
  pointer-events:none;
}

/* ---------------------------------------------------------- */
/* Keyword orbs — small worlds that softly breathe/flicker     */
/* ---------------------------------------------------------- */
.node{
  position:absolute; z-index:10;
  border-radius:50%;
  transform:translate(-50%,-50%);
  /* lit-sphere shading: highlight upper-left, shadow lower-right,
     translucent core so it still reads as "ethereal" not solid rock.
     The first layer is a faint per-keyword color wash (see --hue,
     set in JS) — the "atmosphere" of this particular world. */
  background:
    radial-gradient(circle at 30% 30%, hsla(var(--hue, 210), 45%, 75%, 0.16), transparent 55%),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), transparent 42%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,0.30), transparent 55%),
    radial-gradient(circle, rgba(243,243,241,0.10), rgba(243,243,241,0.02) 75%);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  border:1px solid var(--fog-faint);
  cursor:pointer;
  user-select:none;
  box-shadow:
    0 0 30px hsla(var(--hue, 210), 55%, 75%, 0.14),
    inset -6px -6px 14px rgba(0,0,0,0.30),
    inset 4px 4px 10px rgba(255,255,255,0.12);
  opacity:1;
  filter:blur(0);
  transition:box-shadow 0.35s ease, border-color 0.35s ease, transform 0.15s ease,
    opacity 1.1s ease, filter 1.1s ease;
}
/* a faint Saturn-style ring, tinted per keyword — purely decorative */
.node::after{
  content:'';
  position:absolute; inset:-22% -6%;
  border:1px solid hsla(var(--hue, 210), 42%, 78%, 0.24);
  border-radius:50%;
  transform:rotate(-16deg);
  pointer-events:none;
}
.node .label{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  margin-top:12px;
  white-space:nowrap;
  color:var(--fog);
  font-family: Georgia, 'Times New Roman', serif;
  font-style:italic;
  letter-spacing:2.5px;
  text-transform:uppercase;
  text-shadow:0 0 12px hsla(var(--hue, 210), 55%, 78%, 0.4);
  transition:text-shadow 0.35s ease, color 0.35s ease;
}
.node.flicker{
  animation:flicker 7s ease-in-out infinite;
}
.node.active{
  border-color:hsla(var(--hue, 210), 50%, 80%, 0.55);
  box-shadow:
    0 0 60px hsla(var(--hue, 210), 60%, 78%, 0.28),
    inset -6px -6px 14px rgba(0,0,0,0.30),
    inset 4px 4px 10px rgba(255,255,255,0.18);
  animation-play-state:paused;
  opacity:1;
}
.node.active .label{
  text-shadow:0 0 20px rgba(243,243,241,0.85);
}
.node:active{ transform:translate(-50%,-50%) scale(0.96); }

@keyframes flicker{
  0%,100%{ opacity:0.82; }
  45%{ opacity:1; }
  55%{ opacity:0.72; }
  72%{ opacity:0.95; }
}

/* ---------------------------------------------------------- */
/* Zine thumbnails — blur in from the fog, desaturated covers  */
/* ---------------------------------------------------------- */
.thumb{
  position:absolute; z-index:9;
  width:96px; height:127px;
  transform:translate(-50%,-50%) scale(0.9);
  background:rgba(255,255,255,0.02);
  border:1px solid var(--fog-faint);
  backdrop-filter:blur(4px);
  box-shadow:0 0 24px rgba(243,243,241,0.10);
  opacity:0; filter:blur(6px);
  pointer-events:none;
  cursor:pointer;
  transition:opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.thumb.show{
  opacity:1; filter:blur(0); transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}
.thumb:hover{
  border-color:rgba(243,243,241,0.65);
  box-shadow:0 0 34px rgba(243,243,241,0.22);
}
.thumb .cover{
  position:absolute; inset:7px 7px 29px 7px;
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.15) brightness(0.92);
}
.thumb .cover.empty{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.03);
}
.thumb .cap{
  position:absolute; left:7px; right:7px; bottom:7px;
  font-family:'Courier New', Courier, monospace;
  font-size:9px; line-height:1.3; letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--fog-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------------------------------------------------- */
/* Reader overlay — fog parting to reveal a lit frame          */
/* ---------------------------------------------------------- */
#overlay{
  position:fixed; inset:0; z-index:100;
  background:radial-gradient(ellipse at center, rgba(10,10,11,0.94) 0%, rgba(2,2,3,0.98) 75%);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.35s ease;
}
#overlay.open{ opacity:1; pointer-events:auto; }

.reader{
  width:min(720px, 92vw); height:min(88vh, 900px);
  background:rgba(9,9,10,0.85);
  backdrop-filter:blur(24px);
  border:1px solid var(--fog-faint);
  box-shadow:0 0 100px rgba(243,243,241,0.10);
  display:flex; flex-direction:column;
  transform:translateY(10px) scale(0.97);
  transition:transform 0.35s ease;
}
#overlay.open .reader{ transform:translateY(0) scale(1); }

.reader-top{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid var(--fog-faint);
  gap:12px;
}
.reader-top .meta{ min-width:0; }
.reader-top .meta b{
  display:block;
  font-family:Georgia, 'Times New Roman', serif;
  font-style:italic; font-weight:400;
  font-size:16px; letter-spacing:0.4px;
  color:var(--fog);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reader-top .meta span{
  font-family:'Courier New', Courier, monospace;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--fog-dim);
}
.reader-top .actions{ display:flex; gap:14px; align-items:center; flex-shrink:0; }
.reader-top a.dl{
  font-family:'Courier New', Courier, monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  text-decoration:none; color:var(--fog-dim);
  border-bottom:1px dashed var(--fog-faint);
  transition:color 0.2s ease;
}
.reader-top a.dl:hover{ color:var(--fog); }
.reader-top button{
  font-family:Georgia, serif; font-size:16px;
  background:transparent; border:1px solid var(--fog-faint);
  color:var(--fog);
  width:32px; height:32px; cursor:pointer;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.reader-top button:hover{ border-color:rgba(243,243,241,0.6); box-shadow:0 0 16px rgba(243,243,241,0.15); }

.reader-frame{
  flex:1; margin:18px; border:1px solid var(--fog-faint);
  overflow:hidden; background:#050506;
}
.reader-frame iframe{ width:100%; height:100%; border:0; display:block; }
.reader-frame .empty{
  height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'Courier New', Courier, monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--fog-dim);
}

@media (max-width: 640px){
  header.site-header .hint{ display:none; }
  .reader{ width:96vw; height:92vh; }
}

@media (prefers-reduced-motion: reduce){
  .node{ animation:none; }
  .fog-blob{ animation:none; }
  #spotlight{ display:none; }
  .dust{ animation:none; opacity:0; }
}

/* ---------------------------------------------------------- */
/* Cursor spotlight — a work light following the visitor       */
/* through the dark. Screen-blend so it only adds light.       */
/* ---------------------------------------------------------- */
#spotlight{
  position:fixed; top:0; left:0;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 35%, transparent 70%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:15;
  will-change:transform;
}
@media (hover: none){
  #spotlight{ display:none; } /* touch devices have no cursor to follow */
}

/* ---------------------------------------------------------- */
/* Ambient dust — small drifting motes filling empty stretches  */
/* of the stage so it never reads as broken/empty.              */
/* ---------------------------------------------------------- */
#dust-layer{
  position:fixed; inset:0; z-index:2; overflow:hidden; pointer-events:none;
}
.dust{
  position:absolute;
  background:var(--fog);
  border-radius:50%;
  filter:blur(0.5px);
  opacity:0;
  animation-name:dustDrift;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes dustDrift{
  0%{ opacity:0; transform:translateY(0); }
  12%{ opacity:var(--dust-opacity, 0.3); }
  88%{ opacity:var(--dust-opacity, 0.2); }
  100%{ opacity:0; transform:translateY(-46px); }
}