/* The Qualia and Quanta School */
/* no external requests. no tracking. no surveillance capitalism chrome. */

/* ── BASE TOKENS ─────────────────────────────────── */
/* :root provides fallback values used by decrypt.html and any page that
   doesn't declare a data-scheme. The lander themes override these below. */

:root {
  --bg:          #F7F3EE;
  --ink:         #1A1614;
  --ink-muted:   #52453E;
  --rule:        #D4C9BE;
  --qualia:      #8B3A2A;
  --quanta:      #1F3A5F;
  --serif:       Georgia, 'Times New Roman', serif;
  --mono:        'Courier New', Courier, monospace;
  --gutter:      clamp(1.5rem, 6vw, 4rem);
  --gap:         clamp(3rem, 6vw, 5rem);
  --body:        clamp(1.1rem, 2vw, 1.25rem);
  --glow-q:      none;
  --glow-qq:     none;
}

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

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  animation: arrive 0.6s ease both;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FOCUS INDICATORS ────────────────────────────── */
/* A visible ring for keyboard navigation across all interactive elements.
   :focus-visible only fires on keyboard focus, not on click — so sighted
   mouse users don't see the ring on every button press. */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── LAYOUT (decrypt.html) ───────────────────────── */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}

/* ── HEADER ──────────────────────────────────────── */

header {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.school-name {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(2.4rem, 7vw, 5rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  display: flex;
  flex-wrap: wrap;
  gap: 0.22em;
  align-items: baseline;
}

.name-the    { color: var(--ink-muted); font-style: italic; font-size: 0.65em; }
.name-qualia { color: var(--qualia); }
.name-amp    { color: var(--ink-muted); font-style: italic; font-size: 0.7em; }
.name-quanta { color: var(--quanta); }
.name-school { color: var(--ink); }

.school-sub {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 1.1rem;
}

/* ── RULE ────────────────────────────────────────── */

hr.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--gap) 0;
}

/* ── ARCHITECTURE LABEL (decrypt.html) ───────────── */

.arch-label {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--qualia);
  margin-bottom: 0.5rem;
}

/* ── HW COPY (decrypt.html prose) ───────────────── */

.hw-copy {
  font-size: var(--body);
  line-height: 1.8;
}

/* ── FOOTER ──────────────────────────────────────── */

