/* Layout: one still dawn photograph fixed behind everything; the page is a set of terminal panes
   floating over it. Only small real things move: steam, stars, the horizon, film grain. */
:root {
  color-scheme: dark;
  --night: #07090d;          /* behind the photo, and the pane glass */
  --glass: rgba(9, 12, 16, .72);
  --line: rgba(232, 222, 205, .10);
  --paper: #e8dfcf;          /* main text, warm like the lamp light */
  --paper-2: #b7ad9c;
  --paper-3: #7f776b;
  --prompt: #8fcf9f;         /* terminal green, sage not neon */
  --ember: #e9a061;          /* the horizon's amber, the only accent */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--paper); font: 15px/1.6 var(--sans); overflow-x: hidden; }
a { color: inherit; }
::selection { background: var(--ember); color: #160d05; }
:focus-visible { outline: 2px solid var(--prompt); outline-offset: 3px; border-radius: 4px; }

/* ---------- the scene ---------- */
.stage { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: 0; background: var(--night); }
.scene { position: absolute; }                      /* sized and placed by script so its % coordinates stay on the photo */
.scene img.photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.horizon { position: absolute; left: 27%; width: 46%; top: 22%; height: 16%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 55% at 55% 68%, rgba(255, 170, 105, .55), rgba(255, 140, 80, 0) 70%);
  opacity: calc(.18 + var(--dawn, 0) * .55); animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(1.18); } }
.star { position: absolute; width: .5%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 14%, rgba(200,220,255,.35) 30%, transparent 62%);
  animation: twinkle var(--d, 5s) ease-in-out infinite; animation-delay: var(--delay, 0s); opacity: calc(1 - var(--dawn, 0) * 1.2); }
@keyframes twinkle { 0%, 100% { transform: translate(-50%, -50%) scale(.6); filter: brightness(.7); } 45% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.25); } 60% { transform: translate(-50%, -50%) scale(.75); } }
/* the laptop's terminal: its next line waits with a blinking block, like the logo's */
.tcur { position: absolute; width: .42%; height: .78%; background: var(--prompt); box-shadow: 0 0 6px rgba(140, 220, 150, .7); opacity: .9;
  animation: blink 1s steps(1) infinite; pointer-events: none; }
canvas.steam { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.lamp { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(40% 50% at 96% 62%, rgba(255, 196, 140, .35), transparent 70%); animation: lamp 7s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .75; } 52% { opacity: .82; } }
.veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 60% 40%, transparent 50%, rgba(0,0,0,.55)),
              linear-gradient(90deg, rgba(5,7,10,.55), rgba(5,7,10,.05) 55%);
  }
.dim { position: absolute; inset: 0; pointer-events: none; background: #05070a; opacity: calc(var(--depth, 0) * .5); backdrop-filter: blur(calc(var(--depth, 0) * 4px)); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-size: 220px 220px; }

/* ---------- page chrome ---------- */
.page { position: relative; z-index: 1; }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 16px; padding: 14px var(--gutter);
  font: 13px var(--mono); color: var(--paper-2); }
.mark { display: inline-flex; align-items: baseline; gap: .5ch; text-decoration: none; font: 600 17px var(--mono); letter-spacing: -.02em;
  padding: 7px 12px 7px 11px; border-radius: 7px; background: rgba(7, 9, 13, .78); border: 1px solid var(--line); backdrop-filter: blur(8px); color: var(--paper); }
