/* ==============================
   LKNZMZD — style.css (ELITE MECHANICAL) — UPDATED
   Fixes:
   - ONE diagnostics panel definition (no duplicate/conflicting blocks)
   - Keeps animations + pointer events working
   - perf-mode hook: html.perf-mode
================================ */

*{ box-sizing:border-box; }
html, body{ height:100%; }

:root{
  --accent: rgba(110, 231, 255, 0.92);
  --accentSoft: rgba(110, 231, 255, 0.18);
  --edge: rgba(255,255,255,0.12);
  --shadow: rgba(0,0,0,0.62);
  --snap: cubic-bezier(.12,.92,.18,1);

  --text: rgba(255,255,255,0.88);
  --muted: rgba(255,255,255,0.68);
  --muted2: rgba(255,255,255,0.52);

  --bgPulse: 0; /* 0..1 breathing */
}

/* Perf mode subtle hint */
html.perf-mode{
  filter: saturate(0.98) contrast(0.995);
}

/* Hardware cursor (SVG data URI) */
body{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2 L20 18 L13 19 L11 26 Z' fill='%23c7f7ff' fill-opacity='0.88'/%3E%3Cpath d='M3 2 L20 18' stroke='%2300bcd4' stroke-opacity='0.55' stroke-width='2'/%3E%3C/svg%3E") 3 2, auto;
}

body{
  margin:0;
  background:#000;
  color:var(--text);
  overflow:hidden;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    "Noto Sans", "Helvetica Neue", sans-serif;

  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* subtle breathing pulse overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity: calc(0.10 + var(--bgPulse) * 0.10);
  background:
    radial-gradient(900px 520px at 50% 45%,
      rgba(110,231,255,0.10),
      rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
}

/* glitch override */
body.glitch{
  animation: glitchJitter 420ms steps(2,end) infinite;
}
@keyframes glitchJitter{
  0%{ filter:none; }
  50%{ filter: contrast(1.08) saturate(1.12) hue-rotate(4deg); }
  100%{ filter:none; }
}

/* shake on clamp */
body.shake{ animation: camShake 260ms var(--snap) 1; }
@keyframes camShake{
  0%{ transform: translate3d(0,0,0); }
  20%{ transform: translate3d(-2px, 1px,0); }
  45%{ transform: translate3d(2px, -1px,0); }
  70%{ transform: translate3d(-1px, -1px,0); }
  100%{ transform: translate3d(0,0,0); }
}

/* ---- Background canvas ---- */
#bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
#bg canvas{
  width:100%;
  height:100%;
  display:block;
}

/* ---- Foreground layout ---- */
.shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:22px;
}

/* ---- HUD ---- */
.hud{
  position:fixed;
  inset:18px 18px auto 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:6;
  pointer-events:none; /* IMPORTANT: children enable pointer events */
}

