/* ------------------------------------------------------------------
   salman.build — home page: hero, things I've built, story block.
   Reads every token from site.css.
   ------------------------------------------------------------------ */

/* 1. Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 64px);
}

/* Keep the field off the copy column. Text sits on plain stone. */
.hero > .grain-field {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.2) 42%, #000 64%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.2) 42%, #000 64%);
}

@media (max-width: 879px) {
  .hero > .grain-field {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 62%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 62%);
  }
}

.hero .wrap {
  position: relative; /* no z-index: the wordmark inside must be free to sit above the grain layer */
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 880px) {
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .hero-copy { align-self: center; padding-bottom: 12px; }
}

/* One left edge, one rhythm: wordmark, line, sub-line, controls. */
.hero h1 {
  margin: 0 0 26px;
  padding: 6px 0 0;
  max-width: 640px;
  font-size: 1rem; /* the wordmark is SVG; its size follows the column */
}

.hero .lede {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0 0 12px;
  font-weight: 500;
  color: var(--ink);
}

.hero .sub {
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 34px;
  font-size: 1.125rem;
  line-height: 1.5;
}

.hero .btn-row { gap: 14px 24px; }

/* The figure: a cut-out, standing on the hero's bottom rule, the field
   blooming behind. No frame: he is on the page, not in a picture of one. */
.hero-figure {
  margin: 0;
  position: relative;
  align-self: end;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: calc(-1 * clamp(40px, 5vw, 64px)); /* down to the section rule */
  min-width: 0;
}

.figure-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  --pour: 0%; /* how far the chrome has poured down, 0..100 */
}

.hero-figure .cut {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.02) saturate(1.02);
  /* The colour version is eaten from the top as the chrome pours down,
     so the two silhouettes never show at once. */
  clip-path: inset(var(--pour) 0 0 0);
}

/* 1b. The easter egg: boring → fun, olive → chrome ------------------ */

/* The chrome version sits exactly over the colour one, bottom-aligned,
   and is revealed by a clip that pours down from the top. A clip-path
   change is a cheap repaint of one layer, no filters, no blur. */
.chrome-me {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  clip-path: inset(0 0 calc(100% - var(--pour)) 0);
}

/* The chrome render is a taller composition; scaled so the heads sit level. */
.chrome-me img { height: 93%; width: auto; max-width: none; display: block; }

/* The pour line: a bright horizontal glint at the leading edge. */
.pour-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pour) - 2px);
  height: 4px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  mix-blend-mode: screen;
}

/* One highlight sweep across the metal once it has set, cut to the
   figure's silhouette by the chrome image itself. */
.sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.9) 50%, transparent 62%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask: url("/assets/img/me-chrome-480.webp") no-repeat 50% 100% / auto 93%;
  mask: url("/assets/img/me-chrome-480.webp") no-repeat 50% 100% / auto 93%;
}

/* 1c. Film over the figure: the site's grain, cut to the silhouette ---- */
.figure-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("/assets/img/grain.png") 0 0 / 170px 170px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  -webkit-mask: url("/assets/img/me-480.webp") no-repeat 50% 100% / 100% 100%;
  mask: url("/assets/img/me-480.webp") no-repeat 50% 100% / 100% 100%;
}

:root[data-theme="dark"] .figure-stack::after { opacity: 0.42; }

.figure-stack.is-chrome::after {
  -webkit-mask: url("/assets/img/me-chrome-480.webp") no-repeat 50% 100% / auto 93%;
  mask: url("/assets/img/me-chrome-480.webp") no-repeat 50% 100% / auto 93%;
  opacity: 0.5;
}

/* Pouring: the clip and the edge run together, weighted. */
.figure-stack.is-pouring { transition: --pour 1100ms cubic-bezier(0.6, 0, 0.2, 1); }
.figure-stack.is-pouring .pour-edge { opacity: 1; transition: opacity 120ms ease; }
.figure-stack.is-chrome { --pour: 100%; }


