/* hackare.se — green phosphor CRT / demoscene landing */
@font-face { font-family:"VT323"; src:url("/assets/fonts/vt323-400.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root {
  --bg: #020a04;
  --green: #39ff7a;
  --green-dim: #1f9e4c;
  --amber: #ffcf4d;
  --font: "VT323", "Courier New", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--green);
  font-family: var(--font);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.35;
  overflow-x: hidden;
  text-shadow: 0 0 6px rgba(57,255,122,0.5);
}
a { color: var(--amber); text-decoration: none; }
a:hover { background: var(--amber); color: var(--bg); text-shadow: none; }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; background: var(--amber); color: var(--bg); text-shadow: none; }

/* CRT atmosphere */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.crt::before { /* scanlines */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,0.25) 2px 3px);
}
.crt::after { /* vignette + flicker */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.7));
  animation: flick 5s infinite steps(60);
}
@keyframes flick { 0%,100%{opacity:0.92} 50%{opacity:1} }

.stage { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: clamp(1.4rem, 5vw, 3rem); padding-bottom: 4.5rem; max-width: 980px; margin: 0 auto; }

.prompt { color: var(--green-dim); }
h1.alt { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 0.95; letter-spacing: 0.02em; margin: 0.3rem 0; }
.lead { max-width: none; margin: 0.7rem 0 1.2rem; font-size: 0.92em; }
.am { color: var(--amber); }

.menu { display: grid; gap: 0.3rem; margin: 0.4rem 0 1rem; }
.menu a { padding-block: 0.25em; }
.menu a::before { content: "> "; color: var(--green); }
.cursor { display:inline-block; width:0.6em; height:1.05em; background:var(--green); vertical-align:-0.15em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* demoscene scroller */
.scroller {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  overflow: hidden; white-space: nowrap;
  background: rgba(2,10,4,0.85); border-top: 1px solid var(--green-dim);
  padding: 0.4rem 0; color: var(--amber);
}
.scroller span { display: inline-block; padding-left: 100%; animation: scroll 38s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .crt::after, .cursor { animation: none; }
  .scroller span { animation: none; padding-left: 1rem; }
}

/* AS/400 5250 Sign On */
.signon { white-space: pre; font-size: clamp(0.55rem, 1.9vw, 0.92rem); line-height: 1.28; color: var(--green); margin: 0.2rem 0 1rem; overflow-x: auto; }
.fkeys { color: var(--green-dim); letter-spacing: 0.05em; }

/* HACK THE PLANET */
.htp { font-size: clamp(1.4rem, 5vw, 2.4rem); letter-spacing: 0.16em; margin: 0.6rem 0 1.2rem; }