/* ===== LZRD — red/white/black cyberpunk ===== */
:root{
  --bg:#0a0a0a;
  --ink:#f3f3f3;
  --muted:#b6b6b6;
  --red:#ff2b2b;
  --dim:#141414;
  --grid:rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(900px 600px at 80% -10%, #111 0%, var(--bg) 60%),
    linear-gradient(135deg, #050505, #0a0a0a);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.3px;
  overflow-x:hidden;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(transparent 0 1px, var(--grid) 1px 2px, transparent 2px 100%),
    linear-gradient(90deg, transparent 0 1px, var(--grid) 1px 2px, transparent 2px 100%);
  background-size: 40px 40px, 40px 40px;
  opacity:.35; animation:gridShift 18s linear infinite;
}
@keyframes gridShift{to{background-position:80px 40px,40px 80px}}

/* Film noise + scanlines */
.noise{ position:fixed; inset:-50px; pointer-events:none; z-index:9998;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAACq6DbKAAAAPklEQVR4Ae3NsQkAMAwEQc5/6XM2yqfQqgq7oA2D2b0HAAAAAB8Kqgk1n3a0m2+0X2j2H8v8mUDFf0K3i7av0t3Q0A7nF8kPp6t5eGgAAAABJRU5ErkJggg==');
  mix-blend-mode: overlay; opacity:.06; animation:noise 1s steps(8) infinite;
}
@keyframes noise{to{transform:translate3d(-10px,10px,0)}}

.scanlines{ position:fixed; inset:0; pointer-events:none; z-index:9997;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,0) 2px 4px);
  opacity:.25; mix-blend-mode:soft-light;
}

/* Mouse-follow glowing scan (thin red bar) */
.glitch-scan{ position:fixed; left:0; right:0; height:1px; top:40%;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 12px var(--red), 0 0 24px var(--red);
  opacity:.65; transform: translateY(0);
  pointer-events:none; z-index:9996;
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(to right, rgba(10,10,10,.85), rgba(10,10,10,.35));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
}
.logo{ font-weight:900; font-size:20px; letter-spacing:2px }
.links{ display:flex; gap:12px; align-items:center }
.nav-link{ color:var(--muted); text-decoration:none; font-size:14px; padding:8px 10px; border-radius:8px }
.nav-link:hover{ color:var(--ink); background:rgba(255,255,255,.06) }

.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; text-decoration:none;
  border:1px solid rgba(255,255,255,.16); color:var(--ink);
  background:rgba(255,255,255,.04);
  text-transform:uppercase; font-weight:800; letter-spacing:.8px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.button:hover{ transform:translateY(-1px); box-shadow:0 0 16px rgba(255,43,43,.35)}
.button.red{ background:rgba(255,43,43,.1); border-color: rgba(255,43,43,.45) }
.button.ghost{ background:rgba(255,255,255,.06) }

/* Layout with edge decorations */
.wrap{ max-width:1200px; margin:0 auto; padding:24px 10px 72px; display:grid; grid-template-columns: 140px 1fr 140px; gap:14px }
@media (max-width: 980px){ .wrap{ grid-template-columns: 1fr; } .edge{ display:none } }

.stage{ display:flex; flex-direction:column; align-items:center }

/* Edge panels */
.edge{ position:relative }
.edge .panel{ height:180px; margin-bottom:12px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:12px; overflow:hidden; position:relative }
.edge .panel::before{
  content:""; position:absolute; inset:0; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(255,43,43,.12) 10px 20px, transparent 20px 30px);
  mix-blend-mode:screen; opacity:.7; transform: translateY(0);
  animation: panelSlide 6s linear infinite;
}
@keyframes panelSlide{ to{ transform: translateY(-30px) } }
.edge .p2::before{ animation-duration: 5s }
.edge .p3::before{ animation-duration: 7s }

.edge .hud{ display:grid; grid-template-columns: repeat(4,1fr); gap:6px }
.edge .tick{ height:44px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background: rgba(255,255,255,.03); position:relative; overflow:hidden }
.edge .tick::after{
  content:""; position:absolute; left: -50%; top:0; bottom:0; width:50%;
  background: linear-gradient(90deg, transparent, rgba(255,43,43,.5), transparent);
  animation: sweep 2s linear infinite;
}
@keyframes sweep{ to{ transform: translateX(300%) } }

/* Lizard image card */
.lizard-card{
  position:relative; width:min(86vw, 560px); aspect-ratio:1/1;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09); border-radius:18px; overflow:hidden;
  transform-style:preserve-3d;
}
.lizard-card .frame{
  position:absolute; inset:-2px; border-radius:20px; pointer-events:none;
  background:
    conic-gradient(from 0deg, transparent 0 10deg, var(--red) 10deg 20deg, transparent 20deg 30deg, #fff 30deg 40deg, transparent 40deg 360deg);
  filter: blur(6px) saturate(1.2); opacity:.35; animation:ring 7s linear infinite;
  mask: radial-gradient(circle at center, black 64%, transparent 66%);
}
@keyframes ring{ to{ transform: rotate(360deg) } }

.lizard-card img{
  position:absolute; inset:0; margin:auto; max-width:85%; max-height:85%;
  object-fit:contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
  transition: transform .25s ease;
}
.lizard-card .placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); background: repeating-linear-gradient(45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 8px, transparent 8px, transparent 16px);
  opacity:0; transition:opacity .25s ease; text-align:center; font-size:14px;
}
.lizard-card.missing .placeholder{ opacity:1 }
.lizard-card.missing img{ opacity:0 }