.figure-stack.is-set .sheen { opacity: 1; animation: sheen 1500ms cubic-bezier(0.4, 0, 0.2, 1) 1 both; }

@keyframes sheen {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}

/* The sunglasses: a hotspot over them, in either state. */
.egg-spot {
  position: absolute;
  left: 40%;
  top: 54%;
  width: 15%;
  height: 24%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

.egg-spot:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.figure-stack.is-chrome .egg-spot { left: 36%; top: 24%; width: 28%; height: 9%; }

/* The word: a split-flap. Two labels stacked in a window one line tall;
   the window's width follows the visible word. */
.egg-word {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: var(--green);
  cursor: pointer;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
}

.egg-word:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.egg-word .flap {
  display: inline-block;
  height: 1.15em;
  line-height: 1.15;
  overflow: hidden;
  vertical-align: top;
  position: relative;
  width: var(--w, auto);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.egg-word .flap > span {
  display: block;
  width: max-content;
  white-space: nowrap;
  transition: transform 460ms cubic-bezier(0.2, 1.2, 0.4, 1);
}

.egg-word[aria-pressed="true"] .flap > span { transform: translateY(-100%); }

/* A press on the word seats it, like everything else. */
.egg-word:active .flap { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .figure-stack.is-pouring, .egg-word .flap, .egg-word .flap > span { transition: none !important; }
  .figure-stack.is-set .sheen { animation: none; opacity: 0; }
  .pour-edge { display: none; }
}

/* The plinth: a hairline block of raised stone behind his shoulders, the
   same surface as a bezel, so the figure has somewhere to stand. */
.hero-figure .plinth {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 44%;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.hero-figure .plinth::before {
  /* a mono port on the plinth's top-left corner: it is part of the diagram */
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--page);
  border: 1px solid var(--green);
}

@media (max-width: 879px) {
  .hero-figure {
    order: -1;
    margin-bottom: 0;
    padding-top: 8px;
    border-bottom: 1px solid var(--rule); /* the floor he stands on */
  }
  .figure-stack { width: fit-content; max-width: min(320px, 68vw); }
  .hero-figure .cut { max-width: 100%; max-height: 44svh; width: auto; }
  .hero-figure .plinth { left: 10%; right: 10%; height: 38%; }
}

/* The hero drawn as a flowchart: hairlines from the wordmark and the
   button into the photo. Built by site.js from the real boxes. */
.hero-flow {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero.flow-in .hero-flow { opacity: 1; }

.hero-flow .flow-pulse { fill: var(--green); }
.hero-flow .flow-line { stroke-width: 1.35; }

/* 2. Things I've built --------------------------------------------- */

.proof {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.proof-row {
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 40px;
}

@media (min-width: 880px) {
  .proof-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 170px;
    align-items: start;
    padding: 32px 0;
  }
}

.proof-row h3 {
  margin: 0 0 6px;
  font-size: 1.375rem;
}

.proof-row h3 a {
  color: inherit;
  text-decoration: none;
}

.proof-row h3 a:hover { color: var(--green); }

.proof-row .who {
  color: var(--ink-2);
  margin: 0 0 12px;
  font-size: 1rem;
  max-width: 52ch;
}

.proof-row .result {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--ink-2);
}

.proof-row .go {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 880px) {
  .proof-row .go { justify-content: flex-end; padding-top: 4px; }
}

/* 3. Story block ---------------------------------------------------- */

.story .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 72px);
}

@media (min-width: 880px) {
  .story .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
}

.story-figure { margin: 0; }
.story-figure .frame-inner { aspect-ratio: 4 / 5; }

.story-copy h2 { margin-bottom: 0.6em; }

.story-copy p { font-size: 1.125rem; }

.story-copy .stack {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}

.story-copy .more {
  margin: 18px 0 0;
  font-size: 1rem;
}

.story-copy .more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
}

.story-copy .more a:hover { color: var(--green); }
.story-copy .more .ic { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.story-copy .more a:hover .ic { transform: translateX(3px); }