/* Interests, after adrianosor.io's Experience: a mountain photo develops,
   torn strips of paper slide across it into a grid, and a few cells become
   tiles, each filled with its own picture. Built by assets/interests.js. */
.ix { position: absolute; inset: 0; overflow: hidden; background: #120f14; --develop: 0; --zoom: 1.08;
  font-family: "Inter Tight", system-ui, sans-serif; color: #fff; }
.ix-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(var(--zoom));
  filter: saturate(calc(.5 + var(--develop) * .48)) brightness(calc(.8 + var(--develop) * .06)); }
.ix::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(14, 16, 24, .38)); }
/* the seams lie over the tiles, so every picture has torn edges */
.ix-seams, .ix-tiles { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
.ix-seams { z-index: 3; pointer-events: none; }

/* torn paper seams, each a strip of its own tear */
.ix .seam { position: absolute; left: 50%; top: 50%; pointer-events: none; background-repeat: repeat-x; background-size: auto 100%;
  clip-path: inset(0 100% 0 0); }

.ix-label { position: absolute; z-index: 4; margin: 0; font: 500 clamp(30px, 3.3vw, 50px)/1 "Inter Tight", sans-serif; letter-spacing: -.03em; color: #fff;
  text-shadow: 0 2px 6px rgba(8, 10, 20, .35), 0 4px 28px rgba(8, 10, 20, .55); writing-mode: vertical-rl; }

/* the label's own cell, a shade darker, so the word reads over the sky */
.ix-labelcell { position: absolute; z-index: 1; background: rgba(12, 14, 24, .16); }

/* the tiles: cells of the grid, each filled with its own picture */
.tile { position: absolute; overflow: hidden; color: #fff; text-decoration: none; clip-path: inset(0 0 100% 0); }
.tile-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.01; pointer-events: none;
  transition: filter .45s ease, scale .8s cubic-bezier(0.22, 1, 0.36, 1); }
.tile::before { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(to top, rgba(8, 10, 20, .6), rgba(8, 10, 20, .22) 45%, rgba(8, 10, 20, 0)); z-index: 1; }
.tile-mark { position: absolute; z-index: 2; left: 9%; right: 8%; bottom: 9%; display: flex; align-items: center; gap: 7px;
  font: 500 clamp(12px, 1.05vw, 16px)/1.05 "Inter Tight", sans-serif; letter-spacing: -.03em; text-shadow: 0 1px 10px rgba(8, 10, 20, .5); }
.tile-mark svg { flex: none; width: 1.3em; height: 1.3em; }
.tile-note { position: absolute; z-index: 2; left: 9%; right: 8%; top: 9%; margin: 0; font: 500 clamp(11px, .85vw, 13px)/1.3 "Inter Tight", sans-serif; letter-spacing: -.01em;
  opacity: 0; translate: 0 8px; transition: opacity .28s ease, translate .4s cubic-bezier(0.22, 1, 0.36, 1); }
/* pointing at a tile turns its picture to a film negative, like Adrian's */
.tile:hover .tile-pic, .tile:focus-visible .tile-pic, .tile.on .tile-pic { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.25) saturate(1.05); scale: 1.02; }
.tile:hover .tile-note, .tile:focus-visible .tile-note, .tile.on .tile-note { opacity: 1; translate: 0 0; }
.tile:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.tile::after { content: ""; position: absolute; inset: 0 0 55%; z-index: 1; background: linear-gradient(rgba(8, 10, 20, .55), rgba(8, 10, 20, 0)); opacity: 0; transition: opacity .28s ease; }
.tile:hover::after, .tile:focus-visible::after, .tile.on::after { opacity: 1; }

@media (max-width: 700px) { .tile-mark { font-size: 12px; gap: 6px; } .tile-note { font-size: 12px; } }