.status-pill{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(10, 15, 25, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.status-pill .led{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(110,231,255,0.95);
  box-shadow: 0 0 18px rgba(110,231,255,0.35);
  animation: ledPulse 2.6s ease-in-out infinite;
}
@keyframes ledPulse{
  0%,100%{ opacity:0.65; }
  50%{ opacity:1; }
}

.status-sep{
  width:1px;
  height:14px;
  background: rgba(255,255,255,0.14);
  margin: 0 2px;
}
.fw-tag{ opacity:0.75; }

.diag-btn{
  pointer-events:auto;
  font-family:'Orbitron', system-ui, sans-serif;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(10, 15, 25, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  backdrop-filter: blur(10px);
  cursor:pointer;
  transition: transform 120ms var(--snap), border-color 140ms ease;
}
.diag-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(110,231,255,0.30);
}
.diag-btn:active{ transform: translateY(0) scale(0.98); }

/* ---- Diagnostics panel (SINGLE SOURCE OF TRUTH) ---- */
.diag-panel{
  position:fixed;
  top:64px;
  right:18px;
  width:min(360px, calc(100vw - 36px));
  border-radius:18px;
  padding:14px;
  z-index:50;

  background: rgba(10,15,25,0.86);
  border: 1px solid rgba(110,231,255,0.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);

  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.diag-panel.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.diag-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.diag-title{
  font-family:'Orbitron', system-ui, sans-serif;
  letter-spacing:.14em;
  font-size:.72rem;
  opacity:.9;
}
.diag-close{
  width:34px;
  height:34px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  cursor:pointer;
}

.diag-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.diag-item{
  padding:10px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  min-width:0;
}
.diag-k{
  font-size:.70rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom:6px;
}
.diag-v{
  font-size:.90rem;
  color: rgba(255,255,255,0.88);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.diag-controls{
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.diag-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  color: rgba(255,255,255,0.85);
}
.diag-row input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color: rgba(110,231,255,0.85);
}
.diag-row input[type="range"]{ width:140px; }
.diag-mini{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.85rem;
  opacity:.85;
}
.diag-foot{
  margin-top:6px;
  font-size:.82rem;
  opacity:.7;
}

/* ---- Command console ---- */
.cmd-console{
  position:fixed;
  left:18px;
  bottom:18px;
  width:min(520px, calc(100vw - 36px));
  border-radius:16px;
  background: rgba(10, 15, 25, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.55);
  z-index:7;
  padding:12px;

  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.cmd-console.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.cmd-title{
  font-family:'Orbitron', system-ui, sans-serif;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:12px;
  opacity:0.9;
  margin-bottom:8px;
}
.cmd-log{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.55;
  opacity:0.85;
  max-height:180px;
  overflow:auto;
}

/* ---- Card ---- */
.card{
  width:min(640px, 92vw);
  padding:26px 24px;
  border-radius:22px;

  background: rgba(10, 15, 25, 0.75);
  border: 1px solid rgba(0, 188, 212, 0.15);
  backdrop-filter: blur(12px);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.55),
    0 0 40px rgba(0,188,212,0.08),
    inset 0 0 20px rgba(255,255,255,0.02);

  text-align:center;

  --lx: 50%;
  --ly: 35%;
  --l: 0;

  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity: calc(var(--l) * 0.9);
  transition: opacity 220ms ease;
  background:
    radial-gradient(520px 260px at var(--lx) var(--ly),
      rgba(110,231,255,0.18),
      rgba(110,231,255,0.06) 35%,
      rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: calc(var(--l) * 0.55);
  transition: opacity 220ms ease;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 26px rgba(110,231,255,0.06);
  border-radius: inherit;
}

.card:hover{ --l: 1; }
.card:focus-within{ --l: 1; }

@media (hover:none){ .card{ --l: 0; } }
@media (prefers-reduced-motion: reduce){
  .card::before, .card::after{ transition:none; }
}

/* Typography */
.card h1{
  margin:0 0 10px;
  font-size: clamp(34px, 5vw, 56px);
  font-family:'Orbitron', system-ui, sans-serif;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.05;
  letter-spacing:0.34em;
  text-shadow: 0 0 18px rgba(0,200,255,0.18);
}
.tag{
  margin:0 0 12px;
  color: var(--muted);
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:0.78rem;
}
.desc{
  margin:0 0 18px;
  color: var(--muted2);
  line-height:1.55;
  font-size:0.98rem;
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}

/* Links */
.links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

/* Elite mechanical button system */
.links a{
  --mx: 50%;
  --my: 50%;
  --glow: 0;
  --glowSize: 130px;

  --magX: 0px;
  --magY: 0px;
  --lift: 0px;
  --scale: 1;

  position:relative;
  overflow:hidden;

  text-decoration:none;
  color: rgba(255,255,255,0.90);
  padding:10px 14px;
  border-radius:14px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);

  transform:
    translate3d(var(--magX), var(--magY), 0)
    translateY(var(--lift))
    scale(var(--scale));

  will-change: transform, box-shadow, filter;
  transition:
    transform 120ms var(--snap),
    box-shadow 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    filter 140ms ease;
}

.links a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity 140ms ease;
  box-shadow:
    inset 0 0 0 1px var(--edge),
    inset 0 0 0 2px rgba(110,231,255,0.06),
    inset 0 0 18px 0 var(--accentSoft);
}

.links a::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-130%;
  width:42%;
  height:190%;
  transform: rotate(18deg);
  pointer-events:none;
  opacity:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 46%,
    rgba(110,231,255,0.22) 52%,
    rgba(255,255,255,0) 100%);
  transition: opacity 120ms ease, left 360ms var(--snap);
}

