@import url("common.css");

body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#myco, #myco-glow, #matrix-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* (the threads sit a little back from the words, which are the same green) */
#myco      { z-index: 0; opacity: .55; }
#myco-glow { z-index: 0; filter: blur(7px); opacity: .4; }
#matrix-canvas { z-index: 1; display: none; opacity: .45; }

main {
  position: relative; z-index: 2;
  /* clicking around the mycelium shouldn't keep selecting the words */
  -webkit-user-select: none; user-select: none;
  width: min(720px, 100% - 32px);
  margin: 18vh auto 22vh;
}

section + section { margin-top: 84px; }


.cmd { width: fit-content; max-width: 100%; color: var(--bright); margin-bottom: 18px; }
.cmd .ps { color: var(--prompt); }

.cursor {
  display: inline-block; width: .55em; height: 1em; margin-left: 1px;
  vertical-align: -.12em; background: var(--fg);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

h1 {
  margin: 0;
  font-size: var(--h1); font-weight: normal; line-height: 1.35;
  color: var(--bright);
}

.lies { display: inline-block; color: var(--warn); animation: lies 6s infinite; }
@keyframes lies {
  0%, 89%, 100% { text-shadow: -0.6px 0 #0000ff; transform: none; }
  90% { text-shadow: 2px 0 cyan, -2px 0 blue; transform: skewX(-3deg); }
  91% { text-shadow: -2px 0 cyan, 2px 0 blue; transform: skewX(3deg); }
  92% { text-shadow: none; transform: none; }
}

.dialogue { display: grid; gap: 6px; }
.dialogue .them { color: var(--fg); }
.dialogue .me   { color: var(--prompt); padding-left: 4ch; }

h2 { margin: 0 0 18px; font-size: 1em; font-weight: normal; color: var(--prompt); }
h3 { margin: 26px 0 6px; font-size: 1em; font-weight: normal; color: var(--muted); }
h2 + h3 { margin-top: 0; }

/* project rows: the old white-on-green hover, swept in. click to open */
.plist { list-style: none; margin: 0; padding: 0; }
.plist .row {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: 22ch 1fr; gap: 0 2ch;
  width: calc(100% + 2ch); padding: 3px 1ch; margin: 0 -1ch;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
  transition: padding .25s;
}
.plist .row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hover);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.6, 0, .2, 1);
}
.plist .name { color: var(--fg); }
.plist .desc { color: var(--prompt); }
.plist .row:hover::before, .plist .row:focus-visible::before { transform: scaleX(1); }
.plist .row:hover, .plist .row:focus-visible { padding-left: 2ch; }
.plist .row:focus { outline: none; }
.plist .row:hover span, .plist .row:focus-visible span { color: var(--bright); }
.plist .row[aria-expanded="true"] .name { color: var(--bright); }

/* what a row opens into */
.detail { padding: 6px 0 22px 24ch; color: var(--fg); }
.detail p + p { margin-top: 4px; }
.detail .meta { color: var(--muted); }
.plinks a, .links a { color: var(--bright); }
.plinks a:hover, .plinks a:focus-visible, .links a:hover, .links a:focus-visible { background: var(--hover); outline: none; }
.plinks a + a, .links a + a { margin-left: 2ch; }
.contact { color: var(--prompt); margin-bottom: .5em; }

/* the agents: the same rows as the projects, but each one goes to their own page.
   the personas have no pages yet, so their rows hold still */
.plist a.row { text-decoration: none; }
.agents .row { grid-template-columns: 24ch 1fr; }   /* (agent names run a little longer than project names) */
.plist .row.still { cursor: default; }
.plist .row.still::before { display: none; }
.plist .row.still:hover { padding-left: 1ch; }
.plist .row.still:hover span { color: inherit; }
.plist .row.still .name { color: var(--fg); }
.agents .empty .name { color: var(--muted); }
.agents-note { color: var(--muted); margin-bottom: .6em; }

