/* Retro 8-bit CV scroller */
:root{ --bg:#0b0e1a; --fg:#f0f0f0; --accent:#55ff99; --muted:#8aa; }
*{ box-sizing:border-box }
html,body{ height:100%; background:var(--bg); color:var(--fg); }
body{ margin:0; font-family:'Press Start 2P', system-ui, sans-serif; }
.topbar{ position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:8px 16px; background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.35)); backdrop-filter:saturate(120%) blur(6px); }
.topbar .btn{ margin-left:8px; padding:8px 12px; border:2px solid var(--accent); color:var(--accent); text-decoration:none; }
.brand h1{ margin:0; font-size:18px }
.brand #site-tagline{ font-size:12px; color:var(--muted); margin-top:6px }
.controls select{ background:transparent; color:var(--fg); border:2px solid var(--accent); padding:6px }
.controls label{ margin-left:12px; font-size:12px; color:var(--muted) }

.hscroll{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; height:calc(100vh - 160px); outline:none }
.section{ position:relative; min-width:100vw; scroll-snap-align:center; display:flex; align-items:flex-end; justify-content:flex-start; padding:24px }
.section .bg{ position:absolute; inset:0; background-size:cover; background-position:center; image-rendering:pixelated; filter:saturate(120%) contrast(105%); }
.section .overlay{ position:relative; z-index:1; max-width:720px; background:rgba(0,0,0,.55); border:2px solid var(--accent); padding:18px; }
.section h3{ margin:0 0 8px; font-size:16px; color:var(--accent) }
.section .years{ color:#ffdd55; font-size:12px; margin-bottom:8px }
.section p{ font-size:12px; line-height:1.6 }

.footer{ padding:24px; border-top:1px solid rgba(255,255,255,.1) }
.footer h2{ font-size:16px; color:var(--accent) }
.footer p{ font-size:12px; color:var(--muted) }
.small{ opacity:.7 }

.hint{ position:fixed; bottom:8px; right:12px; font-size:10px; color:var(--muted); }

/* Progress bar */
.progress{ position:fixed; top:48px; left:0; height:4px; width:100%; background:rgba(255,255,255,.08) }
.progress .bar{ height:100%; width:0; background:var(--accent); transition:width .2s ease-out }

/* Hero sprite (walking character) */
.hero{ position:fixed; bottom:140px; left:32px; width:64px; height:64px; background-image:url('assets/hero_walk.png'); background-size:256px 64px; image-rendering:pixelated; animation:hero-walk .4s steps(4) infinite; animation-play-state:paused; z-index:9; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
@keyframes hero-walk{ from{ background-position:0 0 } to{ background-position:-256px 0 } }