.links a:hover{
  --lift: -1px;
  background: rgba(255,255,255,0.075);
  border-color: rgba(110,231,255,0.36);
  box-shadow:
    0 10px 22px -18px var(--shadow),
    0 0 0 1px rgba(110,231,255,0.14);
  filter: saturate(1.04) contrast(1.02);
}
.links a:hover::before{ opacity:1; }
.links a:hover::after{ opacity:1; left:135%; }

.links a:active{
  --lift: 0px;
  --scale: 0.982;
  transition-duration: 70ms;
  box-shadow:
    0 8px 18px -18px var(--shadow),
    inset 0 0 0 1px rgba(110,231,255,0.12);
}
.links a:focus-visible{
  outline:none;
  box-shadow:
    0 10px 22px -18px var(--shadow),
    0 0 0 1px rgba(110,231,255,0.18),
    0 0 0 3px rgba(110,231,255,0.18);
}

.links a.is-focuspulse{ animation: servoPulse 520ms var(--snap) 1; }
@keyframes servoPulse{
  0%{ filter:saturate(1) contrast(1); }
  45%{ filter:saturate(1.08) contrast(1.08); }
  100%{ filter:saturate(1.02) contrast(1.03); }
}

.links a.is-clicked::after{
  opacity:1;
  left:160%;
  animation: clickSheen 420ms var(--snap) 1;
}
@keyframes clickSheen{
  0%{ left:-130%; }
  100%{ left:160%; }
}

.links a .fx-glow{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity: var(--glow);
  transition: opacity 140ms ease;
  background: radial-gradient(
    circle var(--glowSize) at var(--mx) var(--my),
    rgba(110,231,255,0.18),
    rgba(110,231,255,0.06) 35%,
    rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
}
.links a:hover{ --glow: 1; }
.links a:focus-visible{ --glow: 1; }
@media (hover:none){ .links a .fx-glow{ display:none; } }

/* Footer */
.footer{
  margin-top:40px;
  text-align:center;
  opacity:0.80;
}
.footer small{
  font-size:0.75rem;
  letter-spacing:2px;
}
.divider{ margin:0 10px; opacity:0.4; }
.doctrine-link{
  text-decoration:none;
  color:inherit;
  opacity:0.6;
  transition: opacity 0.3s ease, letter-spacing 0.3s ease;
}
.doctrine-link:hover{
  opacity:1;
  letter-spacing:3px;
}

/* Robots */
.bot{
  position:fixed;
  top:50%;
  transform: translateY(-50%);
  width:150px;
  opacity:0.22;
  pointer-events:none;
  z-index:1;
}
.bot--left{ left:4%; }
.bot--right{ right:4%; }

.bot__svg{
  width:100%;
  height:auto;
  fill:none;
  stroke: rgba(255,255,255,0.55);
  stroke-width:2;
  animation: floatBot 6s ease-in-out infinite;
}
.bot--right .bot__svg{ animation-delay:3s; }
@keyframes floatBot{
  0%,100%{ transform: translateY(-10px); }
  50%{ transform: translateY(10px); }
}

.bot__svg .eye,
.bot__svg .chest{
  fill: rgba(0,200,255,0.72);
  stroke:none;
  animation: pulseEye 2s ease-in-out infinite;
}
@keyframes pulseEye{
  0%,100%{ opacity:0.45; }
  50%{ opacity:1; }
}
@media (max-width:760px){ .bot{ display:none; } }

/* INTRO */
.intro{
  position:fixed;
  inset:0;
  background: radial-gradient(circle at 50% 45%, #0b1016 0%, #000 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition: opacity 600ms ease, visibility 600ms ease;
}
.intro.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-inner{
  width:min(560px, 92vw);
  text-align:center;
  padding:28px 18px;
}
.intro-mark{
  width:70px;
  height:70px;
  margin:0 auto 18px;
  border-radius:18px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 0 1px rgba(0,200,255,0.12) inset, 0 0 28px rgba(0,200,255,0.14);
  position:relative;
  overflow:hidden;
}
.intro-mark::after{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:30%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.45), transparent);
  animation: mechScan 1.8s linear infinite;
}
@keyframes mechScan{
  0%{ transform: translateX(-30%); }
  100%{ transform: translateX(260%); }
}

