/* =========================================================
   Infinite scroll works page — index.html
   ========================================================= */

/* Alte Haas Grotesk — the only typeface on the site */
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("../assets/fonts/AlteHaasGroteskRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("../assets/fonts/AlteHaasGroteskBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #111111;
  --mute: #a3a3a3;
  --edge: 14px;            /* outer page margin */
  --fs: 11px;              /* base UI size */
  --fs-active: 22px;       /* current project */
  --font: "Alte Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;            /* the page itself never scrolls — JS drives the list */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

a, button {
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- header ---------- */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--edge);
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.top__brand {
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .01em;
}
.top__nav { display: flex; gap: 9px; }
.top__nav a { text-decoration: none; }
.top__nav a:hover { color: var(--mute); }
/* the page you're on is bold */
.top__nav a.is-current { font-weight: 700; }
.top__nav a.is-current:hover { color: var(--ink); }

/* ---------- project list (left) ---------- */
.projects {
  position: fixed;
  left: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.projects ul { list-style: none; margin: 0; padding: 0; }
.projects button {
  display: block;
  text-align: left;
  color: var(--mute);
  font-size: var(--fs);
  line-height: 1.32;
  transition: color .35s var(--ease), font-size .45s var(--ease);
}
.projects button:hover { color: var(--ink); }
.projects button.is-active {
  color: var(--ink);
  font-size: var(--fs-active);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ---------- view switch (right) ---------- */
.views {
  position: fixed;
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  gap: 9px;
}
.views button { color: var(--mute); }
.views button:hover { color: var(--ink); }
.views button.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ---------- infinite stage ---------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  transition: opacity .5s var(--ease);
}
.stage.is-dragging { cursor: grabbing; }

.item {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #f1f1f1;
  overflow: hidden;
  cursor: pointer;
}
.item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.num {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  will-change: transform;
  pointer-events: none;
}

/* intro: images fade up as the list spins into place */
.item, .num { opacity: 1; transition: opacity .9s var(--ease); }
.is-intro .item, .is-intro .num { opacity: 0; }

/* ---------- gallery grid ---------- */
.gallery {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: 72px 18vw 72px;
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 10;
}
.gallery[hidden] { display: block; visibility: hidden; pointer-events: none; }
[data-view="gallery"] .gallery { opacity: 1; visibility: visible; }
[data-view="gallery"] .stage { opacity: 0; pointer-events: none; }
/* in the gallery every project title stays small so nothing overlaps the grid */
[data-view="gallery"] .projects button.is-active {
  font-size: var(--fs);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--mute);
}

.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 14px;
}
.gallery__grid a { display: block; width: 100%; text-decoration: none; }
.gallery__grid img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: #f1f1f1;
  transition: opacity .3s var(--ease);
}
.gallery__grid a:hover img { opacity: .75; }
.gallery__grid span {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9px;
  color: var(--mute);
}
.gallery__grid a:hover span { color: var(--ink); }

/* ---------- custom cursor (desktop only, js/cursor.js) ---------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 250;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  display: none;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
              background-color .3s, opacity .3s;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .has-cursor .cursor { display: block; }
}
.cursor.is-hover { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(17, 17, 17, .14); }
.cursor.is-hidden { opacity: 0; }

/* ---------- homepage: words over the moving pictures ----------
   The header, project list and LIST / GALLERY blend with whatever is under them
   (mix-blend-mode: difference), so they stay black on white and flip to a
   contrasting colour where a picture passes underneath. Colours are set as
   their opposites so they come out right after the flip:
   #eeeeee → #111111 (ink), #5c5c5c → #a3a3a3 (grey). */
body[data-view] .top,
body[data-view] .projects,
body[data-view] .views {
  mix-blend-mode: difference;
  --ink: #eeeeee;
  --mute: #5c5c5c;
  color: var(--ink);
}
/* the open phone menu is plain white, so the header goes back to normal */
.menu-open body[data-view] .top {
  mix-blend-mode: normal;
  --ink: #111111;
  --mute: #a3a3a3;
}

/* leaving for a project page */
body { transition: opacity .38s var(--ease); }
body.is-leaving { opacity: 0; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  :root { --fs-active: 16px; }
  .projects {
    top: auto;
    bottom: var(--edge);
    transform: none;
  }
  .views {
    top: auto;
    bottom: var(--edge);
    transform: none;
  }
  .gallery { padding: 64px var(--edge) 150px; }
  .gallery__grid { grid-template-columns: 1fr; }   /* phones: one project per row */
  /* the gallery already names each project, so the list at the bottom steps aside */
  body[data-view="gallery"] .projects { display: none; }
  .gallery { padding-bottom: 80px; }

}

@media (prefers-reduced-motion: reduce) {
  .item, .num, .stage, .gallery, .projects button { transition: none; }
}

/* ---------- phone menu (js/menu.js) ---------- */
.menu-btn { display: none; }
.menu { display: none; }

@media (max-width: 720px) {
  .top__nav { display: none; }

  /* two lines that turn into an × */
  .menu-btn {
    display: block;
    position: relative;
    width: 26px;
    height: 16px;
    margin: -2px -4px 0 0;
    padding: 0;
    z-index: 2;
  }
  .menu-btn i {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .4s var(--ease), top .4s var(--ease);
  }
  .menu-btn i:first-child { top: 4px; }
  .menu-btn i:last-child { top: 10px; }
  .menu-open .menu-btn i:first-child { top: 7px; transform: rotate(45deg); }
  .menu-open .menu-btn i:last-child { top: 7px; transform: rotate(-45deg); }

  /* the header stays on top of the open menu */
  .menu-open .top { z-index: 40; background: var(--bg); }
  .menu-open, .menu-open body { overflow: hidden; }

  .menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 30;
    padding: 84px var(--edge) var(--edge);
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .menu-open .menu {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s var(--ease), visibility 0s;
  }

  .menu__nav { display: flex; flex-direction: column; }
  .menu__link {
    font-size: clamp(40px, 13vw, 64px);
    line-height: 1.02;
    letter-spacing: -.035em;
    text-decoration: none;
    transform: translateY(18px);
    opacity: 0;
    transition: transform .6s var(--ease), opacity .6s var(--ease), color .3s var(--ease);
    transition-delay: calc(.05s + var(--i) * .06s);
  }
  .menu__link.is-current { font-weight: 700; }
  .menu__link:active { color: var(--mute); }
  .menu-open .menu__link { transform: none; opacity: 1; }

  .menu__links { margin: auto 0 0; }
  .menu__links a { text-decoration: none; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .menu, .menu__link, .menu-btn i { transition: none; }
}