/* The ZX Spectrum palette, as in SwissArmy. */
:root {
  --zx-black: #000; --zx-blue: #0000d7; --zx-red: #d70000; --zx-magenta: #d700d7;
  --zx-green: #00d700; --zx-cyan: #00d7d7; --zx-yellow: #d7d700; --zx-white: #d7d7d7;
  --zx-bright-white: #fff;

  --border: var(--zx-white);
  --paper: var(--zx-bright-white);
  --ink: var(--zx-black);
  --ink-2: var(--zx-blue);
  --rule: var(--zx-white);
  --font: 'Press Start 2P', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --border: var(--zx-blue);
    --paper: var(--zx-black);
    --ink: var(--zx-bright-white);
    --ink-2: var(--zx-cyan);
    --rule: #262626;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--border);
  color: var(--ink);
  font: 11px / 1.9 var(--font);
  -webkit-font-smoothing: none;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }

/* BORDER: plays the tape loading once when the page opens. The pilot tone
   (wide red/cyan bars), then the data burst (thin blue/yellow bars). */
.border {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@media (min-width: 720px) { .border { padding: 40px; } }
.border.pilot {
  background: repeating-linear-gradient(to bottom, var(--zx-red) 0 7px, var(--zx-cyan) 7px 14px);
  background-size: 100% 14px;
  animation: tape .18s steps(2) infinite;
}
.border.data {
  background: repeating-linear-gradient(to bottom,
    var(--zx-blue) 0 2px, var(--zx-yellow) 2px 5px, var(--zx-blue) 5px 6px, var(--zx-yellow) 6px 7px,
    var(--zx-blue) 7px 10px, var(--zx-yellow) 10px 11px, var(--zx-blue) 11px 14px, var(--zx-yellow) 14px 17px);
  background-size: 100% 17px;
  animation: data .07s steps(3) infinite;
}
@keyframes tape { to { background-position: 0 14px; } }
@keyframes data { to { background-position: 0 17px; } }

/* PAPER */
.screen {
  max-width: 760px;
  min-height: calc(100dvh - 32px);
  margin: 0 auto;
  background: var(--paper);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) { .screen { min-height: calc(100dvh - 80px); } }

/* The masthead: the 48K's black case with its rainbow flash, as in SwissArmy. */
.masthead {
  --bevel: 10px; --slot: 7px;
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -0.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, #2c2c2c, #262626 40%, #222);
  color: var(--zx-bright-white);
  padding: 16px 16px calc(14px + var(--bevel) + var(--slot));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .18),
    inset 0 3px 4px -2px rgb(255 255 255 / .08),
    0 3px 6px rgb(0 0 0 / .35);
}
.masthead::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--bevel) + var(--slot));
  background: linear-gradient(to bottom,
    #2a2a2a 0, #333 calc(var(--bevel) * .35), #2b2b2b calc(var(--bevel) * .7), #161616 var(--bevel),
    #000 var(--bevel), #050505 calc(100% - 2px), #3d3d3d calc(100% - 2px), #2a2a2a 100%);
}
.logo { display: block; height: 2.6em; width: auto; }
.stripes {
  position: absolute;
  inset: 0 -10px calc(var(--bevel) + var(--slot)) auto;
  display: flex;
}
.stripes i { width: 12px; transform: skewX(-38deg); }
.stripes i:nth-child(1) { background: var(--zx-red); }
.stripes i:nth-child(2) { background: var(--zx-yellow); }
.stripes i:nth-child(3) { background: var(--zx-green); }
.stripes i:nth-child(4) { background: var(--zx-cyan); }
/* The stripes slide in one after another. */
.stripes i { animation: stripe .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.stripes i:nth-child(2) { animation-delay: .08s; }
.stripes i:nth-child(3) { animation-delay: .16s; }
.stripes i:nth-child(4) { animation-delay: .24s; }
@keyframes stripe { from { transform: translateX(80px) skewX(-38deg); } }

.content { padding: 20px 16px 16px; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 720px) { .content { padding: 24px 24px 20px; } }

/* LOAD "KASSIOS", typed in, with the flashing L cursor. */
.prompt { color: var(--ink-2); margin: 0 0 4px; min-height: 1.9em; }
.cursor {
  display: inline-block;
  padding: 0 2px;
  line-height: 1.3;
  margin-left: 6px;
  color: var(--ink);
  outline: 1px solid var(--ink);
  animation: flash .64s steps(1) infinite;
}
@keyframes flash { 50% { background: var(--ink); color: var(--paper); } }
.who { margin: 0 0 24px; }

h2 {
  font: inherit;
  color: var(--ink-2);
  text-transform: uppercase;
  margin: 32px 0 12px;
}

/* ── The thumbnails ─────────────────────────────────────────────── */
.tile {
  display: block;
  text-decoration: none;
  border-radius: 6px;
  outline-offset: 4px;
}
.tile .art {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s;
}
.tile:hover .art, .tile:focus-visible .art { transform: translateY(-4px); }
.tile .label { display: block; margin-top: 12px; }
.tile .label b { font-weight: normal; }
.tile .label b::after { content: ' >'; color: var(--ink-2); }
.tile:hover .label b::after { animation: nudge .5s steps(2) infinite; }
@keyframes nudge { 50% { padding-left: 6px; } }
.tile .label span { display: block; opacity: .7; }

/* ChessCraft: a wide banner on its grass, the rook hopping in its frame. */
.chess .art {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: repeating-linear-gradient(-45deg, #6aa84f 0 14px, #74b357 14px 28px);
  background-size: 40px 40px;
  animation: grass 4s linear infinite;
  box-shadow: inset 0 0 0 4px #4f7f37, 0 6px 0 #3d6229;
}
@keyframes grass { to { background-position: 40px 0; } }
.tile.chess:hover .art { box-shadow: inset 0 0 0 4px #4f7f37, 0 10px 0 #3d6229; }
.rook {
  flex: none;
  width: 84px; height: 84px;
  image-rendering: pixelated;
  box-shadow: 4px 4px 0 rgb(0 0 0 / .3);
  animation: hop 2.4s cubic-bezier(.3, 0, .3, 1) infinite;
}
@keyframes hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  66% { transform: translateY(2px) scale(1.06, .92); }
  78% { transform: translateY(-18px) scale(.96, 1.06); }
  90% { transform: translateY(0) scale(1.04, .96); }
}
.chess .title { color: #fff; text-shadow: 3px 3px 0 #2d4a1f; }
.chess .title strong { display: block; font-weight: normal; font-size: 22px; line-height: 1.3; }
.chess .title { min-width: 0; }
/* Phones: a smaller rook and a title that scales, so "ChessCraft" fits in one line. */
@media (max-width: 480px) {
  .chess .art { gap: 12px; padding: 14px; }
  .rook { width: 60px; height: 60px; }
  .chess .title strong { font-size: clamp(14px, 4.6vw, 22px); }
}
.chess .title span { display: block; margin-top: 8px; color: #fdf6e3; }
/* A strip of board squares; a pawn walks across it. */
.board {
  margin-left: auto;
  display: none;
  position: relative;
  grid-template-columns: repeat(4, 34px);
  border: 4px solid #5b3a1e;
  box-shadow: 4px 4px 0 rgb(0 0 0 / .3);
}
.board i { height: 34px; background: #f0d9b5; }
.board i:nth-child(even) { background: #8b5a2b; }
.board .pawn {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px;
  padding: 4px;
  image-rendering: pixelated;
  animation: walk 6s steps(1) infinite;
}
@keyframes walk {
  0% { transform: translateX(0); } 25% { transform: translateX(34px); }
  50% { transform: translateX(68px); } 75% { transform: translateX(102px); }
}
@media (min-width: 620px) { .board { display: grid; } }

.pair { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 620px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair .art { aspect-ratio: 4 / 3; }
@media (min-width: 620px) { .pair .art { aspect-ratio: 1; } }

/* Platformer: its glowing cube floats in the dark, among drifting pixels. */
.platformer .art {
  background: #000;
  box-shadow: 0 0 0 1px #1b2b3a;
}
.platformer .art::before {
  content: '';
  position: absolute; inset: -50%;
  background:
    radial-gradient(2px 2px at 20% 30%, #00f0ff 98%, transparent),
    radial-gradient(2px 2px at 70% 80%, #ff4fd8 98%, transparent),
    radial-gradient(2px 2px at 40% 70%, #6cff6c 98%, transparent),
    radial-gradient(2px 2px at 85% 20%, #00f0ff 98%, transparent),
    radial-gradient(2px 2px at 10% 85%, #ff4fd8 98%, transparent);
  background-size: 160px 160px;
  opacity: .7;
  animation: drift 18s linear infinite;
}
@keyframes drift { to { transform: translate(160px, -160px); } }
.cube {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  animation: float 4s ease-in-out infinite, glow 4s ease-in-out infinite;
  transition: scale .3s;
}
@keyframes float { 50% { translate: 0 -10px; rotate: 3deg; } }
@keyframes glow { 50% { filter: brightness(1.25) drop-shadow(0 0 18px #00f0ff); } }
.tile.platformer:hover .cube { scale: 1.08; }
.tile.platformer:hover .art { box-shadow: 0 0 0 1px #00f0ff, 0 0 24px rgb(0 240 255 / .35); }

/* SwissArmy: its own screen in a small Spectrum. The border loads, forever. */
.swiss .art {
  padding: 12%;
  background: repeating-linear-gradient(to bottom, var(--zx-red) 0 7px, var(--zx-cyan) 7px 14px);
  background-size: 100% 14px;
  animation: tape .18s steps(2) infinite, burst 5s steps(1) infinite;
  display: flex;
}
/* Switches between the pilot tone, the data burst and a quiet blue border. */
@keyframes burst {
  0% { background-image: repeating-linear-gradient(to bottom, var(--zx-red) 0 7px, var(--zx-cyan) 7px 14px); }
  30% { background-image: repeating-linear-gradient(to bottom,
    var(--zx-blue) 0 2px, var(--zx-yellow) 2px 5px, var(--zx-blue) 5px 6px, var(--zx-yellow) 6px 7px,
    var(--zx-blue) 7px 10px, var(--zx-yellow) 10px 11px, var(--zx-blue) 11px 14px); }
  55% { background-image: linear-gradient(var(--zx-blue), var(--zx-blue)); }
}
.mini {
  flex: 1;
  background: #000;
  border-radius: 4px;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #fff;
}
.mini .masthead { --bevel: 5px; --slot: 3px; padding: 10px 10px calc(8px + var(--bevel) + var(--slot)); border-radius: 4px 4px 0 0; }
.mini .masthead .stripes i { width: 7px; animation: none; }
.mini .logo { height: 1.5em; }
.mini .screen-text { flex: 1; display: flex; flex-direction: column; padding: 10px; font-size: 8px; line-height: 2; color: var(--zx-cyan); }
.mini .screen-text p { margin: 0; }
.mini .screen-text .ok { color: #fff; margin-top: auto; }
.mini .typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation: type 5s steps(16) infinite;
}
@keyframes type { 10% { width: 0; } 45%, 100% { width: 16ch; } }
.mini .cursor { outline-color: #fff; color: #fff; margin-left: 2px; }
@keyframes miniflash { 50% { background: #fff; color: #000; } }
.mini .cursor { animation-name: miniflash; }
.tile.swiss:hover .art { animation-duration: .09s, 5s; }

/* About me: a BASIC listing of the skills, scrolling up the screen forever. */
.about-tile { margin-top: 28px; }
.about-tile .art {
  height: 180px;
  padding: 14px;
  background: var(--zx-blue);
  box-shadow: inset 0 0 0 10px var(--zx-white);
}
.listing {
  position: absolute; inset: 10px;
  overflow: hidden;
  background: var(--zx-bright-white);
  color: var(--zx-black);
  font-size: 9px; line-height: 2;
  padding: 0 12px;
}
.listing .roll { display: block; animation: roll 16s linear infinite; }
.listing .roll span { display: block; white-space: nowrap; }
.listing .roll em { font-style: normal; color: var(--zx-blue); }
.listing .roll b { font-weight: normal; color: var(--zx-red); }
@keyframes roll { to { transform: translateY(-50%); } }
.tile.about-tile:hover .roll { animation-duration: 6s; }
.about-tile .art::after {
  /* The attribute flash in the corner: an 8×8 block cycling the palette. */
  content: '';
  position: absolute; right: 22px; bottom: 22px;
  width: 24px; height: 24px;
  animation: attr 2.4s steps(1) infinite;
}
@keyframes attr {
  0% { background: var(--zx-red); } 17% { background: var(--zx-magenta); } 33% { background: var(--zx-green); }
  50% { background: var(--zx-cyan); } 67% { background: var(--zx-yellow); } 83% { background: var(--zx-blue); }
}

/* About page */
.back { color: var(--ink-2); text-decoration: none; }
.back:hover { text-decoration: underline; }
.skills p { margin: 0 0 12px; }
.skills b { display: block; font-weight: normal; color: var(--ink-2); }
ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0 0 12px; }
li span { opacity: .7; }

footer { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--ink-2); }

/* Reveals: each section rises in as it scrolls into view. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s cubic-bezier(.2, .9, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mini .typed { width: 16ch; }
}