.mark .gt { color: var(--prompt); } .mark .tld { color: var(--ember); }
.mark .cur { display: inline-block; width: .55ch; height: 1.05em; align-self: center; background: var(--prompt); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bar nav { margin-left: auto; display: flex; gap: 2px; padding: 4px; border-radius: 8px; background: rgba(7, 9, 13, .55); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.bar nav a { text-decoration: none; padding: 5px 10px; border-radius: 5px; }
.bar nav a:hover { background: rgba(255,255,255,.06); color: var(--paper); }
.bar nav a span { color: var(--paper-3); }
@media (max-width: 520px) { .bar nav a span { display: none; } .bar nav a { padding: 5px 7px; } .mark { font-size: 15px; } }

/* ---------- panes (terminal windows) ---------- */
.pane { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 24px 70px rgba(0,0,0,.45); font: 13.5px/1.7 var(--mono); min-width: 0; }
.pane-top { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line); color: var(--paper-3); font-size: 12px; }
.pane-top .lights { display: flex; gap: 6px; } .pane-top .lights i { width: 10px; height: 10px; border-radius: 50%; background: #3a3f46; }
.pane-top .t { flex: 1; text-align: center; } .pane-top .r { font-variant-numeric: tabular-nums; }
.g { color: var(--prompt); } .e { color: var(--ember); } .m { color: var(--paper-3); } .b { color: #9db7e8; }

/* hero: a one-liner leads; under it a >_ word types, then decodes, left to right, into its second word. */
.say { position: relative; z-index: 1; display: grid; gap: 18px; align-content: start; grid-template-rows: calc(clamp(30px, 3.9vw, 56px) * 1.14 * 2) auto; height: calc(clamp(30px, 3.9vw, 56px) * 1.14 * 2 + 18px + clamp(24px, 2.8vw, 40px) * 1.1);
  opacity: 0; transition: opacity .9s ease, filter .9s ease; }
.say.show { opacity: 1; filter: blur(0); }
.say.fade { opacity: 0; filter: blur(4px); }
.say .word { margin: 0; white-space: nowrap; font: 600 clamp(24px, 2.8vw, 40px)/1.1 var(--mono); letter-spacing: -.04em; color: var(--ember); text-shadow: 0 2px 22px rgba(0,0,0,.7); }
.say .gt { color: var(--prompt); margin-right: .32em; font-weight: 600; }
.say .x { color: var(--paper-2); }                    /* a letter mid-decode */
.say .caret { display: inline-block; width: .45ch; height: .82em; margin-left: .08em; vertical-align: -.04em; background: var(--prompt); animation: blink 1s steps(1) infinite; }
.say .note { margin: 0; align-self: end; max-width: 21ch; font: 600 clamp(30px, 3.9vw, 56px)/1.14 var(--sans); letter-spacing: -.025em; color: var(--paper); text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.75); opacity: 0; translate: 0 6px; transition: opacity .7s, translate .7s; }
.say.noted .note { opacity: 1; translate: 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.down { position: absolute; left: var(--gutter); bottom: 22px; font: 12px var(--mono); color: var(--paper-2); text-decoration: none; letter-spacing: .1em; text-shadow: 0 1px 8px #000; }
.down span { display: inline-block; animation: nudge 2.2s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateY(4px); } }
/* hero */
.hero { position: relative; min-height: calc(100svh - 70px); display: flex; align-items: flex-start; padding-inline: var(--gutter); padding-block: 15vh 6vh; }  /* above the laptop, over the sky */
@media (max-width: 700px) { .hero { align-items: flex-end; padding-top: 50svh; padding-bottom: 14svh; } .veil { background: radial-gradient(120% 90% at 60% 30%, transparent 45%, rgba(0,0,0,.55)), linear-gradient(180deg, rgba(5,7,10,0) 40%, rgba(5,7,10,.6)); } }

/* sections */
.sec { padding-inline: var(--gutter); padding-block: 12vh; max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
.sec h2 { margin: 0; font: 600 clamp(26px, 4vw, 42px)/1.12 var(--sans); letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.6); max-width: 22ch; }
.me { padding-block: 9vh 2vh; }
.lede { margin: 0; max-width: 34ch; font: 500 clamp(22px, 2.7vw, 34px)/1.38 var(--sans); letter-spacing: -.015em; color: var(--paper); text-wrap: pretty; text-shadow: 0 2px 22px rgba(0,0,0,.7); }
.lede b { font-weight: 650; color: var(--ember); }
/* whoami: once in view the bio rises in a line at a time; the fetch pane runs like a real command */
.lede .w { display: inline-block; opacity: 0; translate: 0 .5em; filter: blur(5px);
  transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1), filter .8s ease; transition-delay: calc(var(--l, 0) * 140ms + 80ms); }
.me.lit .lede .w { opacity: 1; translate: 0 0; filter: blur(0); }
.me .cmd .typed::after { content: ""; display: inline-block; width: .55ch; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--prompt); animation: blink 1s steps(1) infinite; }
.me .cmd.done .typed::after { display: none; }
.me-actions { opacity: 0; translate: 0 8px; transition: opacity .6s, translate .6s; }
.me.lit .me-actions { opacity: 1; translate: 0 0; }
.fetch dl div { opacity: 0; }
.fetch dl div.on { opacity: 1; }
.fetch .swatch { opacity: 0; transition: opacity .6s; }
.fetch.ran .swatch { opacity: 1; }
.fetch .hd .typed::after, .fetch .end::after { content: ""; display: inline-block; width: .55ch; height: 1.05em; margin-left: 2px; vertical-align: -.2em; background: var(--prompt); animation: blink 1s steps(1) infinite; }
.fetch.ran .hd .typed::after { display: none; }
.fetch .end { margin: 12px 0 0; color: var(--prompt); opacity: 0; }
.fetch.ran .end { opacity: 1; }
.fetch .scan { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(143, 207, 159, .07) 50%, transparent); background-size: 100% 40%; background-repeat: no-repeat; }
.fetch.running .scan { opacity: 1; animation: scan 1.6s linear infinite; }
@keyframes scan { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.fetch { position: relative; }
.me-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 44px; align-items: center; }
@media (max-width: 880px) { .me-grid { grid-template-columns: 1fr; } }
.me-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn-t { font: 13px var(--mono); color: var(--paper); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 7px 13px; background: rgba(9, 12, 16, .55); }
.btn-t:hover { border-color: var(--prompt); }
.fetch .pane-body { padding: 16px 20px 18px; }
.fetch .hd { margin: 0 0 10px; color: var(--paper); }
.fetch dl { margin: 0; display: grid; gap: 3px; }
.fetch dl div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 12px; }
.fetch dt { color: var(--prompt); }
.fetch dd { margin: 0; color: var(--paper-2); }
.swatch { display: flex; gap: 0; margin: 14px 0 0; }
.swatch i { width: 22px; height: 12px; }
.swatch i:nth-child(1) { background: #3a3f46; } .swatch i:nth-child(2) { background: #c96a5a; } .swatch i:nth-child(3) { background: var(--prompt); }
.swatch i:nth-child(4) { background: var(--ember); } .swatch i:nth-child(5) { background: #9db7e8; } .swatch i:nth-child(6) { background: var(--paper); }
.cmd { font: 13px var(--mono); color: var(--prompt); margin: 0; text-shadow: 0 1px 10px #000; }
.cmd::before { content: "$ "; color: var(--paper-3); }

.builds { display: grid; gap: 18px; }
.build { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); overflow: hidden; }
.build figure { margin: 0; position: relative; border-right: 1px solid var(--line); background: #0b0d10; }
.build figure video { display: block; background: #0b0d10; width: 100%; height: 100%; max-height: 320px; object-fit: cover; object-position: top; }
.build figure img { display: block; width: 100%; height: 100%; max-height: 320px; object-fit: cover; object-position: top; filter: saturate(.92); }
.build .meta-col { padding: 22px 24px; display: grid; gap: 10px; align-content: start; }
.build h3 { margin: 0; font: 600 22px/1.2 var(--sans); letter-spacing: -.015em; color: var(--paper); }
.build p { margin: 0; font-family: var(--sans); font-size: 15px; color: var(--paper-2); max-width: 46ch; }
.log { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--paper-3); display: grid; gap: 2px; }
.log li { display: grid; grid-template-columns: 9ch 1fr; }
.log li::before { content: attr(data-k); color: var(--prompt); }
.build h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.build .url { font: 500 12.5px var(--mono); letter-spacing: 0; color: var(--ember); text-decoration: none; border-bottom: 1px solid rgba(232,170,110,.35); }
.build .url:hover { color: var(--paper); border-color: var(--paper); }
.build .open { display: inline-block; text-decoration: none; margin-top: 6px; font: 12.5px var(--mono); color: var(--paper); justify-self: start; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; cursor: pointer; }
.build .open:hover { border-color: var(--prompt); }

@media (max-width: 760px) { .build { grid-template-columns: 1fr; } .build figure { border-right: 0; border-bottom: 1px solid var(--line); } .build figure img, .build figure video { max-height: 210px; } }


.hello .pane-body { padding: 20px 22px; display: grid; gap: 14px; }
.hello p { margin: 0; font-family: var(--sans); color: var(--paper-2); max-width: 52ch; }
.contacts { display: grid; gap: 6px; }
.contacts div { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.contacts dt, .contacts .k { color: var(--prompt); width: 9ch; }
.contacts .v { user-select: all; color: var(--paper); }
.copy { font: 11.5px var(--mono); color: var(--paper-3); background: none; border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; cursor: pointer; }
.copy:hover { color: var(--paper); }
.foot { text-align: center; padding-block: 40px 60px; padding-inline: var(--gutter); font: 11.5px var(--mono); color: var(--paper-3); text-shadow: 0 1px 8px #000; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
/* ---------- the sky through the window: an asteroid, a skein of geese, then a UFO, drawn on a canvas ---------- */
/* the box covers the window glass down to the sill; the laptop is cut out so things pass behind it */
.sky { position: absolute; left: 27.9%; top: 4%; width: 44.3%; height: 55%; overflow: hidden; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 67.3% 100%, 67.3% 62.4%, 6.3% 62.4%, 6.3% 100%, 0 100%); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* three layers, so each kind of thing blends with the photo the way it would in a real one */
.sky .dk { mix-blend-mode: multiply; filter: blur(.55px); }             /* silhouettes darken the sky behind them */
.sky .bs { filter: blur(.5px) saturate(.8) contrast(.9); }              /* lit solid things: the saucer, the cow */
.sky .lt { mix-blend-mode: screen; filter: blur(.45px); }               /* light only adds: fireball, beam, lamps */
.sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(200, 210, 230, .05), transparent 45%, rgba(255, 200, 150, .035)); }   /* the window glass */
@media (prefers-reduced-motion: reduce) { .sky { display: none; } }

/* ---------- music toggle ---------- */
.snd { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 12px var(--mono); color: var(--paper-2); cursor: pointer;
  padding: 7px 11px; border-radius: 8px; background: rgba(7, 9, 13, .55); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.snd:hover { color: var(--paper); }
.snd .ic { color: var(--prompt); display: inline-block; }
.snd.playing .ic { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
.snd[aria-pressed="true"] .ic { color: var(--paper-3); text-decoration: line-through; }
.snd + nav { margin-left: 0; }
@media (max-width: 520px) { .snd .lb { display: none; } .snd { padding: 7px 10px; } }

/* ---------- previews open the demo window ---------- */
.build .peek { display: block; position: relative; height: 100%; color: inherit; text-decoration: none; cursor: pointer; overflow: hidden; }
.build .peek video, .build .peek img { transition: transform .5s ease, filter .3s ease; }
.build .peek:hover video, .build .peek:hover img, .build .peek:focus-visible video, .build .peek:focus-visible img { transform: scale(1.025); filter: brightness(.8); }
.peek-cta { position: absolute; left: 50%; top: 50%; translate: -50% -40%; padding: 8px 14px; border-radius: 7px; font: 13px var(--mono); color: var(--paper);
  background: rgba(7, 9, 13, .78); border: 1px solid var(--line); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s ease, translate .25s ease; pointer-events: none; }
.build .peek:hover .peek-cta, .build .peek:focus-visible .peek-cta { opacity: 1; translate: -50% -50%; }
@media (hover: none) { .peek-cta { opacity: .92; translate: -50% -50%; top: auto; bottom: 12px; translate: -50% 0; } }

/* ---------- the demo window: a terminal pane over the homepage, the scene still running behind it ---------- */
.demo { padding: 0; border: 0; background: none; width: min(1280px, calc(100vw - 2 * var(--gutter))); height: calc(100dvh - 48px); max-width: none; max-height: none; color: var(--paper); overflow: visible; }
.demo::backdrop { background: rgba(4, 6, 9, .55); backdrop-filter: blur(3px); }
.demo[open] { animation: demo-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes demo-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.demo-pane { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: rgba(9, 12, 16, .9); }
.demo-pane iframe { flex: 1; width: 100%; border: 0; display: block; background: #07090d; }
.demo-x { font: 12px var(--mono); color: var(--paper-2); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.demo-x:hover { color: var(--paper); border-color: var(--prompt); }
.demo-x .m { margin-right: 4px; }
html.demo-open { overflow: hidden; }
@media (max-width: 700px) { .demo { width: 100vw; height: 100dvh; } .demo-pane { border-radius: 0; border: 0; } .demo-x .m { display: none; } }
/* the preview fills its card's full height, however long the text column runs */
@media (min-width: 761px) {
  .build figure { min-height: 300px; }
  .build .peek { position: absolute; inset: 0; }
  .build figure video, .build figure img { position: absolute; inset: 0; max-height: none; }
}