/* previews: plain text that stays awake, the threads grow around it */
.pv { margin-top: 14px; color: var(--fg); }
.pv-cmt { color: var(--muted); }
.pv .log, .pv.god { height: calc(9 * 1.5em); overflow: hidden; }
.pv .log { display: flex; flex-direction: column; justify-content: flex-end; height: calc(8 * 1.5em); }
.pv .log p { overflow-wrap: anywhere; }
.pv .who { color: var(--prompt); }
.pv .mood.amber { color: var(--amber); }
.pv .mood.warn  { color: var(--warn); }
.pv .mood.dim   { color: var(--prompt); }
.pv .god-title { color: var(--bright); }
.pv .god-text { color: var(--fg); }

.palantir p + p { margin-top: 10px; }
.pal-banner { color: var(--warn); }
.pal-blurb { color: var(--bright); }
.pal-label { color: var(--prompt); }
.pal-log { white-space: pre; overflow: hidden; height: calc(6 * 1.5em); color: var(--fg); margin-top: 2px !important; font-size: .85em; line-height: 1.5; }
.pal-log::after { content: ""; display: inline-block; width: .55em; height: 1em; vertical-align: -.12em; background: var(--fg); animation: blink 1s step-end infinite; }
.pal-credit { color: var(--warn); }
.pal-note { color: var(--prompt); }
.pal-btns button { font: inherit; color: var(--prompt); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pal-btns button:first-child { color: var(--warn); }
.pal-btns button:hover, .pal-btns button:focus-visible { color: var(--bright); background: var(--hover); outline: none; }
.palantir.doom .pal-credit { color: var(--bright); background: #5c0000; display: inline-block; padding: 0 1ch; }

.np { color: #ffb000; margin-bottom: 10px; }
.controls { display: flex; gap: 1ch; }
/* the music, centered under the about */
.music { text-align: center; }
.music .controls { justify-content: center; }
.music #wave { margin-left: auto; margin-right: auto; }
#about h2, #projects h2, #agents h2, #links h2 { text-align: center; }
#welcome-msg { text-align: center; }
.about p { margin: 0 0 .6em; }
/* the song's waveform, drawn as it plays (home.js); a flat dim line when it's quiet */
#wave { display: block; width: 100%; max-width: 360px; height: 36px; margin-top: 10px; }
.controls button {
  font: inherit; color: var(--fg); background: none; border: 0; padding: 0 2px; cursor: pointer;
}
.controls button:hover { color: var(--bright); background: var(--hover); }
/* the music's own volume, unlike the site's sound slider: a bar of amber cells (like the song title) that fills up to the level.
   home.js keeps --v at the level, 0 to 1 */
.vol { margin-top: 8px; color: #ffb000; }
.vol label { display: inline-flex; align-items: center; gap: 1ch; }
.vol[hidden] { display: none; }
.vol input {
  -webkit-appearance: none; appearance: none; width: 140px; height: 12px; margin: 0; cursor: pointer;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, var(--bg) 7px 9px),
    linear-gradient(90deg, #ffb000 calc(var(--v, 1) * 100%), rgba(255,176,0,.2) 0);
}
.vol input::-webkit-slider-runnable-track { height: 12px; background: none; }
.vol input::-moz-range-track { height: 12px; background: none; }
.vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 12px; background: var(--bright); border: 0; border-radius: 0; opacity: 0; }
.vol input::-moz-range-thumb { width: 2px; height: 12px; background: var(--bright); border: 0; border-radius: 0; opacity: 0; }
.vol input:hover::-webkit-slider-thumb, .vol input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.vol input:hover::-moz-range-thumb, .vol input:focus-visible::-moz-range-thumb { opacity: 1; }
.vol input:focus-visible { outline: 1px dotted #ffb000; outline-offset: 3px; }

.muted { color: var(--muted); }
.end .ob { margin-top: 18px; }

/* words start asleep and wake when the mycelium reaches them */
.js .w { opacity: 0; }
.js .w.lit { opacity: 1; animation: wake 1s ease-out; }
@keyframes wake {
  0%   { opacity: 0; filter: blur(2px); }
  100% { opacity: 1; filter: none; }
}

/* ── prompt effects ── */
@keyframes hue { to { filter: hue-rotate(360deg); } }
body.party main { animation: hue .5s linear infinite; }
body.evil * { color: #ff0000 !important; }
body.noclip { transform: rotate(180deg); }
body.lsd main { filter: url(#melt); animation: hue 2s linear infinite, sway 7s ease-in-out infinite; }
@keyframes sway { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

#bsod {
  display: none; position: fixed; inset: 0; z-index: 99;
  padding: 60px 80px; background: #0000aa; color: #fff;
  font: 16px/1.8 Arial, Helvetica, sans-serif; cursor: pointer;
}
#bsod .face { font-size: 5em; margin-bottom: 20px; }

/* temporary, ?fonts */
#fontpick {
  position: fixed; left: 12px; bottom: 12px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 24px);
  font: 13px/1.4 monospace; color: var(--muted);
}
#fontpick button { font-size: 15px; color: var(--prompt); background: none; border: 0; padding: 0; cursor: pointer; }
#fontpick button:hover, #fontpick button.on { color: var(--bright); background: var(--hover); }

@media (max-width: 640px) {
  main { margin-top: 12vh; }
  h1 { font-size: calc(var(--h1) * .75); }
  .plist .row, .agents .row { grid-template-columns: 1fr; }
  .plist .desc { padding-left: 2ch; }
  .detail { padding-left: 2ch; }
  .pal-log { font-size: .7em; }
  #bsod { padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lies, .cursor, .pal-log::after { animation: none; }
  .js .w.lit { animation: none; }
}

/* ── corruption (corrupt-mask.js) ── */
.js .w.lit.rot { opacity: .22; filter: blur(.7px); }
.w.swapped { cursor: default; }
.lies.struck { text-decoration: line-through; text-decoration-thickness: 2px; }
.stuck { position: fixed; width: 2px; height: 2px; z-index: 5; pointer-events: none; }

/* ── falling through into the void ── */
.fall-veil {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  opacity: 0; transition: opacity 1.8s ease-in .5s;
  display: grid; place-items: center; pointer-events: none;
}
.fall-veil.dark { opacity: 1; pointer-events: auto; }
.fall-streaks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10000; pointer-events: none; }

.psyche {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10001; margin: 0; width: max-content; max-width: 100%;
  color: var(--bright); font-size: clamp(18px, 2.4vw, 28px); text-align: center; padding: 0 20px;
  transition: opacity 1s ease, letter-spacing 1.2s ease, filter 1s ease;
}
.psyche.gone { opacity: 0; letter-spacing: .45em; filter: blur(3px); }
body.falling { overflow: hidden; }
/* nothing on the mask answers the mouse once it's going (a lit row would hang there with its words gone) */
body.falling main { pointer-events: none; }

/* ── the glass: hairline chips where it's tapped, then the crack, drawing itself out from the tap ── */
#glass { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; overflow: visible; }
#glass path { fill: none; stroke: rgba(242,242,242,.55); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
#glass .chip path { stroke: rgba(242,242,242,.4); transition: opacity 9s ease; }
#glass .chip.gone path { opacity: 0; }
#glass .shatter path { stroke: rgba(242,242,242,.7); filter: drop-shadow(0 0 2px rgba(92,255,138,.35)); }
#glass .shatter.draw path:not(.hit) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: glass-draw .9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes glass-draw { to { stroke-dashoffset: 0; } }
#glass .shatter a { pointer-events: auto; cursor: pointer; }
#glass .shatter .hit { stroke: transparent; stroke-width: 16; }
#glass .shatter .hit-c { fill: transparent; }
#glass .shatter a:hover path:not(.hit) { stroke: rgba(92,255,138,.9); }
@media (prefers-reduced-motion: reduce) { #glass .shatter.draw path:not(.hit) { animation: none; stroke-dashoffset: 0; } }

/* corruption, at its worst: when there's no lie to cross out, the greeting is */
main h1.struck { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--warn); }