/* Text below image */
.undertext{ text-align:center; margin:14px 0 10px }
.title{ margin:0 0 6px; font-size: clamp(28px, 5vw, 64px); line-height:.95 }
.title .r{ color:var(--red); font-weight:900; display:block }
.tagline{ color:var(--muted); max-width:56ch; margin: 8px auto 0 }

/* Contract block */
.contract{ margin:24px 0 16px; width:min(86vw, 640px) }
.contract label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px }
.contract .row{ display:flex; gap:8px }
.contract input{
  flex:1; padding:12px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#0e0e0e; color:var(--ink); outline:none;
}
.contract input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,43,43,.2) }
.contract .button[aria-disabled="true"]{ opacity:.45; pointer-events:none }
.muted{ color:var(--muted) }

/* Scanning progress text */
.scan-progress {
    width: min(86vw, 640px);
    margin: 20px 0;
    text-align: center;
}
.scan-text {
    margin: 5px 0;
    font-size: 14px;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: relative;
    display: inline-block;
}
.scan-text::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--red);
    mix-blend-mode: screen;
    animation: slices 900ms steps(12) infinite;
}

/* Holder Metrics */
.holder-metrics {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 12px;
    margin-top: 18px;
    width: min(86vw, 1000px);
}
.metric-col, .animation-col {
    background: #0e0e0e;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    min-height: 200px;
}
.animation-col {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px;
}

.holder-bar {
    background: var(--red);
    height: 4px;
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    animation: growIn 0.5s ease-out forwards;
}

@keyframes growIn {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Scan result in lizard card */
.scan-result {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: bold;
    color: var(--ink);
    z-index: 2;
}
.scan-result.red .percentage {
    color: var(--red);
    text-shadow: 0 0 20px var(--red);
}
.scan-result.green .percentage {
    color: #2bff88;
    text-shadow: 0 0 20px #2bff88;
}


/* Terminal panels */
.term-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:18px; width:min(86vw, 1000px) }
@media (max-width: 900px){ .term-grid{ grid-template-columns: 1fr } }
.term-card{ background:#0e0e0e; border:1px solid rgba(255,255,255,.09); border-radius:12px; overflow:hidden }
.term-title{ padding:10px 12px; background:#111; border-bottom:1px solid rgba(255,255,255,.08); color:var(--red); font-weight:800; letter-spacing:.8px }
.term-body{ margin:0; padding:10px 12px; color:#f5f5f5; min-height:120px; white-space:pre-wrap }
.bar{ height:9px; background:#111; border-top:1px solid rgba(255,255,255,.08); }
.fill{ height:100%; width:var(--p); background:linear-gradient(90deg, #fff, var(--red)); box-shadow:0 0 18px rgba(255,43,43,.35) inset }

/* Lore */
.section-title{ font-size:24px; margin:26px 0 8px }
.lore{ width:min(86vw, 760px); text-align:left }
.lore p{ color:var(--ink) }

/* Footer */
.footer{ border-top:1px solid rgba(255,255,255,.08); margin-top: 48px }
.footer .inner{ max-width:1200px; margin:0 auto; padding:16px 10px; display:flex; align-items:center; justify-content:space-between }
.footer .button.ghost{ border:1px solid rgba(255,255,255,.09) }

/* Glitch text (red/white) reacting to mouse via CSS vars */
.glitch-text{ position:relative; display:inline-block; text-transform:uppercase; will-change:transform }
.glitch-text::before,
.glitch-text::after{
  content: attr(data-text);
  position:absolute; inset:0; pointer-events:none;
}
.glitch-text::before{ transform: translate(calc(var(--gx,0px) * 1), 0); color:var(--red); mix-blend-mode:screen; }
.glitch-text::after{ transform: translate(calc(var(--gx,0px) * -1), 0); color:#fff; mix-blend-mode:screen; }

/* Hover slices */
.glitch-text.slice:hover::before,
.glitch-text.slice:hover::after{
  animation: slices 900ms steps(12) infinite;
}
@keyframes slices{
  0%{ clip-path: inset(0 0 0 0) }
  10%{ clip-path: inset(10% 0 70% 0) }
  20%{ clip-path: inset(75% 0 0 0) }
  40%{ clip-path: inset(0 0 80% 0) }
  60%{ clip-path: inset(50% 0 20% 0) }
  80%{ clip-path: inset(15% 0 55% 0) }
  100%{ clip-path: inset(0 0 0 0) }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .glitch-scan{ display:none }
}