/* ============================================================
   index.css — category mosaic (BRIEF §5, reference index-v5).
   Geometry lives on a virtual 1440×860 stage; --su reproduces
   the reference scaling min(1.15, vw/1440, vh/860). All canvas
   px become calc(N * var(--su)).
   ============================================================ */

/* chrome scale: --u in tokens.css already carries the vh term,
   so header/nav/switcher match the stage on every page */

.page-index {
  height: 100vh;
  overflow: hidden;
}

.page-index main {
  padding: 0;
}

.mosaic {
  --su: min(calc(100vw / 1440), calc(100vh / 860), 1.15px);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1440 * var(--su));
  height: calc(860 * var(--su));
  /* the fixed stage overlays the header — let clicks fall through
     everywhere except the tiles themselves */
  pointer-events: none;
}

.mosaic .tile {
  pointer-events: auto;
}

/* ---- tile (portal) ---- */
.tile {
  position: absolute;
  display: block;
  z-index: 2;
  transform-origin: center;
  transition:
    transform 0.6s var(--ease-slide),
    opacity 0.5s ease,
    filter 0.5s ease;
}

.tile:hover,
.tile:focus-visible {
  z-index: 4;
  transform: scale(var(--hover-scale));
}

/* siblings recede: dim, desaturate further, drift away from
   the hovered tile's center (unit vector × 10 canvas px) */
.mosaic:has(.tile:hover) .tile:not(:hover) {
  opacity: 0.55;
  filter: saturate(0.7);
  transform: translate(calc(var(--dx) * var(--su)), calc(var(--dy) * var(--su)));
}

/* ---- media: graded at rest, raw copy fades in on hover ---- */
.tile__media {
  position: absolute;
  inset: 0;
  background: #1c1b19;
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-filter);
}

.tile__img--raw {
  filter: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.tile:hover .tile__img--raw,
.tile:focus-visible .tile__img--raw {
  opacity: 1;
}

/* ---- meta group above each tile: numeral · client · genre ---- */
.tile__meta {
  position: absolute;
  display: flex;
  gap: calc(14 * var(--su));
  align-items: flex-start;
  white-space: nowrap;
}

.tile__label {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--su));
}

.tile__client {
  font-family: var(--font-mono);
  font-size: max(calc(11 * var(--su)), 9px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--meta-strong);
}

.tile__genre {
  font-family: var(--font-mono);
  font-size: max(calc(9 * var(--su)), 8px);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--secondary);
}

/* oversized roman numeral: solid #5E6268 in the reference;
   lifted so its cap height tops out level with the client line */
.tile__numeral {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(58 * var(--su));
  line-height: 1;
  color: var(--numerals);
  transform: translateY(calc(-18 * var(--su)));
  user-select: none;
}

/* ============================================================
   Geometry from reference defaults (canvas 1440×860):
   x · y(anchor) · w × h · numeral nx,ny · label side
   ============================================================ */

.tile--film {          /* bottom-left, 2.20:1, numeral III */
  left: calc(-64 * var(--su));
  bottom: 0;
  width: calc(545 * var(--su));
  height: calc(248 * var(--su));
}
.tile--film .tile__meta { left: calc(415 * var(--su)); top: calc(-51 * var(--su)); }

.tile--music-videos {  /* bottom-center, 2.35:1, numeral IV */
  left: calc(481 * var(--su));
  bottom: 0;
  width: calc(415 * var(--su));
  height: calc(177 * var(--su));
}
.tile--music-videos .tile__meta { left: calc(184 * var(--su)); top: calc(-43 * var(--su)); }

.tile--fashion {       /* bottom-right, 16:9, numeral V */
  left: calc(896 * var(--su));
  bottom: 0;
  width: calc(207 * var(--su));
  height: calc(116 * var(--su));
}
.tile--fashion .tile__meta { left: calc(84 * var(--su)); top: calc(-42 * var(--su)); }

.tile--advertising {   /* left column, 9:16, numeral I */
  left: calc(-64 * var(--su));
  top: calc(207 * var(--su));
  width: calc(228 * var(--su));
  height: calc(405 * var(--su));
}
/* tile bleeds off the left edge: meta stays inside the viewport */
.tile--advertising .tile__meta { left: calc(42 * var(--su)); top: calc(-50 * var(--su)); }

.tile--ai {            /* mid-left, 4:5, numeral II */
  left: calc(164 * var(--su));
  top: calc(404 * var(--su));
  width: calc(166 * var(--su));
  height: calc(208 * var(--su));
}
.tile--ai .tile__meta { left: calc(38 * var(--su)); top: calc(-52 * var(--su)); }

/* ============================================================
   Hover drift vectors: unit vector between tile centers × 10,
   precomputed from the geometry above (dx dy in canvas px)
   ============================================================ */

.mosaic:has(.tile--film:hover)          .tile--music-videos { --dx: 10;   --dy: 0.7; }
.mosaic:has(.tile--film:hover)          .tile--fashion      { --dx: 10;   --dy: 0.8; }
.mosaic:has(.tile--film:hover)          .tile--advertising  { --dx: -4.4; --dy: -9;  }
.mosaic:has(.tile--film:hover)          .tile--ai           { --dx: 1.7;  --dy: -9.9;}

