/* ============================================================
   sadeali.com — friendly terminal theme.
   Dark-first (a terminal is dark); the toggle switches to a
   "paper terminal" light mode. Zero dependencies, system mono
   stack. Tokens, terminal window component, hero, cards,
   inner pages, footer.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #131020;
  --card: #1D1932;
  --ink: #EDE9FF;
  --muted: #A79FC2;
  --line: #352C55;
  --shadow: rgba(0, 0, 0, 0.45);
  --hero-from: #1C1738;
  --focus: #9D7BF4;
  --link: #3FB3F6;
  --blob-alpha: 0.26;

  --coral: #FF6B6B;
  --sunny: #FFB627;
  --mint: #2EC4A6;
  --sky: #3FB3F6;
  --lilac: #9D7BF4;
  --bubblegum: #F46BB8;
  --prompt: var(--mint);
}

/* Paper terminal (light) — chosen via the toggle. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FDF6EC;
  --card: #FFFFFF;
  --ink: #2B2440;
  --muted: #6E6587;
  --line: #E8DCC8;
  --shadow: rgba(43, 36, 64, 0.10);
  --hero-from: #C9E9FF;
  --focus: #1A73AD;
  --link: #1A73AD;
  --blob-alpha: 0.5;
  --prompt: #0F7A63; /* mint darkened to pass AA on cream (4.9:1) */
}

/* --accent-ink is the accent as *text*: same hue, deepened in light mode
   to clear contrast minimums on the cream background. */
.accent-coral { --accent: var(--coral); --accent-ink: var(--coral); }
.accent-sunny { --accent: var(--sunny); --accent-ink: var(--sunny); }
.accent-mint { --accent: var(--mint); --accent-ink: var(--mint); }
.accent-sky { --accent: var(--sky); --accent-ink: var(--sky); }
.accent-lilac { --accent: var(--lilac); --accent-ink: var(--lilac); }
.accent-bubblegum { --accent: var(--bubblegum); --accent-ink: var(--bubblegum); }
/* Verified ≥4.5:1 on the card-bar tint (#F7F3EC), where the slug lives. */
:root[data-theme="light"] .accent-coral { --accent-ink: #C42F2F; }
:root[data-theme="light"] .accent-sunny { --accent-ink: #8F5F00; }
:root[data-theme="light"] .accent-mint { --accent-ink: #0F7A63; }
:root[data-theme="light"] .accent-sky { --accent-ink: #1A73AD; }
:root[data-theme="light"] .accent-lilac { --accent-ink: #7146DB; }
:root[data-theme="light"] .accent-bubblegum { --accent-ink: #B62965; }

* { box-sizing: border-box; }

/* The Stage-0 reveal depends on [hidden] beating component display rules
   (UA stylesheets don't always apply it with !important). */
[hidden] { display: none !important; }

html { height: 100%; scrollbar-color: var(--muted) var(--bg); }

/* Selecting text inverts it, like a real terminal. */
::selection { background: var(--prompt); color: var(--bg); }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  /* Terminal cells: no ligatures, digits all the same width. */
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  z-index: 20;
}
.skip:focus { left: 0; }

:is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ===== Terminal window component ===== */

.term {
  position: relative;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--shadow);
  overflow: hidden;
  text-align: left;
}

/* Faint CRT scanlines over terminal windows (dark mode only). */
.term::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.09) 2px 3px);
}
:root[data-theme="light"] .term::after { display: none; }

.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-bottom: 2px solid var(--line);
  background: color-mix(in srgb, var(--line) 35%, var(--card));
}

.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.d1 { background: var(--coral); }
.dot.d2 { background: var(--sunny); }
.dot.d3 { background: var(--mint); }

.term-title {
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.term-body { padding: 24px 26px 26px; }

.promptline {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}
.prompt { color: var(--prompt); font-weight: 900; user-select: none; /* copying a command never grabs the $ */ }

.term-output { margin: 0 0 14px; font-size: 0.9rem; color: var(--muted); }

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.12em;
  background: var(--prompt);
  vertical-align: baseline;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ===== Corner controls (theme toggle, support heart) ===== */

.corner-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.iconbtn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--shadow); }
.iconbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--shadow); }

/* The corner heart is a pill with a label on wide screens — a bare icon
   is too easy to scroll past for the one button that pays the bills. */
.heartbtn { width: auto; padding: 0 13px; gap: 7px; }
.heartbtn svg { color: var(--coral); }
.heartlabel { font-size: 0.8rem; font-weight: 800; }

.heartbtn svg { animation: heartbeat 2.6s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.18); }
  24% { transform: scale(1); }
}

/* Dark (default) shows the sun (click → light); light shows the moon. */
.ic-moon { display: none; }
:root[data-theme="light"] .ic-moon { display: inline; }
:root[data-theme="light"] .ic-sun { display: none; }

/* ===== Hero ===== */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 72px 20px 48px;
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 100%);
}

