/* antimemetics.css — "blur it if you don't hold it" file room.
   Rides on cyber-goth.css for chrome (cursor, grid, vignette, corners,
   status bar, ticker). Everything here is .am-prefixed. The decay engine
   in antimemetics.js drives one custom prop per record: --d (0 held → 1 lost).
   ───────────────────────────────────────────────────────────────────── */

:root {
  --am-amber:  #E7C46B;
  --am-paper:  rgba(185,173,249,0.04);
  --blur-max:  7px;     /* JS lowers this under prefers-reduced-motion */
  --drift-max: 14px;
}

/* ── layout column ── */
.am {
  position: relative; z-index: 10;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 60px;
  display: flex; flex-direction: column;
}

/* ── title ── */
.am-titlewrap { position: relative; text-align: center; margin-top: 6px; }
.am-title {
  font-family: 'RoyaleCouture', serif;
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  line-height: 0.94; letter-spacing: 0.09em;
  color: var(--white);
  text-shadow: 0 0 20px rgba(116,215,254,0.45), 0 0 70px rgba(138,111,232,0.16);
  position: relative; z-index: 2;
}
.am-title .w1 { color: var(--cyan); }
.am-title .w2 { color: var(--lavender); }
.am-title-ghost {
  position: absolute; inset: 0; z-index: 1;
  font-family: 'RoyaleCouture', serif;
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  line-height: 0.94; letter-spacing: 0.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(222,151,231,0.14);
  transform: translate(5px, 6px);
  pointer-events: none; user-select: none;
  animation: am-ghost-drift 7s ease-in-out infinite;
}
@keyframes am-ghost-drift {
  0%,100% { transform: translate(5px,6px); opacity: .6; }
  50%     { transform: translate(-4px,3px); opacity: .25; }
}
.am-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.42em; text-transform: lowercase;
  color: rgba(222,151,231,0.4);
  text-align: center; margin: 14px 0 28px;
}

/* ── sticky HUD readout ── */
.am-hud {
  position: sticky; top: 26px; z-index: 14;
  display: flex; align-items: stretch; gap: 0;
  flex-wrap: wrap;
  margin: 0 auto 30px; padding: 9px 6px 9px 14px;
  background: rgba(4,4,14,0.74);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(138,111,232,0.22);
  border-radius: 3px;
}
.am-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 14px; min-width: 56px;
  border-right: 1px solid rgba(138,111,232,0.12);
}
.am-stat-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(185,173,249,0.45);
}
.am-stat-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 500; line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.am-amber { color: var(--am-amber); }
.am-red   { color: var(--pink-hot); }
.am-stat-exp .am-stat-v { color: rgba(116,215,254,0.85); }

.am-dose {
  margin-left: auto; align-self: stretch;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #04040e; background: var(--cyan);
  border: none; border-radius: 2px; cursor: none;
  transition: background .2s, color .2s, opacity .25s, transform .1s;
  box-shadow: 0 0 18px rgba(116,215,254,0.35);
}
.am-dose::before {
  content: '◊'; font-size: 12px; line-height: 1;
}
.am-dose:hover { background: var(--white); }
.am-dose:active { transform: translateY(1px); }
.am-dose.is-active {
  background: rgba(116,215,254,0.16); color: var(--cyan);
  box-shadow: 0 0 26px rgba(116,215,254,0.5);
}
.am-dose.is-cooling {
  background: rgba(120,120,150,0.14); color: rgba(185,173,249,0.5);
  box-shadow: none; cursor: none;
}

/* ── protocol blurb ── */
.am-protocol {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 300; font-size: 0.92rem; line-height: 1.7;
  color: rgba(237,232,255,0.72);
  max-width: 64ch; margin: 0 auto 36px; text-align: center;
}
.am-protocol em { color: var(--cyan); font-style: italic; }
kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78em;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(138,111,232,0.16);
  border: 1px solid rgba(138,111,232,0.3);
  color: var(--lavender);
}

/* ── file stack ── */
.am-files { display: flex; flex-direction: column; gap: 20px; }

.am-file {
  --d: 0;
  position: relative;
  padding: 18px 22px 20px;
  background: var(--am-paper);
  border: 1px solid rgba(185,173,249,0.16);
  border-radius: 2px;
  overflow: hidden;
  outline: none;
  /* the decay itself: blur, colour-drain, drift, fade — like a wash drying out */
  filter: blur(calc(var(--d) * var(--blur-max))) saturate(calc(1 - var(--d) * 0.85));
  opacity: calc(1 - var(--d) * 0.66);
  transform: translateX(calc(var(--d) * var(--drift-max))) skewX(calc(var(--d) * -1.2deg));
  transition: filter .55s ease, opacity .55s ease, transform .55s ease,
              border-color .55s ease, box-shadow .35s ease;
}
/* watercolour bleed-stain that spreads as the record is forgotten */
.am-file::before {
  content: ''; position: absolute; inset: -40%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 38% at 30% 30%, rgba(138,111,232,0.22), transparent 70%),
    radial-gradient(34% 40% at 72% 64%, rgba(116,215,254,0.16), transparent 72%),
    radial-gradient(30% 30% at 52% 88%, rgba(222,151,231,0.16), transparent 70%);
  opacity: calc(var(--d) * 0.9);
  filter: blur(14px);
  transform: scale(calc(0.6 + var(--d) * 0.7));
  transition: opacity .6s ease, transform .6s ease;
}
.am-file > * { position: relative; z-index: 1; }

