/* ============================================================
   SECURE MINDS · v2 — NEON BLACK ICE (cyberpunk overhaul)
   Self-contained. Self-hosted fonts. CSP-clean.
   ============================================================ */
@font-face { font-family:"Plex Mono"; src:url("/assets/fonts/plexmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/assets/fonts/plexmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root {
  --void: #04050b;
  --panel: rgba(9, 14, 24, 0.66);
  --cyan: #22e6ff;
  --cyan-d: rgba(34, 230, 255, 0.42);
  --mag: #ff2d7e;
  --mag-d: rgba(255, 45, 126, 0.42);
  --red: #ff3b46;
  --green: #38ffb0;
  --ink: #d7e6ee;
  --soft: #5d7180;
  --line: rgba(34, 230, 255, 0.16);
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, monospace;
  --glow-c: 0 0 6px rgba(34,230,255,0.9), 0 0 22px rgba(34,230,255,0.45);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void); color: var(--ink);
  font-family: var(--mono); font-size: clamp(0.98rem, 1vw + 0.66rem, 1.08rem);
  line-height: 1.62; overflow-x: hidden; position: relative;
}
a { color: var(--cyan); text-decoration: none; }
::selection { background: var(--mag); color: #0a0206; }
.wrap { width: min(1080px, 100%); margin: 0 auto; padding: 0 clamp(1.3rem, 5vw, 3.2rem); }

/* ---- atmosphere layers ---- */
#rain { position: fixed; inset: 0; z-index: 0; opacity: 0.14; pointer-events: none; }
.fx-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 32%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 32%, #000 30%, transparent 78%);
  opacity: 0.6;
}
.fx-floor { position: fixed; left: 0; right: 0; bottom: 0; height: 42vh; z-index: 0; pointer-events: none; overflow: hidden; perspective: 300px; }
.fx-floor::before {
  content: ""; position: absolute; inset: -30% 0 0 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(34,230,255,0.22) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,45,126,0.16) 0 1px, transparent 1px 46px);
  transform: rotateX(74deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(transparent 8%, #000 72%);
  mask-image: linear-gradient(transparent 8%, #000 72%);
  animation: floor 5s linear infinite;
}
@keyframes floor { to { background-position: 0 46px, 0 0; } }
.fx-vig {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 34%, transparent 40%, rgba(2,3,8,0.86) 100%),
    linear-gradient(120deg, rgba(34,230,255,0.05), transparent 30%, transparent 70%, rgba(255,45,126,0.06));
}
.fx-scan { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.fx-scan::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 3px); opacity: 0.5; }
.fx-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(rgba(34,230,255,0.07), transparent); animation: vscan 7s linear infinite; }
@keyframes vscan { 0% { transform: translateY(-200px); } 100% { transform: translateY(100vh); } }

.hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.hud i { position: absolute; width: 26px; height: 26px; border: 1px solid var(--cyan); box-shadow: 0 0 8px rgba(34,230,255,0.4); }
.hud i:nth-child(1) { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.hud i:nth-child(2) { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.hud i:nth-child(3) { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.hud i:nth-child(4) { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.jp-rail {
  position: fixed; top: 50%; right: 10px; transform: translateY(-50%); z-index: 3; pointer-events: none;
  writing-mode: vertical-rl; font-size: 0.7rem; letter-spacing: 0.5em; color: var(--mag);
  opacity: 0.32; text-shadow: 0 0 8px rgba(255,45,126,0.5); max-height: 82vh; overflow: hidden;
}
@media (max-width: 900px) { .jp-rail { display: none; } }

.stage { position: relative; z-index: 2; }

/* ---- glitch (RGB split) ---- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none;
}
.glitch::before { color: var(--mag); text-shadow: 0 0 8px rgba(255,45,126,0.6); transform: translate(-1.5px, 0); clip-path: inset(0 0 55% 0); mix-blend-mode: screen; animation: gsplit1 4.6s steps(1) infinite; }
.glitch::after  { color: var(--cyan); text-shadow: 0 0 8px rgba(34,230,255,0.6); transform: translate(1.5px, 0); clip-path: inset(55% 0 0 0); mix-blend-mode: screen; animation: gsplit2 5.3s steps(1) infinite; }
@keyframes gsplit1 { 0%,88%,100% { transform: translate(-1.5px,0); } 90% { transform: translate(-4px,-1px); } 93% { transform: translate(3px,1px); } }
@keyframes gsplit2 { 0%,90%,100% { transform: translate(1.5px,0); } 92% { transform: translate(4px,1px); } 95% { transform: translate(-3px,-1px); } }

/* ---- header ---- */
.head { display: flex; align-items: center; gap: 0.85rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.core { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 5px rgba(34,230,255,0.6)); }
.core .ring, .core .cf { stroke: var(--cyan); }
.core .cf[fill]:not([fill="none"]), .core rect:not([fill="none"]) { fill: var(--cyan); }
.core .r1 { transform-box: fill-box; transform-origin: center; animation: spin 30s linear infinite; }
.core .r2 { transform-box: fill-box; transform-origin: center; animation: spin 48s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.wordmark { font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; font-size: 0.82rem; color: var(--ink); text-shadow: 0 0 10px rgba(34,230,255,0.35); }
.wordmark b { color: var(--cyan); }
.head .jp { font-size: 0.66rem; letter-spacing: 0.3em; color: var(--soft); }
.head .tag { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mag); text-shadow: 0 0 10px rgba(255,45,126,0.5); border: 1px solid var(--mag-d); padding: 0.3em 0.7em; }
#status.granted { color: var(--green); border-color: rgba(56,255,176,0.5); text-shadow: 0 0 12px rgba(56,255,176,0.6); }

/* ---- hero ---- */
.hero { text-align: center; padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.brain { width: clamp(150px, 26vw, 220px); height: auto; display: block; margin: 0 auto 1.4rem; filter: drop-shadow(0 0 8px rgba(34,230,255,0.4)); }
.brain line, .brain circle, .brain .ring { stroke: var(--cyan); }
.brain .spokes line, .brain .ticks line { stroke: var(--cyan); stroke-opacity: 0.28; }
.brain .nodes .node { fill: var(--cyan); animation: nodepulse 3.2s ease-in-out infinite; }
.brain .nodes .node:nth-child(2n) { animation-duration: 4.1s; }
.brain .nodes .node:nth-child(3n) { animation-delay: 1.1s; fill: var(--mag); }
.brain .pulse circle { fill: var(--mag); filter: drop-shadow(0 0 4px rgba(255,45,126,0.8)); }
.brain .sweep { fill: rgba(34,230,255,0.12); transform-box: view-box; transform-origin: 130px 130px; animation: spin 5.5s linear infinite; }
.brain .ticks { transform-box: view-box; transform-origin: 130px 130px; animation: spin 130s linear infinite reverse; }
.brain .rings .r1 { transform-box: fill-box; transform-origin: center; animation: spin 120s linear infinite; }
.brain .rings .r2 { transform-box: fill-box; transform-origin: center; animation: spin 64s linear infinite reverse; }
.brain .rings .r3 { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite; }
.brain .eye rect { fill: #060a14; stroke: var(--cyan); }
.brain .eye circle { stroke: var(--cyan); }
.brain #pupil { fill: var(--mag); filter: drop-shadow(0 0 5px rgba(255,45,126,0.9)); }
.brain #lid { fill: #060a14; transform-box: fill-box; transform-origin: top center; transform: scaleY(0); animation: blinkLid 6.5s ease-in-out infinite; }
@keyframes nodepulse { 0%,100% { opacity: 0.22; } 50% { opacity: 1; } }
@keyframes blinkLid { 0%,92%,100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }

.telemetry { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cyan); opacity: 0.7; margin-bottom: 1.1rem; }
.hero h1 {
  font-weight: 500; font-size: clamp(1.5rem, 4.4vw, 3.2rem); line-height: 1.12;
  letter-spacing: 0.01em; text-transform: uppercase; color: #eafcff; max-width: 20ch; margin: 0 auto 1.8rem;
  text-shadow: var(--glow-c);
}
.hero-sub { color: var(--ink); max-width: 60ch; margin: 0 auto 1.6rem; font-size: 0.98rem; line-height: 1.65; opacity: 0.9; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.btn {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid var(--cyan-d); background: transparent; padding: 0.9em 1.8em; cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn:hover { color: #04121a; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 26px rgba(34,230,255,0.5); }
.btn.ghost { color: var(--mag); border-color: var(--mag-d); }
.btn.ghost:hover { color: #0a0206; background: var(--mag); border-color: var(--mag); box-shadow: 0 0 26px rgba(255,45,126,0.5); }

/* ---- archive ---- */
.archive { padding: clamp(2.6rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.4rem); }
.lead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.lead-row h2 { font-weight: 500; font-size: clamp(1.5rem, 4vw, 2.6rem); letter-spacing: 0.02em; text-transform: uppercase; color: #eafcff; text-shadow: var(--glow-c); }
.lead-row span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.arc-intro { color: var(--soft); max-width: 66ch; margin: 1.5rem 0 1.7rem; }

.clearance {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 0.9rem;
  margin: 0 0 2rem; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-left: 2px solid var(--mag);
  background: rgba(9,14,24,0.7);
}
.clr-led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--red); box-shadow: 0 0 12px var(--red); animation: led 1.3s steps(2,jump-none) infinite; }
.clearance.granted { border-left-color: var(--green); }
.clearance.granted .clr-led { background: var(--green); box-shadow: 0 0 12px var(--green); animation: none; }
.clr-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); }
.clearance.granted .clr-label { color: var(--green); text-shadow: 0 0 12px rgba(56,255,176,0.5); }
.clr-hint { margin-left: auto; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--soft); opacity: 0.55; }
.clearance.granted .clr-hint { display: none; }
.clr-key { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); background: transparent; border: 1px solid var(--cyan-d); padding: 0.5em 0.9em; cursor: pointer; transition: background 0.2s, color 0.2s; }
.clr-key:hover { background: var(--cyan); color: #04121a; }
.clr-form { flex: 1 1 180px; min-width: 140px; }
.clr-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--cyan-d); color: var(--cyan); font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.12em; padding: 0.4em 0; text-shadow: 0 0 8px rgba(34,230,255,0.5); }
.clr-input::placeholder { color: var(--soft); opacity: 0.5; }
.clr-input:focus { outline: none; border-bottom-color: var(--cyan); }
@keyframes led { 50% { opacity: 0.25; } }

.dossiers { display: grid; gap: 0.8rem; }
.dossier {
  display: grid; grid-template-columns: 6rem 1fr; gap: 1.3rem; padding: 1.4rem 1.5rem;
  position: relative; overflow: hidden; cursor: pointer; background: var(--panel);
  border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.25s;
}
.dossier::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan-d); transition: background 0.3s, box-shadow 0.3s; z-index: 2; }
.dossier::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none; opacity: 0.25; transition: opacity 0.3s, inset 0.3s;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left top/14px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) left top/1px 14px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right top/14px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) right top/1px 14px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left bottom/14px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right bottom/14px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) right bottom/1px 14px no-repeat;
}
.dossier:hover, .dossier:focus-visible { border-color: var(--cyan-d); background: rgba(12,20,32,0.85); box-shadow: 0 0 34px rgba(34,230,255,0.14), inset 0 0 30px rgba(34,230,255,0.03); outline: none; transform: translateY(-1px); }
.dossier:hover::after, .dossier.open::after { opacity: 0.85; inset: 4px; }
.dossier:hover::before, .dossier.open::before { background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.dossier-side { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.15rem; z-index: 3; }
.dossier-no { font-weight: 500; font-size: 0.95rem; color: var(--cyan); text-shadow: 0 0 10px rgba(34,230,255,0.5); }
.dossier-cls { align-self: flex-start; font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line); padding: 0.3em 0.5em; white-space: nowrap; transition: color 0.3s, border-color 0.3s; }
.dossier-cls.off { color: #ff5c93; border-color: rgba(255, 45, 126, 0.5); }
.dossier-cls.def { color: #22e6ff; border-color: rgba(34, 230, 255, 0.5); }
.dossier-cls.pro { color: #38ffb0; border-color: rgba(56, 255, 176, 0.5); }
.dossier-cls.inn { color: #ffb454; border-color: rgba(255, 180, 84, 0.5); }
.dossier-cls.phi { color: #b48cff; border-color: rgba(180, 140, 255, 0.5); }
.dossier.open .dossier-cls { color: var(--green); border-color: rgba(56,255,176,0.45); text-shadow: 0 0 10px rgba(56,255,176,0.4); }
.dossier-cls.denied { color: var(--red) !important; border-color: rgba(255,59,70,0.6) !important; text-shadow: 0 0 10px rgba(255,59,70,0.5); }
.dossier-main { z-index: 3; }
.dossier-main h3 { font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.55rem); text-transform: uppercase; letter-spacing: 0.02em; color: #eafcff; margin-bottom: 0.5rem; }
.dossier-body { color: var(--soft); max-width: 66ch; font-size: 0.98rem; line-height: 1.58; min-height: 1.5em; }
.dossier.sealed .dossier-body { color: var(--cyan); opacity: 0.42; letter-spacing: 0.03em; word-break: break-word; animation: flick 3.6s steps(1) infinite; }
.dossier.open .dossier-body { color: var(--ink); }
.dossier-act { display: inline-block; margin-top: 0.85rem; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); opacity: 0.85; }
.dossier.open .dossier-act { color: var(--soft); opacity: 0.5; }
.dossier.locked { opacity: 0.92; }
.dossier.locked .dossier-act { color: var(--soft); opacity: 0.55; }
.dossier.locked:hover { border-color: rgba(255,59,70,0.3); box-shadow: 0 0 30px rgba(255,59,70,0.1); }
.dossier.locked:hover::before { background: var(--red); box-shadow: 0 0 14px var(--red); }
.dossier.locked:hover::after { opacity: 0.3; }
.dossier.deny { animation: shake 0.42s cubic-bezier(0.36,0.07,0.19,0.97); border-color: rgba(255,59,70,0.6) !important; }
@keyframes flick { 0%,100% { opacity: 0.42; } 42% { opacity: 0.28; } 55% { opacity: 0.5; } 72% { opacity: 0.34; } }
@keyframes shake { 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(3px);} 30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);} }
@media (max-width: 600px) { .dossier { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.2rem 1.1rem; } .dossier-side { flex-direction: row; align-items: center; gap: 0.8rem; } }

/* ---- manifest ---- */
.manifest { padding: clamp(2.4rem, 6vw, 4rem) 0; text-align: center; }
.manifest blockquote { font-weight: 500; font-size: clamp(1.3rem, 3.4vw, 2.2rem); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; max-width: 26ch; margin: 0 auto; color: #eafcff; }
.manifest .a { color: var(--cyan); }

/* ---- contact ---- */
.contact { padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(2.6rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.contact h2 { font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.6rem); text-transform: uppercase; letter-spacing: 0.04em; color: #eafcff; text-shadow: var(--glow-c); text-align: center; }
.contact-form { max-width: 600px; margin: 2rem auto 0; }
.field { border-bottom: 1px solid var(--line); padding: 0.85rem 0; }
.field label { display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.5rem; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; color: var(--ink); font-family: var(--mono); font-size: 1.02rem; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--cyan); }
.field ::placeholder { color: #4c5a66; }
.submit { display: block; margin: 1.6rem auto 0; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--cyan); color: #04121a; border: 0; padding: 1em 2.2em; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.submit:hover { background: #7ff1ff; box-shadow: 0 0 30px rgba(34,230,255,0.5); }
.note { margin-top: 1.3rem; text-align: center; color: var(--soft); font-size: 0.8rem; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding: 1.8rem 0 2.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: baseline; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--soft); }
.foot .sc { text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink); }
.foot .mid { color: var(--mag); opacity: 0.6; }
.foot .right { margin-left: auto; }

/* ---- console + flash ---- */
.console { position: fixed; left: 20px; bottom: 50px; z-index: 3; font-size: 0.64rem; line-height: 1.75; letter-spacing: 0.05em; color: var(--cyan); opacity: 0.42; max-width: 44vw; pointer-events: none; }
.console .ln { white-space: nowrap; overflow: hidden; text-shadow: 0 0 8px rgba(34,230,255,0.4); }
.cur { display: inline-block; width: 0.55em; height: 0.9em; background: var(--cyan); vertical-align: -0.06em; margin-left: 2px; box-shadow: 0 0 8px var(--cyan); animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 760px) { .console { display: none; } }
.flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(34,230,255,0.28), transparent 60%); opacity: 0; animation: flashfx 0.95s ease-out forwards; }
@keyframes flashfx { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #rain, .fx-floor { display: none; }
  .fx-scan::after, .glitch::before, .glitch::after, .clr-led, .cur,
  .brain .ring, .brain .sweep, .brain .ticks, .brain .node, .brain #lid, .core .ring,
  .dossier.sealed .dossier-body, .dossier.deny { animation: none; }
  html { scroll-behavior: auto; }
}