/* =========================================================
   About page — about.html
   Builds on css/scroll.css + css/project.css.
   ========================================================= */

html { scroll-behavior: smooth; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- hero: one screen under the header ---------- */
.hero {
  position: relative;
  height: calc(100vh - 45px);
  height: calc(100svh - 45px);
  min-height: 520px;
  overflow: hidden;
}

/* big lines left and right, set like the project titles */
.hero__line {
  position: absolute;
  top: 42%;
  margin: 0;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.035em;
  z-index: 3;
}
.hero__line--left { left: var(--edge); }
.hero__line--right { right: var(--edge); text-align: right; }

/* portrait sits on the bottom edge, centred */
.hero__portrait {
  position: absolute;
  left: 50%;
  bottom: -15%;
  height: 112%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform .9s var(--ease);
}

/* words over the portrait flip colour so they stay readable
   (mix-blend-mode: difference; #eeeeee shows as black on white) */
.hero__roles,
.hero__line {
  mix-blend-mode: difference;
  --ink: #eeeeee;
  color: var(--ink);
}

/* roles: label with a small dot under it — drag them around (js/about.js) */
.hero__roles {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero__roles li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translate(-50%, 0);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;           /* lets phones drag the label instead of scrolling */
}
.hero__roles li.is-dragging { cursor: grabbing; z-index: 5; }
.hero__roles span {
  white-space: nowrap;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(.35s + var(--d) * .09s);
}
.hero__roles i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .6s var(--ease);
  transition-delay: calc(.3s + var(--d) * .09s);
}
.hero__roles li:hover i,
.hero__roles li.is-dragging i { transform: scale(1.8); }

/* ---------- intro ---------- */
.hero__line, .hero__portrait img {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero__line--right { transition-delay: .1s; }
.is-entering .hero__line { opacity: 0; transform: translateY(14px); }
.is-entering .hero__portrait img { opacity: 0; transform: translateY(40px); }
.is-entering .hero__roles span { opacity: 0; transform: translateY(8px); }
.is-entering .hero__roles i { transform: scale(0); }

/* ---------- bio + details ---------- */
.ab__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px var(--edge);
  padding: 46px 0 110px;
}
.ab__bio { max-width: 560px; }
.ab__bio p:not(.pj__label) {
  margin: 0 0 1.1em;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.ab__bio .ab__lead {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.35;
  letter-spacing: -.01em;
}

/* ---------- selected work: infinite carousel ---------- */
.sw {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #e4e4e4;
  --w: clamp(140px, 12.5vw, 230px);   /* card width */
}
.sw__bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: var(--edge);
}
.sw__hint { color: var(--mute); }

.sw__viewport {
  position: relative;
  margin: 18px 0 72px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;            /* phones: swipe sideways for the row, up/down still scrolls */
  user-select: none;
  -webkit-user-select: none;
}
.sw.is-dragging .sw__viewport { cursor: grabbing; }
.sw.is-dragging .sw__card { pointer-events: none; }

.sw__track {
  display: flex;
  align-items: flex-end;           /* cards sit on one baseline, so different heights step */
  gap: 12px;                       /* same gap as the project page images */
  width: max-content;
  will-change: transform;
}
.sw__card {
  flex: none;
  width: var(--w);
  text-decoration: none;
}
.sw__card img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #f1f1f1;
  transition: opacity .35s var(--ease);
}
.sw__card:hover img { opacity: .82; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .hero { min-height: 560px; }
  .hero__line { top: 26px; font-size: 22px; }
  /* phones: roles ring the head, and this line sits underneath everything */
  .hero__line--right { top: auto; bottom: 22px; }
  .hero__portrait { top: 23%; bottom: auto; height: 56%; }   /* head centred between the two lines */
  .hero__roles li { left: var(--mx, var(--x)); top: var(--my, var(--y)); font-size: 10px; gap: 5px; }
  .hero__roles i { width: 5px; height: 5px; }
  .ab__info { grid-template-columns: 1fr; padding: 36px 0 72px; }
  .sw { --w: 40vw; }
  .sw__viewport { margin-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__line, .hero__portrait img, .hero__roles span, .hero__roles i {
    transition: none; opacity: 1; transform: none;
  }
}