.mosaic:has(.tile--music-videos:hover)  .tile--film         { --dx: -10;  --dy: -0.7;}
.mosaic:has(.tile--music-videos:hover)  .tile--fashion      { --dx: 10;   --dy: 1;   }
.mosaic:has(.tile--music-videos:hover)  .tile--advertising  { --dx: -8.7; --dy: -4.9;}
.mosaic:has(.tile--music-videos:hover)  .tile--ai           { --dx: -8.6; --dy: -5.1;}

.mosaic:has(.tile--fashion:hover)       .tile--film         { --dx: -10;  --dy: -0.8;}
.mosaic:has(.tile--fashion:hover)       .tile--music-videos { --dx: -10;  --dy: -1;  }
.mosaic:has(.tile--fashion:hover)       .tile--advertising  { --dx: -9.2; --dy: -3.8;}
.mosaic:has(.tile--fashion:hover)       .tile--ai           { --dx: -9.3; --dy: -3.6;}

.mosaic:has(.tile--advertising:hover)   .tile--film         { --dx: 4.4;  --dy: 9;   }
.mosaic:has(.tile--advertising:hover)   .tile--music-videos { --dx: 8.7;  --dy: 4.9; }
.mosaic:has(.tile--advertising:hover)   .tile--fashion      { --dx: 9.2;  --dy: 3.8; }
.mosaic:has(.tile--advertising:hover)   .tile--ai           { --dx: 8.9;  --dy: 4.5; }

.mosaic:has(.tile--ai:hover)            .tile--film         { --dx: -1.7; --dy: 9.9; }
.mosaic:has(.tile--ai:hover)            .tile--music-videos { --dx: 8.6;  --dy: 5.1; }
.mosaic:has(.tile--ai:hover)            .tile--fashion      { --dx: 9.3;  --dy: 3.6; }
.mosaic:has(.tile--ai:hover)            .tile--advertising  { --dx: -8.9; --dy: -4.5;}

/* ---- typographic index (mobile variant B): desktop never shows it */
.type-index {
  display: none;
}

/* ============================================================
   Mobile (≤768px) — ONE-SCREEN index, two draft variants for
   phone comparison, switched by a query param read in a tiny
   inline script on the page (?v=b → html[data-index-v="b"];
   anything else = variant A). Desktop stays untouched.

   VARIANT A (default) — film-strip index: five slim full-width
   strips share the space left by header/footer (≈12–15vh each),
   edge-to-edge, no gaps, no scroll. Image = textural band with a
   per-strip focal point; name + bracket left, numeral right.

   VARIANT B — typographic index: no imagery, a vertically
   centered type list (categories + brackets + numerals, ABOUT /
   CONTACT smaller beneath). The page IS the menu, so the MENU
   trigger is hidden here (index only — index.css loads nowhere
   else).
   ============================================================ */
@media (max-width: 768px) {
  /* one viewport exactly, no scroll (both variants); svh keeps
     the promise when the browser chrome is visible */
  .page-index {
    height: 100vh;
    height: 100svh;
  }

  .page-index main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  /* INK breathing room between the tagline and the first strip */
  .mosaic {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin-top: 32px;
  }

  /* ---- variant A: film strips ---- */
  .tile {
    position: relative;
    inset: auto;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: block;
    z-index: 1;
    transition: none;
  }

  /* no hover choreography on touch: no scale, no sibling drift */
  .tile:hover,
  .tile:focus-visible {
    transform: none;
    z-index: 1;
  }

  .mosaic:has(.tile:hover) .tile:not(:hover) {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .tile__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* muted grade stays at rest; the raw hover copy never shows */
  .tile__img--raw {
    display: none;
  }

  /* textural band: focal point per strip, set as --focal on the
     tile by the generator (src/data/categories.json) */
  .tile__img {
    object-position: var(--focal, 50% 50%);
  }

  /* scrim only behind the text block: left-side gradient, the
     right ~60% of the strip shows the image undarkened */
  .tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(14, 17, 22, 0.58) 0%,
      rgba(14, 17, 22, 0.30) 26%,
      transparent 40%
    );
  }

  /* meta splits: name + bracket left-center, numeral right-center */
  .tile__meta {
    display: contents;
  }

  .tile__label {
    position: absolute;
    left: var(--edge-x);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    gap: 6px;
  }

  .tile__client {
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--paper);
  }

  .tile__genre {
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--meta-on-image); /* lighter gray over photos */
  }

  .tile__numeral {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 44px;
    color: var(--numerals);
    opacity: 0.55;
  }

  /* ---- variant B: typographic index ---- */
  html[data-index-v="b"] .mosaic {
    display: none;
  }

  html[data-index-v="b"] .menu-trigger {
    display: none; /* the page IS the menu */
  }

  html[data-index-v="b"] .type-index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 0;
    gap: 30px;
    padding: 0 var(--edge-x) 24px;
  }

  .type-index__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .type-index__row {
    display: flex;
    align-items: baseline;
  }

  .type-index__numeral {
    flex: 0 0 34px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: var(--numerals);
    opacity: 0.7;
    user-select: none;
  }

  .type-index__group a {
    font-family: var(--font-grotesque);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--paper);
  }

  .type-index__bracket {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--secondary);
    margin-left: 34px; /* aligns under the name, past the numeral slot */
  }

  /* ABOUT / CONTACT: smaller, quieter, extra air above */
  .type-index__minor {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .type-index__minor a {
    font-family: var(--font-grotesque);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--secondary);
    margin-left: 34px;
  }
}