/* Morph text */
.morph-text{
  font-family:'Orbitron', system-ui, sans-serif;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:700;
  font-size: clamp(26px, 4.8vw, 46px);
  color: rgba(255,255,255,0.93);
  text-shadow: 0 0 26px rgba(0,200,255,0.20);
  min-height:56px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.06em;
  position:relative;
}

.morph-text .ch{
  display:inline-block;
  position:relative;
  will-change: transform, opacity, filter;
}
.morph-text .ch.vowel{ color: rgba(110,231,255,0.95); }
.morph-text .ch.eject{ animation: ejectVowel 520ms var(--snap) forwards; }
@keyframes ejectVowel{
  0%{ transform: translate3d(0,0,0) rotate(0); opacity:1; }
  100%{ transform: translate3d(0,-46px,0) rotate(-10deg); opacity:0; filter: blur(0.6px); }
}

.morph-text.locked{ animation: microVibe 1.6s ease-in-out infinite; }
@keyframes microVibe{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0.4px, -0.2px, 0); }
}

/* scanline sweep */
.morph-text .scanline{
  position:absolute;
  inset:-20% -20%;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 45%,
    rgba(110,231,255,0.22) 52%,
    rgba(255,255,255,0) 100%);
  transform: rotate(12deg) translateX(-130%);
}
.morph-text.scan .scanline{
  opacity:1;
  animation: scanSweep 520ms var(--snap) 1;
}
@keyframes scanSweep{
  0%{ transform: rotate(12deg) translateX(-130%); }
  100%{ transform: rotate(12deg) translateX(160%); }
}

.intro-sub{
  margin:10px 0 18px;
  font-size:12px;
  letter-spacing:4px;
  color: rgba(255,255,255,0.62);
}

.intro-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  overflow:hidden;
}
.intro-fill{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.65), transparent);
  animation: mechLoad 2.2s ease-in-out forwards;
}
@keyframes mechLoad{
  0%{ width:0%; }
  30%{ width:35%; }
  65%{ width:78%; }
  100%{ width:100%; }
}

.intro-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.intro-btn{
  padding:10px 14px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  cursor:pointer;
  font-size:12px;
  letter-spacing:0.5px;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.intro-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(0,200,255,0.32);
}
.intro-btn:active{ transform: translateY(0) scale(0.99); }
.intro-note{
  display:block;
  margin-top:10px;
  font-size:11px;
  color: rgba(255,255,255,0.45);
}

/* sparks */
.spark{
  position:fixed;
  width:3px;
  height:3px;
  border-radius:999px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 12px rgba(110,231,255,0.45);
  pointer-events:none;
  z-index:10000;
  animation: sparkFly 520ms ease-out forwards;
}
@keyframes sparkFly{
  0%{ transform: translate3d(0,0,0) scale(1); opacity:1; }
  100%{ transform: translate3d(var(--sx), var(--sy), 0) scale(0.2); opacity:0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  body.glitch{ animation:none !important; }
  body.shake{ animation:none !important; }
  .intro-mark::after{ animation:none !important; }
  .intro-fill{ animation:none !important; }
  .morph-text .ch.eject{ animation:none !important; opacity:0; }
  .morph-text.scan .scanline{ animation:none !important; opacity:0; }
}