:root {
  --bg:      #ffffff;
  --ink:     #0e0f13;
  --text:    #15171c;
  --dim:     #6b7280;
  --faint:   #aab0bb;
  --line:    #ececf0;
  --accent:  #2f6df0;
  --josh:   #2fae7a;
  --hope:    #e8893f;
  --tb-h:    60px;          /* taskbar height */
  --ground:  54px;          /* element bottom — tuned so feet land on the line */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;                  /* single screen — never scroll */
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Ambient light orbs ────────────────────────────────── */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; will-change: transform; }
.orb.o1 { width: 44vmin; height: 44vmin; left: -10vmin; top: -12vmin;
  background: radial-gradient(circle, #7ce0b6, transparent 70%); animation: float1 24s ease-in-out infinite; }
.orb.o2 { width: 40vmin; height: 40vmin; right: -8vmin; top: -6vmin;
  background: radial-gradient(circle, #ffc794, transparent 70%); animation: float2 29s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6vmin, 5vmin); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6vmin, 6vmin); } }

/* ── Top bar ───────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px 38px;
}
.brand-left { justify-self: start; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.brand-logo { display: inline-flex; }
.brand-logo img { height: 30px; width: auto; display: block; }
.brand-by {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem; color: var(--dim); letter-spacing: 0.03em;
}
.wordmark {
  justify-self: center;
  font-weight: 900; letter-spacing: -0.03em; font-size: 1.12rem; color: var(--ink);
}
.nav-meta {
  justify-self: end;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.74rem; color: var(--faint); letter-spacing: 0.02em;
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 3;
  height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px var(--tb-h);
  pointer-events: none;
}
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.7rem; font-weight: 500;
  color: var(--dim); margin-bottom: 24px;
  opacity: 0; animation: rise 0.7s 0.05s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero h1 {
  font-size: clamp(2.4rem, 6.8vw, 5rem);
  font-weight: 900; letter-spacing: -0.045em; line-height: 1.0;
  margin-bottom: 22px; color: var(--ink);
  opacity: 0; animation: rise 0.8s 0.12s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--josh), var(--accent) 50%, var(--hope));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hue 8s ease-in-out infinite;
  /* inline-block + right padding stops the last glyph ("r") being clipped
     by background-clip:text; negative margin keeps the period tight. */
  display: inline-block;
  padding-right: 0.08em;
  margin-right: -0.06em;
}
.sub {
  color: var(--dim); font-size: clamp(1rem, 2.3vw, 1.28rem); font-weight: 500; margin-bottom: 42px;
  opacity: 0; animation: rise 0.8s 0.2s cubic-bezier(0.22,1,0.36,1) forwards;
}
.josh-text { color: var(--josh); }
.hope-text  { color: var(--hope); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hue  { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── Download button ───────────────────────────────────── */
.download-btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 40px; border-radius: 999px;
  font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; color: #fff; background: var(--ink);
  box-shadow: 0 12px 30px rgba(14,15,19,0.22);
  transition: box-shadow 0.25s ease, transform 0.18s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
  opacity: 0; animation: rise 0.8s 0.28s cubic-bezier(0.22,1,0.36,1) forwards;
}
.download-btn:hover { box-shadow: 0 22px 48px rgba(14,15,19,0.32); }
.download-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 3px; }
.download-btn .dl-icon { font-size: 1.1rem; font-weight: 900; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Two buttons side by side: primary download + the invite-only secondary. */
.dl-row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.download-btn.ghost {
  background: transparent; color: var(--ink); cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: none; font-size: 1rem; padding: 17px 32px;
}
.download-btn.ghost:hover { box-shadow: 0 14px 32px rgba(14,15,19,0.14); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.download-btn.ghost .dl-icon { animation: none; color: var(--accent); }
.dl-note { margin-top: 14px; font-size: 0.82rem; color: var(--dim); opacity: 0; animation: rise 0.8s 0.42s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ── Invite-only download modal (reuses the egg modal look) ── */
.invite-backdrop {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,15,19,0.45);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: egg-fade 0.25s ease;
}
.invite-backdrop[hidden] { display: none; }
.invite-card {
  position: relative; width: min(440px, 90vw);
  background: #fff; border-radius: 24px;
  padding: 42px 44px; text-align: center;
  box-shadow: 0 30px 90px rgba(14,15,19,0.30);
  animation: egg-pop 0.4s cubic-bezier(0.22,1,0.36,1);
}
.invite-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1.5px;
  background: linear-gradient(120deg, var(--josh), var(--accent), var(--hope));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.invite-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.66rem;
  color: var(--accent); margin-bottom: 12px;
}
.invite-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.invite-sub { font-size: 0.9rem; color: var(--dim); margin-bottom: 22px; }
.invite-input {
  width: 100%; box-sizing: border-box; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1rem; letter-spacing: 0.08em;
  padding: 14px 16px; border-radius: 12px; text-transform: uppercase;
  border: 1.5px solid var(--line); background: #fafbfc; color: var(--ink);
  transition: border-color 0.15s;
}
.invite-input:focus { outline: none; border-color: var(--accent); }
.invite-go {
  width: 100%; margin-top: 14px; padding: 15px; border: none; border-radius: 999px;
  font-size: 1rem; font-weight: 800; color: #fff; background: var(--ink); cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}
.invite-go:hover { box-shadow: 0 16px 36px rgba(14,15,19,0.26); }
.invite-go:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.invite-msg { min-height: 1.2em; margin-top: 14px; font-size: 0.88rem; color: var(--dim); }

/* Bottom-left credit, styled to match the taskbar clock. */
.made {
  position: fixed; left: 24px; bottom: 21px; z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; color: var(--faint); letter-spacing: 0.02em;
}

/* ── Faux taskbar ──────────────────────────────────────── */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--tb-h);
  background: rgba(247,248,250,0.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.ground {
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,15,19,0.12) 18%, rgba(14,15,19,0.12) 82%, transparent);
}
.tb-apps { display: flex; gap: 14px; opacity: 0.5; }
.tb-app {
  width: 22px; height: 22px; border-radius: 6px;
  background: #d6dae1; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.tb-app:nth-child(1) { background: #cfe9dc; }
.tb-app:nth-child(3) { background: #f1ddc9; }
.tb-app:nth-child(5) { background: #d4dcf3; }
.tb-clock {
  position: absolute; right: 22px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; color: var(--faint);
}

/* ── Walking companions ────────────────────────────────── */
/* Per-character sprite sheets, each cropped to its OWN content box and
   normalised to 128px tall so the two read as the same size. Each uses its
   own detected gait cycle so the loop is seamless (no hitch on completion),
   played with steps() at the source's native 30fps. */
.pet {
  position: fixed; left: 0; bottom: var(--ground); z-index: 4;
  background-repeat: no-repeat;
  will-change: transform, background-position;
  filter: drop-shadow(0 6px 5px rgba(14,15,19,0.12));
}
#josh {
  width: 99px; height: 128px;
  background-image: url("josh-walk.png"); background-size: 3861px 128px;
  animation: walk-josh 1.3s steps(39) infinite;
}
#hope {
  width: 109px; height: 118px;
  background-image: url("hope-walk.png"); background-size: 2943px 118px;
  animation: walk-hope 1.15s steps(27) infinite;
}
@keyframes walk-josh { from { background-position: 0 0; } to { background-position: -3861px 0; } }
@keyframes walk-hope  { from { background-position: 0 0; } to { background-position: -2943px 0; } }

/* soft contact shadow at the feet */
.pet::after {
  content: ""; position: absolute; bottom: 6px; left: 50%;
  width: 56px; height: 9px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(14,15,19,0.20), transparent);
  filter: blur(1px);
}

/* ── Easter-egg credits popup ──────────────────────────── */
.egg-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,15,19,0.45);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: egg-fade 0.25s ease;
}
.egg-backdrop[hidden] { display: none; }
.egg-card {
  position: relative;
  background: #fff; border-radius: 24px;
  padding: 46px 64px; text-align: center;
  box-shadow: 0 30px 90px rgba(14,15,19,0.30);
  animation: egg-pop 0.4s cubic-bezier(0.22,1,0.36,1);
}
.egg-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1.5px;
  background: linear-gradient(120deg, var(--josh), var(--accent), var(--hope));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.egg-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.68rem;
  color: var(--dim); margin-bottom: 16px;
}
.egg-names { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.egg-names li { font-size: 1.12rem; font-weight: 600; color: var(--text); }
.egg-close {
  position: absolute; top: 12px; right: 16px;
  border: none; background: none; font-size: 1.5rem; line-height: 1;
  color: var(--faint); cursor: pointer; transition: color 0.15s;
}
.egg-close:hover { color: var(--ink); }
@keyframes egg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes egg-pop  { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ── Grain ─────────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar { padding: 16px 20px; }
  .nav-meta { display: none; }
  .brand-logo img { height: 24px; }
  #josh { width: 79px; height: 102px; background-size: 3081px 102px; }
  #hope  { width: 87px; height: 94px;  background-size: 2349px 94px; }
  @keyframes walk-josh { from { background-position: 0 0; } to { background-position: -3081px 0; } }
  @keyframes walk-hope  { from { background-position: 0 0; } to { background-position: -2349px 0; } }
  .tb-apps { gap: 10px; }
  .tb-app { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .download-btn .dl-icon, .hero h1 .grad,
  .eyebrow, .hero h1, .sub, .download-btn, .count { animation: none; opacity: 1; }
  .pet { animation-play-state: paused; }
}