/* held in attention → wet again, edge picks up the light */
.am-file.is-held {
  border-color: rgba(116,215,254,0.5);
  box-shadow: 0 0 0 1px rgba(116,215,254,0.12), 0 0 26px rgba(116,215,254,0.12);
}

.am-file-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
}
.am-file-id  { color: rgba(185,173,249,0.55); }
.am-file-cls { color: rgba(185,173,249,0.7); }
.am-file-cls::before {
  content: '●'; margin-right: 6px; font-size: 7px; vertical-align: middle;
}
.am-file-seen {
  margin-left: auto; color: rgba(116,215,254,0.5);
  font-variant-numeric: tabular-nums;
}

/* classification colour lives INSIDE the card (dot + label), borders stay uniform */
.am-file[data-cls="safe"]     .am-file-cls { color: #7CE0A0; }
.am-file[data-cls="euclid"]   .am-file-cls { color: var(--am-amber); }
.am-file[data-cls="keter"]    .am-file-cls { color: var(--pink-hot); }
.am-file[data-cls="thaumiel"] .am-file-cls { color: var(--cyan); }
.am-file[data-cls="redacted"] .am-file-cls { color: rgba(170,160,180,0.6); }

.am-file-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500; font-size: 1.42rem; line-height: 1.2;
  color: var(--white); margin-bottom: 9px;
  letter-spacing: calc(var(--d) * 0.1em);
}
.am-file-body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 300; font-size: 1rem; line-height: 1.68;
  color: rgba(237,232,255,0.82);
  letter-spacing: calc(var(--d) * 0.05em);
  white-space: pre-wrap;            /* corruption keeps spacing */
}

/* the predator — slightly off, never quite settled */
.am-file-predator { border-color: rgba(255,45,146,0.22); }
.am-file-predator::before {
  background:
    radial-gradient(38% 38% at 40% 34%, rgba(255,45,146,0.22), transparent 70%),
    radial-gradient(34% 40% at 70% 70%, rgba(138,111,232,0.2), transparent 72%);
}

/* ── lost state ── */
.am-lost-bar { display: none; }
.am-file.is-lost {
  border-style: dotted;
  border-color: rgba(170,160,180,0.3);
  filter: none; opacity: 0.5; transform: none;
}
.am-file.is-lost .am-file-name,
.am-file.is-lost .am-file-body { display: none; }
.am-file.is-lost .am-file-seen { color: rgba(255,45,146,0.6); }
.am-file.is-lost .am-lost-bar {
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(170,160,180,0.6);
}
.am-lost-blocks { color: rgba(255,45,146,0.55); letter-spacing: 0.05em; }

/* ── footer ── */
.am-footer { margin-top: 46px; text-align: center; }
.am-credit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.14em; line-height: 1.9;
  color: rgba(185,173,249,0.4);
  max-width: 60ch; margin: 0 auto;
}
.am-credit em { color: rgba(116,215,254,0.55); font-style: italic; }
.am-credit-dim { color: rgba(185,173,249,0.25); margin-top: 8px; }

/* ── mnestic dose flash ── */
#am-flash {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(116,215,254,0.5), transparent 70%),
    radial-gradient(80% 70% at 50% 50%, rgba(138,111,232,0.3), transparent 75%);
  mix-blend-mode: screen;
}
#am-flash.is-on { animation: am-flash 0.9s ease-out; }
@keyframes am-flash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── toast ── */
.am-toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 9991;
  transform: translate(-50%, 18px);
  max-width: 80vw;
  padding: 9px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--cyan);
  background: rgba(4,4,14,0.92);
  border: 1px solid rgba(116,215,254,0.4);
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(116,215,254,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.am-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── reduced motion: keep the concept, drop the lurch ── */
body.am-reduce .am-file {
  transform: none !important;
  transition: filter .25s ease, opacity .25s ease, border-color .25s ease;
}
body.am-reduce .am-title-ghost,
body.am-reduce #am-flash.is-on { animation: none; }

@media (max-width: 560px) {
  .am-hud { gap: 4px 0; }
  .am-dose { margin-left: 0; width: 100%; justify-content: center; padding: 10px; }
  .am-file-name { font-size: 1.24rem; }
}