.blobs { position: absolute; inset: 0; pointer-events: none; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: var(--blob-alpha);
  animation: drift 12s ease-in-out infinite alternate;
}
.b1 { width: 180px; height: 180px; left: 6%; top: 12%; background: var(--coral); animation-duration: 13s; }
.b2 { width: 140px; height: 140px; right: 10%; top: 8%; background: var(--sunny); animation-duration: 10s; animation-delay: -3s; }
.b3 { width: 120px; height: 120px; left: 22%; bottom: -10%; background: var(--mint); animation-duration: 15s; animation-delay: -6s; }
.b4 { width: 160px; height: 160px; right: 20%; bottom: -18%; background: var(--bubblegum); animation-duration: 11s; animation-delay: -8s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(24px, -18px) scale(1.12); }
}

.hero-term {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
.hero-term .term-body { padding: 26px 30px 30px; }

.wordmark {
  margin: 0;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.wordmark span { display: inline-block; }
.wordmark span:nth-child(1) { color: var(--coral); transform: rotate(-4deg); }
.wordmark span:nth-child(2) { color: var(--sunny); transform: rotate(3deg); }
.wordmark span:nth-child(3) { color: var(--mint); transform: rotate(-2deg); }
.wordmark span:nth-child(4) { color: var(--sky); transform: rotate(3deg); }
.wordmark span:nth-child(5) { color: var(--lilac); transform: rotate(-3deg); }
.wordmark span:nth-child(6) { color: var(--bubblegum); transform: rotate(2deg); }
.wordmark span:nth-child(7) { color: var(--coral); transform: rotate(-3deg); }

.wordmark:hover span:not(.cursor) { animation: hop 0.5s ease; }
/* Same specificity as the rule above and later in source, so the
   staggered delays beat the shorthand's implicit delay reset. */
.wordmark:hover span:nth-child(2) { animation-delay: 0.04s; }
.wordmark:hover span:nth-child(3) { animation-delay: 0.08s; }
.wordmark:hover span:nth-child(4) { animation-delay: 0.12s; }
.wordmark:hover span:nth-child(5) { animation-delay: 0.16s; }
.wordmark:hover span:nth-child(6) { animation-delay: 0.2s; }
.wordmark:hover span:nth-child(7) { animation-delay: 0.24s; }

/* The blinking cursor keeps its own animation even mid-hop. */
.wordmark .cursor { animation: blink 1.1s steps(2, start) infinite; }

/* Raw accents are tuned for the dark card; on paper they need deeper
   versions to clear the 3:1 large-text minimum. */
:root[data-theme="light"] .wordmark span:nth-child(1) { color: #D93A3A; }
:root[data-theme="light"] .wordmark span:nth-child(2) { color: #A87000; }
:root[data-theme="light"] .wordmark span:nth-child(3) { color: #178F77; }
:root[data-theme="light"] .wordmark span:nth-child(4) { color: #1A73AD; }
:root[data-theme="light"] .wordmark span:nth-child(5) { color: #7E52E8; }
:root[data-theme="light"] .wordmark span:nth-child(6) { color: #CC2E79; }
:root[data-theme="light"] .wordmark span:nth-child(7) { color: #D93A3A; }

@keyframes hop {
  30% { transform: translateY(-12px); }
  60% { transform: translateY(2px); }
}

.tagline {
  margin: 8px 0 0;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  color: var(--muted);
  font-weight: 600;
}
.comment-hash { color: var(--prompt); font-weight: 900; }

/* Typed-out `whoami` intro. The .typing class exists only when JS is on,
   motion is allowed, and it hasn't played this session (set in <head>);
   main.js types the command and removes the class to reveal the output. */
.wordmark, .tagline { transition: opacity 0.35s ease, transform 0.35s ease; }
.tagline { transition-delay: 0.12s; }
.typing .wordmark, .typing .tagline { opacity: 0; transform: translateY(6px); transition: none; }

/* ===== Project grid ===== */

main { flex: 1; width: 100%; }

.gridwrap { max-width: 1080px; margin: 0 auto; padding: 30px 20px 20px; }

.lsline { margin: 0 0 4px; }
.lsout { margin: 0 0 16px; font-size: 0.8rem; color: var(--muted); }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.grid > li { animation: rise 0.5s ease backwards; }
.grid > li:nth-child(2) { animation-delay: 0.07s; }
.grid > li:nth-child(3) { animation-delay: 0.14s; }
.grid > li:nth-child(4) { animation-delay: 0.21s; }
.grid > li:nth-child(5) { animation-delay: 0.28s; }
.grid > li:nth-child(6) { animation-delay: 0.35s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 18px 20px;
  text-align: center;
  text-decoration: none;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  overflow: hidden; /* clip the full-bleed card-bar to the rounded corners */
  box-shadow: 0 5px 0 var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card-bar {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 -18px 8px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--line);
  background: color-mix(in srgb, var(--line) 35%, var(--card));
}
.card-bar .dot { width: 9px; height: 9px; }
.card-slug {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
}

a.card:hover, a.card:focus-visible {
  transform: translateY(-6px) rotate(-1.2deg);
  border-color: var(--accent);
  box-shadow: 0 9px 0 var(--shadow), 0 0 26px color-mix(in srgb, var(--accent) 30%, transparent);
}
a.card:hover .card-slug, a.card:focus-visible .card-slug { color: var(--accent-ink); }

.card-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  font-size: 38px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.card-title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.card-tagline { margin: 0; font-size: 0.85rem; color: var(--muted); }

.badge {
  position: absolute;
  top: 44px;
  right: 12px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #1A1626; /* dark ink passes AA on every accent, both themes */
  background: var(--accent);
  padding: 3px 8px;
  border-radius: 999px;
  transform: rotate(6deg);
}

.card-soon { border-style: dashed; }
.card-soon .card-bar { border-bottom-style: dashed; }
.card-soon .card-title, .card-soon .card-tagline { color: var(--muted); }
.card-soon .card-icon { animation: wobble 3.2s ease-in-out infinite; }
.grid > li:nth-child(even) .card-soon .card-icon { animation-delay: -1.6s; }

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(2deg); }
}

.card-support .card-icon { color: var(--coral); }

/* ===== Inner pages (about, support, 404) ===== */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.backlink:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--shadow); }

.topbar-spacer { flex: 1; }

.page {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 20px 48px;
}

.page .term-body { padding: 22px 26px 30px; }

.page h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
  margin: 0.2em 0 0.6em;
}

.page h2 { font-size: 1.05rem; font-weight: 800; margin: 1.8em 0 0.4em; color: var(--ink); }
.page h2::before { content: "## "; content: "## " / ""; color: var(--prompt); }
.page p, .page li { color: var(--ink); font-size: 0.95rem; }
.page .lede { color: var(--muted); font-weight: 600; }
.page a { color: var(--link); font-weight: 700; text-decoration-thickness: 2px; }

.page ul.fancy { list-style: none; padding: 0; }
.page ul.fancy li {
  margin: 10px 0;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--line) 22%, var(--card));
  border: 2px solid var(--line);
  border-radius: 10px;
}

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: inherit;
  text-decoration: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent, var(--sky)) 26%, var(--card));
  border: 2px solid var(--accent, var(--sky));
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent, var(--sky)) 45%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 7px 0 color-mix(in srgb, var(--accent, var(--sky)) 45%, transparent); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent, var(--sky)) 45%, transparent); }

.newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 11px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--muted); /* --line is sub-3:1 for a control boundary */
  border-radius: 10px;
}

/* Terminal-output blocks on /support: the costs.txt receipt and the
   goal meter. Real numbers, monospace dot leaders. */
.costs {
  margin: 12px 0;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink);
  background: color-mix(in srgb, var(--line) 22%, var(--card));
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
}
.costs .ok { color: var(--prompt); font-weight: 700; }
.costs .dim { color: var(--muted); }

.goalbar { letter-spacing: 0.06em; }
.goalbar .fill { color: var(--prompt); }

.supporters { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.supporters li {
  padding: 7px 13px;
  font-weight: 700;
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--line) 22%, var(--card));
  border: 2px solid var(--line);
  border-radius: 999px;
}

/* ===== 404 ===== */

.lost {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.lost-term { width: 100%; max-width: 560px; }
.lost-term .term-body { text-align: center; }
.lost-term .promptline, .lost-term .term-output { text-align: left; }
.lost .bigicon { font-size: 76px; margin: 10px 0 4px; animation: wobble 3.2s ease-in-out infinite; }
.lost h1 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 900; margin: 8px 0 6px; }
.lost .lost-sub { color: var(--muted); font-weight: 600; margin: 0 0 22px; }

/* ===== Footer ===== */

.footer {
  text-align: center;
  padding: 40px 20px 28px;
  color: var(--muted);
}

.footnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}
.footnav a { text-decoration: none; }
.footnav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
#supportLinks { display: contents; }

.heart-ink { color: var(--coral); }

.fineprint { margin: 16px 0 0; font-size: 0.78rem; }

/* ===== Motion & small screens ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cursor { opacity: 1; }
}

@media (max-width: 480px) {
  .hero { padding: 68px 14px 40px; }
  .hero-term .term-body { padding: 20px 18px 24px; }
  .gridwrap { padding: 24px 14px 16px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 0 12px 16px; }
  .card-bar { margin: 0 -12px 6px; }
  .card-icon { width: 58px; height: 58px; font-size: 30px; }
  .card-title { font-size: 0.98rem; }
  .card-tagline { font-size: 0.78rem; }
  .badge { top: 38px; }
}

/* ===== Interactive hero shell ===== */

.shell { margin-top: 14px; }
.shell-out { max-height: 180px; overflow-y: auto; }
.shell-form { margin: 0; }
.shell-line-out { margin: 2px 0; font-size: 0.88rem; font-weight: 600; color: var(--muted); white-space: pre-wrap; }
.shell-line-out.cmd { color: var(--ink); font-weight: 700; }
.shell-line-out a { color: var(--link); font-weight: 700; }
.shell-line { display: flex; align-items: baseline; gap: 0.55ch; margin: 4px 0 0; }
.shell-in {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--prompt);
}
.shell-in::placeholder { color: var(--muted); opacity: 1; font-style: italic; }