/* ============================================================
   menu.css — "Selected Work" menu.
   Depends on: tokens.css, base.css
   Figma: Home 10 (default) / Home 13 (hover) — node 22:551

   The menu is an OVERLAY injected on every page by js/overlay.js — not a
   standalone page. These rules style its contents (list + image scatter);
   the scrim, open/close, and edge-clipping live in css/overlay.css.
   ============================================================ */

:root {
  --reveal-dur: 0.7s;    /* image scatter fade/scale time */
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  /* Clip the scatter images where they bleed off the edges */
  overflow: hidden;
}

/* ---------- Scatter layer (image reveals on hover) ---------- */
.scatter-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scatter {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--reveal-dur) var(--ease),
              visibility 0s linear var(--reveal-dur);
}

.scatter.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--reveal-dur) var(--ease);
}

.scatter-img {
  position: absolute;
  background: var(--placeholder);
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--reveal-dur) var(--ease),
              opacity var(--reveal-dur) var(--ease);
}

.scatter.is-active .scatter-img {
  transform: scale(1);
  opacity: 1;
}

/* Stagger the four tiles slightly for a "scattering in" feel */
.scatter.is-active .scatter-img:nth-child(2) { transition-delay: 0.05s; }
.scatter.is-active .scatter-img:nth-child(3) { transition-delay: 0.10s; }
.scatter.is-active .scatter-img:nth-child(4) { transition-delay: 0.15s; }

/* Per-project arrangements.
   Each project gets its own scatter of four tiles — varied positions, sizes,
   and aspect ratios so it feels hand-placed rather than templated, while still
   reading as orderly. Rules of the layout:
     - Tiles live in the left/right gutters and bleed off the page edges.
     - Anything in the vertical middle band stays SMALL and hugs the extreme
       edge, so it never collides with the (wide) centered menu text.
     - Tiles are placed by source order: :nth-child(1..4).
   To re-arrange a project, edit its block. To swap the photo, set the tile's
   background-image in the MENU_HTML template in js/overlay.js. */

/* 1 — Hermes (the original; left as-is) */
.scatter[data-project="hermes"] .scatter-img:nth-child(1) { top: -5%;   left: 2%;   width: 23vw; max-width: 340px; aspect-ratio: 4 / 5; }
.scatter[data-project="hermes"] .scatter-img:nth-child(2) { top: 8%;    right: -2%; width: 26vw; max-width: 380px; aspect-ratio: 4 / 5; }
.scatter[data-project="hermes"] .scatter-img:nth-child(3) { bottom: -4%; left: 0;    width: 25vw; max-width: 360px; aspect-ratio: 4 / 5; }
.scatter[data-project="hermes"] .scatter-img:nth-child(4) { bottom: 6%; right: 5%;   width: 15vw; max-width: 216px; aspect-ratio: 4 / 5; }

/* 2 — NY Times (tall top-left, small mid-right, weighted bottom-right) */
.scatter[data-project="nytimes"] .scatter-img:nth-child(1) { top: -8%;   left: -3%;  width: 20vw; max-width: 300px; aspect-ratio: 3 / 4; }
.scatter[data-project="nytimes"] .scatter-img:nth-child(2) { top: 34%;   right: -1%; width: 11vw; max-width: 150px; aspect-ratio: 4 / 5; }
.scatter[data-project="nytimes"] .scatter-img:nth-child(3) { bottom: 2%; left: 3%;   width: 17vw; max-width: 250px; aspect-ratio: 1 / 1; }
.scatter[data-project="nytimes"] .scatter-img:nth-child(4) { bottom: -6%; right: -2%; width: 24vw; max-width: 360px; aspect-ratio: 4 / 5; }

/* 3 — Music & Artists (top-heavy, big bottom-left anchor) */
.scatter[data-project="music"] .scatter-img:nth-child(1) { top: 0;      left: 1%;   width: 15vw; max-width: 220px; aspect-ratio: 4 / 5; }
.scatter[data-project="music"] .scatter-img:nth-child(2) { top: -6%;    right: 3%;  width: 22vw; max-width: 330px; aspect-ratio: 3 / 4; }
.scatter[data-project="music"] .scatter-img:nth-child(3) { bottom: -5%; left: -2%;  width: 26vw; max-width: 380px; aspect-ratio: 4 / 5; }
.scatter[data-project="music"] .scatter-img:nth-child(4) { top: 42%;    right: -2%; width: 11vw; max-width: 150px; aspect-ratio: 1 / 1; }

/* 4 — Exhibition at the Tate (small mid-left, weighted bottom) */
.scatter[data-project="tate"] .scatter-img:nth-child(1) { top: 30%;    left: -2%;  width: 11vw; max-width: 150px; aspect-ratio: 4 / 5; }
.scatter[data-project="tate"] .scatter-img:nth-child(2) { top: -4%;    right: 5%;  width: 18vw; max-width: 260px; aspect-ratio: 1 / 1; }
.scatter[data-project="tate"] .scatter-img:nth-child(3) { bottom: 2%;  left: 4%;   width: 16vw; max-width: 240px; aspect-ratio: 4 / 5; }
.scatter[data-project="tate"] .scatter-img:nth-child(4) { bottom: -7%; right: 0;   width: 23vw; max-width: 340px; aspect-ratio: 3 / 4; }

/* 5 — A fifth thing (diagonal flow, top-left to bottom-right) */
.scatter[data-project="fifth"] .scatter-img:nth-child(1) { top: -6%;    left: 5%;   width: 18vw; max-width: 270px; aspect-ratio: 4 / 5; }
.scatter[data-project="fifth"] .scatter-img:nth-child(2) { top: 2%;     right: -3%; width: 20vw; max-width: 300px; aspect-ratio: 4 / 5; }
.scatter[data-project="fifth"] .scatter-img:nth-child(3) { bottom: -3%; left: -3%;  width: 22vw; max-width: 330px; aspect-ratio: 3 / 4; }
.scatter[data-project="fifth"] .scatter-img:nth-child(4) { bottom: 12%; right: 6%;  width: 12vw; max-width: 175px; aspect-ratio: 1 / 1; }

/* ---------- Menu ---------- */
.menu {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 100px 24px;
  text-align: center;
}

.menu-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  color: var(--primary-type);
}

.work-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work-list li {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Shared .work-item base + the animated strikethrough hover live in base.css.
   Here we only set the menu page's own size + padding. */
.work-item {
  padding: 10px;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.contact,
.about {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--primary-type);
  text-decoration: none;
}

.meta-link {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--primary-type);
  text-decoration: none;
}

/* ---------- Responsive ----------
   Type follows the Figma token ramp at each frame width — discrete
   sizes, not fluid scaling:
     1440  label H6     items Display  contact H2
     1024  label H6     items H2       contact H2
      640  label H5     items H6       contact H6   */
@media (max-width: 1024px) {
  .work-item { font-size: var(--fs-h2); line-height: var(--lh-h2); }
}

@media (max-width: 640px) {
  /* Scatter previews stay on mobile — tap a work item to reveal its set
     (no hover on touch; see js/overlay.js). Keep tiles small so they tuck into
     the side gutters around the centered menu rather than cover it. */
  .scatter-img { max-width: 130px; }
  .menu-label { font-size: var(--fs-h5); line-height: var(--lh-h5); }
  .work-item  { font-size: var(--fs-h6); line-height: var(--lh-h6); gap: 8px; }
  .contact,
  .about      { font-size: var(--fs-h6); line-height: var(--lh-h6); }
}

@media (prefers-reduced-motion: reduce) {
  .scatter,
  .scatter-img { transition-duration: 0.01s; }
}