footer {
  margin-top: var(--gap);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer-copy {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ── SCHEME TOGGLE ───────────────────────────────── */

.scheme-toggle {
  flex-basis: 100%;
  margin-top: 1.5rem;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding: 0.55em 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  transition: color 0.15s, border-color 0.15s;
  align-self: flex-start;
}

.scheme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.toggle-current { opacity: 0.45; text-decoration: line-through; }
.toggle-arrow   { opacity: 0.35; }

/* ── LANDING PAGE THEMES ─────────────────────────── */
/* Three color modes for the lander. Each defines --ink, --bg, --ink-muted,
   and the opacity variables used by brand and controls. */

[data-scheme="mono-dark"] {
  --bg:          #000;
  --ink:         #fff;
  --ink-muted:   #fff;
  --rule:        #fff;
  --brand-op:    0.28;
  --ctrl-op:     0.5;
  --overlay-bg:  rgba(0,0,0,0.92);
}

[data-scheme="mono-light"] {
  --bg:          #fff;
  --ink:         #000;
  --ink-muted:   #000;
  --rule:        #000;
  --brand-op:    0.3;
  --ctrl-op:     0.5;
  --overlay-bg:  rgba(255,255,255,0.94);
}

[data-scheme="synthwave-noir"] {
  --bg:          #07040F;
  --ink:         #C8BFEE;
  --ink-muted:   rgba(200,191,238,0.18);
  --brand-op:    0.25;
  --ctrl-op:     0.5;
  --overlay-bg:  rgba(7,4,15,0.90);
}

/* Fog layers for synthwave-noir — subtle gradient pools at fixed positions.
   Implemented as body pseudo-elements so they sit below the cloud (z-index 0)
   without requiring extra DOM nodes. */
[data-scheme="synthwave-noir"] body::before,
[data-scheme="synthwave-noir"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
[data-scheme="synthwave-noir"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 18% 55%, rgba(110,30,180,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 82% 25%, rgba(0,140,200,0.07) 0%, transparent 65%);
}
[data-scheme="synthwave-noir"] body::after {
  background:
    radial-gradient(ellipse 55% 40% at 65% 78%, rgba(190,20,110,0.06) 0%, transparent 60%);
}

/* ── LANDING LAYOUT ──────────────────────────────── */

html, body {
  height: 100%;
}

body {
  background: var(--bg, #0D0D0B);
  color:      var(--ink, #E8E4DC);
  margin: 0;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

/* ── CANVAS (life / beam modes) ──────────────────── */
/* Hidden by default; JS sets display:block when entering life or beam mode
   and restores display:none via clearAutomata() on mode exit.
   pointer-events are also managed by JS: none by default, auto in life mode
   (to allow click-to-seed), none in beam mode (canvas is display-only). */

#automata {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: none;
}

/* ── BRAND ───────────────────────────────────────── */
/* The brand is a fixed element that starts centered (via .brand-intro) then
   transitions to its randomly-assigned corner. Transitions cover all the
   geometric properties that change during the retreat so the movement is
   smooth rather than teleporting. */

.brand {
  position: fixed;
  z-index: 10;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: var(--brand-op, 0.28);
  line-height: 1;
  white-space: nowrap;
  transition:
    top       1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    left      1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    right     1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    bottom    1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    transform 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    font-size 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    opacity   1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Corner positions — the data-corner attribute is set randomly at load time */
.brand[data-corner="tl"] { top: 1.6rem; left: 1.8rem; }
.brand[data-corner="tr"] { top: 1.6rem; right: 1.8rem; }
.brand[data-corner="bl"] { bottom: 1.6rem; left: 1.8rem; }
.brand[data-corner="br"] { bottom: 1.6rem; right: 1.8rem; }

/* Intro state: centered, full name visible, readable size.
   The !important overrides are needed because .brand[data-corner] rules
   set top/left/right/bottom with specificity equal to .brand-intro —
   !important ensures the intro position wins during the opening sequence. */
.brand-intro {
  top:       50% !important;
  left:      50% !important;
  right:     auto !important;
  bottom:    auto !important;
  transform: translate(-50%, -50%);
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  opacity:   0.75 !important;
}

/* During intro: tag hidden, full name shown */
.brand-intro .brand-tag  { opacity: 0; }
.brand-intro .brand-full { opacity: 1; }

/* Tag/full name swap transitions — same easing as the brand movement */
.brand-tag  { transition: opacity 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
.brand-full {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Expanded state (brand morph cycle): full name comes forward */
.brand.expanded .brand-tag  { opacity: 0; }
.brand.expanded .brand-full { opacity: 1; }

/* ── CLOUD ───────────────────────────────────────── */

.cloud {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Individual cloud words. cursor:pointer signals interactivity —
   the 2-second dwell is the mechanic, but pointer indicates affordance. */
.cw {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 1.8s ease;
}

.cw.dwelling {
  opacity: 1 !important;
  transition: opacity 1.8s ease;
}

.cw.grabbed {
  opacity: 0.9 !important;
  transition: opacity 0.3s ease;
}

.cq { font-style: italic; }

.s-sm { font-size: clamp(0.75rem, 1.4vw, 1rem); }
.s-md { font-size: clamp(1rem,   2.2vw, 1.6rem); }
.s-lg { font-size: clamp(1.5rem, 3.5vw, 2.6rem); }
.s-xl { font-size: clamp(1.9rem, 4.5vw, 3.4rem); }

/* Drift animation: word rises from below the fold across the viewport height.
   --wa is set inline per word so each element has its own opacity ceiling
   without a separate class or attribute — the keyframe reads it as a variable. */
@keyframes word-rise {
  0%   { opacity: 0;               transform: translateY(0); }
  10%  { opacity: var(--wa, 0.15); }
  82%  { opacity: var(--wa, 0.15); }
  100% { opacity: 0;               transform: translateY(-115vh); }
}

/* ── CONTROLS ────────────────────────────────────── */

.lander-controls {
  position: fixed;
  bottom: 1.4rem;
  right: 1.8rem;
  z-index: 10;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

/* Controls are ambient but now clearly legible at rest.
   Padding satisfies 44px minimum touch target height (0.6rem top + 0.6rem bottom
   at 16px base = 19.2px padding; the label text adds the rest to clear 44px). */
.lctrl {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: var(--ctrl-op, 0.5);
  padding: 0.6rem 0.5rem;
  transition: opacity 0.4s ease;
}

.lctrl:hover { opacity: 0.85; }
.lctrl-label { opacity: 0.55; }
.lctrl-val   { margin-left: 0.4em; }

/* ── GRAB BAG ────────────────────────────────────── */

.bag {
  position: fixed;
  bottom: 1.4rem;
  left: 1.8rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.bag.bag-empty .bag-handle { opacity: 0; pointer-events: none; }

.bag-handle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
  opacity: var(--ctrl-op, 0.5);
  transition: opacity 0.8s ease;
}
.bag-handle:hover { opacity: 0.75; }

.bag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.4;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.bag-dot.has-items {
  opacity: 1;
  transform: scale(1.3);
}

.bag-count {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.7;
}

.bag-contents {
  background: var(--bg);
  border: 1px solid rgba(128,128,128,0.18);
  padding: 0.9rem 1rem;
  min-width: 16rem;
  max-width: 22rem;
}

.bag-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.bag-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.bag-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.82rem;
  color: var(--ink);
  opacity: 0.8;
  text-decoration: none;
  font-style: italic;
}
a.bag-label:hover { opacity: 1; text-decoration: underline; }

.bag-rm {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.65rem;
  color: var(--ink);
  opacity: 0.25;
  padding: 0;
  line-height: 1;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.bag-rm:hover { opacity: 0.6; }

.bag-actions {
  display: flex;
  gap: 1rem;
  border-top: 1px solid rgba(128,128,128,0.15);
  padding-top: 0.6rem;
}

.bag-act {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.35;
  padding: 0;
  transition: opacity 0.2s;
}
.bag-act:hover { opacity: 0.75; }
.bag-act-clear { margin-left: auto; }

/* ── AUTOMATA ATTRIBUTION ────────────────────────── */
/* Small label crediting the underlying algorithm — Life or beam search.
   Fades in slowly after the mode is established; positioned opposite the
   brand corner by JS setting inline style on the element. */

.automata-attr {
  position: fixed;
  z-index: 5;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.automata-attr.visible { opacity: 0.22; }

/* ── KEYGEN / DECRYPT ────────────────────────────── */

.keygen {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.keygen-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--qualia);
  color: var(--qualia);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  padding: 0.6em 1.1em;
  transition: background 0.15s, color 0.15s;
}

.keygen-btn:hover:not(:disabled) {
  background: var(--qualia);
  color: var(--bg);
}

.keygen-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.keygen-result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.keygen-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--qualia);
}

.key-display {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.key-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.key-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.2rem;
}

.key-note {
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0.05em;
}

.key-warning {
  color: var(--qualia);
  text-transform: none;
  letter-spacing: 0.05em;
}

.key-hex {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-all;
  white-space: pre-wrap;
  border: 1px solid var(--rule);
  padding: 0.6em 0.8em;
  max-height: 12rem;
  overflow-y: auto;
}

.key-copy {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.3em 0.7em;
  transition: color 0.15s, border-color 0.15s;
}

.key-copy:hover { color: var(--ink); border-color: var(--ink-muted); }

.key-decrypt-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.key-decrypt-hint a { color: var(--quanta); }

/* ── OVERLAY (keygen + goal panels on lander) ────── */
/* Shared container for any lander overlay panel.
   Word cloud remains active behind it — the visitor knows where they came from. */
.lander-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  background: var(--overlay-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  animation: fade-in 0.22s ease both;
}

.lander-overlay-close {
  position: fixed;
  top: 1.4rem;
  right: 1.8rem;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  line-height: 1;
  z-index: 11;
  transition: color 0.15s;
}
.lander-overlay-close:hover { color: var(--ink); }

.lander-overlay-inner {
  width: min(40rem, 100%);
  padding-top: 2rem; /* clear the close button */
}

/* Goal form additions */
.goal-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.goal-images {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.goal-result {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* decrypt page */
.decrypt-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.key-textarea {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 0.6em 0.8em;
  resize: vertical;
  width: 100%;
}

.key-textarea:focus {
  outline: 1px solid var(--quanta);
  border-color: var(--quanta);
}

.decrypt-output {
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

/* ── REDUCED MOTION ──────────────────────────────── */
/* When the user has configured their OS for reduced motion, we suppress
   all CSS transitions and the drift keyframe animation. The JS layer also
   reads this preference to slow the Life tick interval (100ms → 500ms)
   and to default new visitors to still mode. */

@media (prefers-reduced-motion: reduce) {
  .brand,
  .brand-tag,
  .brand-full,
  .cw {
    transition-duration: 0.01ms !important;
  }

  /* Collapse the drift keyframe to a static opacity — word appears and stays
     rather than rising. Still visible; not distracting. */
  @keyframes word-rise {
    0%, 100% { opacity: var(--wa, 0.15); transform: none; }
  }

  /* body arrive animation is cosmetic — suppress it */
  body { animation: none; }
}